FastAPI(Python)과 Svelte로 무작정 웹 개발하기(기초) - 1

여러분이 아는 서비스 중 파이썬으로 개발된 서비스가 얼마나 될까요? 대표적으로 Instagram이 Django로 개발됐다고 알려졌죠. 그 외에 Reddit, Spotify, Dropbox, Quora 등 많은 유명한 해외 서비스가 파이썬으로 작성됐습니다. 물론 서비스의 규모가 커지면서 파이썬 한 가지 언어로만 서비스를 구성하지는 않습니다. 그러나 메인 언어가 파이썬이라는 것이 중요하죠. 생산성이 좋다는 이유로 초기 제품을 개발할 때 파이썬을 많이 사용하곤 합니다. 메인 서비스 외에도 많은 분야에서 파이썬이 활용되고 있다는 점은 다들 아실 겁니다. 그렇다면 파이썬으로 어떻게 서버를 개발할 것인가에 관해 답하기 위해 이번 글에서는 파이썬으로 작성된 FastAPI라는 웹 프레임워크로 블로그를 만들어 볼 겁니다. FastAPI는 백엔드로 활용하고 프론트엔드로는 Svelte라는 것을 사용합니다. 언제나처럼 최대한 단순하게 시작해 볼까요? 우선 FastAPI와 Svelte에 관한 간단한 소개로 시작하겠습니다.

 

 

 

반응형

 

FastAPI 란 무엇인가?

FastAPI

웹 개발을 할 때 Django, Flask 등 파이썬으로 작성된 여러 프레임워크가 있습니다. 그중 FastAPI는 비교적 최근에 나온 프레임워크입니다. 릴리즈 노트를 보면 대략 2019년 초에 발표를 한 거 같고 커밋 히스토리를 보면 2018년에 처음 커밋을 한 것을 알 수 있습니다. 파이썬 웹 프레임워크 중 제일 많이 쓰고 유명한 Django에 비해 FastAPI는 약간 Flask와 비슷하게 단순한 구조를 가졌습니다. Django는 웹 서비스 개발을 위해 필수적인 것들을 대부분 마련해 놓고 settings.py에 정의를 함으로써 필요한 기능을 구현했다면 FastAPI는 필요한 기능을 만들 수 있는 환경은 있지만 디테일한 부분은 직접 작성해야 합니다. 그리고 기본적으로 비동기식으로 작성되어있습니다. 그렇기 때문에 I/O 병목이 대부분인 웹 서버에서 빠른 성능을 보여주죠. 이름에 걸맞게 Fast 하다고 할 수 있습니다. 기초라 써놓고 더 깊은 설명을 하게 되면 범위를 벗어나므로 다음으로 넘어가겠습니다.

• 빠르다.
• 구조가 단순해 생산성이 좋다.
• 타입 힌트를 강제하는 면이 있어 버그를 적게 유발한다(휴먼에러를 피할 수 있음).
• 기본적으로 쉽게 디자인됐기 때문에 문서도 방대하지 않다.
• API문서를 자동으로 만들어준다.

 

Svelte 란 무엇인가?

Svelte • Cybernetically enhanced web apps

Svelte 특징

Svelte(스벨트)는 최근에 나온 프론트엔드 프레임워크입니다. 프론트엔드 진영에는 여전히 React.js, Vue.js, Angular.js 가 강세이지만 여러 장점 덕분에 최근 인기가 높아지고 있습니다. Svelte 홈페이지에 가면 위 세 가지 특징으로 Svelte를 설명하는데요,

• 코드 양이 적고
• Virtual DOM을 사용하지 않고
• State 관리가 단순하며 진정한 반응형이다.

사용해본 소감을 말하자면 단순하고 쉽다는 느낌입니다. 아직까지는 장점만 가득한 프레임워크인 듯싶네요. 다른 프론트엔트 프레임워크와 다르게. svelte라는 확장자로 작성하며 Svelte 컴파일러가 컴파일을 통해 작은 valina JS 파일을 만들어줍니다.

 

개발환경

우리는 Svelte를 이용해 UI를 만들고 백엔드는 FastAPI를 사용해 프론트엔드와 데이터를 주고받을 거예요. OS 별로 상세한 설치 과정까지는 다루지 않고 코드 위주로 설명하도록 할게요. 다만 스택 별로 어떤 버전을 사용하는지 알려드릴게요.

 

백엔드 개발환경

파이썬 개발환경은 다음 글을 참고하시면 좋을 거 같아요.

Poetry로 Python 개발환경 만들기

Poetry로 파이썬 패키지를 관리할 것입니다. 파이썬 버전은 3.6 이상이면 좋습니다. 이왕 처음 시작하는 거 최신 버전을 사용하시면 되겠네요. 현재 기준으로는 3.9가 최신 버전인 거 같습니다. FastAPI는 0.66.0 버전 기준으로 설명하겠습니다.

 

프론트엔드 개발환경

JS진영에서 가장 대중적으로 사용하는 패키지 매니저인 npm을 사용하겠습니다. 여기에서 사용하는 버전은 7.7.5입니다. 적당한 버전으로 설치하시면 되겠습니다. 

 

폴더 레이아웃

프로젝트의 구조는 대략 이렇다고 보시면 됩니다. 이런 구조를 만들기 위해서 Poetry로 파이썬 환경을 먼저 만드시고 아래 명령어로 frontend 폴더를 생성하시면 됩니다.

npx degit sveltejs/template frontend

Svelte로 개발하기 편하게 기본적인 템플릿을 만들어 줍니다. 이것의 구조를 조금 바꿔서 프론트엔드를 만들어 볼 것입니다.

 

 

다음 글에서는 백엔드와 프론트엔드를 한 프로젝트 안에서 어떻게 유기적으로 개발할 것인가에 관해 실제 코드를 작성하면서 배워보도록 하겠습니다.