Description

Work

• 멀티레이어 상태관리 시스템 설계 및 구현
  - TanStack Query v5를 활용한 서버 상태, Zustand를 통한 클라이언트 상태,멀티레이어 아키텍처를 설계- 네트워크 호출 횟수를 분석하여 캐싱 전략을 수립하여 불필요한 API 호출을 최소화
• JWT 미들웨어 기반 보안 인증 시스템 구축
  - Next.js middleware를 활용하여 JWT 토큰의 구조적 검증과 만료시간 체크를 수행하는 보안 시스템을 구현- 경로별 접근 제어(Protected/Auth Routes)와 자동 리다이렉트 로직을 통해 인증되지 않은 사용자의 보호된 리소스 접근을 차단하고 보안성을 강화

Tech Stack

Next.js 15, TypeScript, Tanstack Query v5, Zustand, React Hook Form, Zod

Description

Work

• Feature-Sliced Design 아키텍처 도입으로 대규모 레거시 시스템 모던화
  - 프론트엔드 팀 개발 효율성과 코드 유지보수성을 위해 주도적으로 FSD 아키텍처를 도입 시도- 6개 레이어(App, Pages, Widgets, Features, Entities, Shared)로 재구성하였습니다. 100여 개 파일 이동 및 임포트 경로 대량 수정을 통해 확장 가능한 아키텍처 설계
• TanStack 생태계 기반 고성능 상태 관리 시스템 구축
  - TanStack Router의 파일 기반 라우팅과 자동 코드 스플리팅- TanStack Query의 서버 상태 캐싱 최적화- TanStack Table의 가상화 테이블을 통합하여 엔터프라이즈급 상태 관리 시스템을 구축

Tech Stack

React, Vite, Tanstack Router, Tanstack Query v5, Zustand, Tailwind CSS, shadcn/ui

Description

Work

• 스마트 스크롤 복원 시스템 개발
  - 사용자 경험 향상을 위해 뒤로가기 시에만 작동하는 스마트 스크롤 복원 시스템을 개발했습니다. Throttle 패턴(100ms)을 적용하여 성능을 최적화하고, React Native WebView 환경에서의 충돌 문제를 해결- 브라우저 기본 스크롤 복원을 비활성화하고 커스텀 로직으로 대체하여 깜빡임 현상을 해결
• 다중 결제 시스템 통합 및 최적화
  - 포트원 SDK를 활용하여 카드결제, 간편결제(네이버페이, 카카오페이), 가상계좌 등 다중 결제 수단을 지원하는 통합 결제 시스템을 구현- 결제 실패/취소에 대한 예외 처리 로직을 구축하여 안정적인 결제 플로우를 완성

Tech Stack

Next.js, Zustand, React Query v5, React Native

Description

Work

• 유저 친화적 Drag & Drop 이미지 업로더 구현
  - DnD Kit을 활용하여 다중 이미지 업로드 및 드래그 앤 드롭 순서 변경이 가능한 이미지 업로더를 개발- 파일 타입/크기 검증(5MB 제한), 실시간 미리보기, 메모리 누수 방지 (URL.revokeObjectURL) 등을 구현하여 사용자 경험을 최적화
• 복합 상품 옵션 관리 시스템 아키텍처 설계
  - 골프, 항공, 숙박을 포함한 다차원 상품 구성 관리 시스템을 개발- Zustand를 활용한 복잡한 상태 관리, 실시간 가격 계산 및 유효성 검증, 단계별 폼 워크플로우(Funnel 패턴)를 구현하여 복잡한 비즈니스 로직을 효율적으로 관리할 수 있도록 설계
• 성능 최적화 및 사용자 경험 개선
  - React.memo, useMemo, useCallback을 활용한 메모이제이션 최적화- 스켈레톤 UI를 통한 로딩 상태 개선

Tech Stack

React, Vite, Tanstack Query v5, Zustand, Tailwind CSS, shadcn/ui

Description

Work

• JWT 미들웨어 기반 보안 인증 시스템 구축
  - Next.js middleware를 활용하여 JWT 토큰의 구조적 검증과 만료시간 체크를 수행하는 보안 시스템을 구현- 경로별 접근 제어(Protected/Auth Routes)와 자동 리다이렉트 로직을 통해 인증되지 않은 사용자의 보호된 리소스 접근을 차단하고 보안성을 강화
• 이미지 최적화 및 CDN 통합
  - Next.js Image 컴포넌트를 연동하여 WebP, AVIF 포맷을 지원하는 이미지 최적화 시스템을 구축- 640px~1920px 다양한 디바이스 사이즈 대응과 24시간 캐시 TTL 설정을 통해 이미지 로딩성능을 크게 향상
• 타입 세이프 폼 검증 시스템 구현
  - React Hook Form과 Zod를 결합하여 런타임 타입 검증이 가능한 폼 시스템을 구현- 재사용 가능한 스키마 기반 검증 로직과 Resolver 패턴을 활용하여 타입 안정성을 보장하고 개발 생산성을 향상함
• Optimistic Updates 패턴으로 실시간 반응성 구현
  - 좋아요 기능에서 서버 응답을 기다리지 않고 즉시 UI를 업데이트하는 Optimistic Updates 패턴을 구현- 실패 시 자동 롤백 메커니즘과 중복 요청 방지 로직을 추가하여 안정적이고 반응성이 뛰어난 사용자 경험을 제공

Tech Stack

Next.js, Zustand, React Query v5, React Native

Description

Work

• 레거시 코드 리팩토링
  - 기존 레거시 코드를 리팩토링하여 코드 가독성 향상 및 재사용성 향상
• 성능 최적화
  - TanStack Query를 도입하여 불필요한 API 호출을 50% 감소하고 컴포넌트 분리로 페이지 로딩 속도 개선
• 아키택처 개선
  - DDD 원칙을 적용한 폴더 구조 재설계로 개발 생산성 향상

Tech Stack

React, TanStack Query, SCSS/Sass

Description

Work

• 초기 페이지 로딩 속도 개선
  - 초기 화면에 고해상도 이미지로 인해 로드 시간이 느려지는 문제를 해결하기 위해, next/image 컴포넌트를 사용하여 AVIF와 WebP 형식으로 이미지를 최적화하고, lazy loading과 priority 속성을 적용하여 🔗 초기 페이지 로드 시간을 약 4초에서 0.97초로 개선하였습니다.
• 시간이 오래걸리는 AI 이미지 생성 시 사용자 경험 개선
  - 로딩 화면이 오래 지속되는 문제로 인한 사용자 경험 저하를 해결하기 위해 API 호출 로직을 수정하여 실시간으로 이미지를 생성하고 사용자에게 지속적으로 업데이트를 제공함으로써 🔗 사용자 경험을 개선하였습니다.
• 사용자를 위한 데이터 시각화 차트 개발
  - 인플루언서의 팔로워 수 등락을 시각적으로 표현하기 위해 ApexCharts.js 라이브러리를 도입하여 🔗 데이터 시각화를 위한 차트를 개발하였습니다. 이를 통해 사용자들이 데이터를 더 쉽게 이해하고 분석할 수 있게 하였습니다.
• 링크 공유 시 필터링 조건 유지 기능 구현
  - 기존 상태 관리 방식을 개선하여 🔗 쿼리 파라미터를 활용한 URL 필터링 기능을 구현하고, 재사용 가능한 useQueryParams 커스텀 훅을 개발하여 팀 간 협업과 코드 유지보수성을 향상시켰습니다.
• 크레딧 및 멤버십 결제 기능 구현
  - 포트원 모듈을 사용하여 🔗 구매 정책을 위한 결제 기능 구현하였습니다. 이를 통해 안전하고 편리한 결제 시스템을 구축하였습니다.

Tech Stack

Next.js 13, TypeScript, Tailwind CSS, TanStack Query, Recoil

Description

Work

• 이미지 업로드 모듈 개선
  - 이미지 업로드 모듈의 편의성을 개선하였습니다. 사용자가 여러 장의 이미지를 등록한 후 수정할 때, 순서를 원하는 대로 지정할 수 있도록 이미지에 인덱스 기능을 추가하고, 체크박스 선택 여부에 따라 순서를 자유롭게 조정할 수 있게 하여 사용자 경험 개선 하였습니다.
• 인턴 멘토링 및 팀 협업 경험
  - 멘토로서 인턴 두 명과 함께 프로젝트를 수행하며 효과적인 팀 협업을 경험했습니다. 모르는 부분에 대해 적극적으로 공유하고, 코드 리뷰를 통해 코드를 개선하고 향상시켰습니다.

Tech Stack

Next.js 12, TypeScript, Tailwind CSS

Description

Work

• 웹 퍼블리싱 및 페이지 구현
  - 프로젝트 전반의 웹 퍼블리싱을 담당하여, 디자인 시안에 맞춰 모든 페이지를 구현하였습니다.
• 업무용 API 개발
  - 회원 정보 수정, 이벤트 관리, 상품 등록 등을 위한 업무용 API를 개발하여 내부 운영 효율성을 높였습니다.
• 관리자 리스트 화면 개발 및 데이터 관리
  - 회원 목록, 포스팅 검수, 이벤트 관리 등의 업무에 필요한 리스트 화면을 개발하여 관리자들이 쉽게 데이터를 관리하고 모니터링할 수 있도록 하였습니다.
• 데이터 시각화 차트 도입을 통한 UI/UX 개선 및 데이터 분석 지원
  - 일자별 매출, 회원 수 등락, 등급별 유저 현황 등을 기존 수치로만 보여주던 부분에서 시각화 차트 도입하여 한눈에 파악할 수 있도록 UI/UX 개선하였습니다. 이를 통해 관리자들이 데이터를 더 쉽게 이해하고, 빠르게 의사 결정을 할 수 있도록 지원하였습니다.

Tech Stack

Spring Boot, Thymeleaf, jQuery, JPA, Mybatis, Bootstrap