학부연구생 2일차

Mini·2025년 1월 9일

이번주 목표

1/9
fastapi 공부(로그인 기능 x)
-> 파이썬 가상환경(.venv)연결해 예제 풀이
axios 공부
( 로컬에서 돌려보기)
mysql 공부(이걸로 서버 관리함)
-> mysql 벤치 설치 후 연결 확인
orm 이용해서 예제 풀어보기
orm을 사용하여 fastapi를 어떻게 할지 공부

->
개념 넓고 얇게 공부하기

데이터 주고 받기 정도

FastAPI란?

FastAPI는 Python으로 작성된 최신 웹 프레임워크로, 빠르고 간단하며 효율적인 API를 개발할 수 있도록 설계되었습니다. 높은 성능과 사용자 친화적인 인터페이스를 제공하여 웹 개발자들 사이에서 인기를 얻고 있습니다.

FastAPI의 주요 특징

1. 고성능

ASGI(Asynchronous Server Gateway Interface) 기반: 비동기 처리를 지원하여 높은 처리 속도를 자랑.
Python의 Starlette와 Pydantic을 기반으로 제작되어 경량화와 안정성 보장.

2. 자동 문서화

FastAPI는 OpenAPI와 JSON Schema를 기반으로 자동 API 문서화를 제공합니다.
API를 생성하면 /docs 또는 /redoc 경로에서 문서를 자동 생성 및 확인 가능.

3. 유형 검사(Type Hint) 활용

Python의 Type Hint를 적극 활용하여 코드의 안정성과 가독성 향상.
Pydantic을 사용해 데이터 검증과 직렬화 지원.

4. 비동기 지원

async/await 문법을 기본적으로 지원하여 비동기 작업을 간단하게 구현 가능.
데이터베이스, 외부 API와의 비동기 통신에 최적화.

5. 간결한 코드

직관적인 문법과 코드 구조로 빠르게 API 개발 가능.
코드 작성이 간소화되어 생산성 증가.

FastAPI 시작하기

FastAPI를 시작하는 것은 간단하다. 아래의 명령어를 실행하여 FastAPI를 설치

설치

pip install fastapi uvicorn

간단한 예제 코드

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def read_root():
    return {"message": "Hello, FastAPI!"}

@app.get("/items/{item_id}")
def read_item(item_id: int, q: str = None):
    return {"item_id": item_id, "q": q}

실행

uvicorn main:app --reload

http://127.0.0.1:8000에서 API를 확인할 수 있습니다.
자동 생성된 문서는 http://127.0.0.1:8000/docs에서 확인 가능합니다.

간단하게 html 연결해서 실행해보자
FastAPI로 간단한 대시보드 구현 프로젝트 설명
실행 환경

Python 버전: 3.10 이상
FastAPI: 웹 프레임워크
Uvicorn: ASGI 서버
Jinja2: HTML 템플릿 렌더링
파일 구조:

프로젝트 폴더/
├── .venv/                   # 가상환경 폴더
│   ├── Include/
│   ├── Lib/
│   ├── Scripts/
│   └── 기타 가상환경 파일들
├── static/                  # 정적 파일 저장 폴더
│   └── style.css            # 스타일 파일
├── templates/               # 템플릿 파일 저장 폴더
│   └── dashboard.html       # Jinja2 기반 템플릿 파일
├── main.py                  # FastAPI 애플리케이션 파일
└── 기타 프로젝트 관련 파일

코드 설명

# 1. main.py: FastAPI 애플리케이션 로직

from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates

app = FastAPI()

정적 파일 및 템플릿 설정

app.mount("/static", StaticFiles(directory="static"), name="static")
templates = Jinja2Templates(directory="templates")


@app.get("/", response_class=HTMLResponse)
async def read_dashboard(request: Request):
    data = {"visitors": 123, "page_views": 456}  # 샘플 데이터
    return templates.TemplateResponse("dashboard.html", {"request": request, "data": data})

핵심 기능:
/static 경로에 정적 파일(style.css)을 매핑.
/templates 디렉토리에서 Jinja2 HTML 템플릿(dashboard.html)을 로드.
샘플 데이터 (visitors, page_views)를 템플릿으로 전달.

dashboard.html: 템플릿 파일

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FastAPI Dashboard</title>
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <h1>FastAPI 대시보드</h1>
    <div class="container">
        <p>방문자 수: {{ data.visitors }}</p>
        <p>페이지 조회 수: {{ data.page_views }}</p>
    </div>
</body>
</html>

HTML 기능:
{{ data.visitors }} 및 {{ data.page_views }}는 FastAPI가 전달한 데이터를 표시.
/static/style.css에서 불러온 스타일을 적용.

style.css: 정적 CSS 파일

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #f4f4f9;
    color: #333;
}

.container {
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

디자인 기능:
배경색: 연한 회색(background-color: #f4f4f9)
텍스트 색상: 어두운 회색(color: #333)
컨테이너: 박스 그림자와 둥근 모서리로 심미성 향상.

구현 과정

Python 가상환경 생성 및 활성화
python -m venv .venv
.venv\Scripts\activate # Windows

필수 라이브러리 설치
pip install fastapi uvicorn jinja2

FastAPI 서버 실행
uvicorn main:app --reload

웹 브라우저에서 확인
URL: http://127.0.0.1:8000
CSS가 적용된 대시보드와 방문자 및 페이지 조회 수 데이터가 출력됩니다.

추가

Html, js, css를 이용해서 틀을 만들어주고 fastapi를 이용해서 http://127.0.0.1:8000/ 로컬서버에 돌린 결과이다. 우리는 결과적으로 React와 fastapi를 연결하는 것이 중요하기에 이부분을 중심적으로 다시 공부해보고 연결해봐야 하겠다.

참고하자
https://fastapi.tiangolo.com/tutorial/security/simple-oauth2/
https://blog.joonas.io/227
https://fastapi.tiangolo.com/ko/
https://github.com/reactjs/ko.react.dev
https://jongsky.tistory.com/17