fnm install --lts (Long Term Support)
fnm install <version>
설치한 버전 사용
fnm use lts-latest
fnm use <version>
특정 버전 기본으로 사용
fnm default $(fnm current)
fnm default <version>
이후 Parcel 설치 과정의 이슈로 인해 v18.15.0 사용 (원인 불명)
프로젝트 안으로 진입했을 때 node version 변경하기
프로젝트 폴더의 루트로 들어가 .node-version 파일 생성
node --version > .node-version
2. npm 패키지 준비
# npm 전역 설치 및 업그레이드
npm install -g npm
npm install -g npm@latest
# 프로젝트 내부에서 npm 초기화
npm init -y
2. 타입스크립트 설정
여기서 -D 옵션을 사용하여, 타입스트립트를 프로덕션 환경에는 설치되지 않도록 한다. 타입스크립트는 코딩을 위한 도구로 설정한다.
npm i -D typescript
npx tsc --init
3. ESLint 설정
npm i -D eslint
npx eslint --init
npx eslint --init
@eslint/create-config@0.4.6
- Ok to proceed? (y) y
How would you like to use ESLint? …
- To check syntax, find problems, and enforce code style
What type of modules does your project use? …
- JavaScript modules (import/export)
Which framework does your project use? …
- React
Does your project use TypeScript?
- Yes
Where does your code run?
- Browser
How would you like to define a style for your project? …
- Use a popular style guide
Which style guide do you want to follow? …
- XO: https://github.com/xojs/eslint-config-xo-typescript
What format do you want your config file to be in? …
- JavaScript
eslint-plugin-react@latest eslint-config-xo@latest ...
? Would you like to install them now? › No / Yes
- Yes
Which package manager do you want to use? …
- npm
4. React 설치
npm i react react-dom
npm i -D @types/react @types/react-dom
5. 테스팅 도구 설치(Jest)
npm i -D jest @types/jest @swc/core @swc/jest \
jest-environment-jsdom \
@testing-library/react @testing-library/jest-dom@5.16.4
6. Parcel 설치
npm i -D parcel
Parcel 이란?
모듈 번들러. Webpack 과 함께 bundler 시장의 점유율을 나눠갖고 있다. 번들러란 dependency가 있는 자바스크립트 파일을 최적화/압축하여 하나 혹은 여러개의 static 파일로 빌드해주는 컴파일러이다. Webpack 을 사용하는 것보다 장점이 있다고 한다.
7. parcel-reporter-static-files-copy 설치
npm install -D parcel-reporter-static-files-copy
# Root path 에 static 폴더를 만든다. 정적 이미지 등을 해당 폴더에 넣는다.
mkdir static