[React] create-react-app (CRA) 기초 정리 (Feat. 환경변수)

Create-React-App(CRA) 란?

- 리액트 개발환경을 쉽게 구축해준다.(by 페이스북 리액트팀)

- 대략 아래의 것들 + 알파가 자동으로 세팅된다.

1. webpack(모듈+라이브러리 번들링)
2. babel(jsx 컴파일)
3. jest(테스트)
4. eslint(코드형상관리)
5. polyfill(구형 브라우저 미지원 문법 등 대응)
6. HMR(Hot Module Replacement: 재시작 없이 변경사항 반영)
7. CSS 후처리(SASS 컴파일, 벤더접두사prefix 등)

- 위의 것들을 알아서 설정해주므로 매우 편리하지만, eslint 등의 설정 변경이 불편하다는 단점은 있다.

 

 

CRA 사용법

- React

npx create-reat-app 폴더명(현재경로는 .)

 

- React + TypeScript

npx create-react-app 경로 --template typescript

 

- React + Next.js + TypeScript

npx create-next-app@latest --typescript

 

 

CRA 프로젝트 구조

• /public : 리소스 파일(이미지 등)
• /src : JS 파일
• package.json, node_modules : 패키지 등 관리

 

CRA 명령어

1. npm start : 리액트 개발 서버 구동 (디폴트 http. 최적화 안 된 개발 모드로 실행된다. 배포할 땐 build된 파일로 서비스 필요)

• HTTPS 구동 방법
• 맥 : HTTPS=true npm start
• 윈도우 : set HTTPS=true && npm start (아니면, cross-env 쓰면 될듯.)
• self-signed 인증서라 경고창 나오는데, 그냥 계속 진행하면됨

2. npm build : 빌드 (/build 파일에 정적 배포파일 생성됨)

• 실제 서버 배포시, 빌드된 정적 파일들을 응답해주기만 하면 된다. (별도 서버 애플리케이션은 필요 없음)

3. npm test: 테스트 실행

• App.test.js 파일 테스트
• 파일이름.test.js, 파일이름.spec.js 형식도 테스트 파일로 인식한다.
• tests폴더/ 내부의 파일도 모두 테스트 파일로 인식

4. npm eject: react-scripts 를 사용하지 않고, 모든 설정 파일을 추출

 

 

CRA 환경 변수

CRA로 프로젝트 세팅시,

- 환경변수로 process.env.NODE_ENV 가 기본 생성되며, 소스코드 어디서나 참조 가능하다.

- 실행 환경에 따라 아래의 값을 갖는다.

• npm start 실행시: process.env.NODE_ENV=development 로 설정됨.
• npm test 실행시: process.env.NODE_ENV=test 로 설정됨
• npm run build 로 빌드시: process.env.NODE_ENV=production 로 설정됨

 

리액트 커스텀 환경변수

- 앞에 REACT_APP_ 을 붙여서 REACT_APP_환경변수명=값 형태로 정의한다.

- 등록된 환경변수는 소스코드 상에서 process.env.REACT_APP_환경변수명 으로 참조 가능하다.

• 환경변수 정의 : process.env.REACT_APP_환경변수명=값
• 환경변수 사용 : process.env.REACT_APP_환경변수명

 

1. .env 파일 정의

- 루트 폴더에서 아래의 3개 파일 생성해두면, 실행 환경에 따라 해당하는 파일의 환경변수가 참조된다.

- 즉, npm start, npm test, npm run build 에 따라 해당하는 파일의 환경변수가 사용된다.

• .env.development : development 환경 (process.env.NODE_ENV == 'development')
• .env.test : test 환경 (process.env.NODE_ENV == 'test')
• .env.production : build 환경 (process.env.NODE_ENV == 'production')

 

2. 커맨드라인에서 직접 환경변수 설정

- 커맨드라인에서 리액트 구동 시, 바로 환경변수를 적용할 수도 있다.

• 맥/리눅스 : REACT_APP_환경변수명=값 npm start 
• 윈도우: set "REACT_APP_환경변수명=값" && npm start

---

# 개발 팁

리액트 개발시,

정적 리소스(Image, CSS, json...) 등은 가급적 JS파일에서 import해서 사용하자.

웹팩 덕분에 CSS, 이미지 파일, json데이터도 import 변수명 from '이미지 | CSS | json 경로' 로 사용할 수 있으며,

이렇게 사용하면, 브라우저 캐싱이 효율적으로 동작한다고 한다.