본문 바로가기

요구사항 분석

1. 요구사항 분석

지금까지 배운 것을 기반으로 블로그 기능을 구현해보겠습니다. 블로그는 웹 애플리케이션의 기본이 되는 CRUD(Create, Read, Update, Delete) 기능을 모두 포함하고 있어 실제 서비스 개발에 필요한 다양한 기술을 학습하기에 적합합니다.

지금까지와 크게 다른 점이 하나 있습니다. .http 파일이나 Swagger UI로 API를 테스트하는 것이 아니라, 실제 웹 페이지에서 API를 호출하도록 하겠습니다. 이를 통해 프론트엔드와 백엔드 간의 통신 방법을 실제로 경험할 수 있습니다.

다만 이를 위해 기초적인 JavaScript 지식이 필요합니다. 특히 비동기 통신에 대한 이해가 필요하므로 이에 대한 학습이 필요하다면 위니북스의 JavaScript 베이스캠프 책을 참고해주세요.

HTML, CSS, JS가 생소할 수 있기 때문에 가능한 쉬운 코드로 구현하려고 노력하였습니다.

1.1 기능적 요구사항

1.1.1 사용자 인증

  • 회원가입: 사용자는 이메일과 비밀번호로 계정을 생성할 수 있습니다.
  • 로그인과 로그아웃: 사용자는 생성한 계정으로 로그인하고 로그아웃할 수 있습니다.
  • 인증된 사용자만 글 작성, 수정, 삭제가 가능합니다.
  • 자신이 작성한 글만 수정하고 삭제할 수 있습니다.

1.1.2 게시글 관리

  • 게시글 작성: 제목, 내용, 작성일을 포함한 블로그 포스트를 작성할 수 있습니다.
  • 게시글 조회: 작성된 게시글의 목록을 확인하고 개별 게시글을 읽을 수 있습니다.
  • 게시글 수정: 자신이 작성한 게시글의 제목과 내용을 수정할 수 있습니다.
  • 게시글 삭제: 자신이 작성한 게시글을 삭제할 수 있습니다.

1.1.3 사용자 인터페이스

  • 웹 인터페이스: HTML과 JavaScript를 사용하여 간단한 화면을 제공합니다.
  • 화면을 꾸미지 않고 동작 확인에 집중합니다.

1.2 기술적 요구사항

1.2.1 백엔드

  • SQLAlchemy 2.0을 사용하여 데이터베이스를 관리합니다.
  • JWT와 PyJWT를 사용하여 사용자 인증을 구현합니다.
  • 비밀번호는 pwdlib으로 해싱하여 저장합니다.
  • CORS 설정을 통해 프론트엔드와의 통신을 가능하게 합니다.

1.2.2 데이터베이스

  • User 테이블: 사용자 정보(이메일, 비밀번호 해시) 저장
  • Blog 테이블: 게시글 정보(제목, 내용, 작성일, 작성자) 저장
  • SQLite를 사용하여 간단하게 구현합니다.

1.2.3 프론트엔드

  • HTML, CSS, JavaScript를 사용하여 UI를 꾸미지 않고 간단히 구현합니다.
  • fetch API를 사용하여 백엔드와 통신합니다.
  • 로컬 스토리지를 사용하여 JWT 토큰을 관리합니다.
  • SPA(Single Page Application) 방식으로 먼저 만들어보고, 이후 MPA(Multi Page Application)로 바꿔봅니다.

1.3 구현 계획

  1. CORS 설정 및 미들웨어 구현
  2. SPA로 간단한 CRUD 기능 구현
  3. MPA로 코드 나누기
  4. DB 구성 및 static 파일 서빙
  5. 인증 구현
  6. 전체 흐름 테스트

이 계획에서 가장 중요한 변화는 4번 단계입니다. 처음에는 서버가 두 개입니다.

화면 파일은 VS Code의 Live Server가, 데이터는 FastAPI가 각각 다른 주소에서 제공합니다. 주소가 다르기 때문에 브라우저가 요청을 막습니다. 이것이 CORS 문제이며, 다음 절에서 다룹니다.

4번 단계에서는 FastAPI가 화면 파일까지 함께 제공하도록 바꿉니다.

서버가 하나가 되면 주소도 하나가 되고, CORS 문제 자체가 사라집니다. 터미널 창을 두 개 띄울 필요도 없어집니다.

두 방식 모두 실제로 쓰이는 구성입니다. 프론트엔드 팀이 따로 있으면 앞의 구성이 되고, 혼자 만들거나 화면이 단순하면 뒤의 구성이 됩니다. 두 가지를 모두 경험해보는 것이 이 장의 목표 중 하나입니다.

1.4 실습 폴더 준비

이 장은 앞선 장들과 달리 절마다 폴더를 새로 만들지 않고, 하나의 폴더에서 코드를 계속 발전시킵니다. 실제로 서비스를 만들 때의 흐름에 가깝게 하기 위해서입니다.

앞 실습의 서버가 실행 중이면 Ctrl + C로 멈추고, 가상환경이 켜져 있다면 deactivate로 빠져나옵니다. 아래 명령은 실습 폴더들을 모아둔 상위 폴더에서 실행하세요.

mkdir 05_blog
cd 05_blog
python -m venv venv
.\venv\Scripts\Activate.ps1
pip install "fastapi[standard]" sqlalchemy pyjwt "pwdlib[argon2]"

macOS/Linux에서는 python -m venv venv 대신 python3 -m venv venv를, 활성화 명령 대신 source ./venv/bin/activate를 사용합니다. 이후 명령은 가상환경이 활성화된 상태에서 실행합니다.

이 장에서 사용할 패키지를 한 번에 설치했습니다. 절이 넘어갈 때마다 추가로 설치할 필요가 없습니다.

완성된 전체 소스코드는 아래 저장소에서 확인하실 수 있습니다. 막힐 때 참고하세요.

FastAPI 베이스캠프 소스코드

이러한 요구사항을 바탕으로 다음 절에서는 각 기능을 단계적으로 구현해나가도록 하겠습니다.

요구사항 분석 - FastAPI 베이스캠프 | 위니버시티