yarn 설치

● yarn

npm의 단점을 보완하여 성능/속도를 개선한 것이 yarn이라고 보면 된다.

   └ npm 은 모든 패키지들을 다 갖고 있어서 무겁다.

   └ 페이스북, Exponent, 구글과 Tilde의 엔지니어 그룹들이 함께 협력하여 개선

 

 

https://classic.yarnpkg.com/en/docs/install#windows-stable 

Yarn

위의 경로로 들어가 다운로드

 

 

 

다운 받은 msi 파일을 실행시켜 모두 next 눌러준다.

 

다운이 완료됐으면 cmd창을 열어 yarn -v 로 다운받은 버전을 확인해준다.

 

 

 

 

 

● CRA (Create-React-App) 설치

- 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구

   ( 리액트 프로젝트에 필요한 패키지들을 묶어 리액트 앱을 생성해준다. )

   ( 사용하지 않는다면, 프로젝트에 필요한 패키지를 수기로 package.json에 추가해야 한다.)

 

 

 

- 리액트 앱 생성( 본인이 원하는 프로젝트 명)

   프로젝트를 생성하고 싶은 디렉토리에서 다음 명령어를 실행해준다.

 

d 드라이브에 프로젝트 폴더를 하나 만들어 주고 

 

해당 폴더 안으로 들어가 주소창에 cmd를 입력한 후 명령어를 입력해준다.

yarn create react-app 프로젝트명 을 입력한다.

 

 

 

react_project1 폴더 안으로 들어가 주소창에 cmd를 입력하고 yarn start 명령어를 입력하면 자동으로 localhost:3000 이 잡히면서 react가 실행되는 것을 확인 할 수 있다.

 

 

 

 

 

 

vsCode에서 리엑트를 시작하려면 react_project1 파일 안에 들어가 주소창에 cmd 입력하고 

들어간 cmd에서 code . 으로 vscode 프로그램을 실행시키면 된다.

 

 

 

 

또 다른 방법으로는 새로운 폴더를 만들어 주소창에 cmd 를 입력하여 code . 으로 vscode를 실행시킨 후 하단의 터미널창에 npx create-react-app ./ 명령어를 입력하면 해당 폴더에  react 패키지가 다운받아지게 된다.

 

그리고 왼쪽에 파일을 보면 다운받아진 것을 확인 할 수 있다.

 

 

만약에 npx 명령어 오류가 발생하면 

vscode의 파일(file) > 기본 설정(preference) > 설정(settings) 에 들어간다.

 

설정 검색창에 terminal-integrated-default profile을 입력하여 나오는 windows에 null을 command prompt 로 변경해준 뒤  vscode를 재시작해주면 된다. 

 

 

 

 

 

 

 

 

 

 

 

참고 :  https://goddaehee.tistory.com/293 [갓대희의 작은공간:티스토리]