---

🎬 영화검색 사이트 'Cinema Box'

---

• 프로젝트명 | Cinema Box
• 작업 기간 | 2022년 10월 31일 ~ 11월 16일
• 기술 스택 | javascript HTML5 CSS3 SASS
• 제공 API | OMDBapi
• 배포 링크 | Cinema Box
• 코드 저장소 | 깃 허브

구현한 내용

버튼을 활용한 스크롤 이동

nav바 버튼을 이용하여 원하는 화면으로 쉽고 빠르게 이동하도록 구현하였습니다.

정보가 없을 경우 에러 처리

요청한 페이지 수 보다 결과가 작으면 총 개수를 알려주도록 하였습니다.
예를 들어 'totoro' 검색 결과는 9개인데 30개를 요청하면 총 결과물은 9개라고 알려줍니다.

영화 상세정보의 평점 정보가 없다면 결과가 없다고 알려줍니다.

기능별로 모듈화를 하였습니다.

어려웠던 점

• 영화 상세 정보를 새로운 페이지에 보여주고 싶었으나 화면 전환을 어떻게 해야하는지 몰라서 한 화면에 나타나도록 하였습니다.
• 반응형 웹으로 구현하지 못한점이 아쉽습니다.
• 모듈화가 아직 익숙하지 않아서 억지로 끼워 맞춘듯한(?) 느낌이 많습니다.

피드백 바라는 점 & 궁금한 점

• 모듈화가 잘 되어있는지, 필요없는 모듈이나 모듈화가 필요한 부분은 어디인지
• DOM을 다루는 부분이 가독성이 떨어지지는 않는지, 개선 방법
• parcel-bundeler를 사용하였는데 dist 폴더를 어떻게 관리하는지 잘 모르겠습니다. (dist폴더는 git에 올리면 안 된다고 들어서 gitignore에 포함 하였더니 netlify 배포가 되지 않아서 부득이하게 dist 폴더를 업로드하였습니다.)

1차 코드 리뷰 후 변경된 내용 (22.11.24 작성)

• 이미지 리사이징 코드를 추가하여 고화질로 출력 되도록 하였습니다.
• 스크롤 기능을 모듈화 하였습니다.
• 웹 접근성을 위하여 background-image 사용한 곳에 부가 정보를 넣어주었습니다.

  posterEl.style.backgroundImage = `url(${highQualityDetailPoster})`;
  posterEl.role = 'img';
  posterEl.title = 'Poster';

• html 시맨틱 태그 사용 (html 56번째 줄 리뷰)

// 기존
 <div class="main section">
 // 변경
 <main>

• scss 파일을 css로 변환 후 다시 <link> 하였습니다.
• <span>태그를 쿼리 셀렉터로 사용 했던 부분을 클래스 네임을 부여하여 수정하였습니다. (스크롤 부분)