dotenv...? .env..? 이게몽데요..😶띠용때용..?

🙋🏻‍♀️·2022년 6월 30일
0

공부해보자고

목록 보기
5/10

기업협업 1주차..위코드 1차 프로젝트때 했었던 로그인과 회원가입 페이지 기능 구현을 했던 경험을 바탕으로 Error handling을 어찌저찌 해냈다 ! 그리고 나에게 닥친 dotenv라는 처음 본 녀석 ^^ 하핫 정말 새로워 짜릿해(반어법 맞음) 난 배운적이 없지만 그래도 해내야겠지..? 다행히 정보를 늘 떠먹여 주시는 사수님 덕분에 해결해냈다. 사수님 정말 감사합니다..

그리고 구글링도 개발자의 능력이라고들 하는데 정말 맞는말! 왜냐면 나는 아직 구글링을 어떻게 해야하는지도 잘 모르는 것 같음! 그냥 냅다 키워드만 검색하는데..내가 간절히 원하는 정보를 한번에 얻기란 쉽지 않다 ㅠㅠ stackoverflow에 모든 정보가 있다지만 번역기를 돌려도 이해하기 너무 어렵쟈나??
넋두리는 그만하고 벨로그 정리 고고 기기 기릿 게릿 레고🎈



✔️dotenv ?

  • 환경변수. 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는 동적인 값들의 모임.
  • 컴퓨터로 하는 모든 작업들은 OS라는 프로그램에 의해 실행되는 자식 프로세스인데 이 프로세스를 실행시킬 때 OS입장에서 참조하는 변수가 바로 환경번수이다.
  • dotenv는 환경변수를 .env 파일에 저장하고 process.env로 로드하는 의존성 모듈이다.
  • dotenv를 사용하는 이유는 개발을 하는 과정에서 서버주소, 고유 API KEY 값 등 필요한 정보를 저장하게 되는데, 이 정보들은 보안이 꼭 필요하다. 만약 이러한 정보들이 오픈소스(github)에 공개될 경우 해킹을 당하거나 보안적인 면에서 위험할 수 있다.
  • 위와 같은 문제를 방지하기 위해 개발 초기 세팅 단계에서 dotenv패키지를 사용함.



😦...? 뭐야 이거 엄청 중요한건데..?

dotenv 이녀석 정말 중요한거잖아...?
그냥 단순하게 말하자면 외부에 절대로 알려져서는 안되는 정보들을 보안해준다! 이것 같음.
찾아보니 프론트 개발자에게도 필요한 정보지만 백엔드에서 주로 다루는? 정보인가보다.
프론트 개발자라서 html,css,javascript,react..위주로 공부를 했지만 시간이 지날수록 백엔드 포지션에 관한 지식도 정말 필요하다는 생각이 든다. 무엇보다도 보안은 말해뭐해 제일 중요한거거덩요


✔️dotenv 설치

npm install dotenv

그런데 dotenv를 install해도 안됨..에러도 없음...근데 외않되냐고....?에..?!

fetch 부분에 console.log 찍어봐도 404에러 와다다다...멘탈 와르르..붕르르...


'도와줘요 사수님..!..help me...!'



🗨️사수님 says

"dotenvdotenv-webpack이 있는데 웹팩으로 한번 다시 설치해보시겠어요?"



웹팩...? 이런게 또 있ㄴㅔ...? 똑같은게 아닌가..?

dotenv-webpack은 프론드쪽에서 사용할 수 있게끔 나온것이라고 하셨음.



⭐일단 내가 할 일(했던 일)⭐

1.dotenv를 지워야함.
2. 터미널에npm uninstall dotenv
(설지했던 dotenv 삭제하는 작업)
3. node-modules 파일 전체삭제
4. package-rock-json 파일 삭제
5. npm i dotenv-webpack
6. npm install



💥dotenv사용 시 주의 사항💥

  1. 프로젝트의 루트 디렉토리 (src와 같은 선상)에서 .env폴더를 만들어주기
  2. REACT_APP_ 이 꼭 붙어있어야 함!
  3. 띄어쓰기나 따옴표나 콜론이 있으면 안됨
    (프리티어 오류가 뜰 수는 있으나 무시하기)
  4. package-jsondotenv-webpack 깔렸는지 확인하기



그리고 gitignore.env가 잘 깔렸는지도 확인하기
(기본적으로 gitignore에 깔려있긴함)



0개의 댓글