create-react-app 정리

## 본 게시글은 강의를 들으면서 필요한 부분들을 개인적으로 정리한 것 입니다.

## 어떤 강의인지는 밝히지 않으며 저작권에 대한 문제가 있을시 삭제할테니 말씀해주세요!

 

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

CRA 4가지 명령어

start 명령어는 '개발모드'로 실행할 때 사용하는 것으로 최적화가 되어있지 않은 상태이기 때문에

'배포'할 때 사용하면 안된다.

start로 시작하게 되면 default는 HTTP로 실행된다.

HTTPS는 HTTP에 보안 등의 여러가지 기능이 추가된 업데이트 http이다.

https로 실행하고 싶을 때는

window 기준 set HTTPS=true && npm start

macos 기준 HTTPS=true npm start

를 사용한다.

 

build 명령어는 배포할 때 사용된다.

빌드를 하게 되면 정적 파일이 생성된다.

npm run build를 이용해서 빌드를 하면 아래와 같은 정적 파일이 생긴다.

서버에서는 생성된 build 폴더 안에 있는 내용들을 정적 파일로 서비스하면 된다.

'별도로 서버에 애플리케이션을 실행하지 않기 때문에 SSR로 동작할 수 없는 것이다'

로컬에서 정적 파일을 서비스 하기 위해서는 serve 패키지를 사용한다.

(설치는 npm install serve!)

(실행은 npx serve -s build) <= build 폴더에 있는 정적 파일을 서비스한다.

 

test는 아직 내가 사용하기에 먼 내용이라서 패스..

 

eject도 마찬가지긴 하지만..

eject는 react-script를 사용하지 않고 모든 설정 파일을 추출하는 명령어이다.

cra를 기반으로 직접 개발환경을 구축하고 싶을 때 사용하는 것으로,

추출하지 않으면 cra 기능이 추가됬을 때 react-scripts 버전만 올리면 되는데, 

추출을 하면 수동으로 설정 파일을 수정해야 하는 단점이 있다.

 

polyfill

polyfill은 기본적으로 지원하지 않는 이전 브라우저에서 최신 기능을 제공하는 데 필요한 코드이다.

예를 들면 padStart 같은 문자열 함수를 사용할 때, 이를 지원할 수 있는 브라우저가 있고 아닌 브라우저가 있다.

지원되지 않는 브라우저는 대표적으로 IE가 있다.

 

polyfill을 추가하기 위해서는 대표적으로 core-js를 많이 사용한다.

github에는 core-js 관리 페이지가 있는데,

이 중에서 polyfill을 추가하길 원하는 대상을 찾아서 index.js 에 import 하면 지원 가능해진다.

** cra에는 core-js를 자동으로 패키지에 포함시키기 때문에 설치할 필요가 없다 **

 

환경변수

개발, 테스트 또는 배포 환경 별로 다른 값을 적용할 때 사용한다.

전달된 환경변수는 js 내 코드에서 process.env.변수이름 의 형식으로 사용한다.

환경변수를 커맨드라인에서 직접 지정할 수 있는데,

react에서는 항상 아래와 같은 규칙을 따른다.

REACT_APP_*

ex) REACT_APP_KEY

 

** 리액트에는 기본적으로 NODE_ENV 환경변수가 지정되어 있는데

** 개발모드인 start 로 실행하면 NODE_ENV 는 development가 되고

** 배포모드인 build로 실행하면 NODE_ENV 는 production이 된다.

** 환경변수를 .env 파일로 직접 관리할 수 있는데

** .env.development 파일에 환경변수를 지정하면 개발모드를 사용할 때 변수 사용이 가능하고

** .env.production 파일에 환경변수를 지정하면 배포모드를 사용할 때 변수 사용이 가능하다