안녕하세요, 이상혁입니다

토스의 useFunnel 훅을 알게 되고 직접 구현해 적용한 경험을 공유합니다. Funnel은 마케팅 용어에서 시작되어 소프트웨어 분야에서 사용자가 최종 단계까지 도달하는 과정을 의미하며, 여러 단계로 나뉜 화면을 효과적으로 처리할 수 있는 솔루션입니다. 직접 구현한 Funnel 코드를 분석하고, 공식 use-funnel과 @use-funnel의 차이점을 비교하며 데이터 상태 관리와 히스토리 처리에 대한 고민과 개선 방안을 탐구합니다.

Modal과 Drawer 컴포넌트는 전통적으로 루트에 두고 전역 상태로 제어했지만, 스타일링 문제(z-index 등)가 있었습니다. React의 Portal을 활용하면 부모 DOM 계층을 벗어나 원하는 위치에 컴포넌트를 쉽게 렌더링할 수 있어 이런 문제를 해결할 수 있습니다. 실제 프로젝트에서 Portal을 이용해 Drawer를 구현하니 추가 CSS 없이도 원하는 UI를 손쉽게 만들 수 있습니다.

무한 스크롤은 사용자가 페이지를 내릴 때마다 자동으로 데이터를 추가로 불러와 보여주는 UX 방식이다.Intersection Observer와 React Query의 useInfiniteQuery 훅을 활용하면 효율적으로 무한 스크롤을 구현할 수 있다. 핵심은 관찰 대상이 뷰포트에 들어오면 다음 페이지 데이터를 불러오고, 마지막 데이터까지 자연스럽게 이어주는 것이다.

React에서 데이터 패칭과 상태 관리는 복잡해질 수 있는데, React Query를 사용하면 데이터 패칭, 캐싱, 동기화, 뮤테이션 등을 간편하게 처리할 수 있다. useQuery와 useMutation 훅을 활용하면 로딩, 에러, 최신 데이터 반영 등 다양한 요구사항을 쉽게 구현할 수 있으며, invalidateQueries, Optimistic Updates 등 고급 기능도 지원한다. 적절한 옵션 설정과 쿼리 키 관리로 효율적인 데이터 최신화와 캐싱이 가능해진다.

AWS S3는 대용량 데이터를 저장하는 객체 스토리지 서비스로, 버킷을 생성해 정적 웹사이트를 호스팅할 수 있다.CloudFront는 전 세계에 분산된 CDN 서비스로, S3와 연동해 정적 웹사이트의 콘텐츠를 빠르고 효율적으로 전달한다.S3 버킷 정책과 퍼블릭 엑세스 설정, CloudFront 배포 설정을 통해 웹사이트 성능과 접근성을 높일 수 있다.