OMDb API를 사용한 영화 검색 사이트 만들기

🎫 배포 사이트

DEMO는 여기에서 확인

✍이 과제에서 나는

Vite 번들러 사용

1차 과제에서는 parcel을 사용했다면 이번에는 vite (라고 쓰고 비트라고 읽는다)를 사용하였다. 널리 사용된다는 webpack을 사용하려고 했으나 개별적으로 지정해 줘야 하는 옵션들이 굉장히 많았다. 강의를 듣고 글을 읽어봐도 현재의 나는 제대로 할 수 없을 거란 생각이 빠르게 들어 다음 과제에서 도전하기로 했다. 용량이 작은 프로그램은 vite를 쓰는 것이 속도 면에서도 좋아서 또 무엇보다 쉽다고 하길래 사용해 봤는데 정말 쉽게 사용할 수 있었다.

변수명

저번 과제에서 아쉬웠던 'BEM 론에 따라 변수짓기' 를 해보려고 노력했다.

자바스크립트로 한 발짝

처음으로 자바스크립트를 사용하여 무엇인가를 만들어 보았다.

🐞 그리고 마주친 버그들

형 변환

기본적으로 영화는 10개씩 받아와지고, 더 보기 버튼을 누르면 다음 페이지를 불러오는 식의 형태이다. 하지만 어찌 된 일인지 더 보기 버튼 한 번을 더 누르면 영화를 다 찾았다는 alert가 떴다. 처음에는 alert 함수를 잘못 적은 줄 알았다.. 과제 제출 날에서야 알게 되어서 그냥 내버릴까? 생각도 했지만, 조원 분들과 함께 디버그 중에 1페이지 후에 11페이지가 로드된다는 것을 알았고, '1번 페이지 다음에 끝 페이지로 이동하나?' 로 생각했지만 놀랍게도 이유는 1 + 1 = 11 이 되는, 자바스크립트의 형 변환이 이루어진 것이었다. 따라서 문자열을 숫자로 바꾸어주는 Number()을 사용하여 해결했다.

😲🤩console.log 를 찍어보며 디버그 하는 것이 얼마나 짜릿한 것인지 느낄 수 있었다. 다들 헐 설마 이게 왜? 하면서 찾아가는 과정이 너무 재밌었다!

is not iterable

영화 검색은 잘 되지만 결과를 받아오고나면 꼭 아래의 오류가 나타났다

fetch 되기 전에 사용된다거나, 배열 데이터가 아닌데 렌더 함수가 호출된다거나 해서 생기는 오류일 것 같다는데, 제대로 고치지 못했다. try/catch도 살짝 써보았는데 고쳐지지 않았다. 곧 멘토님의 조언을 받아 다시 해 볼 예정.

🙄 다음에는..

Readme 작성

과제를 제출하고 보니 버그가 발생되어 같은 조원분들이 나서서 봐주시려고 내 git hub에서 git clone 하려고 하니, 어떤 번들러를 사용했는지 그들은 알 수 없었다. 또 설치가 안 되어있으면 명령어로 설치해야 하는데 내가 어떠한 인폼도 해놓지 않아 굉장히 불편했다. 짧게 검색해 보니 프로그램을 사용하기 위해 어떤 패키지/프로그램이 설치/설정 되어 있어야 하는지 기재하는 것은 기본이라고 한다. 앞으로는 이런 부분도 신경 써야겠다.

출처 : 노랑박스 Readme

git hub 를 제대로 사용하자

git 사용이 서투르고 무섭다는 이유로 제대로 사용하지 못하고 있다. 이번에도 제대로 commit 하지 않고 하루에 한 모든 결과물을 모두 commit - push 했다. 내가 뭔가를 수정해서 어딘가에서 문제가 생겼는데, commit 없이 그냥 통째로 파일을 바꾸고 있으니 찾기는 더 힘들어졌다. 앞으로 협업해야 할 일들이 많은데 습관도 잘 들이도록 노력하고 commit message convention도 다시 알아보아야겠다.

기획을 해보자

아무 생각 없이 무작정 <div>부터 만들었던 html, 어떻게 동작하는지 고려하지 않았던 함수들로 인해 완성하고 보니 엉망진창(..)이라는 느낌을 많이 받았다. 잘 만든 동료들의 제작 과정을 보니 모두 "기획"이라는 구상 단계를 잘 거친듯했다. 기획이 잘 되어야 돌아갈 일을 줄일 수 있는 것 같다.

리팩토링

아직 실력이 많이 부족해서 추가로 구현해야 했던 상세페이지를 만들지 못했다. 시간이 조금 지난 후에는 상세페이지 제작과 함께 가독성을 높이는 코드로 리팩토링 해보고 싶다.