jiwooda4 useFunnel 훅 트러블 슈팅: 리렌더링 및 Hydration 문제 해결 배경: 왜 useFunnel을 사용하게 되었을까?퍼널은 '깔대기'라는 의미로, 사용자가 특정 목표를 달성하기 위해 거치는 일련의 단계들을 말합니다. 우리 프로젝트에서는 회원가입, 비밀번호 찾기, 목표 설정처럼 여러 단계로 이루어진 프로세스가 많았습니다. useFunnel은 이런 다단계 프로세스를 더 쉽게 관리하려고 만들었습니다. 각 단계별 UI 컴포넌트 관리, 단계 간 데이터 전달, 그리고 특정 단계로 직접 접근을 편하게 하는 것을 목표로 했습니다.더 자세한 이야기는 이 글에서 확인하실 수 있습니다! useFunnel 훅 소개useFunnel 훅은 다단계 프로세스를 관리하는 커스텀 훅입니다. 사용자가 단계별로 데이터를 입력하고 자연스럽게 다음 단계로 넘어갈 수 있게 도와줍니다. 각 단계마다 입력된 데이.. 2025. 4. 30. Next.js에서 단계적 사용자 경험을 위한 useFunnel 훅 구현하기 회원가입, 결제 프로세스, 설문조사를 만들 때 개발자들이 공통적으로 겪는 문제가 있습니다. 바로 여러 단계를 효율적으로 관리하는 것입니다. 반복되는 로직을 매번 작성하고, 데이터를 관리하고, URL과 동기화하는 과정은 복잡하고 오류가 발생하기 쉽습니다.이 글에서는 이런 문제를 깔끔하게 해결할 수 있는 커스텀 훅 useFunnel을 단계적으로 구현한 경험을 공유합니다. 이 훅을 활용하면 다음과 같은 이점을 얻을 수 있습니다:코드 중복 없이 여러 단계 프로세스를 쉽게 구현타입스크립트의 강력한 타입 검증으로 런타임 오류 방지URL과 상태 자동 동기화로 페이지 공유와 새로고침 문제 해결세션 스토리지 통합으로 사용자 데이터 안전하게 보존직관적인 API로 다단계 프로세스를 명확하게 구현 Funnel 이란?퍼널은 '.. 2025. 4. 29. 투데잇: 개발 환경에서 Sentry 비활성화하기 - 문제와 해결 과정 안녕하세요! 오늘은 개발 환경에서는 Sentry를 비활성화하고 프로덕션 환경에서만 활성화하는 방법과, 해당 작업을 수행하며 겪은 오류 및 해결 과정을 공유하고자 합니다. Sentry란?먼저, Sentry는 애플리케이션의 오류를 실시간으로 모니터링하고 추적하는 도구입니다. 애플리케이션에서 발생하는 예외를 캡처하여 개발자에게 알림을 보내고, 오류의 원인을 분석할 수 있는 상세 정보를 제공합니다. Next.js를 포함한 다양한 프레임워크와 통합하여 사용할 수 있으며, 오류 추적뿐만 아니라 성능 모니터링 기능도 제공합니다. 왜 개발 환경에서 Sentry를 비활성화하려고 했나요?개발 환경에서 Sentry를 비활성화하려는 데에는 몇 가지 중요한 이유가 있습니다: 1. 빌드 시간 단축Sentry는 소스맵을 생성하.. 2025. 4. 2. 투데잇: 우리 프로젝트의 코드 컨벤션 가이드 오늘은 이번 프로젝트에서 사용하게 된 코드 컨벤션을 소개합니다!일관된 코드 스타일은 협업 효율성을 높이고 유지보수를 용이하게 합니다. 이번 코드 컨벤션에서는 최대한 자세한 예시를 담아서 서로의 이해를 돕고 재논의를 방지하기 위해 노력했습니다. 폴더 구조이번 프로젝트에서는 Next.js 14 버전의 App Router를 사용하기로 결정했습니다.App Router의 파일 시스템 기반 라우팅은 기본적으로 도메인 별로 폴더가 나뉘게 됩니다.따라서 저희 프로젝트에서도 도메인 기반 설계(Domain-Driven Design, DDD)를 바탕으로 프로젝트를 구성하였습니다. 프로젝트의 폴더 구조는 기능과 책임에 따라 명확하게 구분됩니다. 이렇게 구조화함으로써 개발자들이 코드의 위치를 쉽게 예측할 수 있고, 새로운 기.. 2025. 4. 2. 이전 1 다음
