JavaScript 개인 과제 피드백 - 정영훈 튜터

jyh7a commented 4 months ago

첫 번째 과제 하느라고 굉장히 고생 많으셨습니다! 아래는 이번 과제에 대한 피드백입니다.

1. 검색 기능에서 대소문자 구분없이 검색

코드 확인 하니 이 부분은 잘 작성하였습니다. 현재 코드를 조금 더 최적화하려면 반복문을 돌면서 search_input을 소문자로 만드는 것은 한 번만 처리해 주도록 하는 게 효율적입니다.
예)

const searchInputLower = search_input.toLowerCase(); 
let filter_movie_title = movie_title_arr.filter(
  (v) => v.toLowerCase().includes(searchInputLower)
);

2. addEventListener 를 통해 ES6 화살표함수 표기법으로 할 시 this를 사용 방법

화살표 함수를 사용하면 this 대신 event.currentTarget을 이용하여 이벤트가 발생한 요소에 접근할 수 있습니다.

예)

serach_form.addEventListener('submit', (event) => {
  event.preventDefault();
  const form = 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로 작성하여 제이쿼리를 모르는 분들이 코드를 보았을때 혼란을 주지 않도록 하면 좋습니다.
예시)

const movieListElement = document.querySelector('.movie_list');

5. Async/Await 사용

https://github.com/KR-EGOIST/TopMovieSearch/blob/271cb072daa70af4b46593ee72d3b9331d064fe9/index.js#L14-L19

.then()을 사용하는 프로미스 체인보다 async/await를 사용하여 가독성을 높이면 좋습니다.

예시)

async function fetchMovies() {
  try {
    const response = await fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options);
    const data = await response.json();
    displayMovies(data['results']);
  } catch (error) {
    console.error('Failed to fetch movies:', error);
  }
}

6. 기능 분리에 대한 SOLID 원칙 적용

https://github.com/KR-EGOIST/TopMovieSearch/blob/271cb072daa70af4b46593ee72d3b9331d064fe9/index.js#L13-L43

이 코드는 데이터를 가져오고 DOM을 조작하는 두가지 작업을 수행 합니다. SOLD에서 단일 책임 원칙(SRP)에 따라 하나의 함수는 하나의 기능을 가지는 것이 가독성 및 유지보수에도 도움이 됩니다. 이 함수를

영화 데이터를 가져오는 함수

영화 데이터를 바탕으로 영화 카드를 만들어주는 함수 로 분리 합니다.
예시)


async function fetchMovies() {
try {
const response = await fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options);
const data = await response.json();
displayMovies(data['results']);
} catch (error) {
console.error('Failed to fetch movies:', error);
}
}

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)}

`; }); movieList.innerHTML = temp_html; } fetchMovies(); ```
## 7. 파일 분리 현재 프로젝트는 index.js 하나의 파일로 만들어져 있습니다. 기능을 별도의 파일로 분리하는 것은 가독성 및 애플리케이션이 확장되는 데 도움이 됩니다. 파일을분리하여 관리하기 쉽고, 코드를 재사용할 수 있도록 만들어 줍시다.
예) ``` /js /api.js // 모든 fetch 요청 /ui.js // DOM 조작 /movie-search.js // 영화 검색 /main.js // 메인 모듈 ```

KR-EGOIST commented 4 months ago

답변을 늦게 드린 점 죄송합니다...

정영훈 튜터님 좋은 피드백 및 꼼꼼한 설명 감사합니다 튜터님 피드백을 참고해서 수정해보겠습니다.

jyh7a commented 4 months ago

네 고생하셨습니다👏

commit 내역 보니 파일분리랑 이슈에 대한 수정이 된 거 같네요! 이슈를 다 수정 하였다면 이슈는 닫아주시면 됩니다!

모든 학생분 과제 완료하면 과제 해설 영상 나올 텐데 해설 영상에서는 어떤 식으로 파일 분리하고 관리하는지 보면 도움이 될 것입니다!

KR-EGOIST / TopMovieSearch