WIL 바닐라 자바스크립트로 구현한 영화 검색사이트

1차 과제였던 클론코딩 후 

2차 과제로 영화검색 사이트를 제작했다.

영화 API를 들고와서 구현하는 검색사이트였다.

 

이번 영화 검색사이트를 제작하면서 비동기에 대해서 많이 배우게 된거 같다.

그리고 Jquery, React, Vue를 사용하지않고

바닐라 자바스크립트로 구현하다보니 자바스크립트에 대해서도 공부를 할 수 있는 계기가 되었다.

 

Vue를 사용해서 영화검색 사이트를 만들었던 경험이 있지만

바닐라 자바스크립트로 구현하는건 또 달랐던거 같다.

1년도 채 되지 않았는데 같은 API를 사용하는데도 사용하는데 힘이 들었다..

역시 코드를 짜고나면 바로 기억속에서 사라지는거 같다...

 

Movie Search

코드를 짜고 Readme.md에 정보와 리뷰를 간략하게라도 적는 습관을 들여야할거 같다..! ㅜㅜ

---

구현한 기능들

- 영화 검색

- 검색 시 글자수 제한 ( 현재 API에서는 3글자 이상 검색해야 정보가 나온다. )

- 무한스크롤 적용 ( Intersection Observer API )

 

- 상세정보 창 특정 영역 밖 클릭 시 닫힘

- scrollTop

- 로딩 애니메이션, Flip 애니메이션 (css로 구현)

- 이미지 리사이징

- 대체 이미지 적용

- 검색정보가 없거나 글자 수 제한 에러에 대한 대응

---

영화 검색

- 영화 api를 들고와서 movie 카테고리로 정렬했다.

- 영화 정보 호출 함수를 만들고 각 정보를 렌더링 하는 함수에서 정보들을 넘겨주었다.

- click, enter를 할때마다 정보 넘겨주기

 

검색 시 글자수 제한

- input 이벤트로 현재 글자 수 체크

- closest으로 순회

- 조건으로 글자수, 영문 유효성 검증

- nextSibling로 텍스트 추가

 

무한스크롤 적용

Intersection Observer API 사용방법

상세정보 창 특정 영역 밖 클릭 시 닫힘

- 이벤트 target을 이용해서 target이랑 다를 때 조건을 적용

 

scrollTop

- gsap으로 구현

 

로딩 애니메이션, Flip 애니메이션 (css로 구현)

- 로딩 애니메이션 : 영화정보 호출 시 정보가 있을 때, 없을 때 / 상세정보 및 스크롤시 display속성으로 구현

- Flip 애니메이션 : 앞, 뒤 요소를 두고 transform으로 구현

 

이미지 리사이징

- 기존 사이즈 해상도 수정

 

대체 이미지 적용

- poster URL주소를 못들고오면 대체 이미지 적용

 

검색정보가 없거나 글자 수 제한 에러에 대한 대응

- undifined, response 값에 따라 에러 대응

---

Review

 

- 예상치 못한 에러들이 발생하는게 생각보다 많았고, 에러들을 해결하는 방법에 대해서 고민해야할것 같다.

- 코드를 짤때 모듈로 나누고 함수를 나눠서 진행하는게 필요한거 같다.

- 라이브러리가 왜 필요한지 알거 같다..

 

 

이번 메가바이트스쿨 프론트엔드 과정에 들어온지 1달동안 생각보다 많은걸 배웠다.

git으로 프로젝트를 관리하거나, 자바스크립트 언어에 대한 습득도 더 빨리 되고 있다. 이해도가 낮았는데 이제는 어느정도 메서드, 함수에 대해서 이해도가 올라간거 같다.

이번주안에 자바스크립트를 어느정도 정리하고 타입스크립트, 리액트를 들어가야할거 같다!