TIL - 20230202

 

보안이 필요한 API 키 값 등을 환경 변수로 담아 외부파일(.env) 에 보관하고 가져와보자.

 

1. dotenv 패키지 설치

// npm
npm install dotenv

// yarn
yarn add dotenv

 

2. 프로젝트 루트폴더에 .env 파일 생성

 

3. 파일 안에 환경 변수 내용 작성 - 해당 건은 firebase 환경 변수. firebaseConfig 변수 안의 key: value 값을 .env 파일로 복사하여 REACT_APP_지정할 변수 = 값 의 형식으로 변경해준다.

export const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
  appId: '',
};
// 괄호 안의 내용을 복사해서 .env로 옮겨주자

REACT_APP_지정할 변수 = 값

 

4. 변수 사용하기

.env 파일에 작성된 변수는 별도의 import 없이 해당 변수 앞에 proces..env. 를 붙이면 전역에서 사용 가능함.

process.env.REACT_APP_지정할 변수 = 값

 

기존 firebase 파일

.env 파일에서 변수를 불러온 후 firebase 파일

잊지 않고 .gitignore 파일에 .env 를 추가해준다.

 

 

json-server 연습해보기

 

패키지 설치

// npm
$ npm install -g json-server

// yarn
$ yarn add -g json-server

서버 실행

$ json-server --watch db.json --port 3001

난 프로젝트를 새로 만들 때 보통 yarn 을 이용하고 이번 건은 글로벌로 설치 시 서버 실행이 안되어서

$ yarn add json-server

로 패키지 설치 후

yarn json-server --w db.json --p 3001

명렁어로 서버를 실행시켰다. 

 

이후 프로젝트 루트폴더에 db.json 파일을 생성 후 객체 안에 key, value 를 넣어보자. 난 json server 를 3001번 포트에 구동시켰으므로 http://localhost:3001/todos/1 등으로 가면 확인이 가능하다.

{
  "todos": [
    {
      "id": 1,
      "title": "test",
      "content": "안녕하세요."
    },
    {
      "id": 2,
      "title": "test2",
      "content": "안녕히 가세요."
    }
  ]
}