SOSO 프론트엔드 개발환경을 설정하고 프로젝트를 실행하는 방법을 안내합니다.

• 배포 링크 : https://soso-front-end-web.vercel.app/

📋 사전 요구사항

개발을 시작하기 전에 다음 도구들이 설치되어 있어야 합니다!

Node.js 20+

**필수 버전:** 20.0.0 이상

pnpm 9+

**권장 패키지 매니저** 빠른 설치와 워크스페이스 지원

🛠️ 개발 환경 설정

1. 레포지토리 클론

# HTTPS로 클론
git clone https://github.com/B2A5/SOSO-Front-End.git
cd SOSO-Front-End

2. pnpm 설치

npm으로 설치:

npm install -g pnpm@9

Corepack 사용 (추천):

# Node.js 16.14+ 에 포함된 Corepack 활성화
corepack enable
corepack prepare [email protected] --activate

3. 의존성 설치

# 프로젝트 루트에서 실행
pnpm install --frozen-lockfile

:::tip[frozen-lockfile이란?] --frozen-lockfile 옵션은 pnpm-lock.yaml 파일을 수정하지 않고 정확히 그 내용대로 설치합니다. 팀원 간 동일한 의존성 버전을 보장하기 위해 사용합니다. :::

4. 환경 변수 설정

# 웹 앱 환경 변수 파일 생성
apps/web/.env.local

⚠️ 주의: .env.local 파일에 실제 API 키와 설정값을 입력하세요.(FE 팀장에게 문의)

🏃‍♂️ 개발 서버 실행

전체 프로젝트 실행

# 모든 워크스페이스 개발 서버 동시 실행
pnpm dev

특정 앱만 실행

웹 앱만 실행:

pnpm --filter web dev
# 또는
cd apps/web && pnpm dev

문서 사이트만 실행:

pnpm --filter docs dev
# 또는
cd docs && pnpm dev

실행 후 다음 주소로 접속할 수 있습니다:

• 웹 앱: http://localhost:3000
• 문서 사이트: http://localhost:4321
• ...이후 vercel 배포 링크 추가 예정

📁 프로젝트 구조 개요

SOSO-Front-End/
├── apps/
│   ├── mobile/              # 이후 RN Expo로 개발 예정
│   └── web/                 # Next.js 14 + React 18 메인 웹 앱
│
├── docs/                    # 프론트엔드 문서 사이트 (astro 기반)
│
├── packages/                # 추후 앱도 개발할 경우 추상화를 진행합니다.
│   ├── ui/                  # 공유 UI 컴포넌트(예정)
│   ├── api/                 # API 클라이언트(예정)
│   ├── utils/               # 공통 유틸리티(예정)
│   └── 등등등/               # 추가로 추상화 가능한 목록들...
│
├── pnpm-workspace.yaml      # pnpm 워크스페이스 설정
├── turbo.json              # Turbo 빌드 설정
├── build.sh                # Vercel Preview용 빌드 스크립트
└── package.json            # 루트 패키지 설정

🧪 개발 명령어

자주 사용하는 명령어

# 개발 서버 실행
pnpm dev

# 전체 빌드
pnpm build

# 린트 검사
pnpm lint

# 린트 자동 수정
pnpm lint:fix

# 타입 검사
pnpm typecheck

# 테스트 실행
pnpm test

# 테스트 (워치 모드)
pnpm test:watch

Turbo 명령어

# 특정 앱만 빌드
pnpm turbo run build --filter=web

# 캐시 정리
pnpm turbo run clean

# 의존성 그래프 시각화
pnpm turbo run build --graph

권장 확장 프로그램

프로젝트에 도움이 되는 확장 프로그램입니다.

• ES7+ React/Redux/React-Native snippets - React 스니펫
• Tailwind CSS IntelliSense - Tailwind 자동완성
• TypeScript Importer - 자동 import
• Prettier - 코드 포맷팅
• ESLint - 린트 검사
• MDX - 문서 작성을 위한 언어 지원