기업협업 1주차..위코드 1차 프로젝트때 했었던 로그인과 회원가입 페이지 기능 구현을 했던 경험을 바탕으로 Error handling을 어찌저찌 해냈다 ! 그리고 나에게 닥친 dotenv
라는 처음 본 녀석 ^^ 하핫 정말 새로워 짜릿해(반어법 맞음) 난 배운적이 없지만 그래도 해내야겠지..? 다행히 정보를 늘 떠먹여 주시는 사수님 덕분에 해결해냈다. 사수님 정말 감사합니다..
그리고 구글링도 개발자의 능력이라고들 하는데 정말 맞는말! 왜냐면 나는 아직 구글링을 어떻게 해야하는지도 잘 모르는 것 같음! 그냥 냅다 키워드만 검색하는데..내가 간절히 원하는 정보를 한번에 얻기란 쉽지 않다 ㅠㅠ stackoverflow에 모든 정보가 있다지만 번역기를 돌려도 이해하기 너무 어렵쟈나??
넋두리는 그만하고 벨로그 정리 고고 기기 기릿 게릿 레고🎈
dotenv
는 환경변수를 .env
파일에 저장하고 process.env
로 로드하는 의존성 모듈이다.dotenv
를 사용하는 이유는 개발을 하는 과정에서 서버주소, 고유 API KEY 값 등 필요한 정보를 저장하게 되는데, 이 정보들은 보안이 꼭 필요하다. 만약 이러한 정보들이 오픈소스(github)에 공개될 경우 해킹을 당하거나 보안적인 면에서 위험할 수 있다.dotenv
패키지를 사용함.dotenv
이녀석 정말 중요한거잖아...?
그냥 단순하게 말하자면 외부에 절대로 알려져서는 안되는 정보들을 보안해준다!
이것 같음.
찾아보니 프론트 개발자에게도 필요한 정보지만 백엔드에서 주로 다루는? 정보인가보다.
프론트 개발자라서 html,css,javascript,react..위주로 공부를 했지만 시간이 지날수록 백엔드 포지션에 관한 지식도 정말 필요하다는 생각이 든다. 무엇보다도 보안은 말해뭐해 제일 중요한거거덩요
npm install dotenv
dotenv
를 install해도 안됨..에러도 없음...근데 외않되냐고....?에..?!fetch
부분에 console.log
찍어봐도 404
에러 와다다다...멘탈 와르르..붕르르...
'도와줘요 사수님..!..help me...!'
"dotenv
와 dotenv-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
사용 시 주의 사항💥
- 프로젝트의 루트 디렉토리 (src와 같은 선상)에서
.env
폴더를 만들어주기REACT_APP_
이 꼭 붙어있어야 함!- 띄어쓰기나 따옴표나 콜론이 있으면 안됨
(프리티어 오류가 뜰 수는 있으나 무시하기)package-json
에dotenv-webpack
깔렸는지 확인하기
그리고 gitignore
에 .env
가 잘 깔렸는지도 확인하기
(기본적으로 gitignore에 깔려있긴함)