Next.js 캠프 3주간의 사전직무교육이 끝났다. 😀
마지막 주차에는 Next.js를 배웠다. Next.js 설치부터 인증인가, vercel을 활용한 배포까지 한주만에 엄청 많은 내용을 배운 것 같다.

Next.js와 React의 차이

이번 주에 배운 Next.js와 React의 차이 중 하나는 앱라우터를 활용한 라우팅 경로 지정 방식이다. React는 클라이언트 측 라우팅을 사용하지만, Next.js는 서버 측 렌더링을 지원하며 파일 기반의 라우팅 시스템을 제공한다. React처럼 별도의 코드 작성 없이 폴더와 page.tsx 파일 생성만으로 라우팅 설정이 가능하다는게 신기했다. 더 직관적이고 편하게 라우팅 설정을 할 수 있어서 편하다고 느끼면서도, 한편으로는 폴더구조가 점점 복잡해지니 똑같은 page.tsx의 연속이라 어지럽게 느껴지기도 했다. 그래도 파일 구조만으로 라우팅 설정이 가능하다는 것은 엄청난 장점인듯

Next.js와 mongoDB

MongoDB는 NoSQL 데이터베이스로, Json와 유사한 문서 형식으로 데이터를 저장한다. Next.js와의 연결을 통해 서버 사이드에서 MongoDB에 접근하고, 필요한 데이터를 가져와서 렌더링하는 과정을 구현해보았다.

MongoDB 사용을 위해 Mongoose 라이브러리를 사용했다. Mongoose를 통해 MongoDB 데이터베이스를 연결하고, 스키마를 정의하여 데이터를 구조화하였다.

NextAuth

또한, Next.js에서의 인증도 경험해보았다. NextAuth는 다양한 인증 제공자와의 통합을 쉽게 할 수 있게 해주는 라이브러리다. mongoDB를 사용하는 방식과, github 로그인 사용 방식을 구현해보았다. NextAuth를 설정하여 사용자를 인증하고, 로그인한 사용자 정보를 안전하게 관리할 수 있었다. 이를 통해 로그인 상태에 따라 접근 권한을 제어하는 방법을 배울 수 있었다.

강사님을 따라 실습을 진행하던 도중, 오류가 발생했다. 회원가입은 문제 없이 작동하고, DB에 사용자 데이터가 저장된 것을 확인했는데 로그인을 시도하면 오류가 발생했다. 어디서 무슨 오류가 발생하는건지도 안 알려주고, 그냥 문서를 더 읽어보라고 메시지를 띄워서 화가 났다. 코드를 계속 확인해봐도 문제가 없고, 강사님께서 주신 코드를 실행시켜도 문제가 발생해서 결국 해결하지 못했다. 인증에 대해 더 알아보고, 해결 방법을 알아봐야겠다.

Next.js와 MongoDB를 활용해보면서 백엔드와 프론트엔드를 통합하여 활용하는 방법을 배운게 가장 마음에 들었다. 앞으로 7주간 진행되는 프로젝트에서 이런 기술들을 적용해보면서 Next.js를 능숙하게 활용할 수 있는 개발자로 성장하고싶다.

느낀점

React는 사용한 경험이 있어 쉽게 따라갈 수 있었는데, Next.js는 처음 배우는 것이여서 따라가기 조금 힘들었다. React와 다른 점이 많고, 서버니 클라이언트니 고려할 점이 많아 더 어렵게 느껴지는 듯 하다. 그래도 DB와 연동하여 사용하는 등 별도의 백엔드 없이 바로 처리할 수 있는게 매력적으로 느껴졌고, 앞으로 열심히 공부해야겠다!

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

#유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프 #Next.js #프론트엔드개발자양성과정 #개발자교육과정