자바스크립트 기초 개인 과제 피드백

[modolee]

구현 사항 확인

필수

• [x] jQuery 라이브러리 사용없이 순수 바닐라 자바스크립트 사용하기
• [ ] TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기
• [x] 영화정보 카드 리스트 UI 구현
  • [x] 카드 형태로 데이터 보여주기
  • [x] 제목, 내용 요약, 포스터, 평점 정보 포함
  • [x] 카드 클릭 시 영화 ID Alert 창 띄우기
  • [x] 영화 검색 UI 구현 (제목 검색, 검색 버튼 클릭 시 실행)
• [x] Javascript 문법 요소 이용
  • [x] const와 let만을 이용한 변수 선언 필수
  • [x] 화살표 함수 1개 이상 사용
  • [x] 배열 메소드 2개 이상 사용
  • [x] DOM 제어하기 메서드 2개 이상 사용

선택

• [x] CSS
  • [x] flex 사용하기
  • [ ] grid 사용하기
• [ ] 웹사이트 랜딩 또는 새로고침 후 검색 입력란에 커서 자동 위치시키기
• [x] 대소문자 관계없이 검색 가능하게 하기
• [x] 키보드 enter키를 입력해도 검색버튼 클릭한 것과 동일하게 검색 실행시키기

피드백

군더더기 없이 깔끔하게 작성해서 크게 피드백 드릴 내용이 없습니다.

README 파일 작성

• 프로젝트 진행 시 README 파일을 작성하는 것은 좋은 습관입니다. 다음에는 조금 요구사항 뿐만 아니라, 어떤 식으로 문제를 했는지 다른 사람이 봤을 때 궁금해 할만한 것들을 적어주면 좋습니다.

html, css, js 파일 분리

• 파일 분리를 해서 가독성 및 유지보수성을 높였습니다.
• js 파일은 선언과 실행 부분은 나눠서 파일을 분리한다면 더욱 가독성 좋은 코드를 만들 수 있습니다.

네이밍 규칙

• 네이밍 규칙을 통일하여 가독성 높은 코드를 작성했습니다.
• 외부 API에서 데이터를 받아오는 경우, 네이밍 규칙이 다를 수 있습니다. 이런 경우에는 통일성 유지를 위해 이름을 변경해 줍니다. https://github.com/devJaem/jmovie/blob/8e1bfe2352ca7c691eab125a5ed48dcd47aa5860/script.js#L26

const { id, name, overview, poster_path: posterPath, vote_average: voteAverage } = movie;

요구사항 분석

• 요구사항을 꼼꼼히 살펴보는 것은 굉장히 중요한 부분입니다.
• 영화 정보 API를 불러와야 된다고 과제에 명시되어 있는데, 드라마 정보 API를 사용했습니다.
• 지금 같은 경우 API 주소만 변경하면 되는 간단한 수정이지만, 간단히 변경이 어려운 경우에는 처음부터 다시 작성해야 되는 불상사를 겪을 수 있습니다.

질의 응답

let의 사용처

• allMovies와 같이 값의 변경이 필요한 경우 사용합니다. 꼭 필요한 경우에만 사용하고 그렇지 않은 경우에는 대부분 const를 사용하기 때문에, 경우에 따라서는 let을 한번도 안쓰는 코드를 작성할 수도 있습니다.
• 아래와 같이 기본값을 가지고 있는데, 특정 조건에서 값이 변해야 하는 경우가 하나의 예시가 될 것 같네요.

  const age = 20;
  let isAdult = false;
  if (age >= 20) {
  isAdult = true;
  }

손에 익히 않는 내용을 구글링하는 것

• 우리가 가전 제품을 샀을 때 매뉴얼에 있는 모든 기능을 암기하고 있지 않는 것과 마찬가지로 HTML, CSS, 자바스크립트의 모든 기능을 다 암기하고 있을 순 없습니다. 그러니 모를 때 당당하게 구글링하세요. 많이 하다보면 결국엔 익숙해져서 나중엔 구글링 없이도 충분히 할 수 있습니다.

CSS

• 이것 역시 많이 해보는 수 밖에는 없습니다. 우리는 백엔드 과정이기 때문에, html, css 때문에 너무 고민하고 스트레스 받지는 마세요.

[devJaem]

TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기 관련 피드백 적용

• API 데이터를 받아오는 변수중, name 을 title로 변경. 웹사이트 랜딩 또는 새로고침 후 검색 입력란에 커서 자동 위치시키기
• 적용