2021년 12월 첫째주 WIL

React에서 환경변수 활용

crate react app을 이용해 프로젝트를 생성한 경우 바로 환경변수를 활용할 수 있는 방법이다.

.env 파일을 만들고 그 안에서 REACT_APP_ 이 붙은 변수명을 지정하면 환경변수를 바로 활용할 수 있다.

// .env

REACT_APP_BASE_URL = "www.google.com"

root 경로에 .env 라는 파일을 생성하고 앞서 설명했듯 활용할 환경변수에 REACT_APP_ 을 붙여서 선언한다.

예시로 base_url 을 지정하였다.

 

const URL = process.env.REACT_APP_BASE_URL

fetch(`${URL}/movie`).then(res => res.json()).then(data => console.log(data))

.env 파일에 저장된 환경변수는 process.env로 불러오고 사용한다.

 

영화 정보를 가져오는 상황을 가정하고 써봤다.

 

 

https://create-react-app.dev/docs/adding-custom-environment-variables/

Adding Custom Environment Variables | Create React App

 

---

 

패키지 잠금 파일(package-lock.json, yarn.lock)

프로젝트에서 npm install 혹은 npm i 을 실행해서 패키지를 설치하는 경우 package-lock.json 파일이 설치되고,

yarn 명령어로 패키지를 설치하면 yarn.lock 파일이 설치된다.

 

이처럼 lock이 붙은 파일은 패키지 잠금 파일을 뜻하는데, 해당 내용을 공부하기 전까지는 패키지를 왜 잠궈야 하는지 몰랐는데 협업 시 굉~~~장히 중요한 부분이라는 것을 이번에 알게 되었다.

 

패키지 잠금 파일의 역할은 한마디로 현재 프로젝트에 설치되어있는 모듈들의 버전을 명시하여, 타인이 패키지를 설치할 때도 업데이트된 모듈이 아닌 프로젝트에 설치된 모듈의 버전만을 다운로드할 수 있도록 막는 역할이다.

 

예를 들어보겠다.

 

만약 package-lock.json 혹은 yarn.lock 파일이 없을 경우

 

이미 존재하는 프로젝트를 pull 받고 패키지 설치 명령어를 거친 후(npm i, yarn) 실행시킬 경우 프로젝트가 생성될 당시 사용된 모듈들의 버전이 업데이트가 된 상태로 설치가 될 것이다.

 

A : 최초 프로젝트 생성자

B : 프로젝트 협업자(1달뒤 합류)

C : 프로젝트 협업자(1년뒤 합류)

 

이처럼 A,B,C 세명의 개발자가 있다.

 

A개발자가 최초 리액트를 설치하고 프로젝트를 만들었을 때 package.json에 설치되는 react 버전이

16.0.1이라고 가정하자.

// package.json

{
  "name": "example_project",
  "version": "1.0.0",
  "dependencies": {
    "react": "^16.0.1",
  }
}

그리고 한달 뒤 B 개발자가 패키지를 설치할 경우 당시의 최신 버전을 설치하게 될 것이다. -> 16.0.2라고 가정

그리고 1년 뒤 C 개발자가 패키지를 설치했을 때 설치되는 react의 버전이 17.0.1 이라고 가정

 

이렇게 되면

A : 16.0.1

B : 16.0.2

C : 17.0.1

의 형태로 모두 다른 버전의 리액트를 하나의 프로젝트에서 쓰게 될 것이다.

이렇게 될 경우 A의 컴퓨터에서는 오류가 아닌 것이 B의 컴퓨터에서는 오류로 나올 수 있고 C의 컴퓨터에서는 아예 실행 자체가 안될 수가 있는 것이다.

 

이를 막기 위해 처음 프로젝트가 생성될 때 만들어지는 패키지 잠금 파일에(package-lock.json, yarn.lock) 설치된 모듈들의 버전이 다 입력이 된 상태로 생성이 된다.

{
  "name": "exaple_project",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "react": {
      "version": "16.0.1",
      "resolved": "https://registry.npmjs.org/react/-/react-16.0.1.tgz",
      "integrity": "sha512-M5Y8yITaLmU0ynd0r1Yvfq98Rmll6q8AxaEe88c8e7LxO8fZ2cNgmFt0aGAS9wzf1Ao32NKXtCl+/tVVtkxq6g==",
      "requires": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1",
        "prop-types": "^15.6.2"
      }
    },
  }
}

 

그리고 패키지 잠금 파일이 있는 상태에서 제 3자가 패키지 설치를 진행하게 되면 패키지 잠금 파일에 명시된 버전들로 처음 프로젝트 생성할 때 사용한 버전 그대로를 다운로드하고 사용할 수 있는 것이다.

 

더 친절하고 자세한 내용은 아래 블로그를 통해 확인할 수 있다.

 

https://www.daleseo.com/js-package-locks/

패키지 잠금 파일 (package-lock.json, yarn.lock)