01-2 리액트 시작하기 (리액트 개발 환경 설치하기)

1. 노드 버전 매니저( NVM )으로 노드제이에스 설치를 제일 먼저 한다.
• 노드제이에스 = 웹 브라우저가 아닌 컴퓨터(서버)에서 자바스크립트를 실행하게 해줌
• NVM = 노드제이에스를  설치, 버전관리 하는 프로그램
• NVM 설치(github.com/coreybutler/nvm-windows/releases)에서 nvm-setup.zip 다운
• NVM 버전 확인하기
명령프롬포트에서 nvm -v 입력
• NVM으로 노드제이에스 설치하기
명령프롬포트에서 nvm install 10.10.0 입력
많은 라이브러리들이 노드제이에스 8버전에 맞춰 개발되어 있으므로 최신버전인 12버전은 호환성 문제가 발생할 수 있다. 12는  서버와 관련된 백엔드 성능향상, 네트워크 향상 기능이 추가된것 빼곤 8과 거의 같다
• NVM이 설치한 노드제이에스 사용설정하기
명령프롬포트에서 nvm use 10.10.0 입력
node -v 입력해서 노드제이에스 버전확인하기
npm -v 입력해서 npm 버전확인하기

2. yarn과 create-react-app 설치하기
• create-react-app = 리액트프로젝트에 필요한 패키지들을 묶어 리액트 앱을 생성해주는 도구
• npm으로 create-react-app을 설치할 수있지만 yarn을 사용해서 설치하자
■왜 yarn을 사용하는지 의문???
yarn은 페이스북에서 npm의 단점을 보완하여 성능과 속도를 개선하였다
• yaen 설치하기
윈도우를 사용하면 classic.yarnpkg.com/en/docs/install#windows-stable 에서 yarn설치
명령프롬포트에서 npm install -g yarn 입력
• 리액트 앱 생성하기
명령프롬포트에서 yarn create react-app first-project --scripts-version 2.1.7 입력하면 first-project라는 리익트 앱을 생성할 수 있다.
• 리액트 앱 구동하기
명령프롬포트에서 cd first-project 입력
yarn start 입력
화면이 나오면 제대로 구동된 것
•  필요한 라이브러리 설치하기
프로젝트 루트 폴더(first-project)에 있는 package.json 파일을 원하는 라이브러리 정보글로 수정한 후, 명령프롬포트에서 루트폴더경로에서 yarn을 입력하면 package.json에 적힌 라이브러리를 모두 설치한다. (warning 메시지는 무시해도됨)
• babel-loader 호환성 오류 해결하기
루트폴더에 ./ .env 파일을 만들고 SKIP_PREFLIGHT_CHECK = true 라고 적어서 npm 환경변수파일을 만들어서 저장하면 babel-loader 충돌 오류를 해결할 수있다.

3. 비주얼 스튜디오 코드와 플러그인 설치하기
• Reactjs code snippets 플러그인 설치하기
Reactjs code snippets = 자주 사용하는 리액트 코드 뭉치를 자동완성해준다.
src폴더에 01폴더를 만들고 임의로 RCC.jsx파일을 만들고 편집화면에 rcc라 입력하면 자동완성목록이 나타나는데 엔터를 누르면 자동으로 리액트 컴포넌트 클래스이름이 RCC인 코드가 생성된다

• Prettier 플러그인 설치하기
Pretrier = 코드의 줄바꿈등 스타일을 자동으로 변환해준다.
설치후 vscode reload 후 프로젝트루트폴더에서 아래와 같이 Prettier 설정파일(./.prettierrrc)을 생성해준다.
이 때 파일명에 (.)이 포함되야 한다.

•  prettier로 코드 입력 스타일 적용하기
RCC.jsx 파일에서 컨트롤+쉬프트+p 를 누르면 명령어 팔레트가 나오는데 Format을 검색하면 Format Document 명령어를 누르면 코드가 정리가 된다.
• 자동으로 prettier 설정 적용하기
저장하면 자동으로 코드 정리되게 만드려면 Prefernces > Settings 의 검색창에 formatOnSave 입력후 체크박스를 눌러준다.