FastAPI 서버개발, React, Vue.js 또는 Angular와 FastAPI 통합하기

이 글에서는 FastAPI를 이용하여 효율적인 백엔드 서버를 개발하고, 이를 React, Vue.js 또는 Angular와 통합하는 방법에 대해 자세히 알아보겠습니다. FastAPI는 Python 기반의 현대적인 웹 프레임워크로, 고성능 API를 쉽게 구축할 수 있게 해줍니다. 이를 통해 클라이언트-서버 구조의 웹 애플리케이션을 구성하는 예제와 함께 설명드리겠습니다.

1. FastAPI 소개

FastAPI는 Starlette 기반으로 구축된 웹 프레임워크입니다. 비동기식 프로그래밍을 지원하며, 매우 높은 성능과 자동 문서화 기능을 제공합니다. 기본적 구조는 간단하며, 짧은 코드로 서버를 구축할 수 있습니다.

비동기 요청 처리: FastAPI는 async/await 구문을 통해 비동기 처리를 쉽게 구현할 수 있습니다.
자동 문서화: OpenAPI 및 JSON Schema를 기반으로 한 API 문서화가 자동으로 이루어집니다.
타입 힌트 지원: Python의 타입 힌트를 활용하여 코드의 가독성과 유지 보수성을 높일 수 있습니다.

FastAPI 설치하기

pip install fastapi uvicorn

2. 기본 FastAPI 서버 구축하기

다음 예제는 기본적인 FastAPI 서버를 구축하는 방법을 보여줍니다. 웹 서버를 통해 간단한 ‘Hello World’ API를 만들어보겠습니다.

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
async def read_root():
    return {"Hello": "World"}

위의 코드를 저장한 후, 다음 명령어로 서버를 실행할 수 있습니다:

uvicorn main:app --reload

localhost:8000에서 ‘Hello, World’ 메시지를 확인할 수 있습니다. 또한, http://localhost:8000/docs를 방문하면 Swagger UI를 통해 API 문서를 확인할 수 있습니다.

3. 데이터 모델링

FastAPI는 Pydantic을 사용하여 데이터 모델을 정의하고 검증할 수 있습니다. 다음은 사용자 정보를 처리하기 위한 사용자 모델을 정의하는 예제입니다.

from pydantic import BaseModel

class User(BaseModel):
    id: int
    name: str
    email: str

이제 이 모델을 사용하여 사용자 정보를 받는 API를 생성해 보겠습니다.

@app.post("/users/")
async def create_user(user: User):
    return user

위 코드를 통해 POST 요청으로 사용자 정보를 받아 JSON 형태로 응답합니다.

4. FastAPI와 React 통합하기

React는 페이지 기반의 사용자 인터페이스를 구축할 수 있는 JavaScript 라이브러리입니다. FastAPI와 React를 통합하여 클라이언트와 서버 간의 데이터를 주고받는 방법을 설명하겠습니다.

React 설치하기

React 프로젝트를 생성하기 위해 Create React App를 사용할 수 있습니다. 다음 명령어로 프로젝트를 생성합니다.

npx create-react-app my-app

API 호출하기

React를 사용하여 FastAPI 서버에 API 요청을 보내고 응답을 처리하는 방법은 다음과 같습니다.

import React, { useState, useEffect } from 'react';

function App() {
    const [user, setUser] = useState(null);

    const createUser = async () => {
        const response = await fetch('http://localhost:8000/users/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ id: 1, name: 'John Doe', email: 'john@example.com' }),
        });
        const data = await response.json();
        setUser(data);
    };

    return (
        
            FastAPI와 React 통합 예제
            
            {user && {JSON.stringify(user, null, 2)}
}
        
    );

}
export default App;
위의 코드에서 버튼을 클릭하면 FastAPI 서버에 사용자 정보가 전송되고, 응답으로 받은 JSON 데이터가 화면에 출력됩니다.
5. FastAPI와 Vue.js 통합하기
Vue.js는 또 다른 인기 있는 프론트엔드 프레임워크로, FastAPI와 함께 사용할 수 있습니다.
Vue.js 설치하기
Vue CLI를 사용하여 새로운 Vue.js 프로젝트를 생성합니다. 다음 명령어로 프로젝트를 생성하세요.
vue create my-vue-app
API 호출하기
Vue.js에서 FastAPI로 POST 요청을 보내는 방법은 다음과 같습니다.
<template>
  <div>
    <h1>FastAPI와 Vue.js 통합 예제</h1>
    <button @click="createUser">사용자 생성</button>
    <pre v-if="user">{{ user }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: null,
    };
  },
  methods: {
    async createUser() {
      const response = await fetch('http://localhost:8000/users/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ id: 1, name: 'Jane Doe', email: 'jane@example.com' }),
      });
      this.user = await response.json();
    },
  },
};
</script>
위 코드를 적용하고 버튼을 클릭하여 사용자 정보를 생성하면 FastAPI 서버에 POST 요청이 이루어집니다.
6. FastAPI와 Angular 통합하기
Angular는 또 다른 강력한 프론트엔드 프레임워크로, FastAPI와 통합하여 SPA(Single Page Application)을 만들 수 있습니다.
Angular 설치하기
Angular CLI를 사용하여 새로운 Angular 프로젝트를 생성합니다.
ng new my-angular-app
API 호출하기
Angular에서 FastAPI로 데이터를 전송하는 예시는 다음과 같습니다.
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    FastAPI와 Angular 통합 예제
    
    {{ user | json }}
  `,

})

export class AppComponent {

  user: any;
  async createUser() {

    const response = await fetch('http://localhost:8000/users/', {

      method: 'POST',

      headers: {

        'Content-Type': 'application/json',

      },

      body: JSON.stringify({ id: 1, name: 'Chris Doe', email: 'chris@example.com' }),

    });

    this.user = await response.json();

  }

}


위 코드를 통해 Angular 애플리케이션에서 FastAPI 서버에 사용자가 생성되는 요청을 보낼 수 있습니다.
7. 결론
이 글에서는 FastAPI를 이용하여 기본적인 백엔드 서버를 구축하고, React, Vue.js, Angular와 통합하는 방법을 알아보았습니다. FastAPI는 빠르고 효율적인 웹 API 개발을 가능하게 하며, 다양한 프론트엔드 프레임워크와 쉽게 통합할 수 있는 장점을 가지고 있습니다. 이번 강좌를 통해 FastAPI와 클라이언트 측 프레임워크 간의 상호작용을 이해하고, 응용 프로그램의 아키텍처 설계에 대한 통찰을 얻으시길 바랍니다.


	관련