2024.05.13

node 설치

node 설치 후 node -v로 버전을 확인

yarn 설치

설치 명령어

아래 명령어로 yarn 설치

npm install -g yarn

❗️ 에러 해결 방법

npm ERR! code EACCES
npm ERR! syscall rename
npm ERR! path /Users/@@@/.npm-global/lib/node_modules/yarn
npm ERR! dest /Users/@@@/.npm-global/lib/node_modules/.yarn-fPrMSEpl
npm ERR! errno -13
npm ERR! 
npm ERR! Your cache folder contains root-owned files, due to a bug in
npm ERR! previous versions of npm which has since been addressed.
npm ERR! 
npm ERR! To permanently fix this problem, please run:
npm ERR!   sudo chown -R 501:20 "/Users/@@@/.npm"

npm ERR! A complete log of this run can be found in: /Users/@@@/.npm/_logs/2024-05-13T08_33_33_201Z-debug-0.log

처음에 설치 할 때 계속 오류가 발생해서 구글링을 해서 온갖 명령어를 다 써봤는데 안먹혔다..
그러다 결국 Homebrew 를 사용해 성공적으로 설치를 했다

❗️ 설치 에러 시 참고 코드

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

우선 Homebrew를 설치한다

brew install yarn

위의 명령어로 yarn을 설치한다

yarn --version

위의 명령어로 yarn의 버전이 잘 나오면 설치가 완료된 것이다

yarn으로 패키치 설치

yarn add [패키지 이름] 으로 설치

// ex
yarn add react-router-dom

프로젝트 생성

CRA - Create React App

• 원하는 경로로 이동
• yarn create react-app [프로젝트 이름] 으로 생성
• yarn start 로 프로젝트 실행

Vite

• 원하는 경로로 이동
• yarn create vite [이름] --template react 로 생성
  💡 vite는 다른 라이브러리를 생성 할 때도 사용되기 때문에 템플릿을 리액트로 명시 해줘야함
• yarn dev 로 프로젝트 실행

📚 npm & yarn

• 공통점 : 자바스크립트 런타임 환경인 노드(node.js)의 패키지 관리자

npm - Node Package Manager

• 노드 설치 시 자동으로 설치된다
• 수많은 JS 라이브러리와 애플리케이션을 제공하는 저장소 역할을 한다

yarn

• npm 과 호환성이 좋고, 속도나 안정성 측면에서 npm 보다 좋다

📚 CRA & Vite

• 공통점 : 리액트 프로젝트를 세팅해주는 빌드 도구

CRA

• Webpack을 사용한다
• 기본적으로 설정을 숨긴다

Vite

• Esbuild를 사용한다
• 사용자의 필요에 따라 설정을 쉽게 조정 할 수 있다
• 속도 측면에서 CRA보다 빠르다