[React] CRA를 이용한 프로젝트 생성과 TypeScript 적용하기

CRA(create-react-app)으로 리액트 프로젝트 생성하기

리액트 프로젝트를 생성하는 방법에는 여러 가지가 있지만,  현재로서 가장 쉽고 보편적인 방법인 CRA(create-react-app)를 사용해서 생성해보려 한다.

 

CRA 프로젝트를 생성하기 위해 npx를 사용할 것이다. 여기서 npx는 자바스크립트 패키지 관리 모듈인 npm의 5.2.0 버전부터 새로 추가된 도구로 npm을 좀 더 편하게 사용할 수 있게 해 준다. Node.js를 설치했다면 기본적으로 npm도 같이 설치되므로 Node.js를 처음 설치했다면 바로 사용할 수 있다.

 

Node.js

Node.js 최신 버전을 설치해도 괜찮지만, 안정적인 LTS 버전 설치를 권장한다.

 

$ npx create-react-app <프로젝트명> --template typescript

npx로 CRA를 설치하면 CRA 패키지를 잠깐 다운로드하고 CRA 프로젝트를 생성 후 다시 패키지를 삭제한다. 즉, PC에 CRA의 무거운 패키지들을 남기지 않으며 항상 최신 버전의 CRA를 사용할 수 있다는 장점이 있다.

 

만약 그냥 npm이나 yarn을 사용해 CRA 프로젝트를 생성하려면 먼저 CRA 패키지를 PC에 전역으로 설치해주어야 한다. 하지만 이런 방식은 아래와 같은 단점이 있다.

• CRA에 포함된 수많은 의존성 라이브러리들이 컴퓨터에 계속 남아있는다.
• CRA 버전 업데이트에 따라 변경된 사항이 있으면, 글로벌 설치된 CRA패키지를 지우고 다시 설치를 해야 한다.

 

npx를 사용하면 이러한 단점을 해결할 수 있는 것이다. CRA로 프로젝트를 생성했다면 자동으로 리액트 프로젝트를 TypeScript로 생성해주고, tsconfig.json 파일도 자동으로 생성 및 설정이 됐을 것이다.

 

CRA는 강력하지만 커스텀이 조금 힘들다는 단점이 있는데, 만약 설정이 궁금하거나 수정하고 싶다면 다음 명령어를 실행하면 된다.

$ yarn eject

 

 

eject를 실행하면 위와 같은 메시지가 나온다. 한번 실행하면 되돌릴 수 없다는 뜻이다. 그리고 y를 입력하면 config, scripts 폴더가 생기면서 여러 설정 파일들을 확인할 수 있다.

 

 

tsconfig.json

CRA가 생성해준 tsconfig.json 파일에서 따로 원하는 설정이 있다면 수정해주면 된다.

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

 

이렇게 CRA를 이용하면 리액트 프로젝트에 타입스크립트 적용도 간편하게 할 수 있다.