Closed jyh7a closed 4 months ago
답변을 늦게 드린 점 죄송합니다...
정영훈 튜터님 좋은 피드백 및 꼼꼼한 설명 감사합니다 튜터님 피드백을 참고해서 수정해보겠습니다.
네 고생하셨습니다👏
commit 내역 보니 파일분리랑 이슈에 대한 수정이 된 거 같네요! 이슈를 다 수정 하였다면 이슈는 닫아주시면 됩니다!
모든 학생분 과제 완료하면 과제 해설 영상 나올 텐데 해설 영상에서는 어떤 식으로 파일 분리하고 관리하는지 보면 도움이 될 것입니다!
첫 번째 과제 하느라고 굉장히 고생 많으셨습니다! 아래는 이번 과제에 대한 피드백입니다.
1. 검색 기능에서 대소문자 구분없이 검색
코드 확인 하니 이 부분은 잘 작성하였습니다. 현재 코드를 조금 더 최적화하려면 반복문을 돌면서 search_input을 소문자로 만드는 것은 한 번만 처리해 주도록 하는 게 효율적입니다.
예)
2. addEventListener 를 통해 ES6 화살표함수 표기법으로 할 시 this를 사용 방법
화살표 함수를 사용하면 this 대신
event.currentTarget
을 이용하여 이벤트가 발생한 요소에 접근할 수 있습니다.예)
3. 페이지네이션을 구현에 참고할만한 자료
페이지 네이션을 구현 하려면 중요한 요소가
화면에 보여질 페이지의 마지막 페이비 점호
이 정도가 있습니다. 각각의 로직을 구하는 방법이나 그림으로 설명이 아래 블로그에 자세히 나와 있으니 이 블로그 참고하여서 한번 영화 dummy data 123개 정도 로컬에 생성 후 페이지 네이션 테스트해 보길 바랍니다. 참고: https://yonghwankim-dev.tistory.com/578
4. 변수명 수정
https://github.com/KR-EGOIST/TopMovieSearch/blob/271cb072daa70af4b46593ee72d3b9331d064fe9/index.js#L10
$
접두사는 일반적으로 jQuery로 만든 DOM 요소를 지칭하기 때문에movieList
또는movieListElement
로 작성하여 제이쿼리를 모르는 분들이 코드를 보았을때 혼란을 주지 않도록 하면 좋습니다.예시)
5. Async/Await 사용
https://github.com/KR-EGOIST/TopMovieSearch/blob/271cb072daa70af4b46593ee72d3b9331d064fe9/index.js#L14-L19
.then()
을 사용하는 프로미스 체인보다async/await
를 사용하여 가독성을 높이면 좋습니다.예시)
6. 기능 분리에 대한 SOLID 원칙 적용
https://github.com/KR-EGOIST/TopMovieSearch/blob/271cb072daa70af4b46593ee72d3b9331d064fe9/index.js#L13-L43
이 코드는 데이터를 가져오고 DOM을 조작하는 두가지 작업을 수행 합니다.
SOLD에서 단일 책임 원칙(SRP)에 따라 하나의 함수는 하나의 기능
을 가지는 것이 가독성 및 유지보수에도 도움이 됩니다. 이 함수를예시)
function displayMovies(movieList) { let temp_html = ''; movieList.forEach((movie) => { const img_url =
https://image.tmdb.org/t/p/w500${movie['backdrop_path']}
; temp_html += `${movie['title']}
${movie['overview']}
⭐ ${movie['vote_average'].toFixed(1)}
## 7. 파일 분리 현재 프로젝트는 index.js 하나의 파일로 만들어져 있습니다. 기능을 별도의 파일로 분리하는 것은 가독성 및 애플리케이션이 확장되는 데 도움이 됩니다. 파일을분리하여 관리하기 쉽고, 코드를 재사용할 수 있도록 만들어 줍시다.
예) ``` /js /api.js // 모든 fetch 요청 /ui.js // DOM 조작 /movie-search.js // 영화 검색 /main.js // 메인 모듈 ```