Language, Platform, Framework, Library

요소 설명 예시
Language 실행 기반 언어 Python, JavaScript, TypeScript
Platform 실행 환경, 런타임 Node.js (JS), Python 런타임
Framework 구조/패턴 정의, 모듈 구성 제공 Next.js, Nuxt 3, FastAPI, Django
Library 특정 기능 제공, 결합은 개발자 몫 React, Axios, Lodash, Zustand

WebApp 구성요소: Front-end vs Back-end 중심

웹앱 개발은 보통 두 흐름에서 출발하여 API 를 통해 상호작용합니다:

  • Back-end 중심 접근: 데이터와 논리 처리 중심 (FastAPI), 데이터를 처리하고 API를 제공하는 시스템 구성 (Python 계열 선호자에게 익숙)
  • Front-end 중심 접근: 사용자 UX 중심 (Next.js), 사용자 경험 최적화 (JS 계열 선호자에게 익숙)
  • API : 두 영역을 연결하는 계약선
요소 Back-end 중심 풀스택 Front-end 중심 풀스택
주요 역할 API 서버, DB 연동, 인증 처리 UI 렌더링, 라우팅, 상태 관리
기반 Language Python JavaScript / TypeScript
주요 Platform Python Interpreter Node.js
주요 Framework FastAPI, Django, Flask Next.js, Nuxt 3, Vite
주요 Library SQLAlchemy, Pydantic 등 React, Zustand, Tailwind 등
주요 조합 트렌드 FastAPI + PostgreSQL React + Next.js + Node.js

예시: Next.js + FastAPI 통합 구조

구성 요소 역할 및 특징
Next.js (Node 기반) 페이지 라우팅, CSR/SSR, 프론트 코드 구성
FastAPI (Python 기반) REST API 서버, 인증/DB/비즈니스 로직
API 연결 fetch, axios로 프론트에서 백엔드 호출
배포 방식 로컬 분리 개발 → 통합 도커 배포 가능

WebApp Build 프로젝트 디렉터리 구조

plain text
/project-root
├── frontend/             # React + Next.js 앱 (Node.js 런타임)
│   ├── pages/            # URL 경로별 페이지
│   ├── components/       # 공통 UI 컴포넌트
│   └── next.config.js    # Next.js 설정 파일
│
├── backend/              # FastAPI 앱 (Python 런타임)
│   ├── app/              # API 라우터, 모델, 서비스 로직
│   ├── main.py           # FastAPI 진입점
│   └── requirements.txt  # 종속 패키지 목록
│
├── docker-compose.yml    # 전체 앱 통합 실행 설정

백엔드 예시 (FastAPI)

python
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.get("/api/users")
def get_users():
    return [{"id": 1, "name": "Alice"}, {"id": 2, "name": "Bob"}]

프론트엔드 예시 (Next.js)

typescript
import { useEffect, useState } from 'react'

export default function HomePage() {
  const [users, setUsers] = useState([])

  useEffect(() => {
    fetch('http://localhost:8000/api/users')
      .then(res => res.json())
      .then(data => setUsers(data))
  }, [])

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map(u => <li key={u.id}>{u.name}</li>)}
      </ul>
    </div>
  )
}

WebApp Deploy 방식 (Docker 컨테이너 포장)

단계 목적 방법
로컬 개발 각각 분리 실행 FastAPI (:8000), Next.js (:3000)
리버스 프록시 단일 도메인으로 통합 NGINX로 /api → FastAPI, 그 외 → Next.js
도커 통합 배포 재현 가능성, 이식성 확보 docker-compose.yml로 전체 정의