CRA create-react-app 예제를 학습해보자

react 를 좀 더 사용하기 쉽게 도와주는 도구 중에 하나로 create-react-app (일명 CRA) 를 꼽을 수 있습니다. 작업환경을 명령어 하나로 깔끔하게 세팅해주는 도구인데요.

이 명령어를 사용하면 초기 설정시에 굉장히 시간을 절약할 수 있게 도와줍니다.

이 글은 Create-react-app github 공식문서를 기준으로 작성되었습니다. 이 글에서는 npm과 npx yarn 세 가지를 다루도록 하겠습니다. yarn 을 통해 좀 더 쉽게 공부해보고 싶으신 분은 아래 링크를 참고해 주시기 바랍니다.

yarn 은 명령어를 더 편하게 사용할 수 있게 도와줍니다. yarn 은 Facebook 에서 만든 자바스크립트 패키지 매니저입니다. 사용해보고 싶으신 분은 이 글을 참고해 보세요.

준비

먼저 CRA를 사용하기 전에 컴퓨터에 Node.js 가 설치되어 있어야 합니다. 노드가 설치되지 않으신 분들은 아래 링크를 통해 다운받아 주시기 바랍니다. LTS 버전으로 설치해 주시면 됩니다.

NodeJS 설치하기

Node.js

CRA Install

Create-react-app을 사용하기 위해선 컴퓨터에 설치를 해주어야겠죠? 커맨드나 터미널을 켜서 글로벌 패키지로 설치해줍니다.

% npm install -g create-react-app

이렇게 입력해주면 글로벌 패키지로 설치해주겠다는 뜻입니다. 설치는 금방 완료됩니다.

프로젝트 생성

프로젝트 생성 또한 간단합니다.

% create-react-app my-app --script-version=react-script-ts

이렇게 하면 my-app 이라는 이름의 리액트 프로젝트가 만들어집니다. 뒤에 스크립트 버전을 react-script-ts로 지정해주었기 때문에 typescript로 생성이 됩니다. 간단하게 위에 create-react-app 를 이용해도 되고 아래 세 가지 명령어를 이용해도 됩니다.

npx

% npx create-react-app my-app

npm

% npm init react-app my-app

yarn

% yarn create react-app my-app

프로젝트 실행

실행 또한 아주 간단합니다. npm run start 나 npm start 를 해당 디렉토리 내 터미널에서 실행해주시면 됩니다. 저희는 my-app으로 이름을 만들었으니 일단 cd my-app 으로 프로젝트 폴더 안으로 들어가야겠죠!

% cd my-app
% npm start

혹은 % npm run start 을 실행해 주셔도 됩니다. yarn 을 이용하고 싶으시다면 아래 블록을 참고해 주세요.

% cd my-app
% yarn start

이 두 가지 명령어 중에 하나를 실행해 주면 되구요. 실행하면 터미널에서는 다음과 같은 화면이 나옵니다.

어디로 접속하면 해당화면을 볼 수 있는지 알려주고 있죠? 사용하시는 브라우저 크롬 등에서 https://localhost:3000/ 으로 접속하시면 다음과 같은 화면을 볼 수 있습니다.

이런 화면이 보이면 잘 실행이 된 겁니다. 아직 프로젝트의 파일들을 하나도 건드리지 않았을때의 모습이구요. 종료하고 싶으시다면 Ctrl + C 버튼으로 터미널에서 종료할 수 있습니다.

테스트

최근 TDD 스타일 코딩이 떠오르고 있죠? TDD는 먼저 코드를 테스트하기 위한 테스트 코드를 만든다음 프로젝트를 만드는 방식입니다. 프로젝트를 완성했을 때 그 테스트를 통과시킨다면 성공하는 것이죠. 테스팅에 대해서 더 읽어보고 싶으시다면 링크를 참고해 보시기 바랍니다.

테스팅은 위와 같이 my-app 폴더 내에서 % npm test 를 실행해 주시거나 % yarn test 를 실행해 주시면 됩니다.

빌드

빌드를 하고 싶으다면 % npm run build 나 % yarn build 를 실행해 주시면 됩니다.

참고 https://github.com/facebook/create-react-app#npm-start-or-yarn-start

facebook/create-react-app