환경 변수 사용하기..

dotenv를 사용하여 환경변수를 처리하는중에 에러가 풀리지가 않았다.

 

https://dirask.com/questions/Express-js-dotenv-require-error-1wrkJj

1. Remove "type": "module" from the package.json file

이방법이 해결책중 하나라고 해서 저기를 들어가봤더니 나의 package.json은 type:module이 없었다.

실패

 

2. If you installed esm (es modules) and you are using import keyword instead of require to import packages use the following commands:

import키를 사용하고 있다면? 아래처럼 해보라고 해서 해봤다.

import dotenv from 'dotenv';
dotenv.config();

Uncaught SyntaxError: Cannot use import statement outside a module 에러가 바꼇다

사용할수가 없다고 한다.ㅋㅋㅋ

 

 

다시 진정하고 환경변수를 왜쓰는지부터 차근차근 짚어갔다.

우리가 외부의 api를 사용하거나 데이터나 설정값들을 저장할 때 비밀번호나 id, api 인증키 같은것들은 변하지 않기 때문에 상수로 선언하여 지정해놓고 사용한다.

이러한 정보들을 저장하는데 사용하는걸 환경변수라고 한다.

 

환경변수

주로 애플리케이션의 설정, 비밀번호, API키 등과 같은 민감한 정보를 저장하는데 사용합니다.

 

환경 변수를 사용하는 이유

1. 보안  - 중요한 정보들은 소스 코드에 하드코딩하지 않고,      환경 변수를 통해 외부에서 설정할 수 있도록 하는 것이 보안적으로 안전합니다.     즉, 소스코드가 공개되어도 중요한 정보는 외부에서 관리 되기때문에 더 안전합니다. 

 

2. 유연성  - 애플리케이션의 설정을 손쉽게 변경할 수 있습니다.    개발 환경, 텡스 환경, 프로덕션환경등에서 서로 다른 호나경 변수 값을 사용하여 애플리케이션을 설정할 수 있습니다. 3. 쉬운 관리  - 각각의 값들을 중앙에서 쉽게 관리할수 있어 설정이나 비밀번호가 변경되면 환경 변수만 업데이트 하면되므로     유지보수가 용이합니다.

 

여기서 우리는 아! 프라이빗한 정보를 숨기기위해서 환경변수를 사용하는구나! 를 알수가 있었다.

 

그 다음 env가 뭔지 알아봤다.

 

env (environment)

  - 프로그램이 실행되는 환경에 관련된 정보를 담고 있는 변수를 말한다.

  - 이러한 환경변수는 애플리케이션의 동작을 제어하거나 구성하는데 사용된다.

  - 소프트웨어 개발에서 env는 주로 설정이나 민감한 정보와 같은 것들을 안전하게 저장하고 관리하기 위해 사용된다.

  - .env파일을 사용하여 프로젝트나 애플리케이션의 설정 정보를 저장하는데 사용된다.

  - 이러한 기능을 쉽게 다를수 있는 라이브러리인 dotenv를 사용하여 .env의 파일 설정을 읽어와 사용할 수 있다.

 

dotenv

  - Node.js 애플리케이션에서 환경 변수를 관리하기 위한 라이브러리이다.  - 이 라이브러리를 사용하면 프로젝트 루트 디렉토리에 있는 .env파일에서 환경 변수를 로드한다.  - 로드한 변수를 process.env.변수이름 이런 방식을 사용하여 객체에 설정할수 있다.

라이브러리 사용법

require('dotenv').config();

여기서 많은 구글링을 해보니 react, vue.js, 서버를 돌리는 node.js, next.js 등등 여러 곳에서 이 라이브러리를 사용하는걸 알수가 있었다.

 

여기서 궁극적인 의문..
아무것도 안쓴 순수 html, css, JavaScript에서 쓸수 있나??
그게아니라면 이정도로 오류가 날수가 있나??(약 4시간동안 구글링 및 수정 반복..ㅋㅋ)
싶은 의문이 들었다. 

 

바닐라 자바스크립트 (Vanilla JS)

  - 외부의 라이브러리나 프레임워크를 이용하지 않는 순수 자바스크립트를 말한다.

  - 라이브러리나 프레임 워크를 사용하지 않기 때문에, 그걸 사용했을 때보다 빠르고 호환성이 좋다는게 특징이다.

  - 보통 라이브러리를 통해 만든 구문은 디버그 과정에서 해당 구문과 이용 라이브러리 파일까지 조사하는데

     바닐라 JS의 경우엔 해당 구문만 조사하기 때문에 디버그하는 시간이 크게 줄어든다.

  - 라이브러리를 활용하지 않기 때문에 코드가 길어진다.

 

나는 아무런 아무 프레임워크도 쓰지 않았고 라이브러리도 사용안했으니까 바닐라 자바스크립트이지 않나?

엄청난 구글링을 하고나서 찾은것이 dotenv는 브라우저에서 직접 사용없다,

바닐라 자바스크립트에서는 외부 라이브러리를 사용하지 않으므로 사용할 수 없다.

는 글이였다...ㅋㅋㅋ

이 글만 믿고 그냥 env처럼 만들어봤다.

 

나만의 환경변수 저장법.

// ./config.js
const config = {
    API_KEY: "해당하는 api키",
  };
  export default config;
  
 // ./ test.js
 import config from "./config.js";
 const { API_KEY } = config;
 
 // ./test.html
     <script type="module" src="./test.js"></script>

이렇게 해주었다.

 

그런뒤 github에 올릴때

.gitignore파일을 만들어서 config.js 파일이름을 적어 github에 올라갈 때 무시하고 올라갈수 있도록 했다.

이러면 일단 github Page로는 배포를 해도 제대로된 배포를 할 수 없지만 서버를 올린다고 했을땐 내 로컬에는 인증키가 있으니 작동을 잘 할것이고 중요한키는 공유가 안됏으니 이것도 하나의 env처리가 된건가..?

확실히 답나온게 없어서 솔직히 잘모르겠다..

 

 

일단 오늘은 개념이라도 잘 잡아간거 같아서 다행이다..

 

 

git .ignore적용하기

Project에 원하지 않는 Backup File이나 Log File , 혹은 컴파일 된 파일들을 Git에서 제외시킬수 있는 설정 File이다.

그냥 .gitignore폴더를 만들고 안에 제외시킬 file이름만 적어주면 된다. 주석은 #

 

 

 

 

배워나가는 코린이 입니다!!

부족한게 있다면 댓글로 지적해주세요!! 감사합니다!😊