Create-react-app 이란?
React 개발관련 공부내용을 기록하는 포스트 입니다.
1. 개요
React는 최근에 가장 많이 사용하는 라이브러리이기도 하고 현재 회사에서는 실무에서 Vue 프레임워크를 사용하고 있지만, 빠르게 변하고 있는 프론트엔드 기술 생태계를 따라가려면 공부할 수 밖에 없을것 같았다.
개인적으로 뭐든 직접 해보고 이런 기능들을 사용하는것이 올바른 공부 방법이라고 생각하고 있어서, 사실 그동안에 create-react-app에 대해서 알고는 있었지만 사용하지 않고 직접 webpack, babel, eslint 등의 환경을 셋팅해서 React 프로젝트를 진행했었다.
실제로 구성한 부분을 작성하지는 않았으나, 번들러 셋팅의 경우 평소에 하던것과 크게 다를것이 없어서 WEBPACK, BABEL 이 두개의 포스팅을 참고하면 된다.
이제는 간단하게 create-react-app는 사용하여 빠르게 개발 환경을 간단하게 구축해도 괜찮을 듯 하여 한번 정리해 보겠다.
React는 현재 create-react-app을 통해서 기본적인 환경셋팅을 해주고 있기 때문에 이를 많이 사용하는것 같다.
그리고 이제는 create-react-app를 사용해서 간단하게 프로젝트를 시작하는 방법을 포스팅한다.
2. create-react-app 시작
npx create-react-app [폴더명]
위 명령어를 통해 프로젝트를 생성할 수 있다.
설치가 끝나면 아래와 같이 프로젝트가 구성된다.
create-react-app 을 사용하면 빌드시스템, eslint 등의 설정을 수정할 수 없다.
이부분이 단점이 될 수 있지만, 최근 서버사이드 렌더링을 통해 진행되는 프로젝트가 많아짐에 따라 Next.js 를 사용하면 원하는데로 설정이 가능하기 때문에 맞는 방법에 따라서 프로젝트를 시작하면 될 것 같다.
2-1. package.json
프론트엔드를 공부하면서 가장 배우기 힘든게 정확한 package.json이다.
설치 후 package.json은 아래와 같이 구성된다.
// package.json
{
"name": "cra-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.1.1",
"@testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.1", // create-react-app 의 버전은 이부분이다.
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": { // 브라우저 polyfill 이며 각종 브라우저 지원에 대처하기 위한 부분
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
2-2. npm run start
package.json의 script에 설정된 명령어를 통해 실행하고 웹페이지를 실행할 수 있다.
npm run start
정상적으로 실행이 된다면 아래와 같은 로컬 HTTP 페이지가 구동된다.
만약 HTTPS로 구동이 필요한 경우 아래와 같은 명령어로 시작하면 된다.
HTTPS=true npm start
create-react-app는 HMR(Hot Module Reload) 를 지원하기 때문에 수정을 하면 바로바로 브라우저에 적용이 되는것을 확인할 수 있다.
* npm run start 의 경우 개발용이므로, 빌드 최적화가 되지 않았다.
2-3. npm run build
build의 경우는 배포 커멘드이다.
npm serve -s build
npm run build 커멘드를 진행하면 정적 파일이 생성되는데
Webpack에서 dist 에 output 즉, 결과물에 대한 정적파일들을 넣는것과 비슷한 원리인듯 하다.
2-4. 파일에 따른 이미지 사용방법
우리가 실제 Webpack 환경을 구성하다보면 loader, plugin을 통해서 리소스와 결과물에 대한 추가 기능을 진행할 수 있다.
여기서도 하나 볼 수 있는것은 Webpack의 url-loader 이다.
url-loader 는 설정에 크기를 정의하고 해당 크기보다 작은 이미지의 경우 인코딩하여 JS 결과물에서 문자열 형태로 사용된다.
반면 정의한 크기보다 큰 경우 file-loader를 사용하여 정적파일로 생성하게 된다.
공부를 하다보니 create-react-app또한 동일하게 동작한다.
결과적으로 이러한 작업의 이유는 HTTP 요청을 줄이고, 빠르게 JS만 로드하면 이미지를 UI에 렌더할 수 있기 떄문이다.
3. 환경변수 전달
Webpack 포스팅에서 DefinePlugin에 대해서 공부한적이 있다.
해당 플러그인은 개발환경과 운영환경을 분리해서 관리하고 같은 소스를 두개의 다른 환경에 배포하기 위해 사용된다.
create-react-app는 환경변수를 전달할 수 있는데 process.env.{변수이름} 을 통해서 확인할 수 있다.
보통 process.env.NODE_ENV 값을 활용하는데
process.env.NODE_ENV 값은 npm 실행 커멘드에 따라 다르다.
- npm start : development
- npm test : test
- npm run build : production
직접 커멘드로 전달하기 위해서는 REACT_APP_* 을 통해서 전달 가능하다.
REACT_APP_API_URL=xxx.xxx.com npm start 와 같이 실행 커멘드를 날리고 process.env.REACT_APP_API_URL로 받으면 된다.
Gatsby router 활용에 대한 포스트 입니다.