프론트 설계

아키텍쳐 설계 원칙을 준수해서 프론트 설계 방식을 기술합니다. next app 라우팅 방식을 예로 들어 설명합니다.

1. Project Setup

React 설치

npx create-react-app my-app
cd my-app

필수 패키지 추가

npm install axios react-router-dom
npm install -D eslint prettier husky lint-staged

TypeScript 사용 시

npx create-react-app my-app --template typescript

2. Folder Structure (폴더 구조)

src/
├── assets/        # 이미지, 폰트 등
├── components/    # 재사용 가능한 컴포넌트
├── features/      # 도메인/기능별 폴더
│   └── auth/
│       ├── components/
│       ├── pages/
│       └── api.ts
├── hooks/         # 커스텀 훅
├── layouts/       # 레이아웃 컴포넌트
├── pages/         # 라우팅되는 페이지 컴포넌트
├── routes/        # 라우터 설정
├── services/      # API 서비스 파일
├── store/         # 전역 상태 관리
├── styles/        # 전역 스타일, 테마 등
└── utils/         # 공통 유틸 함수

3. Component Organization (컴포넌트 구성)

Atomic Design 참고
- atoms: 버튼, 텍스트 등 가장 작은 단위
- molecules: 폼 필드, 카드 등 작은 조합
- organisms: 복합 레이아웃
- pages: 실제 페이지 컴포넌트
예시 구조

components/
├── atoms/
│   └── Button.tsx
├── molecules/
│   └── FormField.tsx
├── organisms/
│   └── LoginForm.tsx
└── pages/
    └── LoginPage.tsx

4. Styling (스타일링)

선택지:
- styled-components (CSS-in-JS)
- Tailwind CSS
- CSS Modules
예시: styled-components

npm install styled-components

// Button.tsx
import styled from 'styled-components';

const Button = styled.button`
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
`;

5. Data Fetching & APIs

Axios를 통한 API 호출:

// services/userService.ts
import axios from 'axios';

export const getUser = (id: string) => axios.get(`/api/users/${id}`);

React Query, SWR 등 데이터 캐싱 라이브러리도 많이 사용됨

npm install @tanstack/react-query

6. State Management (상태 관리)

선택지:
- Context API (간단한 앱)
- Redux / Zustand / Recoil (복잡한 앱)
예시: Zustand

npm install zustand

// store/useUserStore.ts
import { create } from 'zustand';

const useUserStore = create((set) => ({
  user: null,
  setUser: (user: any) => set({ user }),
}));

7. Performance Optimization (성능 최적화)

React.memo, useMemo, useCallback 사용
코드 스플리팅: React.lazy, Suspense
이미지 최적화 (lazy loading, WebP)
리스트 최적화 (virtual scroll)

8. Error Handling & Logging

전역 에러 바운더리 설정

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error: any) {
    return { hasError: true };
  }

  componentDidCatch(error: any, info: any) {
    console.error(error, info);
  }

  render() {
    if (this.state.hasError) return <h1>에러 발생</h1>;
    return this.props.children;
  }
}

Sentry 등 외부 로깅 서비스도 연동 가능

npm install @sentry/react

9. Testing & CI/CD

테스트 도구:
- Unit: Jest
- E2E: Cypress / Playwright
예시: 간단한 테스트

// Button.test.tsx
import { render, screen } from '@testing-library/react';
import Button from './Button';

test('버튼 렌더링', () => {
  render(<Button>Click Me</Button>);
  expect(screen.getByText('Click Me')).toBeInTheDocument();
});

CI/CD 도구:
- GitHub Actions, Vercel, Netlify, Jenkins 등

10. Deployment & Hosting

정적 호스팅 서비스:
- Vercel, Netlify (React 앱에 최적)
- Firebase Hosting
- AWS S3 + CloudFront
예: Vercel 배포
1. GitHub에 코드 Push
2. Vercel에서 GitHub 연결
3. 프로젝트 선택 → 자동 배포 완료