[react] 초기 설정

CRA시에 초기 설정을 메뉴얼화해놓으려고 정리를 해보고자 한다.

매번 똑같은 작업을 할 때마다 찾기 귀찮아서 좀 더 편하게 복붙해보자구~

---

1. React 프로젝트 생성하기(typescript)

npx create-react-app ./ --typescript

1-1. Routing

npm install react-router-dom

1-2. Absolute path

/* tsconfig.json */

{
  "compilerOptions": {
	...
    "baseUrl": "./src",
    "paths": {
      "assets/*": ["assets/*"],
      "components/*": ["components/*"],
      "constants/*": ["constants/*"],
      "hooks/*": ["hooks/*"],
      "pages/*": ["pages/*"],
      "utils/*": ["utils/*"],
      "libs/*": ["libs/*"]
    }
  },
  "include": ["src"]
}

2. React 프로젝트에 TailWindCSS 추가하기

npm install -D tailwindcss
npx tailwindcss init

설치 후, tailwind.config.ts에 파일 경로 추가

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  ...
  };

index.css에 TailWindCSS 지시문 작성

/* index.css */

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

index.tsx에 index.css 임포트해주기

/* index.tsx */

import './index.css'