MovieInfoApp

Slow·2021년 12월 23일
0

프론트엔드 토이프로젝트

- 프로젝트명 : MovieInfoApp

- 주제 : TMDB API를 이용한 영화 정보 제공 서비스

- 진행 기간 : 12월 16일(목) ~ 12월 21(화)

- 진행 인원 : 3명

- Github page (API key는 빠져있음)


UI 설계

완성된 UI




내가 참여한 부분

API 호출(공동)

팀원이 작성한 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개를 구현하는 방식으로 진행했다.

분명 더 나은 방식의 구현이 가능할 거라고 생각하지만 시간과 노력이 부족하여 아쉽지만 이 정도로 만족하기로 했다.

느낀점

이번 프로젝트를 하면서 느낀 점

  • 프로젝트가 간단하게 느껴질수록 실수할 확률도 높아진다.
    - 처음 시작할 때 목표가 html, css, js, react만으로 간단히 프론트엔드만 구현하는 것이었기 때문에 'api로 데이터 받아와서 대충하면 되겠지'라고 생각했지만 예상외로 구현에 걸림돌이 좀 많았고, 잔실수가 있었다.

  • 설계를 빡세게 하면 뒷탈이 적다.
    - UI 설계 단계에서부터 기능과 구조, UI에 대한 사항을 대부분 정해두고 개발에 들어갔지만 예상치 못한 문제점이나 구조적 한계로 인해 개발 도중에 계획이 변경되는 일을 겪고나서, 기획과 설계의 중요성을 깨달았다.

  • 깃과 협업툴을 잘 다루면 효율이 급상승한다.
    - 혼자하는 프로젝트가 아니고 팀원들의 역할이 분배되었으니
    각자 브랜치를 나누어 진행했다면 팀원의 코드를 살펴볼 때도 브랜치 체크아웃으로 좀 더 편하게 볼 수 있었을텐데 아쉽다.

    - 협업 도구에 익숙해질 필요성
    우리는 디스코드로 진행했지만 다른 팀이 노션을 사용하는 모습을 보니 매우 유용해 보였다.
    깃 쓸 때도 익숙하지가 않아서 pull할 때도 자꾸 충돌나서 clone을 많이 사용했다.
    프로젝트 후반에는 거의 웹으로만 수정했는데 프로젝트가 작을 때는 넘어가도 프로젝트가 커지면 엄청난 오버헤드가...
profile
터벅터벅 전진

0개의 댓글