[Wide learning map] 초기 설정

라이브러리 설치

Backend

# fastapi 설치
$ pip install "fastapi[standard]"

# fastapi 개발 서버 실행
$ fastapi dev main.py

 

Frontend

1. next.js 설치

# next.js 설치
$ npx create-next-app@latest frontend --typescript --tailwind --eslint
...
$ ✔ Would you like to use React Compiler? … No / Yes # Yes
$ ✔ Would you like your code inside a `src/` directory? … No / Yes # Yes
$ ✔ Would you like to use App Router? (recommended) … No / Yes # Yes
$ ✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes # No
...

 

 

2. 프로젝트에 필요한 라이브러리 설치

• 참고) 작업 루트 경로로 이동하여 라이브러리 설치를 해야한다

$ cd frontend

# reactflow: 노드기반 다이어그램 라이브러리
# lucide-react: 아이콘 라이브러리
# axios: 비동기 통신 라이브러리
$ npm install reactflow lucide-react axios

 

 

백엔드 파일 구조 설계

 

1. 마이그레이션 환경 초기화

• 이를 수행하면 alembic.ini은 백엔드 작업 루트, alembic 폴더는 app/ 하위에 생성됨. 상세한 경로는 아래 참고.

# alembic 설치
$ pip install alembic

# 마이그레이션 환경 초기화 
$ alembic init app/alembic

 

 

2. 파일 구조 설계

• Django와 달리 Fastapi는 작업자가 처음부터 끝까지 직접 파일 구조를 짜야한다 = 유연한데 수고로움.
• Fastapi 개발자가 만든 공식 Fastapi 템플릿인 Full stack Fastapi 템플릿을 참고했다.

wide_learning_map # 프로젝트 루트
├── frontend # 프론트 작업 루트
└── backend # 백엔드 작업 루트
    ├── alembic.ini # Alembic의 환경 설정 파일 (DB 마이그레이션 설정 파일)
    ├── app
    │   ├── __init__.py
    │   ├── alembic # 마이그레이션 히스토리 저장소
    │   │   ├── env.py
    │   │   ├── README
    │   │   ├── script.py.mako
    │   │   └── versions
    │   ├── api 
    │   │   ├── __init__.py
    │   │   ├── main.py # 여러 개로 쪼개진 routes/들을 하나로 묶어서 메인 앱에 전달하는 허브 역할
    │   │   └── routes # 실제 API 엔드포인트가 위치
    │   │       └── __init__.py
    │   ├── core # 프로젝트의 핵심 설정
    │   │   └── __init__.py
    │   ├── crud.py # 순수 DB 작업 실행 (create, select 등)
    │   ├── initial_data.py
    │   ├── main.py # 전체 FastAPI 애플리케이션의 엔트리 포인트. 앱 객체를 생성하고 라우터를 연결.
    │   ├── models.py # SQLModel을 사용해 실제 DB 테이블 구조를 정의
    │   ├── services.py # 비즈니스 로직 전담
    │   └── utils.py # 반복적으로 사용되는 유틸함수
    ├── Dockerfile
    ├── pyproject.toml # 프로젝트의 의존성(라이브러리 버전)과 빌드 설정 관리
    └── scripts
        └── prestart.sh

 

 

docker-compose.yml 작성

• 백엔드 작업부터 먼저 진행할 계획이기 때문에 db와 backend 컨테이너만 올렸다.
• 민감 정보는 .env 파일에 작성하여 docker-compose.yml 에는 노출되지 않도록 했다.

version: '3.8'
services:
  db:
    image: postgres:15
    container_name: postgres
    volumes:
      - postgres_data_wlm:/var/lib/postgresql/data
    env_file: .env
    ports:
      - "5433:5432"
    networks:
      - mynetwork
    healthcheck: # DB가 쿼리를 받을 준비가 됐는지 체크
      test: ["CMD-SHELL", "pg_isready -U $$POSTGRES_USER -d $$POSTGRES_DB"]
      interval: 5s
      timeout: 5s
      retries: 5

  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile.dev
    container_name: backend
    ports:
      - "80:80" # 호스트:컨테이너
    volumes:
      - ./backend:/code
    networks:
      - mynetwork
    restart: always # 컨테이너 종료 시 자동 재시작


volumes:
  postgres_data_wlm: # 볼륨 정의

networks:
  mynetwork: # 네트워크 정의

 

 

DB 마이그레이션

• Django와 마찬가지로 Fastapi도 마이그레이션 스크립트를 생성한 뒤 해당 스크립트 기반으로 마이그레이션을 한다.

1. app/alembic/env.py 파일 수정

# 1. app/alembic/env.py 수정
# 상단에 2줄 추가
from app.models import SQLModel  # 우리가 만든 모델의 베이스
import app.models  # 모든 모델 클래스를 불러오기 위해 필요

# target_metadata를 설정해야 Alembic이 모델 변경을 감지
target_metadata = SQLModel.metadata

 

 

2. alembic.ini 파일 수정

sqlalchemy.url = [DB drive]://[DB유저명]:[DB비밀번호]@[DB호스트:포트번호]/[DB명]

 

 

3. 마이그레이션 스크립트 파일 생성

• app/alembic/versions 경로에 마이그레이션 파일만 생성한다.

$ alembic revision --autogenerate -m "Initial migration"

마이그레이션 완료되면 app/alembic/versions에 마이그레이션 파일 생성됨

 

 

4. 마이그레이션 실행

• DB 테이블을 생성한다.

$ alembic upgrade head

DB에 테이블 생성 완료

 

 

 

---

참고
https://github.com/fastapi/full-stack-fastapi-template

https://wikidocs.net/318196