React 프로젝트 시작 셋팅 yarn 이용해서 작업 순서 알아보기

 

 

리액트 프로젝트를 시작할때 첫 셋팅과 진행방법을 정리해서 포스팅하려고 한다.

우선 git / Node JS / npm / yarn 설치가 되어있어야한다.

 

 

* git 설치 확인

git --version

 

* Node JS 설치확인

node -v

 

* npm 설치 확인

npm -v

 

* yarn 설치 확인 

yarn -v

 

 

 

 

 

---

 

 

1. React 프로젝트 만들기

 

yarn create react-app 프로젝트명

- VScode를 열어서 터미널에 이 명령어를 넣는다.

 

 

 

 

 

 

BUT!! 제대로 했는데 혹시나 이런 오류가 뜬다?! ( 뭐하나 한방에 되는게 엄숴.. )

Error Couldn't find a package.json

영어에 당황하지 말자, 이제 영어에 더 이상 쫄면 안된다.. 익숙해져야한다......

해석해보면 package.json이 없어서 그렇다.. 그럼 package.json을 깔아주면 된다.

 

 

 

npm init / yarn init 둘 중 하나 넣어주자.

 

 

 

 

 

 

 

그럼 갑자기 또 나에게 질문을 투척한다...(부글부글)

차분히 이름과.. 뭐..설명과..그런것들 적으면 된다.

흠.. 귀찮지만 영포자들을 위해 아래에 무엇인지 알려주겠다..

 

* name : 프로젝트 명(기본폴더명)

* version : 프로젝트 버전 (default 1.0.0)

* descrition : 수행할 작업 내용

* entry point : 첫 실행 위치

* repository url : 저장소 위치

* author : 작업자 (프로젝트면 팀 명)

* license : 라이센스 여부

* private : 공개 여부 

 

뭐..근데 이런 응답이 귀찮으면 그냥 npm init --force / yarn init --force 넣으면 된다..ㅋ

아니 뭐.. 원칙을 아는건 좋으니깐....

 

 

 

 

 

 

 

짜잔!!

그럼 요런 귀여운 package.json 녀석을 맞이하게 된다.

 

 

 

 

 

자, 다시 그럼 프로젝트 생성을 위해 yarn create react-app 프젝명 실시!!

 

 

그럼 test라고 프로젝트 명으로 지정한 리액트 프로젝트 셋팅이 완성되었다.

 

 

 

 

---

 

 

 

 

프로젝트가 생성되면서 터미널창에 yarn 명령법이 나온다.

 

 

 

* yarn start

- 우리가 작성한 코드를 직접 확인해 볼 수 있게 실행한다.

 

* yarn build

- 실행하지는 않고 만든 앱을 배포할 수 있게 빌드하는 것.

 

* yarn test

- 우리가 작성한 유닛 테스트를 실행해서 테스트를 성공했는지 실패했는지 실행시켜준다.

 

* yern eject

- create-react-app 에는 많은것들이 자동적으로 설정되어있고 숨겨져있는데 어떤 툴이 설치 되었는지 열어볼 수 있다.

한번 열면 다시 포장이 안되기때문에 정말 필요해서 세부적으로 설정해야할때만 사용하기.

 

 

 

 

 

 

자, 그럼 yarn start를 입력해서 로컬로 리액트를 확인해보자.