donkim1212 / nbc_ch2_tmdb

스파르타) JavaScript Project 3

0 stars 1 forks source link

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

Open modolee opened 2 months ago

modolee commented 2 months ago

구현 사항 확인

필수

[x] jQuery 라이브러리 사용없이 순수 바닐라 자바스크립트 사용하기
[x] 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] 대소문자 관계없이 검색 가능하게 하기
[x] 키보드 enter키를 입력해도 검색버튼 클릭한 것과 동일하게 검색 실행시키기

피드백

배운 내용을 잘 활용

웹개발종합반, 자바스크립트 기초 강의를 통해서 배운 내용을 아주 잘 활용하여 구현했습니다.
기본 문법 뿐만 아니라, 모듈 시스템의 이해, await/async 활용 등 전반적으로 잘 이해하고 사용한 느낌이 드네요.

캐싱 처리

캐싱 처리를 통해서 처음 API를 호출 한 이후에 검색을 실행할 때에는 API 호출 없이 저장 된 데이터를 이용할 수 있도록 했습니다.
API 호출 시 발생하는 네트워크 비용을 줄일 수 있는 매우 좋은 접근 방식입니다.
다만 캐싱이라는 이름에 조금 더 어울리려면 메모리에 저장하는 방식 보다는 LocalStorage 또는 SessionStorage를 이용했다면, 새로고침 시에도 발생하는 API 호출을 줄일 수 있었을 것 같습니다.

파일 분리

html, js, css 파일을 분리해서 가독성을 높이고, 유지보수를 용이하게 만들었습니다.
html 파일의 자바스크립트 코드 역시 ./js/index.js와 같이 별도의 파일로 분리한 후 script만 호출하는 형태로 작성한다면 더 좋았을 것 같네요.

https://github.com/donkim1212/nbc_ch2_tmdb/blob/e82e26f3e9cb9f89697237db750828d2ddcc3080/index.html#L9-L35

<script type="module" src="./js/index.js"></script>

추가적으로 js에서 html 요소를 생성할 때 js, css 요소들(onclick, style)은 포함하지 않고 js, css에서 처리하는 것이 좋습니다. 추후 해당 요소의 js, css 적인 부분은 수정하려고 할 때 js 파일과 css 파일을 우선적으로 확인할테니 그 곳에서 한꺼번에 관리하는 것이 유지보수 시 더 편리합니다. https://github.com/donkim1212/nbc_ch2_tmdb/blob/e82e26f3e9cb9f89697237db750828d2ddcc3080/js/card.js#L11-L26

일관 된 네이밍

자바스크립트의 변수, 함수, html의 class, id 의 네이밍 규칙을 일관적으로 유지해서 가독성을 높였습니다.

예외 처리

거의 모든 로직 수행 전 if문으로 실행하기 위한 조건에 충족하는지를 체크하고 있어서, 코드의 안정성을 높였습니다.

테스트를 위한 플래그 사용

API 호출 전 json 파일을 이용해서 테스트하기 위한 코드를 작성했는데, isLocal 이라는 플래그를 이용해서 손쉽게 전환할 수 있도록 코드를 구성했습니다.

README 작성

README를 작성하는 습관은 정말 좋습니다. 다른 사람이 봤을 때 이 저장소가 어떤 저장소인지 한 눈에 알아볼 수 있어서 좋습니다. 그리고 나중에 포트폴리오를 정리할 때에도 도움이 많이 됩니다.

Git 활용

커밋 메세지, 브랜치 관리, PR 생성 등 아주 잘 활용하고 있습니다.

대소문자 구분없이 검색

현재는 검색어를 모두 대문자로 입력하게 되면 정상적으로 검색이 되지 않고 있습니다. 해당 부분도 고려했던 것 같지만, 코드 작성 중 실수가 있었던 것으로 보이네요.
title = title.toLowerCase(); 의 위치가 올바르지 않아서 정상 동작하지 않고 있으니 확인해 보세요. https://github.com/donkim1212/nbc_ch2_tmdb/blob/e82e26f3e9cb9f89697237db750828d2ddcc3080/js/search-movie.js#L7-L16

donkim1212 commented 2 months ago

피드백 감사합니다. 지적해주신 부분 수정해보도록 하겠습니다.