[React] React 세팅하기 - Create-React-App, Typescript

이 포스팅은 CRA (Create-React-App) 명령어를 사용하여 React 애플리케이션을 세팅하는 방법에 대해 정리한다.

주의할 점은, CRA의 장점이자 단점은 자동으로 환경설정 파일을 overloading한다는 점인데, 만약 Webpack이나 Vite와 같은 서버 실행 환경과 관련된 라이브러리를 사용한다면 CRA를 사용한다면 환경설정을 커스텀하기 매우 까다로워진다.

그러므로 이 포스팅은 CRA의 내장 Webpack 환경에 맞게 사용할 경우에 편리하게 사용할 수 있는 기본적인 세팅 방법을 정리한다.

만약 CRA로 생성된 애플리케이션의 환경설정 파일들을 추출하여 커스텀 하기를 원한다면

# npm 사용할 경우 
> npm eject

# yarn 사용할 경우
> yarn eject

이 명령어를 통해 환경설정 파일들을 추출해낼 수 있다.
(내장 Webpack 환경설정 파일인 webpack.config.js도 여기에 있다.)

---

세팅 방법

1. 'create-react-app'으로 react 앱 생성

# typescript 사용 안 할 경우 '--template typescript' 생략

# npm 사용할 경우 
> npx create-react-app 이름 --template typescript

# yarn 사용할 경우
> yarn create react-app 이름 --template typescript

# 설치가 완료되면 생성된 앱 디랙토리로 이동한다
> cd 이름

2. 'react' & `typescript` 사용하기 위한 Dependency 추가

# npm 사용할 경우
> npm i --save react react-dom typescript
# npm+typescript
> npm i --save-dev @types/react @types/react-dom @types/node

# yarn 사용할 경우
> yarn add react react-dom typescript
# yarn+typescript
> yarn add --dev @types/react @types/react-dom @types/node

---

참고

[Webpack] Webpack이란?

[Vite] Vite란?