KDT5 정재현 2차 과제 다시 제출합니다 #81
Conversation
| store.state.message = '' | ||
| } | ||
| try { | ||
| const res = await fetch(`https://omdbapi.com?apikey=7035c60c&s=${store.state.searchText}&page=${page}`) |
There was a problem hiding this comment.
fetch를 사용하여 HTTP 요청 로직을 상태관리 로직과 분리하여 관리할 수 있을 것 같아요. 아래의 getMovieDetails 메서드 내에서도 동일하게 fetch를 통한 HTTP 요청 로직을 사용하고 있는데, 이 둘을 분리하여 HTTP 요청을 진행하는 로직은 따로 두는 것이 추후 유지보수할 때, 도움이 될 것으로 보입니다.
| <div class = "the-loader hide"></div> | ||
| ` | ||
|
|
||
| const moviesEl = this.el.querySelector('.movies') |
There was a problem hiding this comment.
영화 목록 태그를 클래스명으로 조회하고 있는데, CSS 특이성에 따르면 구현하신 페이지 내에서 MovieList 컴포넌트는 하나만 사용되므로 클래스명이 아닌 ID를 통해서 요소를 조회하는 것이 더 효율적일 것으로 보입니다. 이와 마찬가지로 아래의 loadEl 또한 ID를 통해서 조회하는 방식을 검토할 수 있을 것 같아요! 클래스명을 사용하여 조회해야한다면 그 이유도 설명해주실 수 있을까요?🤔
| import NotFound from './NotFound' | ||
|
|
||
| export default createRouter([ | ||
| { path: '#/', component: Home }, |
There was a problem hiding this comment.
현재 모든 페이지가 #을 포함하고 있습니다. movie라는 단어가 해당 페이지에 대한 의미를 내포하듯, URL에서 모든 문자는 의미를 가져야하는데요. #는 어떠한 의미를 가지고 있는지 설명해주실 수 있을까요?
|
현재는 단 하나의 커밋으로 모든 변경사항을 반영하고 계신데요. commit 메시지 또한 기능별로 구분하여 커밋을 진행해보는 것을 추천드립니다. 기능별로 구분하는 경우에 추후 백업이 필요한 시점에 각 기능별로 반영할 수 있으며, 메시지만으로도 충분히 현재 재현님의 프로젝트의 과정을 파악할 수 있기 때문입니다:) |
넵. 다음 프로젝트부터는 기능별로 커밋을 진행해보겠습니다! |
상세하고 도움이 되는 리뷰, 조언 감사합니다 멘토님. 아직 부족한 점이 너무나 많지만 조금씩 발전해나가도록 하겠습니다. 즐거운 하루 되세요! |
다시 제출합니다!
결과물 확인
https://gorgeous-strudel-822e66.netlify.app/