Movie-inner 프로젝트
1.[Next.js]Movie-inner 프로젝트 소개
Movie-inner는 TMDB API를 이용한 영화 정보 및 커뮤니티 웹이며, 나는 프론트엔드 개발을 맡았다.
2.[Next.js] indexedDB로 최근 본 영화 구현하기
Next.js를 이용하여 프로젝트를 진행하였습니다. indexedDB는 웹 브라우저에 정보를 저장하는 툴 중 하나이며, 최근 본 작품 기능을 구현하기 위해 indexedDB를 사용하기로 결정했습니다.
3.[Next.js] toast-ui editor 사용하기
토이 프로젝트에서 커뮤니티를 구현하기 위해 에디터를 사용하려 한다. 여러 에디터들이 있었으나 구현하기 간편한 toast-ui-editor 선택했다.
4.[Next.js] 프로필 이미지 업로드
회원가입 도중 프로필 사진을 업로드하는 기능을 구현하려 한다.
5.[Next.js] 댓글 & 대댓글 전체적인 Layout
커뮤니티 내의 글에 댓글과 대댓글 기능을 구현하려 한다.무작정 구현하기보다는 전체적인 Layout을 잡는 것이 좋다.
6.[Next.js] 소셜로그인
소셜 로그인 구현을 해보려 한다.
7.[Next.js]카카오 로그인 구현 해보고싶다면 필독! (프론트엔드)
카카오 로그인을 쉽게 구현해보자
8.[Next.js] 모달창 정말 쉽게 구현하기
모달 버튼 클릭하면 모달창이 화면에 뜬다.모달창은 정중앙에 위치하며 모달을 제외한 뒷배경은 어둡게 한다.뒤로가기 또는 뒷배경 클릭하면 모달창을 나갈 수 있게 한다.
9.[Next.js] Redux-toolkit 이용하여 회원가입 구현
하나의 페이지 내에서 컴포넌트만 변경하며 회원가입 진행한다. 이를 위해 Redux를 이용하여 컴포넌트와 회원정보를 관리해준다.
10.[Next.js] 영화 검색 기능 구현
헤더 창에서 영화 검색하는 기능을 구현하고자 한다.
11.[Next.js] 로그인 구현 (Silent refresh)
회원가입 이후 로그인과 로그인 유지를 구현하고자 한다. 로그인 유지 방법으로 JWT을 사용했다.
12.[Next.js] 커뮤니티 검색 기능(Material-UI)
커뮤니티 내에서 글을 검색하는 기능을 만들고자 한다.
13.[Next.js] react-query 이용한 무한스크롤 구현
유저가 데이터의 바닥에 닿으면 방해없이 스크롤을 계속하게 하기 위해 새로운 데이터를 fetch 할 것데이터를 한번에 불러오는 방법보다 효율적인 방법. react-query의 useInfiniteQuery를 사용한다.