0. 주제 선정하게 된 배경 :
영화 프로젝트 배포 작업할때 환경변수 설정을 해줘야 했는데 정확히 알고 싶어 공부해보려고 한다.
1. 리액트에서의 환경변수
1-1. 사용 목적 :
- 보안 정보 보호 : 보안키나 암호 같은 중요한 정보는 환경변수를 사용한다.
- 환경에 따른 분리 : 개발 환경, 테스트 환경, 프로덕션 환경에 대해 각각 다른 구성을 제공함.
1-2. 사용 방법 :
-
.env 파일
: 프로젝트 루트 디렉토리에 .env 파일을 생성한 후 환경 변수를 설정한다.
⭐️ .gitignore 파일에서 .env 꼭 추가시켜줘야함! -
process.env 객체
: .env파일에서 설정해둔 환경 변수는 process.env 객체에 로드되므로, 해당 객체를 가지고 바로 환경 변수에 접근할 수 있다.
(⭐️ 다른 라이브러리나 컴포넌트들 처럼 import 시키지 않아도 됨!)
예시
process.env.REACT_APP_API_KEY- 규칙
: 일반적으로 .env파일에는 CRA에서는'REACT_APP_'접두사를, VITE에서는'VITE_'접두사를 사용해서
리액트 앱에서 사용할 환경변수를 지정해준다.
그 이유는, 리액트에 내장된 환경 변수 로더가 .env 파일을 자동으로 읽고, process.env 객체에 로드하기 때문이다.
3-1. CRA에서는...
// 작성
REACT_APP_API_KEY = "API_KEY"
// 접근
process.env.REACT_APP_API_KEY3-2. VITE에서는...
// 작성
VITE_API_KEY = "API_KEY"
// 접근
import.meta.env.VITE_API_KEY- 배포 후
: .env파일은 빌드시 포함되지 않기 때문에 .env에서 사용하던 환경 변수들을 배포 도구에 추가로 설정해둬야 함.
2. 추가로 알게된 점
2-1. API 엔드포인트
: 클라이언트 애플리케이션이 서버에 데이터를 요청하거나 서버로부터 데이터를 받는데 사용되는 URL
- API 엔드포인트는 RESTful API나 GraphQL API와 같은 스타일을 따름
2-2. CI/CD
-
CI(Continuous Integration) : 지속적 통합
개발자들이 작성한 코드를 자동으로 빌드하고 테스트하는 프로세스
코드를 수정하고 버전 관리 시스템 (Git)에 푸시하면 CI서버가 이를 감지해서 자동으로 빌드하고 테스트를 수행 -
CD(Continuous Development) : 지속적 배포
CI 과정을 거친 후 테스트를 통과한 코드를 자동으로 프로덕션 환경에 배포하는 프로세스
CI/CD는 소프트웨어 개발과 배포 과정을 자동화해서 개발 속도를 높이고 품질을 향상시켜줌
3. 참고 :
삐약