테크스택 및 앱 구조

테크 스택

• Next.js v14.x 이상 (React Server Ccomponent + Server Action)

• TypeScript

• TailwindCSS

• shadcn/ui

• DrizzleORM

• React-Hook-Form

• Zod

디렉토리 구조

drizzle/                        # DrizzleORM DB 마이그레이션                        
public/                         # 서버 사용 이미지
src/                            
├── app/                        # Next.js App Router  
│   ├── api/                    # 어드민 API      
│   ├── download-answers/       # 영상답변 다운로드 페이지                  
│   ├── download-videos/        # 영상 페이지                  
│   ├── not-authorized/         # 인증 오류 페이지                
│   ├── ships/                  # 선박 페이지        
│   ├── users/                  # 계정 페이지        
│   └── video-questions/        # 영상질문 페이지                  
├── db/                         # Drizzle DB 스키마
├── lib/                        # 공유 컴포넌트, 컨텍스트, 훅, 유틸 모음  
└── mailer/                     # Nodemailer    

💡
App Router 가 라우팅 역할도 하지만 React Server Component 를 사용하고 있기 때문에 
쿼리, 액션, 컴포넌트가 같은 도메인 폴더 안
에 위치합니다. FE 컴포넌트 같은 경우는 파일 상단에 ‘use client’ 로 표시해줍니다.

파일 컨벤션

• <CamelCase>.tsx: React 서버/클라이언트 컴포넌트

• Providers.tsx: 앱 전체 컨텍스트 프로바이더 (클라이언트 컴포넌트)

• queries.server.ts: DB 쿼리 함수

• actions.ts: Server Action 함수

앱 구조

• Nginx 서버는 들어오는 요청에 대해 해당 도메인을 매핑된 포트로 리버스 프록시

  • /etc/nginx/sites-enabled/diva.conf

• DIVA ADMIN 서비스는 도커 컨테이너 안에 Next.js 서버로 동작

  • RSC (React Server Component) 를 사용하여 데이터 페칭후 서버 사이드 렌더링 (e.g. DrizzleORM 쿼리 후 리스트 컴포넌트 생성)

  • 폼 제출은 Server Action 를 통해 FormData 전달 (POST 요청)

• PostgreSQL 은 DIVA API 서버 도커 컴포즈에 포함되어 있으며 같이 공유

• 저장되는 이미지(선박 이미지)는 /var/www/images 경로에 저장하고 도커 볼륨으로 관리