영화 검색 프로젝트 회고

OMDb API - The Open Movie Database

OMDB API를 이용한 영화 검색 프로젝트 제작

프로젝트

GitHub - hyeon17/searchMovie

 

---

KPT

Keep

• 컴포넌트 단위로 세분화 하여 코드의 재사용성을 올렸다.
• 기존에 JavaScript로 진행한 미완성된 프로젝트를 React로 마이그레이션 하여 프로젝트를 완성시켰다.
• 필요한 기능들을 나열해 작업의 방향성을 설정하여 목적대로 구현하였다.
• TypeScript로 진행하여 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거하였다.

Problem

• 영화를 검색하려 검색 버튼을 누르면 API 호출이 바로 가지 않고 한참 뒤에 자동 리렌더링 될 때 보내졌다.
• 즐겨찾기 데이터를 로컬스토리지로 전달하려는데 여러개가 담기지 않았다.
• 즐겨찾기 버튼을 새로고침을 하면 버튼 상태가 초기화 되었다.
• Ant Design의 번들 사이즈가 커서 프로젝트 파일의 사이즈가 커졌다.

Try

• Profiler로 리렌더링되는 부분을 확인한 결과 검색 버튼이 분리되어 있기 때문에 검색 버튼 부분만 리렌더링 되어 API호출이 이루어지지 않았음을 확인했다. 따라서 버튼을 Search컴포넌트가 아닌 Search페이지로 옮겨 페이지 전체가 리렌더링되게 수정하여 API호출이 정상적으로 이루어졌다.
• findIndex를 사용하여 동일한 아이디(고유 값)가 있다면 로컬스토리지에서 삭제시키고 없다면 새로 데이터를 추가하여 여러개를 담을 수 있게 하였다.
• 버튼에 대한 상태를 로컬스토리지에 아이디와 같이 담아 렌더링 시 상태 유무에 따라 보이게 수정하여 이전에 즐겨찾기 한 상태가 유지되게 하였다.
• import를 할때 전체를 가져오는것이 아닌 필요한것만 가져오게 수정하였다.

수정 전

import{Card, Skeleton} from 'antd';

수정 후

import Skeleton from 'antd/lib/skeleton';

import Card from 'antd/lib/card';

---

느낀점 및 마무리

처음 JavaScript를 배울 때 미완성한 영화 검색 프로젝트를 React로 다시 마이그레이션 하여 완성하니 감회가 새로웠다. 예전의 자신보단 훨씬 성장한 것을 느꼈는데 그 이유로는 프로젝트를 해왔던 경험을 토대로 미리 구조를 설계하여 예상한 기간 안에 구현할 수 있었고 또한 기능 구현에만 급급하지 않고 사용자 입장에서 생각하여 코드를 작성하는 자신을 발견할 수 있었기 때문이다.

아쉬웠던 점으로는 이때까지 팀 프로젝트를 3번이나 해와서 협업에 익숙해져 있다가 1인 프로젝트를 다시 해보니 코드에 대한 논의나 설계방식에 대한 팀원들의 의견을 들을 수 없었다.

만족스러웠던 점으로는 페이지네이션을 React에서 처음 구현해봤는데 다음 팀 프로젝트에 사용하기 전에 미리 테스트해봄으로써 구현 방법을 알게 되어 만족스러웠다.