[ React Project WAVVE for mobile ]

PRESENTATION

React를 이용하여 작업한 'WAVVE' 프로젝트입니다.
슬라이드, 검색, 찜하기, 추천, 상세정보 등 사용자가 필요한 기능들을 구현하는 작업을 하였습니다.
모바일 퍼스트를 기본으로 개발한 1인 프로젝트입니다.

TMDb API를 HTTP Client 라이브러리 Axios를 활용하여 useEffect에 데이터를 불러오고
useState의 배열로써 데이터를 저장하도록 합니다.
이 과정을 마치면 페이지를 불러올 수 있도록 삼항연산자를 사용했습니다.

1. Main
슬라이드는 계속 사용했던 SwiperSlide를 사용하였고 배열로 저장된 데이터를 map함수를 활용하여 SwiperSlide를 배치했습니다.
베너는 5개 데이터만 루프 형태로 존재해야 하기 때문에 slice 함수를 활용하여 앞 5개의 데이터만 추출하였습니다.
영화를 클릭 시 해당하는 영화 페이지로 이동해야 하기 때문에 React Router를 사용했습니다.

2. 검색
검색창에서 받을 키워드는 문자열이기 때문에 useNavigate를 활용하여 키워드와 함께 검색 페이지로 이동하고
useParams로 파라미터 값을 키워드로 받아 해당하는 키워드의 데이터들을 불러오도록 했습니다.

3. 찜하기
찜하기를 누른 영화의 아이디 값을 useState를 활용하여 배열로써 추가하고
forEach 함수를 활용하여 동일한 아이디 값이 있다면 filter 함수로 동일한 아이디 값이 제외된 데이터들을 추출하고 배열하여
찜하기 추가, 제거가 가능하도록 하였습니다.


슬라이드나 영화/시리즈 파트 등 겹치는 구성이 많기 때문에 최대한 코드를 줄이고 효율적인 코드가 나올 수 있도록 설계하고 싶어서
참고할 프로젝트를 많이 찾아봤지만 프로젝트의 설계와 구성이 다르다 보니 조합하기가 힘들었습니다.
결국 전체적인 흐름만 참고하고 전체적인 설계와 기능적인 부분을 직접 코드를 짜다 보니 이게 정답일까?라는 의문이 생기기도 했습니다.
그래도 이 전에 사용했던 코드와 방식들을 이용하여 해결할 때면 정말 좋았고 여러 함수와 라이브러리를 찾게 되고 활용해 볼 수 있어서 기분 좋은 프로젝트였습니다.

Contact

Phone : 010 - 5644 - 2455
kakao talk : tkdgh8
email :  harrylkh92@naver.com
github : https://github.com/cheryea