- create-react-app 사용해보기
- 주요 명령어 알아보기
create-react-app은 react로 웹 어플리케이션을 만들기 위한 환경을 제공한다. 앞에서 다룬 Babel과 Webpack도 create-react-app에 포함되어 있다. 그 밖에 테스트, HMR(hot-module-replacement), ES6+, CSS 후처리 등 거의 필수적인 개발 환경도 구축해준다.
이러한 개발 환경을 직접 구축하는 경우 시간이 오래 걸리며 유지 보수가 필요한데, create-react-app을 이용할 경우 기존 기능을 개선하거나 새로운 기능을 추가하면 패키지 버전만 올리면 된다.
아래의 명령어를 입력하면 create-react-app을 이용한 개발 환경이 설치된다.
create-react-app 패키지가 설치되지 않아도 npx가 자동으로 가져와서 실행한다.
npx create-react-app [개발 폴더 이름]
위 화면은 개발환경 설치 이후의 모습이다. 만약 npm 버전이 낮아서 실행이 되지 않는 경우 아래의 명령어를 입력하자.
npm install -g create-react-app
create-react-app cra-test
개발환경이 잘 설치되었는지 확인하기 위해 웹 페이지를 띄워보자.
웹 페이지를 띄우기 위해선 해당 프로젝트 폴더 위치에서 다음 명령어를 입력하면 된다.
npm start
빌드가 끝나면 브라우저가 띄워지는데, 이 상태로 코드를 수정하면 화면이 자동으로 업데이트 되는 것을 확인 할 수 있다. npm start 실행 시 create-react-app이 로컬 서버를 띄워주기 때문에 가능한 일이다.
참고로 npm start는 개발모드에서 동작하기 때문에 배포할 때 사용하면 안 된다.
package.json 파일에는 npm 명령어들이 존재한다.
개발모드로 프로그램을 실행하는 명령어이다. 개발모드로 실행하면 HMR이 동작하므로 코드를 수정하는 경우 화면에 즉시 반영한다. 개발 모드에서 코드에 에러가 있을 경우에는 브라우저에 에러메시지를 출력한다.
때에 따라 API 호출을 위해 https로 실행해야 하는 경우가 있는데, 직접 구축을 하지 않아도 create-react-app에서는 이를 옵션으로 제공하고 있다.
맥 : HTTPS=true npm start
윈도우 : set HTTPS=true && npm start
배포 환경에서 사용할 파일들을 만들어 준다. 빌드 후 생성된 js 파일과 css 파일은 읽기 힘든 형식으로 압축되어있다. 생성된 정적 파일들은 웹 서버를 통해 사용자가 내려받을 수 있게 된다.
로컬에서 웹 서버를 띄워서 확인해보자.
npx serve -s build
serve 패키지는 노드 환경에서 동작하는 웹 서버 어플리케이션으로, 정적 파일을 서비스할 때 이용하기 좋다.
아무튼 정적파일을 탐색해보면 build/static 폴더 안에 파일들이 새로 생긴 것을 확인할 수 있다. 보통 해시 값으로 파일이름이 지정된다. 새로 빌드하더라도 변경되지 않은 파일은 브라우저에 캐싱이 되어 재방문 할 경우 페이지가 빠르게 랜더링된다.
각각의 파일들은 static 하위 폴더 css, js에 저장이 되며, 이미지, 폰트 등 리소스 파일은 media 폴더에 저장이 된다.
파일의 크기가 10KB 미만인 경우 data url 형식으로 js 파일에 포함된다. 크기가 작은 파일이라면 한 번의 요청으로 처리하는 게 효율적이기 때문이다.
모든 프로그램에 있어서 테스트 코드는 굉장히 중요하게 여겨진다. 마찬가지로 create-react-app에서도 테스트 코드가 존재하는데, 이를 jest라고 한다. 프로젝트 생성 시 App.test.js 파일이 생성된다.
npm test
를 입력하면 테스트 코드가 실행된다.
create-react-app에서는 js 파일이 다음 조건을 만족할 경우 테스트 파일로 인식한다.
• __test__ 폴더 밑에 있는 모든 js 파일
• 파일 이름이 .test.js로 끝나는 파일
• 파일 이름이 .spec.js로 끝나는 파일
util.js와 이를 테스트하는 util.test.js 라는 파일을 생성하여 간단한 함수를 작성해보자.
export function addNumber(a, b) {
return a + b;
}
export function minusNumber(a, b) {
return a;
}
// util.test.js
import { addNumber, minusNumber } from "../util";
it("add two numbers", () => {
const result = addNumber(1, 2);
expect(result).toBe(3);
});
it("minus two numbers", () => {
const result = minusNumber(1, 2);
expect(result).toBe(-1);
});
jest를 실행하여 결과를 확인해보자.
올바르지 않은 minusNumber 함수에 대해서 실패했다고 보여준다.