1. client / server 폴더 나눔
- yarn create react-app . --template typescript
- client/src/components 와 styles 폴더 만듬
2. .prettierrc.json 설정, tsconfig.json - baseUrl 설정
- include는 import시 포함 할거냐 말거냐.
- 설정 후 꼭 다시 yarn start 해볼 것. ( 바로적용 안됨 )
3. client - emotion을 쓰기 위해 세팅 시작
- yarn add @emotion/react
- global css를 적용하기 위해 import { css } from '@emotion/react' 하고 reset css export 함
- 마찬가지로 일부 공통 스타일 적용을 위해 import { Theme } from '@emotion/react' 하고 export
- Theme은 emotion.d.ts로 따로 타입 정의해줌.
- index.tsx에서 import { ThemeProvider, Global } from '@emotion/react' 하고 껴줌
- 근데 emotion 의 CSS prop으로 스타일을 적용하려면 JSX pragma를 선언해줘야 하는데, 매번 적기 귀찮으므로 babel 설정을 하기로함. 근데 cra template은 기본적으로 babel 설정을 막아둠. -> craco (Create React App Configuration Override) 라이브러리 설치
- package.json 에서 script 설정 변경.
- yarn add @emotion/babel-preset-css-prop 후
- tsconfig.json에서 "jsxImportSource": "@emotion/react" 해줌. 그리고
- project root 경로에 craco.config.js 생성 후 preset 설정 해주면 끝.
