04. 'Top20 영화 검색' 웹페이지(바닐라js) - 개인프로젝트 KPT 회고

💡 'Top2 Movies🍿' 웹페이지를 직접 만나볼 수 있어요!

• github 배포 주소 : https://innes-k.github.io/movie-ranking/
• github repository : https://github.com/innes-k/movie-ranking.git

프로젝트 소개

'Top2 Movies🍿'

• 프로젝트 명 : Top20 Movies
• 개요
  • TMDB에서 받아온 Top Rated 데이터를 카드 형태의 데이터로 보여줍니다.
  • 상위 20위 영화 정보가 담긴 카드들 중 원하는 영화 제목을 검색하여 카드를 선별할 수 있습니다.
• 개발 일정 : 2024.01.05 ~ 2024.01.07 (3일간)
• 개발 환경
  • environment : Visual Studio Code, git, github
  • development : HTML5, CSS3, Javascript
  • API : TMDB open API
    
    

프로젝트 기능 구현 목표

• 필수 구현 사항

  • 바닐라 자바스크립트 사용하기
  • TMDB 오픈 API 인기영화 데이터 가져오기
  • 영화정보 카드 리스트 UI 구현
  • 영화 검색 UI 구현
  • 반드시 포함할 JS 문법 요소
    • const, let (var X)
    • 화살표 함수
    • 배열 메소드 2개 이상(forEach, map, filter, reduce, find)
    • DOM 제어 api목록 2개 이상(목록 생략)
      
      

• 선택 구현 사항

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

• 추가로 구현한 사항

  • 메인 로고 클릭 -> 스크롤 최상단으로 부드럽게 이동
  • 검색 유효성 검사
    • 입력값이 없는 경우 : 검색어를 입력해주세요. alert 생성
    • 검색값을 포함한 영화카드가 없는 경우 : 검색 결과가 없습니다. alert 생성, 페이지 새로고침
  • 카드 hover
    • 배경색, 세로 길이 확장
  • 메인 로고 hover
    • 크기 커짐
  • 영화 내용을 카드 높이에 맞춰 숨기기
  • 커서 올리면 hover 세로길이 확장에 맞추어 내용 전체 오픈됨
  • input 입력칸에 커서 자동 배치
    
    
    

핵심 기능

• 검색 기능 : 유효성 검사 포함
• 헤더 스크롤 : 메인 로고 클릭 시 페이지 최상단으로 이동
• input 입력칸에 커서 자동 배치
  • 페이지 새로고침 시
  • 검색어가 없는 경우 생성된 alert을 닫을 시
• 대소문자 관계없이 검색 가능

새롭게 배운 것

• 순수 바닐라 자바스크립트만을 사용해서 코드 작성하기
• 오픈 API에서 특정 정보 가져와서 활용하기
• 본 프로젝트에 사용된 대부분의 js 문법들은 이번 코드 작성하며 새롭게 배움

📝 소감

• js 문법 강의를 듣고 바로 시작하게 된 개인 프로젝트였는데, 강의 들을때도 어렵다고 느꼈던 터라 순수 바닐라 자바스크립트로만 무에서 유를 창조하려니 어지럽기까지 했다. ㅠㅠ
• 개발자의 짝꿍은 구글이라 했던가... 무한 구글링으로 원하는 기능을 어찌저찌 찾아가며 다른 사람의 코드를 정독도 해보고, 내 코드에 반영도 해보고 디버깅도 해보고 내 코드에서는 왜 안될까 심각하게 고민도 해보고... 코드를 작성하며 실력이 는다는게 정말인 것 같다. 강의만 들을 때는 적당히 이해하며 넘어갔다면, 이번에는 직접 구현해보며 이해하니 이제야 조금씩 머리에 들어온다는 기분이 들었다.
• 그래도 아쉬운 점은, 내가 스스로 생각해서 구현하는 비율이 더 높아야 하는데, 구글링해서 찾아가며 만든 비율이 더 높다는게 아쉽다. 더 공부해서 이제 혼자서 무에서 유를 창조할 수 있는 정도까지 할 수 있도록 열심히 공부해야겠다.

KPT 회고 ⭐️

Keep - 좋았던 점(잘 해와서 유지하고 싶은 것)

• 어렵고 힘들다고 생각들어도 끝까지 포기하지않고 다양한 방법을 동원해서 결국은 해낸 것, 정해진 시간 안에 제출까지 완료한 것
• 시간 분배를 잘 해서 계획한 대로 프로젝트를 진행한 것

Problem - 어려움을 느껴서 개선하고 싶은 것

• js 문법 지식이 아직 많이 부족하여 스스로 생각해낸 것 보다 검색해서 알아낸 것이 더 많음
• 오랜시간 같은 자세로 앉아서 집중하다보니 체력적으로 안좋아지는게 느껴짐

Try - Problem에 대한 해결책, 당장 실행 가능한 것

• js 문법 강의 다시 듣기
• 의식적으로라도 일어나서 스트레칭하기