[React] NPM / Yarn / CRA

 NPM / Yarn 

• NPM(Node Package Manager)은 Node.js의 기본 패키지 관리자로, npm에서 여러 패키지를 다운받아 활용할 수 있음.
• yarn도 npm과 같은 역할! 둘 다 자바스크립트 런타임 환경인 Node.js의 패키지 관리자
• yarn이 npm보다 성능적으로 조금 개선됐음

 

 NPM / Yarn 명령어 

 

 Yarn 설치 

① 터미널에서 yarn 설치하기
npm install -g yarn

② yarn 설치(버전) 확인
yarn -v

 

 CRA(Create React App) 

• 한 줄의 명령어 입력으로 React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법
• 완제품을 설치한다 라고 생각하면 됨 (=보일러플레이트)

 

 CRA로 프로젝트 생성/실행 

① 터미널에서 프로젝트를 생성할 폴더로 이동해 생성!
yarn create react-app 프로젝트명

② 터미널에서 CRA 생성된 프로젝트로 이동(cd 폴더명)해 실행
 yran start

 

 CRA 구조 

• React는 SPA(Single Page Application)으로  서버로 부터 페이지를 한개만 받고, 동적으로 그려지기 떄문에 index.html이 1개만 존재함(= seo가 약함, search로 찾을 정보가 없음)

 

1) public > index.html

 

2) src > index.js

 

3) src > App.js

• App.js 수정하면 화면에 바로 변경돼서 보임
• 작업할 '플레이그라운드' 라고 생각하면 됨

 

 상대경로 >  절대경로 변경(선택사항) 

1) CRA 생성된 프로젝트에 jsconfig.json 만들고, 절대경로 내용 작성하기

 

2) App.js에서 절대경로로 수정하기

• 수정한 후에 페이지 에러뜨면 터미널 종료(Ctrl+c) 후 다시 yarn start 해주면 됨