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

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

구버전 브라우저에서 PDF 뷰어 문제가 계속 발생해서 S3 + Lambda를 활용해 PDF를 이미지로 자동 변환하는 서버사이드 솔루션으로 근본적으로 해결했고, 프론트엔드 개발자도 백엔드/인프라까지 알아야 진짜 문제 해결이 가능하다는 걸 깨달았다는 이야기

React 기반으로 CSR을 사용하던 중 SEO와 초기 로딩 속도 등의 이유로 SSR, 특히 Next.js에 관심을 가지게 되었고, SSR은 서버에서 초기 HTML을 생성해 제공하는 반면 CSR은 브라우저에서 생성하는 방식으로 각각의 장단점이 존재한다. React로 직접 SSR을 구현해보니 생각보다 간단했지만, 실제 서비스 수준의 개발에는 Next.js가 제공하는 코드 스플리팅, 라우팅, 최적화 기능들이 필요하다는 점도 실감하게 되었다. 결국 기술 선택은 트렌드보다 프로젝트 요구사항과 팀의 상황에 맞춰 신중히 결정해야 한다는 결론에 도달했다.

사내 전자동의서 에디터의 불편한 사용성 문제를 해결하기 위해 MCP(Model Context Protocol)를 도입해 Claude Desktop과 연동한 결과, 기존에 별도 UI 개발이 필요했던 목록 조회, 검색, 분석 기능들을 대화만으로 처리할 수 있게 되어 서비스 기능이 자연스럽게 확대되는 효과를 얻었지만, LLM이 의도한 방향으로 정확히 동작하게 하려면 아직 상세한 가이드가 필요한 상황이다.

2년간 방치했던 Velog 기술 블로그에 대한 반성과 팀원의 옵시디언 블로그 배포 모습을 보고 자극받아 개인 블로그를 만들기로 결심했습니다. Jekyll 대신 React 기반의 Gatsby와 gatsby-starter-blog 템플릿을 활용하고 Netlify로 무료 호스팅하여 하루 만에 기본 블로그를 배포했습니다. 특히 Cursor AI를 활용해 GraphQL을 따로 학습하지 않고도 페이지네이션, 태그 필터링, 다크모드 등의 부가 기능들을 쉽게 구현할 수 있어서 AI의 개발 보조 능력에 크게 감명받았습니다.

이 글은 프론트엔드 공통 코드를 기존의 런타임 API 방식에서 빌드타임 코드 포함 방식으로 전환한 경험을 다룹니다. 빌드타임에 공통 코드를 객체로 변환해 타입 안정성과 자동완성을 높이고, 네트워크 의존성과 유지보수 부담을 크게 줄였습니다. 이로써 초기 화면 속도, 코드 관리 효율, 개발자 경험이 모두 개선되었습니다.

기존 프로젝트의 복잡한 구조를 개선하기 위해 백엔드의 계층화 패턴을 프론트엔드에 적용했는데, 프레젠테이션, 비즈니스, 퍼시스턴스, 데이터베이스 계층으로 나누되 프론트엔드 특성에 맞게 외부 API와 Web Storage를 데이터 계층으로 대체했습니다. 실제 구현 과정에서는 초기 설계의 80%만 이행되었고, 도메인별 분리보다는 페이지 경로 기준으로 비즈니스 로직을 관리하는 방식으로 전환했으며, FSD(Feature-Sliced Design) 방식을 참고하여 각 라우트별로 컴포넌트와 훅을 묶어 관리하는 구조로 발전시켰습니다.

2024년 한 해 동안 다양한 변화와 도전을 겪으며 성장과 고민을 반복했다. 새로운 환경과 프로젝트, 연봉 협상 등에서 성취와 부담을 동시에 느꼈고, 감정적으로 흔들리는 순간도 많았다. 업무에 재미와 의미를 찾기 위해 노력했으며, 기본기와 자기계발의 중요성을 다시 깨달았다. 앞으로도 자신에게 투자하며 더 나은 성장을 다짐한다.

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

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