## 시작하기 전에 - 지난 미션에서 작성한 코드를 살펴보고 아쉬운 것들을 목록화 합니다 - 중복된 코드, 컴포넌트의 재사용과 배치, 코드 가독성, 변수, 함수(메소드)의 네이밍이 그 대상입니다. ## 리팩토링 ### 검색 결과 리팩토링 - Intersection Observer API를 이용하여 스크롤 페이징 방식을 리팩토링 합니다. - Intersection Observer API를 이용하여 이미지가 화면에 보여야 할 시점에 load 되도록 처리합니다. - ~~event delegation 방식을 이용하여 모달 띄우기 click 이벤트 제어 방식을 변경합니다.~~(미션2에서 수행) ### async-await 도입 * API fetch 코드를 `async` , `await` 문을 이용하여 수정해주세요. 해당 코드들은 에러가 났을 경우를 대비해서 적절히 처리가 되어있어야 합니다. ### api 요청 결과 처리 * API 의 status code 에 따라 에러 메시지를 분리하여 작성해야 합니다. ### ES6, import, export * ES6 module 형태로 코드를 변경합니다. * `webpack` , `parcel` 과 같은 번들러를 사용하지 말아주세요. * 해당 코드 실행을 위해서는 `http-server` 모듈을(로컬 서버를 띄우는 다른 모듈도 사용 가능) 통해 `index.html` 을 띄워야 합니다. ### 테스트 작성 * Test suite와 각 test 의 목적을 이해하기 쉽게 기술해주세요. * 각 컴포넌트 내부에 있는 함수들이나, Util 함수들을 테스트 할 수 있게 분리합니다. ## 참조 자료 - Intersection Observer API: https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API - event delegation: https://ko.javascript.info/event-delegation - 자바스크립트 모듈: https://velog.io/@takeknowledge/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%AA%A8%EB%93%88-%ED%95%99%EC%8A%B5-%EB%82%B4%EC%9A%A9-%EC%9A%94%EC%95%BD-lwk4drjnni
