[유데미x스나이퍼팩토리] 프로젝트 캠프 Next.js 1기 - 14일차

 

14일 차인 오늘은 사전직무교육이 끝이 났다. 마지막까지 정말 많은 내용을 학습했다. 

 📚 학습한 내용
- MongoDB + mongooes 복습 
- MongoDB + Router Handler 캐싱 처리
- useFormState
- 실습 : TodoList + MongoDB 연동 구현
- Next Auth 
- vercel 배포 

 

✍🏻 학습한 내용 정리 

 

내가 어제 놓친 부분을 MongoDB와 mongooes를 사용한 실습을 다시 복습했다! 놓친 부분이라 속상했는데, 복습하는 과정이 있어 너무나 좋았다!  MongoDB 회원가입을 하고 초기 세팅하는 과정은 생략되었지만, 어제 찾아서 설정해 두어서 실습을 수월하게 진행할 수 있었다. MongoDB의 대시보드 UI는 조금 어렵다. 😭  그래서 기억나는 부분들만 별도로 정리해 두었다. 

 

학습 내용 정리 노트

 

오늘 학습을 통해 제일 어려웠던 부분은 Auth.js(NextAuth)였다. Auth.js는 Next.js 프로젝트에서 사용자 인증 및 세션관리를 위한 라이브러리이다. Google, GitHub, Kakao, Line, Naver 등의 다양한 인증 공급자를 지원하고 Next.js의 서버와 클라이언트 측 모두에서 인증 및 세션 관리를 손쉽게 처리할 수 있다. 실제 실무해서도 해당 라이브러리를 사용할까? 내가 경험한 회사에서는 간편 로그인 기능을 제공하지 않아서 학습하면서 구현하는 과정이 조금 어려웠다. 아무래도 강의에서 다루어야 할 개념들이 많아 우선 코드를 따라 했지만, 구현하는 과정에서의 설명이 조금 부족해 별도로 찾아봐야 한다. mongoDB에서 유저 데이터 조회하여 회원가입과 로그인, 로그아웃을 구현하는 코드를 이해하기 위해선 꼭 복습이 필요하다고 생각되었다. 

 

 

👩🏻‍💻 학습을 통해 느낀 점 

 

오늘 강의 내용을 토대로 TailwindCSS 학습했을 때 만들었던 로그인과 회원가입 UI에 기능을 추가해 보았다. mongooes가 제공하는 메서드 사용해서 MongoDB 데이터들을 쉽게 조작할 수 있었다. 데이터를 조회하거나 데이터를 추가하는 메서드들이 제공된다. 공식문서에 더 다양한 메소들이 있길래 사용해 보려고 시도했다. Auth.js은 설정하는 부분과 제공되는 함수들이 하는 역할에 대해서는 더 추가적인 공부가 필요해 보인다. 사용법은 그렇게 어렵지는 않았다. 강의에서는 시간관계상 type을 any로 지정했지만 복습하면서는 any로 작성한 부분을 변경하였다. callbacks의 에서 사용되는 sesstion은 타입을 확장해주어야 한다. 별도의. d.ts 파일을 만들어 타입을 확장해주어야 하는데, 확장을 해주어도 error가 발생되었다. 이유는 찾아보니, token에 id가 타입추론이 제대로 되지 않았다. 그래서 sub라는 메서드로 우선 적용했다. 이럴 땐 타입스크립트가 너무 어렵다. 기능 구현보다 타입 해결하기 위한 시간이 더 소요된다.🥲

async session({ session, token }) {
  if (token?.id) {
    session.user.id = token.id; // 👈🏻 token.id의 타입추론이 잘 되지 않는다. 
  }
  return session;
 },
 
 
 async session({ session, token }) {
  if (token?.sub) {
    session.user.id = token.sub;
  }
  return session;
 },

 

회원가입/로그인/로그아웃 기능 구현 결과물

 

---

 

본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 과정(B-log) 리뷰로 작성되었습니다.

 

#유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프

#Next.js #프론트엔드개발자양성과정 #개발자교육과정