프로그래머스 데브코스 79일차 with. TS 웹 풀스택

📚요약

지난 시간에 회고를 하면서 찾았던 부족한 부분을 채워나가고 있었습니다. 이번 시간에도 이어서 진행해 보겠습니다.

 

📖Book Store 프로젝트

📄리뷰 기능

현재 백엔드의 기능에는 리뷰에 대한 부분이 구현되어 있지 않습니다. 이를 모킹 서버와 가짜 데이터를 활용해 백엔드에서 구현은 안 되었지만 프론트에서 화면을 구현하는 것을 해보겠습니다.

 

📑모킹 서버(Mocking Server) with. MSW

모킹이란 임시로 없는 것을 있는 것처럼 만들어서 사용하는 것입니다. 테스트를 할 때에도 사용되지만 프론트에서 개발을 진행하다 보면 백엔드의 개발이 마무리되지 않을 때가 있습니다. 그럴 때 임시로 API의 응답을 만들어서 사용하는 것 또한 모킹입니다. 모킹을 하는 경우 단순하게 데이터만 만들어서 사용할 수도 있지만, 프론트는 서버에 요청을 보내는 것까지 확인을 해야 합니다. 그렇기에 나온 것이 모킹 서버입니다.

 

MSW

MSW는 모킹 API를 만들기 위해서 사용되는 라이브러리입니다. 

1. 라이브러리 설치 : npm i msw --save-dev
2. 폴더 초기화 : npx msw init public/ --save
3. 기본 설정
   1. Mocking API를 만든다. in mock/api.ts
   2. 만든 API를 worker에 등록한다. in src/mock/browswer.ts
   3. 앱이 실행될 때 실행될 수 있도록 해준다. in index.ts

폴더 초기화 시 생기는 파일

 

자세한 내용은 사이트에서 확인할 수 있습니다.

Mock Service Worker

 

📑가짜 데이터 만들기 with. Fakerjs

백엔드 강의 시간에 랜덤 유저 데이터 만들기를 해보면서 사용해 봤던 fakerjs를 이용해 모킹 서버에서 사용할 mock data를 만들어보겠습니다. Fakerjs는 다양한 가짜 데이터를 만들 수 있도록 여러 가지 API를 제공하는 도구입니다.

 

자세한 내용은 사이트에서 확인할 수 있습니다.

Faker

🍯tip! form 태그를 사용해 입력된 값을 받아오는 경우 보통 string으로 값이 들어온다. 하지만 useForm()을 사용하면 valueAsNumber로 string값을 number로 변경해서 받아올 수 있다.

 

📄다양한 UI 경험

다양한 UI를 다른 라이브러리를 최소한으로 사용해 react에서 제공되는 기능으로 만들어 봅니다.

 

📑드롭다운

드롭다운이란 클릭하면 메뉴가 하단으로 펼쳐지는 것을 의미합니다.

🍯tip! 바깥을 클릭해서 무언가 동작하게 하려면 ref를 활용하게 된다. 이때 ref의 current에 있는 contains() 함수를 사용하면 해당 컴포넌트 바깥을 구분할 수 있다.

 

📑탭

화면이 너무 길어지는 경우 탭 목록을 이용해 구분해서 정보를 제공해 한 화면에 보이게 할 수 있습니다. 탭을 감싸는 Tabs와 내부에 들어가는 Tab 컴포넌트는 다른 파일에서 구현할 수 있지만 편리함을 위해 한 파일에서 구현할 수 있습니다.

 

📑모달

모달은 화면을 바꿔 다음 동작을 진행하는 것이 아닌 기존 화면에 화면을 띄워 동작하는 것을 의미합니다.

🍯tip! 자주 사용되는 중복 코드는 커스텀을 훅을 활용해 중복을 제거할 수 있다.

 

📑토스트 메시지

토스트 메시지는 모달과 비슷하게 화면 위에 화면을 띄워 정보를 제공하거나 동작하는 것을 말하는데, 모달과의 차이점은 더 단순한 상황에 사용한다는 것입니다. 모바일에서 화면에 하단이나 상단에 성공 메시지나 실패 메시지가 잠깐 나타났다가 사라지는 것을 생각하면 이해하기 편합니다.

🍯tip! react-dom에서 제공하는 createPortal을 활용하면 최상위에 그려져야 할 모달이나 토스트 같은 컴포넌트의 위치를 조정할 수 있다.

 

📑무한 스크롤 with. IntersectionObserver

무한 스크롤이란 쇼핑몰의 상품 목록 같이 제공해야 할 정보가 많을 때 스크롤을 통해 서버에서 정보를 받아와 화면에 그려주는 것을 말합니다. 이번 프로젝트에서는 TanStack Query에서 제공해 주는 useInfiniteQuery와 화면을 감시하는 것을 도와주는 Web API인 IntersectionObserver를 활용해서 구현해 보겠습니다.

 

자세한 코드는 Github에서 확인할 수 있습니다.

ProgrammersSchool/FE-BOOKSTORE/bookstore at main · nulzi/ProgrammersSchool

 

다음 시간에 계속...

 

출처 & 참고

문윤기 강사님의 강의

웹 개발에서의 모킹 전략 실제 적용 사례, f-lab ai, 2024.07.25