프로젝트 페이지 로딩 중...
매드스퀘어 / 플랫폼 사업부, 매니저 (2021.12 ~ 2025.09, 3년 10개월)•담당 업무: 웹프론트엔드 개발
Olive 프로젝트
동남아시아 인플루언서 마케팅 서비스 개발 (https://charisad.com/)
프로젝트 소개
동남아시아 인플루언서 마케팅 플랫폼의 프론트엔드 개발을 담당했습니다. 복잡한 상태 관리 로직을 개선하기 위해 Redux-Toolkit에서 Zustand와 Tanstack-Query로의 전환을 주도했습니다.
이를 통해 서버 데이터와 클라이언트 상태를 효율적으로 분리하고, 불필요한 네트워크 요청을 줄여 애플리케이션의 성능과 유지보수성을 크게 향상시켰습니다.
기술 스택
Next.js
Redux-Toolkit
Zustand
Styled-Components
Tanstack-Query
주요 작업 내용
- 상태 관리 라이브러리 전환:
Redux-Toolkit에서 Zustand와 Tanstack-Query로 마이그레이션을 주도하여 불필요한 API 요청을 줄이고 보일러플레이트 코드를 간소화했습니다.
- 데이터 멱등성 개선:
서버 데이터와 클라이언트 상태를 명확히 분리하여 데이터 관리의 복잡성을 낮추고 데이터 멱등성을 개선했습니다.
메인 페이지 구현
메인 페이지는 여러 섹션으로 구성되어 있으며, Next.js의 dynamic import를 활용한 코드 스플리팅과 Styled-Components를 통한 반응형 디자인을 구현했습니다.
- Dynamic Import를 활용한 코드 스플리팅으로 초기 로딩 성능 최적화
- Styled-Components를 활용한 반응형 미디어 쿼리 구현
- 모듈화된 섹션 기반 컴포넌트 구조
- SSR 비활성화를 통한 클라이언트 렌더링 최적화
프로젝트 생성 폼 구현
다단계 폼 관리 시스템은 React Hook Form을 기반으로 구현했습니다. 세션 스토리지를 활용한 임시 저장 기능과 useMemo를 통한 성능 최적화를 적용했습니다.
- React Hook Form의 FormProvider를 활용한 중첩 폼 관리
- useRef를 사용한 세션 스토리지 데이터 캐싱으로 불필요한 리렌더링 방지
- useMemo를 통한 조건부 렌더링 최적화
- Dynamic Import로 모달과 로딩 컴포넌트의 코드 스플리팅 구현
- 언마운트 시 폼 상태 초기화로 메모리 누수 방지
