이전 게시물에도 있지만 부트캠프 과정 중에 React를 활용해 CINEBANK라는 영화 정보 검색 및 리뷰 커뮤니티 서비스를 개인 프로젝트 과제로 진행한 적이 있었다.
CINEBANK 프로젝트를 제출했을 때는 부족한 부분들도 많았고, 매우 만족스럽지 못했다.
그런데 이번에 Next.js와 Sanity를 공부하면서 배운 내용을 적용해 개인 프로젝트를 진행해보고 싶었고, 부족했던 이전 영화 커뮤니티 서비스를 기획했던 것을 토대로 새로 만들어 보고자 했다.
* 기술스택: Next.js, Typescript, Tailwind CSS, Sanity, SWR
1. 기능
이전 프로젝트와 기능적인 부분에서는 큰 차이는 없다.
1. 로그인/회원가입
- 구글 계정을 통해 로그인/회원가입 (회원가입 시 유저 데이터베이스 생성)
2. 영화 정보 검색
- 검색 시 키워드에 맞는 영화 목록 자동완성 (검색어 입력에 대해 디바운스 훅을 통한 성능 최적화)
- 포스터 클릭 시 해당 영화 상세 페이지로 이동
- 상세 페이지 하단에 영화 id를 통해 관련된 영화들을 추천
3. 사용자 관련
- 검색을 통해 사용자를 찾을 수 있고, 해당 유저를 클릭 시 프로필 페이지로 이동
- 프로필 페이지 : 사용자 정보, 작성한 게시물 개수, 사용자가 작성한 게시물, 사용자가 좋아요한 게시물 확인
4. 리뷰 작성
- 로그인된 사용자라면 영화를 검색해 고른 뒤 해당 영화에 대한 리뷰 작성 (리뷰 데이터베이스에 저장)
- 리뷰 게시판을 통해 여러 사용자들이 작성한 리뷰 확인 및 좋아요 / 댓글 작성 (좋아요 및 댓글 필드에 저장)
2. 깃허브 / 배포 링크
- 깃허브 링크 : https://github.com/jjongminmoon/Moview
GitHub - jjongminmoon/Moview: 영화 정보 검색 및 리뷰 커뮤니티 Next.js 개인 프로젝트
영화 정보 검색 및 리뷰 커뮤니티 Next.js 개인 프로젝트. Contribute to jjongminmoon/Moview development by creating an account on GitHub.
github.com
- 배포 링크 : https://moview-d83d.vercel.app/
Moview
moview-d83d.vercel.app
3. 후기
지금도 많이 부족하지만, 이전 프로젝트 코드를 다시 보면서 컴포넌트 재사용성, 성능 등 내가 당시에 부족했던 것들이 무엇이었는지 느낄 수 있었다.
그래서 이번에 공부한 Next.js와 Sanity, SWR을 적용해 처음부터 프로젝트를 진행했는데 새로 배운 기술들의 장점들을 많이 느낄 수 있었다.
Next.js는 직접 써보면서 SEO를 위한 Server-Side-Rendering을 쉽게 처리할 수 있었고, pre-rendering을 통해 빠르게 초기 로딩을 적용해 볼 수 있었다.
또한, 페이지 기반 라우팅도, <Link> 컴포넌트를 통한 페이지 간 매끄러운 이동, 이미지 최적화 등 개발자 입장에서 편리한 도구들을 제공해주는 프레임워크라고 생각했다.
Sanity는 스키마를 통해 쉽게 구조를 만들 수 있었고, sanity-studio를 통해 구조를 쉽게 파악하고 관리할 수 있었다.
또한, GROQ를 통해 데이터를 쉽게 조회하고 가져올 수 있었고, 콘텐츠를 쉽게 관리할 수 있다는 느낌을 받았다.
Tailwind css는 전에 사용해본 적이 있지만, 컴포넌트 내에서 코드가 좀 지저분해지는 경향이 있어서 나와는 맞지 않는다는 생각이 들었다.
결론은 이전보다 더 빠르게 서비스를 만들어 배포까지 할 수 있었고, 성능 측정에서도 전보다 우수했다. 아직 배울게 많지만 조금 성장했다는 것을 느낄 수 있는 프로젝트였다.
