[우테코 6기] 레벨 1 마지막 - 영화 리뷰 웹앱 미션 회고 ❗️

 

벌써 레벨 1의 마지막 미션이 끝났다. 우테코 첫 등교가 엊그제 같은데 벌써 마지막이라니 믿기지가 않는다.

 

이번 영화 리뷰 미션은 비동기 통신이 핵심인 미션이었다. 학습 목표를 따라서 이번 미션에서는 API 통신을 처리할 때 고려해야 하는 다양한 문제를 직접 경험해 보면서 해결 방법을 고민해 보는 시간을 가졌다.

 

 

✅ 베포 사이트

영화 리뷰 웹앱

 

📍 학습 목표

• step 1
  • API 연동을 위한 테스트 환경 경험
  • 실제 동작하는 API를 통한 비동기 통신
  • UX 경험 개선을 위한 더 보기(페이징) 구현
• step 2
  • 상세 정보 조회, 별점 매기기
  • UI/UX 개선 하기

 

  step 1  

 

step1에서는 메인 페이지에서는 인기순으로 정렬된 페이지를 그리고 검색을 했을 때는 검색된 결과물을 보여주는 결과 페이지가 있었고 모든 데이터는 20개씩 오고, 하단에 있는 더 보기 버튼을 누르면 인기순 영화나 검색된 추가적인 결과를 보여주는 것이 목표였다.

또한 통신 오류가 날 시 이를 어떤 오류를 대응해야 하고, 어떤 UI로 보여줄 것인지는 자율적으로 결정해서 작업해야 했다.

 

 

❗️ 이번 과정에서 집중해서 작업한 부분

 

컴포넌트 생성 유틸

이전 미션에 더 업그레이드해서 컴포넌트를 분리해서 작업했고 탬플릿 리터럴을 사용해서 작업했던 이전과 달리 이번에는 컴포넌트를 직접 생성해서 사용하는 형식으로 변경해 보았다.

그러다 보니 컴포넌트를 만들 때 반복해서 작업해야 하는 부분들이 생기기 시작했다. 그래서 이 작업을 줄이기 위해서 엘리먼트를 생성하고 속성을 선언하는 유틸을 만들었다.

 

// 이전 코드 
const $div = document.createElement('div');
$div.setAttribute(id, 'div-id');
$div.setAttribute(class, 'div-class');

// util 
const createElementWithAttribute = (
  elementTag: string,
  attribute: Attribute,
) => {
  const $element = document.createElement(elementTag);
  Object.entries(attribute).forEach(([key, value]) => {
    $element.setAttribute(key, value);
  });

  return $element;
};

// 바뀐 코드 
const $div = createElementWithAttribute("div", {
  id: 'div-id',
  class: 'div-class'
});

 

그러자 이렇게 반복되는 코드를 줄여 엘리먼트를 쉽게 선언할 수 있게 되었다.

 

 

스켈레톤 UI 작업

이전부터 한 번쯤 스켈레톤 UI 작업을 해보고 싶었는데 이번 기회에 도전하게 되었다. step1에서는 아이템뷰 내부에서 아이템 리스트가 랜더 되기 전까지 스켈레톤 리스트가 보이고 이후 랜더가 되면 이를 display: none 하는 형식으로 작업하였다.

이후 step2를 준비하면서 추가적인 이미지만을 위한 스켈레톤 작업도 해보았다. 이미지가 로딩되는 과정에서 스켈레톤 이미지를 보여주고 로드 이벤트 리스너를 달아 로드가 성공하면 로드된 사진을 보여주게 만들었다.

 

 

debounce 작업

lms를 통해 디바운스와 스로틀에 대해서 배우게 되었고 이를 접목해 보기 위해 연속으로 더 보기 버튼을 누르거나, 검색을 시도할 때 api를 여러 번 호출하지 않게 하도록 debouce 작업을 해보았다. 이 작업을 통해 불필요한 잦은 요청을 막아 보았다. 추가적인 공부도 해보고 글을 작성해 보았는데 그건 여기에..

 

 

추가적인 UX 향상 작업

사용자 경험 향상을 위해 전달받은 데이터 중 사진이 없는 데이터의 경우 사진이 없다고 보여줄 수 있도록 해보았다. 또한 검색 결과가 없는 경우, 검색 결과가 없다고 명시하거나, 오류 발생 시 사용자에게 오류 메시지를 보여줄 수 있도록 하였다.

 

  step 2  

 

step2에서는 사용성 개선이 키포인트였다. 이전에는 더 보기 버튼을 클릭해야만 다음 정보를 불러왔다면 이번에는 무한 스크롤을 구현하여 작업해 보았다. 그리고 추가적으로 디테일 정보를 보여줄 모달 작업을 반응형 작업과 같이 해보았다. 그리고 그 모달 창 내부에서 별점을 매길 수 있는 기능도 추가해 보았다.

 

 

❗️ 이번 과정에서 집중해서 작업한 부분

 

반응형 작업

오랜만에 반응형 작업을 하려니 초반에는 조금 시간이 걸렸던 거 같다. 특히 step1에서는 주어진 css를 그대로 사용했어서 스타일 파일을 다시 한번 읽어보고 파악하는 시간이 필요했다. 모바일 버전과 태블릿 버전을 추가적으로 작업하고 특히 검색 파트에서 모바일에서는 클릭되었을 때 검색창이 나올 수 있도록 변경했다.

 

 

디테일 모달 추가

이번에는 디테일 모달이 추가되었는데 모달 내 이미지가 로드될 때에도 스켈레톤 UI를 사용하여 사용자 경험을 향상하려고 노력했고, 영화 요약 정보가 없는 부분이 꽤 있어서 영화 정보가 없을 시 정보가 제공되지 않았다고 멘트를 작성하여 보여주었다.

또한 모달을 다이머(딤)를 클릭하거나, esc를 입력, 닫힘 버튼 클릭 시 모두 닫힐 수 있도록 작업했다.

 

 

사용자의 별점 추가

별점 데이터를 받아올 때는 버튼 하나하나 마다 이벤트를 등록하는 게 아니라 별점 컨테이너에서 이벤트를 위임받아 사용할 수 있게 해 보았다. 컨테이너 내부에 별점 엘리먼트가 아닌 엘리먼트도 있어서 이는 무시하고 작업할 수 있도록 작업해 보았다.

별점 데이터를 로컬스토리지를 사용하여 저장해 새로고침을 하여도 정보가 보일 수 있도록 했다. 그리고 디자인 정렬 일관성을 유지하기 위해서 별점 컨테이너 내부 데이터가 변해도 위치가 변하지 않도록 신경 써서 작업했다.

 

 

더 보기 버튼에서 무한 스크롤로

더보기 버튼에서 무한 스크롤로 변경하기 위해 Intersection Observer 사용해서 구현해 보았다. 그리고 로딩되는 과정에서 진행했던 스켈레톤 UI 이외에 로딩 UI 도 추가해서 작업해 보았다. 스켈레톤이나 로딩 UI 작업을 해보고 싶었어서 이번 기회에 공부해 보았다.

 

 

코드 리뷰 이후 추가한 사항

코드 리뷰를 받으면서 가상 돔인 document Fragment에 대해서 배워서 이를 활용하여 추가적인 데이터가 생길 때 카드들을 가상 돔에 먼저 어펜드 하고 이후에 뷰에 어펜트하는 형식으로 변경해 보았다.

 

 

 

미션을 마치며 🍀

이렇게 이번 미션에서는 skeleton UI, Error UI 등에 대해서 고민해 보았고, 디바운스, 스로틀, 옵져버까지 사용해 보는 기회를 가졌다. 또한 이벤트 위임이나 비동기 개념에 대해서 확실히 이해하고 사용할 수 있었던 미션이었던 거 같아서 가장 기억에 남을 거 같다.