[springboot+jwt+react#1] react cra frontend 초기설정

시작전에

백엔드부터 진행했어야하나,, 백엔드는 추후에 다시 블로그로 포스팅하겠습니다. 작업의흐름대로 남겨놓는 블로그라 추후에 재편집해서 재포스팅될수 있습니다. 

본 프로젝트는 springboot + jwt + react.js + typescript를 이용하여 회원기능이 있는 간단한 메모장을 만드는것을 목표로 합니다. 

진행하다 궁금한점은 댓글로 문의주세요~

 

오늘 만들것

• cra를 이용한 react + typescript 프로젝트 생성
• twailwind css 적용

필요한것

• 약간의 시간
• react cra를 시작할수 있는 환경 (node, npm etc....)

설치 (with typescript)

• 프로젝트 생성을 원하는 경로 밑에서 아래 명령어로 설치 (중간에 client는 원하는 프로젝트명으로 설정)

npx create-react-app frontend --template typescript

Twailid.css 적용

• 설치 폴더로 이동후에

npm install -D tailwindcss
npx tailwindcss init

init 후에 tailwind.confi.js 파일을 아래와 같이 변경한다

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.css에 아래 내용을 추가한다

@tailwind base;
@tailwind components;
@tailwind utilities;

해당내용은 아래 사이트에서 확인 가능
https://tailwindcss.com/docs/guides/create-react-app

실행

npm start

App.tsx 변경 및 twailiwind 적용 확인

App.tsx

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1 className="text-4xl font-bold underline text-orange-400">Hello React</h1>
    </div>
  );
}

export default App;

화면 접속해보면,, 잘 twailwind가 잘 적용된걸 볼수있다.