피드백

안녕하세요 :) 처음 개인 과제를 진행하시면서 어려움이 많으셨을텐데 고생하셨습니다! 올려주신 과제 피드백을 깃허브 이슈로 남겨드리려고 합니다 🫡

개인 과제 기본 구현 사항 체크

[1] jQuery 라이브러리 사용없이 순수 바닐라 자바스크립트 사용하기
[2] TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기
[3] 영화정보 카드 리스트 UI 구현
[4] 영화 검색 UI 구헌
[5] 하기 기재된 Javascript 문법 요소를 이용하여 구현
모두 다 잘 마무리해주셨고, 그 이상의 퀄리티를 보여주셨습니다 :) 파일 분리도 깔끔하고, 모듈로 임포팅하시는 시도 역시 좋았습니다.
DOM을 가져오는 변수는 접두사 ($) 를 붙이는 syntax 역시 좋았습니다.
보안 이슈가 있을 수 있는 key 분리와 apiKey.js git ignore, 그에 따라 sample file까지 모두 좋았습니다 👍 👍
network I/O 가 있는 부분은 비동기로 (fetch) async await를 적절하게 잘 사용하셨습니다!
이미 html + css + js 기본 FE stack에 대한 이해도가 확실하게 있으신 것 같아요!! 🔥 본격적으로 backend node api 만들때 더 빛을 발하실 것 같습니다 🫡🫡

1. 이벤트 바인딩

// 엔터를 누르면 검색 버튼을 누른것과 동일한 효과를 주자
document.getElementById('search-input').addEventListener('keyup', function (event) {
    if (event.key === 'Enter') document.getElementById('search-btn').click();
});

위 코드에서 document.getElementById('search-btn').click() 대신 searchMovie2 를 호출하는 형태는 어떠셨을까요?
지금 형태는 [ click 이벤트 호출 -> 다시 바인딩된 event 호출 ] 이며, 사실 그냥 [ 바인딩된 event 호출 ] 하면 되기 때문에 searchMovie2 를 호출하면 불필요한 이벤트를 더 줄일 수 있습니다.

2. 전체 코드 스타일

바닐라JS 로만 구성하다보면 코드 전체 흐름을 한 번에 보는게 힘듭니다. 그래서 진입점을 기반으로 동기와 비동기를 적절하게 활용하시는게 도움이 됩니다.
DOMContentLoaded 으로 dom 렌더링 완료 시점 이벤트를 잘 잡으셨고, 여기를 "진입 기점으로" 보고 전체 함수를 아래와 같이 재구성하면 어떨까요?

여기서 더 나아가 "화살표 함수 통일" 과 다른 표현식 통일 (전역 상수 대문자, 위치 구분, 함수 진입점 등) 까지 더 나아가면 더 깔끔할 것 같습니다!
추가로 왜 제가 initMovie 에 await를 붙이지 않았는지 고민해 보시면 좋을 것 같습니다.

3. css 의 flex 에서 더 나아가 grid 라는 것도 사용해보시면 좋을 것 같습니다.

https://blog.logrocket.com/css-flexbox-vs-css-grid/
더 나아가 "시멘틱웹" 에 대해서 찾아보시는 것도 좋을 것 같습니다.

sumin2710 / Search-Movie

피드백 - 정현우 튜터 #1

개인 과제 기본 구현 사항 체크

피드백