230116 2차 개인과제: 영화API로 영화검색 사이트 만들기(feat.회고)

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

 

---

1차과제로 숨돌릴 틈 없이 2차 개인과제를 준비해야 했다.

그것은 바로 영화API로 검색사이트 만들어보기

 

디자인 욕심 내다가 또 시간을 좀 낭비했다.

그 시간에 js를 더 보기 좋게 짤 생각을 했었어야했는데 :(

그래도 1차과제 때 보단 좀 더 빨리 깨달아서 서둘러 디자인을 바꾸고

(Simple is the BEST)

 

JS구조 짜는 것에 착수 했다.

 

---

총 작업 시간

생각보다 작업시간은 오래걸리지않았다. 미루는 습관이 문제인거지 그거 외에 순수 작업시간이라 함은

4일정도? 걸렸던것 같다. 왜냐면 앞서 이야기 살짝 이야기 했던 것 처럼 디자인에 또 시간을 허비했기 때문.

원래 디즈니 플러스를 패러디하고싶다는 생각에 욕심을 또 부렸다.

아니 첫 과제에 디자인에 연연하지말자고 다짐해두고 왜 그렇게 한건지 도저히 이해할 수 없는 나자신.. 허허

 

JS로 뭘 구현해야 했나?

0. documetn.querySelector를 통해 html에 간략히 짠 구조를 불러오기

1. createElement를 활용해 요소들이 생성되게 하고

2. textContext를 활용해 API로 불러오는 요소들을 적재적소에 넣어주기

3. append를 활용해 위에서 구현한 요소들이 부모요소 안에 리스트로 출력되게 하기

4. spreadOperator를 활용해 화면에 뿌려주기

 

 

아래는 구현 후 배포한 사이트↓(오류가 많지만 그냥 구경하시라고.. ㅎㅎ)

 

Movie+

 

구현 스샷

메인페이지

디즈니 플러스... 원대한 꿈이었다.

그라데이션 효과가 이렇게 예민하고 어려울줄이야..

디자이너님이 계셨다면 그라데이션과 포스터가 잘 섞인 이미지를 불러왔겠지.. 고퀄이미지..

똥손이라 걍 자연스러운 그라데이션이 속편할거라고 생각해서 포스터 없이 저런식으로 진행.

 

+ 저 그라데이션중에 색을 뽑아서 메인 포인트 컬러로 진행하였다.

 

 

검색 후

harry라고 검색하면 나오는 화면.

사실 검색어 입력하고 엔터를 하거나 검색 버튼을 클릭해도 나오게 해뒀는데 스샷으로 찍지 못했다.

+ 로딩 부분도 출력되게했는데 api의 반응과 인터넷이 너무 빠르고(서로 소통을 넘나리 잘해버리는 것..),

스샷의 한계로 저기까지만 진행해 두었다.

(사실 개발자도구에서 인터넷 속도 늦추고 스샷 찍을수 있지만 안함)

 

 

이미지가 없는 경우 출력 되게 처리한 대체 이미지

무한스크롤도 구현해서 계속 스크롤링을하면 검색된 영화가 전부 다 나올 때까지 영화 리스트를 출력하게 했다.

우측 하단 구석에 맨위로 버튼도 넣어서 클릭하면 다시 두번째 스샷처럼 검색 바에 도착하도록 했다.

 

그리고 저 스샷에서 가장 잘보이는 기능! 대체이미지 삽입되게하기!!!

영화 목록을 출력하다보면, 이미지가 없는 영화들이 종종 있었다.

때문에 대체 이미지를 넣어줄 필요가 있었다.

 

음 우선 아쉬운 점이 너무 많다. 구현해보고싶은 것들이 몇개 있었는데

제출기한까지 원하는 퀄리티가 나오지 않아 결국 다 빼고 우선 제출 후 고도화 및 리팩토링을 하기로 했기때문.

 

희망 기술 구현으로는

0. 개봉연도로도 검색하면 나오게하기

1. 영화 상세페이지 만들기

2. 관련 기타 짜잘한 기능 추가해보기(사이트의 화려함을 위해)

3. 실시간 이미지 리사이징

etc...

 

특히나 1번 기능을 구현하는데 애를 먹었다.

생각하는데로 코딩을 짰는데 어느부분에서 막혔는지 잘 모르겠다.

우선 고도화 진행하면서 다시 코드를 보면서 무엇이 문제였고,

어떤 타이밍에 상세창이 나와야하는지를 고민하면서 다시 코드를 짜봐야겠다.