NextJS .env.local이란?

NextJS .env.local이란?

 

안녕하세요! 오늘은 NextJS에서 env.local이란 파일이 무엇인지 알아보겠습니다.

 

개발을 하다 보면 특히 협업을 한다면 필연적으로 git을 사용하게 됩니다.

이때 우리는 gitlab이나 github에 소스코드를 업로드하게 됩니다.

이때 따로 비공개로 설정하지 않는다면 소스코드는 공개되는 경우가 많습니다.

하지만 개발을 하다 보면 다른 개발자나 타인에게 보여주기 민감하거나 혹은 보이지 않아야 하는 정보들이 있기 마련입니다.

예를 들면 데이터베이스에 접근하기 위한 Id, Password, Database name 등등이 있을 수 있습니다.

이러한 정보들은 자칫 타인에게 보이게 된다면 타인이 데이터베이스에 접근할 수 있기 때문에, 당연히 접근도 할 수 없고 보이지 않아야 합니다.

그렇다면 그러한 정보들을 어떻게 정의하고 사용하는지 짧게 알아보겠습니다.

 

1. .env.local 생성 방법?
2. . gitignore?
3. 꼭. env.local이라는 이름을 사용해야 하나?
4. 값을 설정하는 방법?
5. 값을 사용하는 방법?
6. 마치며.

 

1. .env.local 설정 방법?

NextJS 프로젝트를 생성하셨다면 root folder에. env.local이라는 파일을 생성합니다.

root folder란 프로젝트를 생성한 최상위 폴더를 말합니다. 쉽게 이해하기 위해서 node_modules라는 폴더라 생성된 위치와 같은 위치에. env.local이라는 파일을 생성하시면 됩니다. 이렇게 말입니다.

자 사진에 보면 여러 파일들이 많이 보이지만 전부 다 무시하시고 styles라는 폴더 밑에. env.local이라는 파일만 보시면 됩니다.

이렇게 간단한 방법으로. env.local파일을 생성해 주시면 일단 처음 준비는 끝입니다.

 

2.. gitignore?

위 사진에 보시면. env.local이라는 파일을 포함해 몇몇 파일들은 좀 더 어두운 회색을 띠는 것을 알 수 있습니다.

이는 local에서만 존재하는 파일들입니다. 좀 더 자세히 말씀드리면 소스코드를 github과 같은 플랫폼에 업로드할 때 제외되는 파일들입니다. 그러면 이러한 파일들은 어디서 볼 수 있는 것일까요? 바로. gitignore이라는 파일에서 찾아보실 수 있습니다.

 

자 이게. gitignore이라는 파일입니다.

이 파일은 create-next-app을 통해서 NextJS 프로젝트를 생성하셨다면 자동으로 생성된 있을 것입니다.

현재로서 가장 중요하게 보아야 할 것은 28번 줄에. env*. local이라는 텍스트입니다.

우리가 생성한. env.local파일의 정보도 들어가 있는 게 확인됩니다.

 

이 파일에 포함된 모든 파일들은 소스코드가 업로드될 때 제외되는 파일 혹은 폴더들입니다.

혹여나 추가로 어떠한 파일이나 폴더를 업로드할 때 제외해야 한다면 이 파일에서 수정하시면 됩니다.

 

3. 꼭. env.local이라는 이름을 사용해야 하나?

이런 질문은 NextJS의 공식 홈페이지에 Docs를 확인하면 간단하게 해결됩니다.

공식 Docs에서는 일반적으로. env.local이라는 하나의 파일만 요구된다고 나와있습니다.

하지만 dev 혹은 production에서 따로따로 작동하는 환경변수가 필요할 시. env,. env.development 혹은. env.production이라는 파일들을 따로 생성하여 따로 사용할 수 있다고 나와있습니다.

하지만 정보를 계속 읽어보시면. env.local이라는 파일은 항상 기본값을 덮어씌운다라고 나와있습니다.

즉 다시 한번 말하자면 정말 dev나 production에서 따로 사용되어야 하는 값들이 요구되는 것이 아니라면. env.local이라는 파일 하나만 존재하면 된다는 뜻입니다. 

 

좀 더 자세한 경우는 여기서는 다루지 않겠습니다.

필요하신 경우 아래의 링크에서 확인해 보실 수 있습니다.

 

공식 홈페이지 링크: https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#default-environment-variables

 

4. 값을 설정하는 방법?

자 그럼 이제. env.local파일에 값은 어떻게 설정하는 것인지 알아보겠습니다.

값을 설정하는 방법은 생각보다 아주 간단합니다.

 

대문자 변수이름=값

이렇게 작성합니다. 예시를 보겠습니다.

 

이렇게 변수는 모두 대문자로 표기하고 문자마다 언더스코어 (_)를 이용하는 게 보편적입니다.

그리고 =뒤에 (따로 값에 따옴표가 필요한 게 아닌 경우라면)  따옴표를 사용하지 않고 그대로 값을 입력해 주시면 됩니다. 

 

자 이렇게 값을 설정하였다면, 이제는 값을 사용해 보도록 하겠습니다.

이러한 값은 기본적으로 서버에서만 참조할 수 있습니다. 즉 브라우저에서는 사용할 수 없다는 뜻입니다.

하지만 브라우저에서도 사용하는 환경변수가 필요하다면 앞에 NEXT_PUBLIC을 붙이시면 됩니다.

예를 들어 TEST_TEST의 값을 브라우저에서도 사용하고 싶다면 NEXR_PUBLIC_TEST_TEST 이렇게 지정하시면 됩니다.

 

5. 값을 사용하는 방법?

 

위와 같이 값까지 지정하였다면, 이를 어떻게 사용하는지 궁금하실 겁니다.

. env.local 파일은 다른 파일과 같이 import 하여 사용하지 않고 조금 다르게 사용합니다.

이를 사용하기 위해서 우리는 process.env를 사용하게 됩니다.

const someVariableName = process.env.SOME_VARIABLE_NAME;
const testTest = process.env.TEST_TEST;

이렇게 process.env를 이용하여 위에 지정한 값을 사용할 수 있습니다.

 

6. 마치며.

오늘은 가볍게 NextJS에서 환경변수와. env.local에 관해서 알아보았습니다.

이는 실제 업무에서도 자주 사용되는 파일이기에 사용 방법을 익히는 것이 중요합니다.

앞서 언급하였듯, 프로젝트에서 사용은 되어야 하나 다른 누군가에게 보여서는 안 되는 즉 아이디, 비밀번호 혹은 API와 관련된 민감한 값들을. env.local 파일에 지정하고 사용합니다.

 

오늘 하루도 고생 많으셨습니다.

항상 좋은 일만 가득하시길 바라겠습니다.

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.