const CRA ({yarn2, typescript})

서론

Next.js 넘어가기 전에 react와 hook만 알고 있는 개발자가, typescript와 yarn2를 적용하는 과정을 정리하였습니다.

typescript + yarn2 를 이용한 create-react-app 만들기

1. create-react-app 설치

npm -g install create-react-app
yarn global add create-react-app

2. 프로젝트 만들기

yarn create react-app [project_name] --template typescript

3. 그러나 위 방법으로 하면 알 수 없는 compile 에러가 나서 npx 로 우회

에러의 내용은 내충 compile error: module cannot extends react-app 'package.json'

cd ..
rm -rf [project_name]
npx create-react-app [project_name] --template typescript
cd [project_name]

4. yarn2 로 업그레이드

yarn set version berry

5. 이후 1->2 마이그레션 설명서를 참고하여 yarn start 명령어를 통해 생성되는 .yarnrc.yml 에 아래 내용추가.

nodeLinker: node-modules

귀찮다면 아래 명령어를 사용

yarn start # <Ctrl-c>
echo 'nodeLinker: node-modules' >> .yarnrc.yml

6. 이후 설치 명령어 수행

yarn install # 혹은 yarn

7. .gitignore 와 관련하여 yarn2 버전 추가해주기

# yarn v2 Zero-installs
.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

편의성 관련 추가

import 관련

아래와 같이 import를 수행할때

import <some_package> from "<directory>"

repo_dir/src/ 하위 폴더로 구성되기 때문에 모든 from 에 src가 들어가는 걸 막기 위해서

tsconfig.json 파일에 아래 구문을 확인하여 추가

{
    "compilerOptions": {
        "baseUrl": "src"
    },
    "include": [
        "src"
    ]
}

vscode 관련

emmet 이 .tsx에서 작동하도록 되어 있지않으면, 설정해주기

.vscode/settings.json

{
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "typescript": "typescriptreact"
    }
}