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

jyh7a commented 4 months ago

첫 번째 과제 하느라고 고생 많으셨습니다.

코드마다 주석 잘 작성해 주셨고 select 태그를 이용해서 pagination 기능처럼 구현을 잘 해주었습니다. 아래는 코드 피드백입니다.

1. 파일 분리

기능에 따라 파일을 분리하여서 유지 보수 및 코드의 재사용성을 높입니다.

예)

/js
  /ui.js // DOM 조작 (changedPage 함수)
  /movie.js // 영화에 관련된 함수
  /main.js //  메인 모듈(페이지가 로딩되면 실행 되는 함수 작성)

2. Async/Await 사용

https://github.com/diddntjd99/SpartaMovie/blob/4c81cb4e13d1e1275a4e621a31c561735b374750/script.js#L41-L60 async/await를 사용하면 비동기 코드를 동기 코드처럼 작성할 수 있어 코드를 더욱 명확하고 이해하기 쉽습니다.
예)

async function fetchMovies(url, options) {
  try {
    const response = await fetch(url, options);

    // 서버 응답 확인
    if (!response.ok) {
      throw new Error("네트워크 상태가 좋지 않습니다.");
    }

    const data = await response.json();

    // 가져온 데이터 출력
    console.log(data);
    ...(생략)

3. 기능 분리에 대한 SOLID 원칙 적용 https://github.com/diddntjd99/SpartaMovie/blob/4c81cb4e13d1e1275a4e621a31c561735b374750/script.js#L72-L87

SOLD에서 단일 책임 원칙(SRP)에 따라 하나의 함수는 하나의 기능을 가지는 것이 가독성 및 유지보수에도 도움이 됩니다.
fetchMovie 함수는 영화 데이터를 가져오는 역할만 수행하도록 하고 UI 업데이트 및 영화 카드 작성 과 이벤트 처리는 별도의 함수로 분리하면 좋습니다.
예)

// 영화 데이터 받기
async function fetchMovie(search, page = 1) {
  let url;

  if (search === "") {
    url = "https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=" + page;
  } else {
    url = "https://api.themoviedb.org/3/search/movie?query=" + search + "&include_adult=false&language=en-US&page=" + page;
  }

  const response = await fetch(url, options);
  if (!response.ok) {
    throw new Error("네트워크 상태가 좋지 않습니다.");
  }
  const data = await response.json();
  return data;
}

// UI 업데이트 함수 작성
function updateUI(data, page = 1) {
  // UI 업데이트 내용 작성
  //기존 movieContent 내용이 있다면 삭제
  let movieContent = document.getElementById("movieContent");
  while (movieContent.firstChild) {
    movieContent.removeChild(movieContent.firstChild);
  }
  ...(생략)

  data["results"].forEach((element) => {
    createMovieCard(element);
  });
}

// 영화 카드 작성 함수
function createMovieCard(element) {
  // 새로운 div 요소 생성
  let movieCard = document.createElement("div");
  movieCard.classList.add("movieCard");
  movieCard.id = element["id"];
  ...(생략)
}

async function fetchAndUpdateUI() {
  try {
    const data = await fetchMovie("searchTerm", 1);
    updateUI(data);
  } catch (error) {
    //오류 처리
    console.error("Fetch 오류:", error);
    alert("Fetch 오류: " + error.message);
  }
}

fetchAndUpdateUI();

4.점표기법 사용

https://github.com/diddntjd99/SpartaMovie/blob/4c81cb4e13d1e1275a4e621a31c561735b374750/script.js#L89 자바스크립트에는 점 표기법과 괄호 표기법이 있습니다. 가독성면에서는 점 표기법이 좋기때문에 객체의 프로퍼티에 변수를 활용하여 접근하지 않는 이상은 점 표기법을 사용하는것이 추천 드립니다.
예)

data.results

5. 재할당되지 않는 변수는 const 키워드 사용 https://github.com/diddntjd99/SpartaMovie/blob/4c81cb4e13d1e1275a4e621a31c561735b374750/script.js#L23 https://github.com/diddntjd99/SpartaMovie/blob/4c81cb4e13d1e1275a4e621a31c561735b374750/script.js#L32

pagination 변수는 한 번 할당된 후에 다시 할당되지 않기 때문에 이 변수는 const 키워드를 사용하여 선언하는 것이 더 적절합니다. const 키워드를 사용하면 변수의 재할당을 방지하여 코드의 안정성을 높일 수 있습니다. 코드에서 pagination처럼 재할당되지 않는 변수들을 찾아서 const 로 변경해주세요.

6. console.log 삭제 https://github.com/diddntjd99/SpartaMovie/blob/4c81cb4e13d1e1275a4e621a31c561735b374750/script.js#L64

개발 과정에서 사용된 console.log는 production에서는 사용하지 않기 때문에 github에 올릴 때도 삭제해서 올려주시면 좋습니다.

diddntjd99 commented 4 months ago

피드백 해주셔서 감사합니다. 피드백대로 수정하여 push 완료했습니다.

jyh7a commented 4 months ago

네 고생하셨습니다 👍

추후에 과제 해설영상이 나갈텐데 해설영상에서는 어떤식으로 파일을 나누고 관리하는지 참고 하시면 또 도움이 될 겁니다!

수정 확인하여서 이슈는 닫도록 하겠습니다!

diddntjd99 / SpartaMovie