툴 프로젝트 설치 실행

create-react-app 이툴을 이용해서 프로젝트 설치하고 실행까지 해봅시다. 

 

create-react-app.dev/docs/getting-started/

Getting Started | Create React App

 

페이스북에서 만든 리액트 개발자들이 공통으로 사용하는 정말 유용한 툴들을 한번에 자동적으로 설치 할 수 있게 도와주는 너무나 유용한 친구입니다.

리액트에서 create-react-app (위에 사이트) 이툴을 권고하고 있어요.

실제로 현업에서는 이렇게 자동으로 하는 것 보다 실제로 필요한 것들을 직접 컨피규레이션해서 사용하는 경우가 많은데요

 

명령어 ls와 cd를 이용해서 프로젝트를 만들고자 하는 폴더로 이동해서 

 

create-react-app이라는 패키지 실행

yarn create react-app 프로젝트 이름

그러면 프로젝트에 필요한 아이들을 자동으로 알아서 설치해줌. 처음에는 1분 정도 소요 됨.

 

 

yarn start

프로젝트실행

 

 

yarn build

실행하지 않고 우리가 만든 앱, 제품을 베포할 수 있도록 빌드

 

 

yarn test

우리가 작성한 유닛 테스트를 실행해서 테스트에 성공했는지 실패했는지를 실행해 주고

 

yarn eject

우리가 create-react-app 이것을 이용하게 되면 많은 것들이 자동적으로 설정되어져있고 조금 숨겨져 있는데요. 어떤툴들이 다 설치되어져 있는지 다 열어서 보려면 즉, 우리가 굉장히 많은 툴들이 있는데 이 create-react-app 이용하게 되면 이런 툴들이 박스 안에 잘 포장 되어져 있어요. 

 

그래서 우리가 직접 이 상자를 열어서 볼 필요가 없어요. 웹팩, 바벨 등을 어떻게 설정하면 되는지 잘 몰라도 쉽게 리액트 프로젝트를 만들고 실행할 수 있도록 도와줍니다.

그런데 내가 이 박스안에 웹팩, 바벨 등과 같은 요런 아이들을 다 확인 하고 싶거나 하나하나씩 손수 수정하고 설정하고 싶다면 eject라는 명령어를 이용하면 됩니다.

 

 

프로젝트를 start까지 했지요.

 

콘솔창에서 계속 프로세스가 돌아가고 있어서 다른 명령어를 작성하려면 Ctrl + d를 눌러서 중지한 다음에 명령해야헤요. 그래서 중지 하기 않고 실행하면서 다른 거 할때는 새로운 창을 열어서 터미널 두개가 필요합니다.

 

새로운 창에서 현재 폴더로 이동해서 아래 명령어 작성

code .

그러면 비주얼스튜디오코드가 실행됩니다.

 

터미널에서 바로 해당 경로에서 비주얼스튜디오코드를 열고 싶다면 비주얼스튜디오코드 command palate tool을 열어서 Shell command라고 이렇게 검색하고 install code command in  Path를 클릭하면 됩니다.