🎬 OMDb API 활용 영화검색 사이트 만들기
🔗 배포 링크
📅 과제기간
- 2022.10.27. ~ 2022.11.6.
(이후 +모듈화, 버그수정, 피드백 반영)
🔨 사용 기술
- HTML/CSS, 부트스트랩
- 바닐라 자바스크립트
📃 설명
- 동적인 요소 모두 바닐라 자바스크립트로 구현했습니다.
- 해시변화를 이용해 영화 검색화면과 상세정보를 구분하여 보여주는 spa로 만들었습니다.
- 1차과제에서 아쉬움이 남았던 반응형 화면을 구현하기 위해 bootstrap을 이용하여 좀 더 간단하게 반응형으로 구현할 수 있었습니다.
- 무한스크롤, 로딩 애니메이션 등의 추가 기능을 구현하였습니다.
API 영화검색 리스트
로딩화면
상세정보 화면
✍ 아쉬운 점 / 어려웠던 부분
- bootstrap 라이브러리 사용이 능숙하지 않아 영화 상세정보를 불러오는 동안 보여지는 skeleton ui 에 부트스트랩 placeholder-glow 애니메이션을 적용하고 싶었으나 해당 클래스를 적용하면 기존에 지정했던 높이값과 배경색대로 화면에 출력되지 않고 사라지는 문제로 적용하지 못했습니다.
각 기능/함수별로 js를 모듈화 하고 싶었으나 검색했던 영화 타이틀/페이지 값을 전역변수에 할당하고 그 값을 사용해야하는 함수가 다른 모듈에 있는 경우 기능이 제대로 작동하지 않았고, 그 부분을 해결하지 못해 결국 하나의 파일로 작성했습니다.- 박영웅강사님 js수업을 통해 store개념을 알게되어 전역변수로 쓰던 것을 store 객체데이터에 저장하여 위 문제를 해결하고 모듈화 해보았습니다.
- 제목을 입력하지 않고 검색한 경우와 검색 후 불러올 목록이 더이상 없는 경우, 초기화면에서 무한스크롤이 적용된 경우, 이전에 검색했던 페이지 값이 남아있어 화면전환시 누적되어 나타나는 경우 등 각각 다르게 처리해 주어야하는 부분이 어려웠고, 미리 예상하지 못한 에러가 나타나 하나씩 조건을 추가하다보니 함수 하나의 길이가 길어지고 그런 함수들이 서로 얽히고 복잡해져 관리하고 버그를 잡는데 어려움이 있었습니다.
🏁 주요 코드리뷰
-
불필요한 최초 호출
- 확인용도로 최초 호출했던 코드를 지우지 않고 계속 만들어 나가다보니 그 화면을 기준으로 기능을 덧붙여 불필요한 최초호출이 들어가 있었다. 그러다보니 첫 화면에 잠깐(api호출 동안) 정리되지 않은 ui가 보여지는 문제도 있었다.
- 불필요한 최초 호출을 없애고 detail화면을 처음부터 display:none;처리하였다. 그리고 호출없이도 input받는 부분을 display: flex;값을 주어서 api 호출 없이도 정리된 화면을 보여주도록 수정하였다. js로 css의 많은 부분을 컨트롤하다보니 기본에 신경쓰지 못한거 같다. 반성해야하는 부분...🙄 -
deprecated 관련
- keyCode와 substr과 같은 deprecated된 이벤트와 메소드대신 key/substring 혹은 split를 사용하는게 좋겠다는 리뷰를 받았다. 사용하려는 이벤트, 메소드에 대해 좀 더 확인하고 사용할 필요가 있다고 느꼈다.event.keyCode === 13 const id = location.hash.substr(9) ? location.hash.substr(9) : 'tt2294629';
👩💻 최종 느낀점
- 꼭 부트스트랩이 아니더라고 css 프레임워크 한 가지를 익혀서 사용하면 굉장히 빠르게 스타일링이 가능할 거 같다.. 익숙하지 않아 제대로 활용을 못한 것이 아쉬웠다.
- api를 활용한 첫 과제인 만큼 부족한 점이 많았다고 생각한다. 뒤로가기 버튼을 눌렀을 때 등 가끔 해시정보가 바꼈지만 화면이 바로 전환되지 않는 경우와 같이 컨트롤하지 못한 부분이 있었다. 현업에서는 실제로 어떻게 라우팅을 하는지, 서버 및 db와 어떻게 통신하고 정보를 가져와서 화면에 뿌리는지 그 과정/흐름에 대한 이해가 더 필요하다고 느꼈다.
