첫 기초 프로젝트를 시작해서 프로젝트 세팅 전에 팀원들끼리 git 관리 방법 및 폴더 구조를 미리 정하는 것이 좋을 것 같아서 기본 파일들을 세팅하던 중에 .env 와 .gitignore 에 대한 이야기가 나와서 다음 프로젝트 때에도 참고하기 위해서 글을 써보려고 한다.
우리 팀은 services 에 api 폴더를 만들었고, 사용하는 데이터별로 api 파일을 나누서 만들었다. 위 api 파일들에서 불러올 공통된 base url을 관리하기 위해 .env 파일을 생성하였다.
API 주소를 나눠서 관리하는 이유 ?
코드의 API 파일들을 나눠서 관리하면 코드의 유지보수성, 가독성, 재사용성, 확장성, 협업 효율성을 크게 향상시킬 수 있다. 아직까지는 불러올 데이터가 많지 않아 굳이 사용해야 하나 싶을 수 있지만, 프로젝트의 규모가 커질수록 더욱 중요해진다고 한다. 각 기능이나 모듈에 대해 책임을 분리하고, 독립적으로 개발 및 유지보수할 수 있는 구조를 갖추는 것이 좋다고 한다.
env 란?
환경변수는 프로그램이 실행되는 환경에 따라 동적으로 설정될 수 있는 값으로, 시스템 설정, 응용 프로그램 설정, 비밀 정보 저장, 환경에 다른 설정 분리 등 다양한 용도로 사용된다. 이를 통해 코드를 더 유연하고 보안적으로 안전하게 만들 수 있다.
env를 왜 사용하는가?
1. 비밀정보 관리
- API 키: 외부 서비스와 통신할 때 필요한 API 코드를 직접 작성하지 않고, '.env' 파일에 저장하여 보안성을 높임
- 데이터베이스 비밀번호 : 데이터베이스에 접근하기 위한 비밀번호와 같은 민감 정보 저장
- 인증정보: 토큰, 시크릿 키 등 인증 관련 정보 관리
*배포하지 않고 개발환경에만 적용할 수 있도록 환경 변수를 설정해야 한다.
2. 서버 설정
- 포트 번호 : 서버가 실행되는 포트 번호를 환경 변수로 관리하여, 환경마다 다른 포트를 사용할 수 있도록 함
- 서버 주소: API 서버의 주소, 데이터베이스 서버의 주소 등을 환경 변수로 관리
3. 기타 설정
- 디버그 모드 : 애플리케이션의 디버그 모드 실행 여부 제어
- 기능 플래그: 특정 기능 활성/비활성화 시 사용
.env파일과 .gitignore
.gitignore 파일은 Git이 특정 파일이나 디렉토리를 추적하지 않도록 설정하는 파일이다.
이는 민감한 정보가 포함된 파일이나 디렉토리를 실수로 버전 관리 시스템에 올리지 않도록 하기 위해 사용된다.
(그래서 협업 시에 git 레포지토리에 커밋되지 않기 때문 에 내부적으로 따로 공유해야 하고 개별적으로 관리할 수 있다.)
⭐️ 이슈 발생
우리 팀은 외부에서의 데이터 조작을 막기 위해 base_url을 .env 파일에서 관리하였다. 그런데 ! 기존의 작성&import 방식을 따랐더니, 오류가 발생하였는데, 그것은 vite 환경과 CRA(Create React App) 에서의 환경변수 사용 방법이 달랐기 때문이다.
CRA 와 Vite 에서의 사용 방법
찾아보니, CRA 와 Vite 개발 환경에서 사용하는 법이 달라서 에러가 발생했던 것..!
먼저, CRA 에서 사용하는 법을 살펴보자.
CRA에서 환경변수 사용 방법
설정하는 법
.env 파일을 프로젝트의 루트 디렉토리에 생성하고,
환경변수의 이름은 반드시 REACT_APP으로 시작해야 한다.
REACT_APP_API_URL=https://api.example.com사용하는 법
process.env 객체를 통해 접근한다.
const apiUrl = process.env.REACT_APP_API_URL;Vite에서 환경변수 사용 방법
설정하는 법
마찬가지로, .env 파일을 프로젝트의 루트 디렉토리에 생성해야 하고, 환경변수의 이름은 반드시 VITE_으로 시작해야 한다.
VITE_API_URL=https://api.example.com사용하는 법
import.meta.env 객체를 통해 접근한다.
const apiUrl = import.meta.env.VITE_API_URL;🙂 글을 마치며
이렇게 프로젝트를 하면서 프로젝트에서의 기본이지만 놓칠 수 있었던 부분에 대해서 알게 되었고,
CRA와 Vite 에서 사용하는 방법이 다르다는 것을 명심하면서 차후 토큰을 받아서 사용하는 경우나 민감한 데이터를 다룰 때 각 개발 환경에 맞는 사용법에 따라서 사용해볼 수 있을 것 같다.
