회고 및 반성
JavaScript 문법 개인 과제 피드백까지 왔으니 종료 및 회고를 좀 작성해보고자 한다.
튜터님 피드백 총평만 자랑해보자면
일단 칭찬을 써주셔서 기분이 좋았다. 코드로 칭찬받아본 적은 처음이라 숙쓰럽다 ~ ^^a
개인적으로 아쉬웠던 점
- 반응형 부분의 처리가 조금 아쉬웠다.
카드 부분은 CSS 그리드를 활용해 브라우저의 화면이 줄어도 자연스럽게 처리를 했는데, 모달 부분에서는 화면이 줄었을 때의 UI를 어색하게 처리해놔서, '여기까지 신경 쓸 걸' 하고 반성했다. 여기도 grid를 사용했어도 괜찮을 것 같다.
- 코드 분리 및 정리, 최적화
폴더 구조는 일단 최대한 분리했지만, 파일 내의 코드들을 더 깔끔하게 분리하면 좋았을 거란 아쉬움이 남았다. 예를 들면 pagination.js 에 데이터 load 관련한 기능을 다 얹어놨다. pagination.js에는 페이지네이션 기능 관련 함수만 작성해놓고, loadData.js와 같이 데이터 로드 관련 기능은 따로 분리해놓는게 좋았을 거란 생각이 든다.
또한 피드백에서 type="module" 을 body 하단보다 상단에 넣어두는 것이 더 좋다고 하셨으니 다음번엔 body의 상단에 넣는 것을 기억해야겠다.
다음으로는 CSS도 더 큰 프로젝트나 협업하는 프로젝트였으면 분리를 하는게 맞을 거라고 생각했다. (진짜 맞는지는 모른다 ㅠㅠ) 이번 프로젝트는 혼자 작업했고, html의 구조가 복잡하진 않았기에 main.css에 다 때려넣었다.
기능 및 챠밍 포인트(라고 하는 플젝 소개)
프로젝트 요구사항과 예시는 사용자가 검색어를 입력하면 바로 영화 카드에 사용자가 실시간으로 입력한 검색 쿼리에 맞는 영화 카드를 띄우는 방식의 실시간 검색이였다.
나는 왓챠에서 아이디어를 얻어 검색창에서 추천 검색어를 띄우는 방식으로 변경했다. 추천 검색어를 클릭하면 인풋 창에 선택한 검색어를 넣어 검색하도록 했다.
이렇게 변경한 이유는 아무리 debounce를 사용해도 전체 카드가 실시간으로 변하는 화면이 깔끔하지 않을 것 같아서이다.
검색 히스토리 기능도 구현했다. 북마크 기능과 유사하게 localstorage를 사용했다.
결과가 없을 경우의 화면도 간단한 아이콘 추가로 최대한 보기 좋게 신경썼다.
그리고 북마크 아이콘을 직접 만들어서 사용했다. 텍스트로 만든 버튼보다 귀엽고 직관적이라서 좀 더 신경썼다.
포스터가 없는 영화가 많아서 no-image 에셋도 만들어서포스터가 없는 영화가 많아서 no-image 에셋도 만들어서 추가해줬다.
결과물 확인은 여기 → 영화 검색 사이트
다음은 react를 사용한 개인과제가 있을 예정이다.
더 멋진 결과를 만들기 위해 열심히 공부하자 👍
뭐여 너무 열심히 하셨는데여?!