[미션3] 코드 구조 리팩토링

[learn-programmers]

시작하기 전에

• 지난 미션에서 작성한 코드를 살펴보고 아쉬운 것들을 목록화 합니다
• 중복된 코드, 컴포넌트의 재사용과 배치, 코드 가독성, 변수, 함수(메소드)의 네이밍이 그 대상입니다.

리팩토링

검색 결과 리팩토링

• 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