Windows 환경에서 Create React App을 이용하여 React SPA을 추가하고 TypeScript 설정까지 목표로 하는 포스팅이다.
1. Node.js 설치
- Npm 패키지 매니저를 통해 Create React App을 설치하기 위해 Node.js를 먼저 설치하겠다.
- Node.js 공식 홈페이지에서 stable version 설치한다.
- Setup 프로그램을 실행시켜 설치한다. 특별히 설정을 변경하지 않았다.
- cmd에서 node -v, npm -v, npx -v 확인했을 때 버전이 나오면 성공!
- 환경설정을 따로 하지 않았으나, 이미 되어있었다. 안 된다면 node.js 환경설정 추가방법을 찾아봐야 한다.
2. Create React APP 설치
- Create React APP을 이용해 프로젝트를 구성할 것이다. 그러기 위해서 npx 명령어로 일회성으로 create react app을 실행한다.
Npm install global로 설치하면 패키지 버전 관리가 항상 최신이 아니어서 npx로 깔기를 추천한다고 한다.
우리는 typescript로 만들 것이므로 다음 명령어를 입력한다.
npx create-react-app my-app --template typescript- 성공하면 다음처럼 뜬다.
- Npm start를 하면 dev server로 app이 실행되는걸 확인할 수 있다.
- 그럼 react와 typescript 설정이 끝난 것이다! 하지만 실제 프로젝트에선 lint, webpack, babel 등 추가 설정이 필요하다. 추가로 lint 설정만 해보겠다.
먼저 프로젝트를 VS code를 이용해 개발할 환경을 열어보겠다! VS code를 선택한 이유는 플러그인 설치도 쉽고 가볍게 돌아가며 다양한 언어를 지원해서다. Visual Studio Code 설치 후 폴더 열기로 프로젝트를 열어준다.
3. ESLint & prettier 설정
npm i --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y- Project의 root 경로에 .eslintrc.js file 생성한다. ESLint가 Typescript 소스 코드를 어떤 규칙으로 에러를 잡을지에 대한 parser와 rule을 설정한 것이다. 그리고 react 관련 plugin을 설치해서 react 관련하여 rule도 recommend를 사용한다.
- 파일 이름이나 위치를 변경하면 경로 설정 옵션을 줘야 한다.
- Prettier를 설치한다. Eslint와 함께 쓰려면 plugin을 같이 설치해줘야 한다.
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier- 그리고 .eslintrc.js에 관련 설정을 추가한다. 설치한 패키지들을 추가하여 권장 rule을 사용한다. 추후 추가적으로 rule을 custom하고 싶다면 rules에 넣으면 된다.
- 성공했다면 다음 커맨드가 정상 수행하면서 lint error를 출력하거나 pass할 것이다.
npx eslint src
Front-end developer