리액트 타입스크립트 시작하기 [React, TypeScript, NVM, Prettier]

 < 목차 > 

1. node.js 설치
2. nvm 설치
3. nvm 간단 사용법
4. create-react-app
5. baseUrl
6. prettier

---

 1. Node.js 설치 

https://nodejs.org/en

Node.js — Run JavaScript Everywhere

• 여기 들어가서 설치하면 된다.
• LTS를 설치하는 것이 좋다.
  • LTS란?
    • 장기적으로 지원하는 버전이다. 즉 Long Term Support의 줄임말로 일반적인 버전보다 오랜 기간 지원하도록 특별하게 만들어진 소프트웨어의 버전을 뜻한다.

---

 2. NVM 설치 

• node를 설치했는데 node의 버전을 바꾸고 싶을 때 사용한다.
• 바탕화면에서 bash를 열고 아래 명령어를 수행한다.
• 하단 링크 참조

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

https://github.com/nvm-sh/nvm

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

---

 3. NVM 간단 사용법 

• nvm 환경변수 설정
  • 설치를 했는데 not found 문제가 뜨는 경우

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

• node 18.18.2 설치하기

nvm install 18.18.2

• node default 값 변경하기
  • 프로젝트를 하다보면 node를 바꾸는 것이 습관이 안되어 있어서 다른 버전으로 npm start 또는 npm install을 하게 된다.
  • 엄연하게 node 18버전이랑 node 21 버전은 다르듯이 프로젝트에 문제가 생기기 마련이다.
  • 이런 문제를 해결하기 위해서 미리 컴퓨터의 node version 기본값을 바꿔준다.
  • 전에 설치한 버전으로 바꾼다.

nvm alias default v18.18.2

• node 버전을 확인해보면 바뀐 것을 알 수 있다.

node -v

node --version

• nvm으로 버전 변경하는 방법

nvm use v12.18.2

• 설치된 node version 확인하기

nvm ls

---

 4. CREATE-REACT-APP 

• 앱 만들기
  • 단, 주의할 점은 app 이름은 대문자 시작은 안된다.

npx create-react-app (app이름) --template=typescript

• 예를들어 practice-react 라는 이름으로 앱을 만들고 싶다면

npx create-react-app practice-react --template=typescript

---

5. baseUrl

• 솔직히 여기부터는 하고 싶으면 해도 되고 하기 싫으면 안 해도 되는 부분이지만 하는 것을 추천한다.
• 프로젝트 할 때 편리한 부분을 많이 제공하기도 한다...
• tsconfig.json 파일로 이동해서 아래와 같이 설정
• baseUrl을 설정하면 vscode가 쉽게 컴포넌트나 라이브러리 위치를 찾을 수 있다.

{
  "compilerOptions": {
    ...
    "jsx": "react-jsx",
    "baseUrl": "src"
  },
  ...
}

---

 6. PRETTIER 

1) prettier 설치

npm install --save-dev prettier

 

2-1) prettier 설정 (.prettier.js)

• 앱 배포하기 전에 에러를 찾는데도 유용하고 코드 컨벤션을 잘 따르고 있는지 점검하고 수정하는데 사용할 수 있다.
• .prettierc.js 파일을 tsconfig.json과 동일한 위치에 생성한다.
• 빈 파일에 아래를 복사 붙여넣기

module.exports = {
	singleQuote: true,
	trailingComma: "all",
	printWidth: 100,
	tabWidth: 2,
	semi: true,
}

• singleQuote: 큰 따옴표가 아닌 작은 따옴표를 주로 사용하도록 설정한다.
• trailingComma: 콤마(,)를 추가할 수 있다면, 콤마를 추가한다.
• printWidth: 한 줄에 작성할 수 있는 최대 코드 문자 수를 설정한다.
  • 100으로 하면 100자 넘어가면 줄바꿈을 시킨다.
  • 가독성을 높일 수 있다.
• tabWidth: 탭을 2칸으로 할 지 4칸으로 할지 정해준다. (자연수)
• semi: 함수나 변수 등에 세미콜론을 주로 사용하도록 설정한다.

2-2) prettier 설정 (package.json)

• package.json 파일의 scripts 항목에 format과 format:fix를 추가한다.

{
	...
	"scripts: {
		...
		"eject": "react-scripts eject",
		"format": "prettier --check ./src",
		"format:fix": "prettier --write ./src"
	},
	...
}

 

3) prettier 실행

• format을 실행하면 코드 컨벤션에 맞지 않는 부분이 있는지 확인한다.

npm run format

• format:fix를 실행하면 문제가 있는 부분을 강제로 수정한다.
  • 주의
    • 팀원이 format:fix를 안하고 git push를 했을 경우 충돌이 날 수 있다.

npm run format:fix