Skip to content

기술 스택 - 가이드.md

Latest commit

 

History

History
289 lines (194 loc) · 6.95 KB

기술 스택 - 가이드.md

File metadata and controls

289 lines (194 loc) · 6.95 KB

기술 스택 - 가이드

개요

Picake 웹 사용자 애플리케이션의 실제 구현된 기술 스택과 구체적인 사용 사례, 코드 예시를 포함한 실용적인 가이드입니다.

핵심 기술 스택

1. Next.js (v15)

선택 이유:

  • React 기반의 풀스택 프레임워크로 SSR/SSG 지원
  • 파일 기반 라우팅으로 직관적인 페이지 구조
  • 내장된 최적화 기능 (이미지 최적화, 폰트 최적화 등)
  • Vercel과의 완벽한 호환성

주요 기능:

  • App Router: 파일 기반 라우팅 시스템
  • 서버 컴포넌트와 클라이언트 컴포넌트 분리
  • 이미지 최적화 (next.config.ts에서 remotePatterns 설정)
  • 메타데이터 API로 SEO 최적화

실제 구현 사례:

App Router 구조

src/app/
├── layout.tsx          # 루트 레이아웃 (메타데이터, 폰트 설정)
├── page.tsx           # 홈페이지
├── login/             # 로그인 페이지
│   ├── page.tsx
│   ├── basic/page.tsx # 기본 로그인
│   └── google/page.tsx # 구글 로그인
├── register/          # 회원가입 페이지
└── find-account/      # 계정 찾기 페이지

메타데이터 최적화 (layout.tsx)

export const metadata: Metadata = {
  title: {
    default: "Picake - 달콤한 디저트 주문 플랫폼",
    template: "%s | Picake",
  },
  description: "달콤한 디저트를 온라인으로 주문하는 최고의 플랫폼",
  openGraph: {
    type: "website",
    locale: "ko_KR",
    url: "https://picake.kr",
    siteName: "Picake",
    images: [{ url: "/og-image.jpg", width: 1200, height: 630 }],
  },
};

폰트 최적화

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

현재 사용법:

  • App Router로 페이지 라우팅 구현
  • 메타데이터 API로 SEO 최적화
  • 서버 컴포넌트와 클라이언트 컴포넌트 분리
  • Geist 폰트로 성능 최적화

향후 계획:

  • React 19의 새로운 기능들 활용
  • 서버 액션을 통한 폼 처리 개선
  • 스트리밍과 Suspense를 활용한 성능 최적화

2. React (v19)

선택 이유:

  • 최신 React 버전으로 최신 기능 활용
  • 향후 지속적인 업데이트와 지원
  • Next.js 15와의 완벽한 호환성

현재 사용법:

  • 함수형 컴포넌트와 훅 기반 개발
  • Suspense를 활용한 로딩 처리
  • Error Boundary를 통한 에러 처리
  • 상태 관리와 폼 처리

향후 계획:

  • React 19의 새로운 훅들 활용
  • 서버 컴포넌트 최적화
  • Concurrent Features 활용

3. TanStack Query (v5)

선택 이유:

  • 서버 상태 관리의 복잡성 해결
  • 캐싱, 동기화, 백그라운드 업데이트 자동화
  • React와의 완벽한 통합

현재 사용법:

  • 인증 관련 쿼리 관리 (로그인, 회원가입, 사용자 정보 조회)
  • 상품 목록/상세 조회, 좋아요 여부 확인 등
  • 자동 캐싱과 리페칭 설정
  • 쿼리 무효화를 통한 데이터 동기화
  • QueryProvider로 전역 설정

개발 도구:

  • @tanstack/react-query-devtools (v5): 개발 환경에서 쿼리 상태 모니터링

향후 계획:

  • 무한 스크롤 구현
  • 낙관적 업데이트 적용
  • 오프라인 지원 강화
  • 쿼리 프리페칭 최적화

4. Zustand (v5)

선택 이유:

  • 간단하고 직관적인 상태 관리
  • Redux 대비 보일러플레이트 감소
  • TypeScript와의 우수한 호환성

현재 사용법:

  • 인증 상태 관리 (로그인/로그아웃, 사용자 정보)
  • 전역 알림 상태 관리 (에러, 성공, 경고 메시지)
  • 간단한 클라이언트 상태 관리

향후 계획:

  • 상태 구조 최적화
  • 미들웨어 활용 증대
  • 상태 지속성 구현
  • 복잡한 상태 로직 분리

5. Axios

선택 이유:

  • 인터셉터를 통한 요청/응답 처리
  • 자동 JSON 변환과 에러 처리
  • 쿠키 기반 인증 지원 (credentials: true)

현재 사용법:

  • API 클라이언트 설정 (baseURL, timeout, credentials)
  • 인터셉터를 통한 토큰 자동 갱신
  • 에러 처리와 재시도 로직
  • 쿠키 기반 인증 (서브도메인 통합 로그인)

향후 계획:

  • 요청 취소 기능 활용
  • 캐싱 전략 구현
  • 요청 최적화
  • 에러 처리 개선

6. react-error-boundary

선택 이유:

  • React 컴포넌트 트리에서 발생하는 에러를 안전하게 처리
  • 사용자에게 친화적인 에러 UI 제공

현재 사용법:

  • ErrorBoundaryProvider로 전역 에러 처리
  • 에러 발생 시 에러 페이지 표시

7. socket.io-client

선택 이유:

  • 실시간 양방향 통신이 필요한 채팅 및 알림 기능 구현
  • 백엔드 Socket.IO 서버와의 호환성

현재 사용법:

  • 실시간 채팅 메시지 송수신
  • 실시간 주문 알림 수신 (namespace: /notifications)

8. Swiper

선택 이유:

  • 모바일 친화적인 터치 슬라이더 컴포넌트
  • 배너, 상품 이미지 등 슬라이더에 최적화

현재 사용법:

  • 홈 배너 슬라이더
  • 상품 목록 슬라이더

9. react-zoom-pan-pinch

선택 이유:

  • 상품 이미지를 핀치/줌으로 확대 가능한 UX 제공
  • 모바일 환경에서 자연스러운 제스처 지원

현재 사용법:

  • 상품 상세 페이지 이미지 줌/핀치 뷰어

10. isomorphic-dompurify

선택 이유:

  • XSS 공격 방지를 위한 HTML 정제
  • 서버/클라이언트 양쪽에서 동작

현재 사용법:

  • 사용자 입력 HTML 콘텐츠 정제
  • 안전한 HTML 렌더링

11. Geist 폰트

선택 이유:

  • Next.js에서 최적화된 폰트 로딩
  • 성능 최적화 (자동 폰트 최적화)

현재 사용법:

  • Geist Sans: 기본 폰트
  • Geist Mono: 모노스페이스 폰트
  • CSS 변수로 폰트 적용

미사용 기술 (향후 도입 검토)

2. 모니터링

  • Sentry: 에러 모니터링
  • Google Analytics: 사용자 분석

패턴

1. 상태 관리 패턴

  • Zustand: 전역 상태
  • TanStack Query: 서버 상태 (API 데이터)
  • 로컬 상태: useState

2. API 통신 패턴

  • Axios: HTTP 클라이언트
  • 인터셉터: 토큰 자동 갱신, 에러 처리
  • 타입 안전성: TypeScript 인터페이스

성능 최적화 전략

1. 현재 구현

  • Next.js 자동 최적화 (이미지, 폰트, 코드 스플리팅)
  • React Query 캐싱 (5분 staleTime, 10분 gcTime)
  • Suspense를 활용한 로딩 처리
  • 에러 바운더리를 통한 에러 처리

2. 향후 계획

  • 서버 컴포넌트 활용 증대
  • 스트리밍 렌더링
  • 캐싱 전략 개선
  • 번들 크기 최적화

결론

각 기술의 장점을 최대한 활용하면서도 단점을 보완할 수 있는 방향으로 지속적인 개선이 필요합니다. 특히 성능, 보안, 사용자 경험 측면에서의 최적화가 중요합니다.