Next.js 13 (클론코딩-완성) #3

완성!!!

https://github.com/BTSBRINGMEHERE/airbnb-clone

완성된 깃허브 주소

 

메인화면과 나의 예약화면입니다.

 

그리고 예약하는 모습입니다. 당연히 로그인이 되있어야하고 예약이 완료가되면 중앙 윗부분에 완료되었다는 토스트 팝업창이 뜨고 나의 예약에 들어가시면 예약이 되었다는 모습입니다.

---

정리

많은 것을 배울 수 있었습니다.

• 첫 번째는 당연하게도 Nextjs 13버전에 관한 내용입니다. 폴더 구조나 api 활용법 그리고 Next 패키지 사용법을 배울 수 있었습니다.
• 두 번째는 prisma, mongodb에 대하여 조금이나마 배울 수 있었습니다. 프론트엔드로서 프로젝트를 만들 때 firebase와 함께 사용할 수 있을 것 같습니다.
• 세 번째는 auth-api 와 type관리입니다. next/auth라는 패키지를 이용하여 next와 prisma그리고 mongodb까지 아우르는 인증관리를 배울수 있었고 Omit이라는 타입을 처음 사용했습니다. Omit은 간단하게 기존에 정의된 타입에서 해당타입을 제외한 타입만 return하는 함수입니다. createdAt, updatedAt 등 변화가 필요한 타입에 사용을 했습니다.
• 마지막으로는 모달창 관리, 마크업 관리입니다. 혼자 프로젝트를 진행하면서 어떻게 컴포넌트를 분리할지 모듈화할지 고민이 많았습니다. 해당 영상을 보면서 많은 생각이 줄고 이런식으로 하면 되구나를 배웠습니다.

이번 클론코딩을 마지막으로 다음에는 Vue 아니면 Nextjs 또 다른 클론코딩을 해보고 싶습니다.(해당 유튜버 분이 스포티파이 클론 코딩 새롭게 만드심) 사실 three.js를 이용해서 포트폴리오를 더 다듬을까 시도를 해봤지만 우선 제가 할 수 있는 디자인 툴이 아무것도 없기에 포기를 했습니다. 기회가 된다면 three.js도 도전을 해보고 싶습니다.

 

참고로 위에 사진이 얼마없지만... 기능은 다 됩니다. 진짜 마지막으로 Vercel 배포 에러 수정을 하면 다시 링크를 올리겠습니다!!

중간에 취업준비와 같이 병행하면서 만들어서 약 9~10일 정도 걸렸지만 중간에 마크업 실수, action 관리 실수, prisma table이름 실수 등 기본적인 알파벳에서 많은 실수를 범했습니다. 이러한 아주 사소한 실수가 시간을 엄청 잡아먹히므로 오타를 줄여야겠습니다!!

 

https://youtu.be/c_-b_isI4vg

Nextjs 최신버전을 배우고 싶다면 무료 클론코딩 강좌 중에서 제일 만족합니다. (조회수가 보장함)