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

첫 번째 과제 완성하느라 고생 많으셨습니다. 필요한 부분에 주석으로 설명을 잘 넣었습니다. 다음에는 github에 README.md 파일도 작성해서 이 프로젝트에 대해서 전반적인 설명도 작성해 주시면 좋을 거 같습니다.

아래는 이번 과제 피드백입니다.

1. 함수 이름 수정

https://github.com/romesway/movieProject/blob/7950f6c357c2efecbaaaa094e0a2ed0fc1e7e5ad/data.js#L10 자바스크립트에서 함수나 변수명은 일반적으로 camelcase 작성합니다. getData 혹은 fetchMovie등으로 함수명을 변경하여 함수가 어떤 일을 하는지 명확하게 작성하면 좋습니다.

영화 데이터 가져올때 async/await문법으로 잘 작성해주었습니다.

예시)

async function fetchMovie() {

2. 함수 기능 분리

https://github.com/romesway/movieProject/blob/7950f6c357c2efecbaaaa094e0a2ed0fc1e7e5ad/data.js#L10-L14 SOLD 원칙에서 단일 책임 원칙(SRP)에 따라 하나의 함수는 하나의 기능만 수행 하도록 만들라는 원칙이 있습니다.

현재 getdata 함수는 영화 데이터 가져오기 + 영화 카드 만들기 두 가지 기능을 수행하고 있으니 이 기능들을 각각의 함수로 분리해 줍시다.

영화 카드 만들때 for문 대신에 forEach문을 사용해서 만들겠습니다.

예시)

// tmdb 데이터 가져오기
async function getData() {
  const response = await fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options);
  const jsonData = await response.json(); // jsonData.results - 영화모음[배열]

  // 영화모음(배열)을 순회하며 각 영화의 정보로 카드 만들기
  jsonData.results.forEach((movie) => {
    createMovieCard(movie);
  });
}

// 영화 카드 생성 함수
function createMovieCard(movie) {
  let poster = `https://image.tmdb.org/t/p/w500${movie.poster_path}`;
  let title = movie.original_title;
  let content = movie.overview;
  let average = movie.vote_average;
  // ...(생략)  
}

3. 파일 분리

현재 data.js 하나에 영화에 관련된 함수, DOM 이벤트 관리 함수가 있습니다. 함수의 역할에 맞게 파일을 분리해서 관리하는 것이 좋습니다.

예시)

/javascript
  /main.js (시작 모듈, 다른[영화,ui, ...]모듈 import)
  /movie.js (영화 관련 함수들) 
  /ui.js (검색 버튼 이벤트 등 DOM 관련 이벤트)

4. 기능완성

과제 필수 구현 사항에 카드 클릭 시에는 클릭한 영화 id를 나타내는 alert 창을 띄웁니다.이 구현 사항이 아직 완성되지 않았습니다. 자바스크립트로 클릭 이벤트를 연결하고 alert 하는 부분은 충분히 구현 가능하니 이 부분 완료해 주세요.

개인과제 피드백 - 노드 5기 채유일

말씀하신 것 처럼 id 추가, alert 창을 깜빡하고 안넣었네요 ㅠㅠ 방금 추가해서 올렸습니다. 피드백 주신 다른 부분도 참고해서 수정해 보겠습니다. 피드백 감사합니다!

2024년 4월 29일 (월) 오전 11:06, YoungHun Jeong @.***>님이 작성:

첫 번째 과제 완성하느라 고생 많으셨습니다. 필요한 부분에 주석으로 설명을 잘 넣었습니다. 다음에는 github에 README.md 파일도 작성해서 이 프로젝트에 대해서 전반적인 설명도 작성해 주시면 좋을 거 같습니다.

아래는 이번 과제 피드백입니다.

함수 이름 수정

https://github.com/romesway/movieProject/blob/7950f6c357c2efecbaaaa094e0a2ed0fc1e7e5ad/data.js#L10 자바스크립트에서 함수나 변수명은 일반적으로 camelcase 작성합니다. getData 혹은 fetchMovie등으로 함수명을 변경하여 함수가 어떤 일을 하는지 명확하게 작성하면 좋습니다.

영화 데이터 가져올때 async/await문법으로 잘 작성해주었습니다.

예시)

async function fetchMovie() {

함수 기능 분리

https://github.com/romesway/movieProject/blob/7950f6c357c2efecbaaaa094e0a2ed0fc1e7e5ad/data.js#L10-L14 SOLD 원칙에서 단일 책임 원칙(SRP)에 따라 하나의 함수는 하나의 기능만 수행 하도록 만들라는 원칙이 있습니다.

현재 getdata 함수는 영화 데이터 가져오기 + 영화 카드 만들기 두 가지 기능을 수행하고 있으니 이 기능들을 각각의 함수로 분리해 줍시다.

영화 카드 만들때 for문 대신에 forEach문을 사용해서 만들겠습니다.

예시)

// tmdb 데이터 가져오기async function getData() { const response = await fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options); const jsonData = await response.json(); // jsonData.results - 영화모음[배열]

// 영화모음(배열)을 순회하며 각 영화의 정보로 카드 만들기 jsonData.results.forEach((movie) => { createMovieCard(movie); });} // 영화 카드 생성 함수function createMovieCard(movie) { let poster = https://image.tmdb.org/t/p/w500${movie.poster_path}; let title = movie.original_title; let content = movie.overview; let average = movie.vote_average; // ...(생략) }

파일 분리

현재 data.js 하나에 영화에 관련된 함수, DOM 이벤트 관리 함수가 있습니다. 함수의 역할에 맞게 파일을 분리해서 관리하는 것이 좋습니다.

예시)

/javascript /main.js (시작 모듈, 다른[영화,ui, ...]모듈 import) /movie.js (영화 관련 함수들) /ui.js (검색 버튼 이벤트 등 DOM 관련 이벤트)

기능완성

과제 필수 구현 사항에 카드 클릭 시에는 클릭한 영화 id를 나타내는 alert 창을 띄웁니다.이 구현 사항이 아직 완성되지 않았습니다. 자바스크립트로 클릭 이벤트를 연결하고 alert 하는 부분은 충분히 구현 가능하니 이 부분 완료해 주세요.

— Reply to this email directly, view it on GitHub https://github.com/romesway/movieProject/issues/1, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQGZDTJ6OYZHX2HSUBJQUDDY7WTI7AVCNFSM6AAAAABG5PTMX6VHI2DSMVQWIX3LMV43ASLTON2WKOZSGI3DOOJYG4ZTKNY . You are receiving this because you are subscribed to this thread.Message ID: @.***>

currypang / movieProject