팀원이 작성한 API 호출 함수 movieCall
async와 await를 사용해 내가 개량한 API 호출 함수 callMovie와 getActors
이 프로젝트는 react를 사용한 함수형 컴포넌트 방식으로 구현했는데
비동기로 작동하는 hooks를 쓰다보니 useEffect 안에서 state를 쓴다거나 할 때 아직 업데이트 되지 않은 state 값 때문에 많이 헷갈렸음.
useEffect에 상태변화를 참조할 대상을 배열로 주는 방법과 비동기 함수를 만들 때 사용되는 promise, async, await를 사용하여 돌아가게 만들긴 했는데 완벽히 이해하지는 못함.
영화 정보를 정렬하는 함수 filter
useEffect를 사용해 검색창에 입력된 검색어가 포함된 영화 정보만 남기는 함수
프로젝트에서의 영화 정보 플로우 차트
영화 정보를 fetch하여 담아두고 그 사본을 만들어 마음대로 조작하다가 초기화할 때는 다시 원본을 카피하여 원상복구 시키는 방법을 사용했었는데,
영화 정보를 조작하는 기능이 정렬, 검색 이렇게 두 가지여서
각자 돌아가는 건 문제가 없지만 두 기능이 동시에 적용 되었을 때가 문제였다.
원본 -> 정렬 -> 검색 이 순서로 적용된다면 이를 사본 1개로 구현할 경우 현재 적용되어 있는 정렬 필터를 상태값으로 두고, 검색 수행 후 초기화할 때마다 (원본 -> 사본 -> 사본에 정렬 필터 적용)를 수행해야 한다.
사본 2개로 할 경우 원본 -> 정렬용 사본 -> 검색용 사본 순서로 사본을 생성하여 각 기능에서 초기화를 할 때 한단계 위의 원본을 참조하도록 해야한다.
영화 정보를 담은 component 클릭시 modal창을 띄울 때 추가로 출연 배우 정보를 fetch해야하기 때문에 이미 속도면에서 아쉬운 성능이었고,
(영화 정보는 TMDB API에 /movie/popular로 인기순으로 받아왔고, 배우 정보는 /movie/{movie_id}/credits로 개별적으로 받아와야 했다)
이번 프로젝트의 영화 정보량은 object 200개 정도의 작은 분량이었기 때문에 공간복잡도의 n값이 충분히 작다고 판단하여 사본 2개를 구현하는 방식으로 진행했다.
분명 더 나은 방식의 구현이 가능할 거라고 생각하지만 시간과 노력이 부족하여 아쉽지만 이 정도로 만족하기로 했다.
이번 프로젝트를 하면서 느낀 점