create-react-app이란?
create-react-app은 React
팀에서 공식적으로 내놓은 개발 도구로 기본적인 React 작업환경을 만들어주는 Boilerplate이다. 나는 html
파일에서 필요한 JS 파일을 모두 로드해서 사용하는 옛날 방식에 익숙한 사람이라 모듈 번들링을
해주는 Webpack이나 트랜스파일러 역할을 하는 Babel을
처음 봤을 때 굉장한 부담감을 느꼈다. 이는 React를
본격적으로 공부하기도 전에 사람들이 진입장벽을 느끼게 한다. create-react-app을 이용하면
개발자가 모든 설정을 일일이 지정할 필요가 없기 때문에 초보자들도 쉽게 React를 사용할 수 있다.
설치하기
npm install -g create-react-app
글로벌 패키지로 ‘create-react-app’을 설치한다. 참고로 npm에서 글로벌로 설치할 패키지는 터미널 환경에서 계속
커맨드로 사용될 패키지이다.
create-react-app 프로젝트명
패키지를 다 설치하고 위의 커맨드를 날리면 프로젝트가 만들어진다. 다음과
같은 구조를 갖는다.
이렇게 생성된 프로젝트 안 package.json을 보면 다음과 같이 되어있다.
{
"name": "homepage-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^4.1.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-router-bootstrap": "^0.24.4",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
React 스택이라고
할 수 있는 여러 라이브러리(Webpack, Babel, ESLint 등)은 node_modules/react-scripts에 설치되어 있다.
script
-
(1) 개발 서버 실행: npm start 커맨드를 실행하면 webpack-dev-server를
시작한다. 그러면 개발 모드로 서버가 실행된다. 참고로 React는 개발 모드와 프로덕션 모드로 실행될 수 있다. 개발 모드는
개발자의 실수를 막기 위해 속성 타입 체크 같은 경고 문구를 포함하고, 프로덕션 모드는 성능 최적화를
적용하고 모든 오류 문구를 제거한다. 이렇게 개발 모드로 서버를 실행한 상태에서 코드를 수정하면 자동으로
적용된다.
-
(2) 빌드:
npm run build 커맨드를 실행하면 프로젝트 내 build 디렉토리가 생기고 파일들이
생성된다. 기존 public 디렉토리에 있는 파일들은 그대로 build 디렉토리 밑에 복사된다. 만약 빌드 이후에도 노출되기 원하는 파일이 있으면 반드시 public 밑에 위치시켜야 한다.이 build 디렉토리가 프로덕션 모드에서 실행될
결과물이고 운영 서버에 배포하면 바로 실행된다. 빌드 설정은 react-scripts에서
미리 설정했기 때문에 변경할 수 없다.
-
(3) eject: react-scripts로
생성한 빌드 툴과 설정을 개발자가 바꾸고 싶으면 npm run eject 커맨드를 실행하면 된다. 그러면 react-script를 제거하고 그와 연관된 설정 파일들과
관련 dependency들을 원래의 상태로 프로젝트에 저장한다. 이후, 개발자는 개별적인 설정을 지정할 수 있다. 대신 npm run eject 커맨드를 실행하면 다시 예전 상태로 돌아 갈 수 없다.
댓글
댓글 쓰기