안녕하세요. 우테코 6기 FE 바다입니다!
레벨1의 마지막 이션인 '영화 리뷰'미션이 끝났습니다.👏👏👏

이번 미션의 학습 목표는 API 연동과 비동기, UX였고 스켈레톤, 무한 스크롤 기능과 영화 상세정보 모달도 구현해야 했습니다.

미션 구현

🍿 영화 리뷰 배포 페이지 바로가기

🍿 영화 리뷰 저장소 바로가기

구현 모습

• 모바일 화면 기준 구현 모습
  

🍿기능별 구현 모습 보러가기

스켈레톤 첫 사용기

🎞️ 무한 스크롤에 적용된 스켈레톤 보기 🎞️ 영화 상세 정보 모달에 적용된 스켈레톤 보기

어떻게 구현할 것 인가?

다행히, 템플릿에 스켈레톤이 있었지만 고민해 봐야 하는 것은 다음과 같았습니다.

1. 데이터를 불러오는 동안 스켈레톤을 띄우다가 응답을 받을 수 스켈레톤을 지우는 것을 어떻게 구현해야 하는가?
2. 영화 리스트에 맞는 스켈레톤을 어떻게 구현할 것인가?

구현 방법

영화 리스트와 이에 대한 스켈레톤 UI는 구조적으로 동일해야 하므로 HTML 구조와 클래스 명이 같도록 했습니다. (시간이 더 있었다면, 데이터를 닫지 않는 UI만 있는 컴포넌트를 활용해도 좋았을 것 같다는 생각이 듭니다.)

영화 리스트가 자주 불러오기 때문에 DOM 접근을 최소화하기 위해 페이지 렌딩 시 영화 리스트에 대한 컴포넌트를 DOM에 넣어주고 class와 위치를 조작해 스켈레톤이 화면에 나타나게 또는 사라지게 했습니다.

HTTP 요청과 응답에 따른 스켈레톤 UI 조작은 try catch 문을 사용해 해결했습니다. request를 보내기 전에 스켈레톤 UI를 화면에 띄우고 resolve, reject시 스켈레톤 UI를 지우도록 했습니다.

  async fetchDataWidthSkeleton(apiFun: () => Promise<void>) {
    try {
      this.#skeletonController.show();
      await apiFun();
      this.#errorViewController.remove();
    } catch (error) {
      this.#errorViewController.show(error);
    }
    this.#skeletonController.remove();
  }

1단계에서 HTTP 요청과 스켈레톤 UI를 다루는 재사용이 가능한 모듈을 만들어 놓으니, 2단계에서 영화 상세 정보 모달에 대해 스켈레톤 UI를 적용할 때 편했습니다.

cypress 비동기 테스트

개인적으로 미션 기능 구현보다 cypress로 비동기 테스트를 짜는 게 제일 힘들었습니다.😥

처음으로 API를 의도한 대로 잘 불러와지는지 테스트했고, 원하는 테스트 케이스를 위해 mock data를 만들어서 HTTP 요청을 가로채서 mock data를 response하는 것도 시도해 봤습니다.

아래의 글에서도 쓴 내용인데, 테스트 코드를 짜는 것은 힘들었지만 추후에 리팩토링과 오류 수정으로 코드가 변경되었을 때 빛을 발했습니다. 수정으로 인한 버그가 있는지, 기능구현이 제대로 돌아가는 지 확인하고 싶을 때는 cypress로 테스트만 돌리면 되어서 좋았습니다.

✍️ cypress로 API(비동기) 테스트하기 글 보러가기

UX에 대해

이번 미션에서 UX를 위해서 요구 사항외의 다른 것도 추가했습니다.

추가한 기능

• 모바일 크기에서 input창의 크기가 커지는 효과를 넣어준다. 🎞️ 소형 모바일에서의 입력창 (반응형) 보기
  
• 검색창에 아무런 값이 없거나 검색어가 공백만으로 이루어졌는데 검색을 시도한 경우 토스트 모달을 띄어서 검색어가 없다는 문구를 보여준다. 🎞️ 토스트 모달 보기
  
• HTTP 오류나 데이터가 없을 경우에 사용자에게 이를 안내한다.
  🖱️구현 모습 보러가기
• 더 이상 불러올 영화가 없는 경우 이에 대한 안내문구를 추가한다.
• '내 별점'에서 사용자가 별점 초기화를 할 수 있는 reset버튼을 추가한다.

오류의 귀책 사유

오류의 귀책 사유에 대한 다른 크루의 피드백 내용을 보게 되었습니다.

오류의 귀책 사유가 사용자에게 있는가, 프로덕션 코드에 있는가에 따라서 오류 메세지가 달라져야 한다.

바쁜 미션 구현에 어떤 오류가 있을까 생각하고 이에 대한 대응을 했다는 생각으로 뿌듯했었습니다. 그러나 위의 피드백을 보고 "정말 배울 것은 끝도 없구나. 나름 UX를 고심한다고 했는데 아직은 부족하구나."를 깨달았습니다.

함수 재사용과 폴더 구조

이번 코드 리뷰를 받으면서 함수의 재사용과 폴더 구조에 관해 한 단계 성장하지 않았나 하는 생각을 합니다.

리뷰어분이 왜 해당 함수의 재사용이 필요한지, 어떻게 하면 좋은지 예시를 들어주시면서 피드백을 해주셔서 좋았습니다. 재사용의 필요성에 대해 납득하게 되었고 어떻게 재사용성을 챙기면 좋은 지 감을 잡는 게 빨랐습니다. 다른 미션에서 필요하다면 따와서 사용할 수 있을 정도의 재사용성을 구축한 것 같아 나름 뿌듯합니다.😄

프리코스부터 많이 사용한 MVC 패턴에서 벗어나서 폴더 구조를 짜보려 했습니다. 그렇지만 MVC 패턴에서 완전하게 벗어나지 못했고 어떻게 폴더 구조를 설계해야 하는지 고민이 되었습니다.

폴더 구조에 대한 피드백을 받고, 찾아보면서 나름의 폴더 구조 기준을 세웠습니다.

이번 미션 폴더 구조 기준

• 컴포넌트와 관련된 컨트롤러는 컴포넌트 폴더 하위의 controller 폴더에서 관리한다.
• 도메인 로직, 데이터 관리(API,로컬 스토리지 포함)에 대한 모듈은 model 폴더에서 관리한다.
• 위의 두 조건에 해당하지 않으며 서로 다른 환경에 독립적으로 재사용할 수 있는 모듈은 유틸 폴더에서 관리한다.

폴더 구조 어떻게 공부해야 할까요?

저는 여러 폴더 구조를 공부해 보셔서 각 미션 마다 적용해 보시고 장단점을 느껴보는 것도 추천해 드리고 싶어요!

폴더 구조에 대해 가지고 있는 고민을 리뷰어에게 이야기했습니다. 리뷰어에게 우테코 기간을 활용해 다양한 폴더 구조를 경험해 보는 것도 좋은 방법이라는 조언과 함께 다음 레벨에서 사용하는 react에서 사용되는 fds를 소개받고 이를 공부하는 시간도 가졌습니다.

마무리

저번 미션을 끝내고 다음 미션에는 '빨리 구현하는 것'을 욕심내지 말고, 구현 중간중간 내 코드를 돌아보는 시간을 가지자는 생각을 했습니다.

그래서 이번 미션에서는 하나의 기능을 끝내면 해당 기능의 프로세스, 구조를 손으로 그려보면서 코드들을 되돌아보는 시간을 가졌습니다. 손으로 그리면 몰입하느라 긴장되고 빨라지는 마음이 차분해졌습니다. 그리고 무엇보다도 저의 코드를 객관적으로 바라볼 수 있었고 때로는 코드에 대한 확신도 얻을 수 있어서 좋았습니다.
비록 이 방법이 기간이 더 걸리기는 하지만, 저에게는 좋은 방법 같아서 앞으로도 적용해 보려 합니다.

그리고 이제 우테코 첫 방학입니다!!!!!!!
방학동안 해야하는 것들,하고 싶은 공부가 산더미로 쌓여있지만 잘 공부하고 잘 쉬면서 레벨2의 회고로 돌아오겠습니다. 👋