[React] 개발환경 세팅 #튜토리얼

💡 git, VSCode, Node 설치

git - https://git-scm.com/download/win

vscode - https://code.visualstudio.com/

node - https://nodejs.org/en

 

위의 사이트에서 다운 받고 설치하면 됨

 

 

💡 yarn 설치 (선택사항)

node를 설치하면 `npm`이라는 노드의 패키지 관리자도 자동으로 설치가 된다. `yarn`은 기능적으로는 같지만 성능적인 측면에서 `npm` 보다 향상된 패키지 관리자이다. 터미널에서 아래 명령어를 입력하여 설치한다. 정리하자면 안써도 문제 없으니까 귀찮으면 패스해도 된다. 괜히 저 처럼 에러날 수도 있음

 

일단 설치하기전에 npm과 yarn이 뭘 해주는지부터 알아 보자. 유용한 패키지, 라이브러리 등을 관리해주는 툴이라고 생각하면 된다. 필요한 프로그램이 있으면 npm이나 yarn을 사용하여 설치하여 사용하고, 삭제할 수 있도록 도와준다.  

 

이제부터 npm, yarn의 명령어에 대해 알아볼것인데 VSCode의 터미널에서 진행하면 된다.

 

설치명령어

npm install -g yarn

• 대충 `yarn` 설치하는 명령어이고 `-g` 옵션을 같이 사용하면 pc전역으로 설치하게 된다.

 

버전 확인

yarn -v

• 버전이 제대로 나온다면 설치 OK b

혹시 에러가 난다면  이걸 참조하시라. (같은 에러일 경우에만 참조해야됩니다?) - [yarn] 설치 후 오류

 

 

💡 CRA (Create React App)

리액트 프로젝트를 커맨드 한 줄로 생성해주는 마법의 명령어. npm, yarn 둘 중 어느 것을 사용해도 된다. 

(아래의 프로젝트 생성 예제에서 "프로젝트명" 부분 따옴표 생략하고 원하는 프로젝트명 아무거나 입력하면 됨)

 

yarn

yarn create react-app "프로젝트명"

 

 

npm (npx)

npx create-react-app "프로젝트명"

• yarn과 npm 둘 다 똑같이 동작 한다. 
• yarn이 아닌 방식으로 react를 설치할때는 주로 npx 키워드를 사용해서 설치한다. 뭐 npm으로 설치하는거랑 약간의 차이와 장점이 있다고 합니다. 

 

vite (비트/빝 이라고 읽음 (국룰이니 주의하셈))

yarn create vite "프로젝트명" --template react # 리액트 프로젝트 생성
cd "프로젝트폴더" # 생성된 폴더로 이동
yarn # 필요 라이브러리 설치
yarn dev # 프로젝트 실행

• 요것도 똑같이 리액트 프로젝트를 생성하고 실행해준다. 
• 다만 명령어가 조금 번거롭고 많아보이는데 그럼에도 사람들이 쓴 다는 것은 장점이 있다는 것이다. 
• 장점: 설치 속도 및 개발 중 수정 된 작업의 적용도 빠르다. (체감 엄청남)

 

 

- 일단 개발 환경 세팅은 끝입니다 b -