create-react-app

create react-app

리액트를 개발하는 수 많은 개발자들이 공통으로 사용하는 유용한 툴을 자동으로 설정해준다. 리액트도 적극적으로 이 툴 사용을 권장하고 있다. 자동으로 만들어주는 툴 말고, 직접 세세한 컨트롤 하고 싶다? 그 때 좀 더 세세히 배우면 될 것 같다.

공식 홈페이지

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

여기 들어가면 실행할 수 있는 방법이 설명 되어 있다.

어떤 말인지 대충 보도록 하자.

npx create-react-app my-app

: npx - 패키지 실행할 수 있는 툴.

: create-react-app - 패키지 실행!

: my-app - 프로젝트 이름 설정

npm start

: 실행하세용~!

create-react-app에 Hot module reloading이 포함되어있음. 자동 새로고침 해드립니다 : )

우리는 yarn을 이용해서 한번 만들어볼꺼야.

터미널

터미널을 열어서(VisualStudioCode 터미널을 이용해도 됨. ctrl+`누르면 아래에 터미널이 나옴)

yarn create react-app test → yarn으로 create react-app을 test폴더로 만들어준다.

(npx create react-app test와 같은 의미) 그러면 폴더 트리가 이런 식으로 구성된다.

완료! yarn start, yarn build, yarn test, yarn eject 추가적인 명령어도 보여주고 있음.

yarn start는 우리가 작성한 코드를 직접 확인해볼 수 있도록 실행하게 됨!

yarn build는 실행하지 않고, 배포할 수 있도록 build해주고

yarn test는 우리가 작성한 unit test를 해서 성공했는지 실패했는지 보여주고

yarn eject는 create-react-app 쓰면 많은 것들이 자동적으로 설정되어서 잘 포장 되어있겠지? 우리가 포장 된 걸 열어서 (webpack, babel 등) 설정 안해도 쉽게 react 프로젝트 쓸 수 있는데.. 내가 만약 박스 안에 내용을 하고 싶다? 안의 내용을 손수 수정하고 싶다? 그러면 yarn eject로!

실행하고 싶으면

cd test (test폴더로 가라) 엔터

yarn start( 실행해라 ) 엔터 를 하도록 한다.

그러면 create react-app 완료!

Uploaded by Notion2Tistory v1.1.0