그립 컴퍼니 기업 개인 과제를 시작했다. 기업이 요구하는 기능들을 확인한 후 메인 검색 페이지부터 구현해야겠다고 생각하였다.
main search 페이지 기능
기업에서 요구하는 기능들은 다음과 같았다.
- 검색창에 검색어를 입력한 후 버튼을 누르면 영화 검색 결과가 나올 것
- 검색창은 고정할 것
- Tab은 검색과 즐겨찾기가 있을 것
- 검색 결과로 나온 영화의 poster, title, year, type을 띄워줄 것
- 스크롤을 끝까지 내리면 다음 페이지를 띄워줄 것
- 즐겨찾기된 영화 표시해 줄 것(별표 등)
- 영화를 누르면 즐겨찾기 여부를 물어보는 창을 띄울 것
오늘의 목표는 main search 페이지를 다 완성하는 거였지만 생각보다 리액트 앱 폴더 구조를 잡는 데 오래걸렸고 또 많은 에러들이 생겨 검색 결과를 띄워주는 것까지 밖에 하지 못하였다.
폴더 구조
프로젝트 할 때 사용할 수 있는 foundation 디자인에 대해서 고민을 많이 하였다. 여러 블로그 글을 읽으면서 보통 아키텍쳐 디자인으로 많이 쓰이는 MVC, MVVM도, 준형님이 언급하신 duck 구조도 파악할 수 있었다. 하지만 잘 모르는 구조를 제대로 짤 수 있을까 하는 걱정이 들었다. 또 시간이 한정되었고 수요일 부터는 팀 프로젝트도 같이 하게 되기 때문에 기능 만들기를 시작해야했다. 따라서 페이지 내에서 주 기능 별로 컴포넌트를 쪼개고 해당 컴포넌트 안에 함수와 로직 등을 넣는 기존 내가 짜던 방법으로 구조를 만들었다.
Recoil
전에 했던 프로젝트 때 Recoil을 사용했었기 때문에 다행이라고 생각했다. Recoil을 사용하게 되면 props를 굳이 컴포넌트 아래 컴포넌트로 넘겨줄 필요가 없고 바로바로 atom을 import 해서 필요로 하는 컴포넌트에 넘겨줄 수가 있다.
오늘 프로젝트를 하면서 검색창 컴포넌트를 따로 분리해서 검색창에 입력한 영화 제목을 메인 페이지에서 props로 연결해야했다. 이 때 recoil을 사용할까 했지만 한 번 밖에 불러오지 않는 굳이 상태관리 해줄 필요가 없다고 판단하여 props로 넘겨주었다.
이번 프로젝트에서 recoil은 즐겨찾기 한 영화 리스트와 각 영화 정보를 관리해줄 때 사용하면 될 것 같다.
