그동안 작업한 application은 주소가 localhost로 하드코딩되어있다.
그런데 개발할 때 사용할 api와 서버의 deploy에서 실서버에서 사용할 api 주소가 다를 수도 있다.
이런 정보를 application의 소스코드에서 떨어뜨려서 별도로 관리해야 할 필요성이 있다.
그때 환경변수를 보면 된다.
.env .local 파일을 홈 디렉토리에 생성하고 파일에 application에 사용할 정보들을 작성하면 된다.
이 데이터를 가지고 오는 방법
📍 ./ layout.js
↓ (변경)
📍 create/ page.js
↓ (변경)
🚧 글 생성 시 undefined 에러 발생
기본적으로 환경변수에는 기밀이 포함될 데이터가 포함될 가능성이 높다.
이런 기밀 정보까지 클라이언트 컴포넌트에 노출된다면 이 정보가 브라우저로 전송이 될 것이다. 즉 기밀 유출
💡 이런 문제를 막기 위해서 기본적으로 환경변수는 layout.js와 같은 서버 컴포넌트에서만 접속이 가능하다.
만약에 웹 브라우저를 위한 환경변수를 사용하고 싶다면
NEXT_PUBLIC_ 를 접두사로 붙여 사용하면 된다.
public 덕분에 API_URL이 웹 브라우저로 전송되기 때문에 글 작성이 가능해진다.
이렇게 하는 이유는 보안 때문이다!
그렇다면 버전 관리 할 때는 환경 변수를 어떻게 관리해야할까?
.gitignore 파일은 Next.js 개발 환경을 셋팅할 때부터 있었던 파일, Next.js에서 버전 관리 하지 않을 것을 권고한 내용
기본적으로 Next.js는 아예 .env.local 을 버전 관리 못하도록 막아놨다. 따로 신경써야할 부분이 없다.
그런데 개발을 하다보면 .env.local을 기본 형식을 알아야 .env local을 만들 수 있기 때문에 .env.local.example을 생성해서 .env.local의 sample 정보를 담아놓는 것이 좋다.
그러면 나중에 다른 사람이 이 개발환경 다운로드 받아서 설치할 때 example 보고 .env.local로 바꾸고 자기에 맞는 local 또는 실서버를 구축할 수 있다.
다른 local 주소도 환경 변수로 다 바꿔주면 끝이다!
