[#2day] 프론트엔드 공부 주저리

프로젝트 수강 1일차, 현재 수업중에 준비하기만 완강한 상태이다.
그러니까 프로젝트 시작 준비의 준비라는 셈이다...😏

🎀수강 이전 강의에 대한 간단한 소개는 다음 글에 있어요!
https://coding7281.tistory.com/9

[#1day] 프론트엔드 공부 주저리

 

💥수업 이전 1day를 작성한 뒤 발생한 일이었다.

도중 파일 관리를 잘못하는 바람에 .env 파일이 날아가버렸다.
이 파일에는 기본적인 key들을 작성해 두었는데 Firebase의 비공개키 json 파일은 지우지 않았으니 확인할 수 있으나 나머지 Firebase 앱 정보를 전부 잃어버린 셈이다.
firebase는 여차저차 만들고 나서 이미 꺼버렸는데!!
이때였을까 눈이 깜깜해진게😑

아무튼 이것저것 눌러가면서 결국 앱 정보를 찾아낼 수 있었다.
먼저 최근 프로젝트에서 내가 방금 만든 프로젝트를 클릭한다. 해당 프로젝트를 클릭하면 프로젝트 개요 옆 기어 모양의 이모지를 발견할 수 있다.
해당 이모지를 클릭한 뒤 프로젝트 설정을 누르면 익숙한 화면이 보인다. (해당 프로젝트의 서비스 계정을 통해 내 앱에 Firebase Admin SDK 를 적용해줄 수 있다.) 일반 탭을 조금만 내려보면 내 앱(Web App)의 SDK 설정 및 구성을 확인할 수 있다.

해당 수업에서는 Firebase를 통해 인증과 Firebase Firestore로 데이터 관리가 들어간다.
수업을 들으면서 가장 큰 느낀점은 Firebase를 응용해본 적이 없다보니 .env 파일을 생성하는 것 이외의 것이 무척이나 생소하다는 것이었다.

Firebase를 next js에서 사용하기 위해서는 Firebase Admin SDK 를 서버에 추가하는 방법을 사용하여야 한다.
정확한 내용은 다음 공식 문서를 통해 확인할 수 있다.

https://firebase.google.com/docs/admin/setup?hl=ko#linux-or-macos

서버에 Firebase Admin SDK 추가

정확하게는 이해하지 못했기에 더 공부해야하지만, next.js에서 firebase admin sdk 를 사용하기 위하여 초기 세팅을 진행해주어야 하는데, 프로젝트 폴더 내 models라는 폴더를 생성하고 초기 세팅 파일을 한개 작성한다.

이 부분에 대해서는 차후 조금 더 공부하여 정리 및 올려볼 수 있도록 하겠다. (솔직히 조금 어려운 부분이 많다..🙄)

---

초기 세팅이 완료된 이후에는 pages 의 api 폴더 내에 있는 파일을 건드려주었다.
Next.js는 pages 폴더 내 api 폴더를 생성한다. 이렇게 되면 api 폴더 이외의 나머지는 router의 역할을 하게 되고, api 폴더 내에 있는 파일들 폴더들은 api의 url이 되는 셈이다.

조금 더 자세한 내용의 경우 API 경로에 대한 next.js 공식 문서를 활용하면 좋을 것 같다.
세상은 공부할 것 투성이..🤣
https://nextjs.org/docs/api-routes/introduction

API Routes: Introduction | Next.js

해당 수업에서는 Visual Studio Code의 많은 확장 중에 Thunder Client를 사용한다.
일종의 postman 같은 것이라고 볼 수 있는데, Client에서 보낸 요청이 정상적으로 전송되었는지 확인할 수 있다는 장점이 있고, 웹을 이용하는 것이 아닌 한 프로그램 내에서 볼 수 있다는게 큰 장점이라고 생각되었다.

처음 실행할 경우 수업과 달라 굉장히 당혹스러울 수 있는데, 사실 포털 사이트도 자세히 보면 내용을 알 수 있듯이 (예를들어 티스토리를 처음 봤을 때 스킨이 뭔가 싶을 수 있으나 들어가보면 개인 블로그를 꾸미는 것임을 알 수 있듯이?) New Request라는 것을 눌러보면 postman에 로그인 했을 때와 굉장히 비슷한 모습을 볼 수 있다.
이곳에 GET 형태로 local/api/{경로} 를 넣어주고 Send 버튼을 누르면 응답이 오는 모습을 확인할 수 있다.

---

글을 정리하면서 느낀거지만 아직 수업의 시작 전전전 단계인것 같은데 공부할 건 많은것이 느껴졌다. 개발자가 되기 위한 한걸음을 내딛는 것처럼 꼭 해당 프로젝트를 완성하고 싶다.😚