[forum] 게시판 만들기 프로젝트

 

개요

혼자 CRUD를 만들어본 적이 없었다. 그래서 한번 만들어보고자 한다.

구글 서칭을 하다보니 점프 투 FastAPI 라는 WikiDocs가 있는 것을 알 수 있었다.

이 문서를 기반으로 열심히 따라하고 살을 덧붙여보려고 한다.

문서에 나와있는 것과는 다르게 설정한 부분들이 있다. 그런 부분들은 아래 항목으로 정리해놓겠다.

 

소스 코드는 GitHub 링크에 저장되어 있다. 

 

더 나아가서는 AWS에 Terraform을 이용해서 인프라를 프로비저닝하고 해당 게시판을 운영해볼 수 있으면 좋겠다.

 

문서와 다른 부분

• Svelte를 사용하지 않고 React.js를 이용해서 Front-end를 구성했음.
• Python IDE는 Pycharm으로 하지 않고 VSCode로 구성했음. Interpreter 또한 VSCode로 구성함.

 

python 기초 설정

Python의 경우 문서에서는 venv를 이용해 환경을 구성하고, Pycharm을 이용해서 Interpreter를 구성한것을 알 수 있다.

구글 서칭을 통해 Interpreter는 VSCode를 이용해서도 설정 가능한 것으로 보여 VSCode를 애용하고 있어 VSCode 기반으로 설정을 했다.

 

자세한 글은 링크에서 확인 가능하다

 

Python Install

먼저 Python을 설치해야 한다. 

 

링크에서 최신 버전의 Python을 설치할 수 있다.

 

* 주의 사항으로는 설치 과정에서 Add Python ~~ to PATH에 설정해야 python 명령어를 올바르게 사용할 수 있다.

 

만약 위와같은 옵션을 추가하지 않고 설치 했다면 조금 까다롭지만 직접 Python이 어디에 설치 되어있는지 확인하거나 설치 과정을 한번 더 거쳐 정확히 어디에 설치되는지 확인해야한다.

나와 같은 경우에는 아래 위치에 저장되어 있으니 옵션을 추가하지 않았다면 참고하길 바란다.

C:\Users\Administrator\AppData\Local\Programs\Python\Python311\Scripts\ #Python311은 버전에 따라 다를 수 있음

 

저렇게 위치를 확인 했다면 `윈도우 키+R` 을 눌러 "sysdm.cpl" 을 입력하면 아래와 같은 창이 뜰 것이다.

 

이 창에서 고급 - 환경 변수를 누르면 또 창이 뜰것이다.

 

여기서 Path 항목을 더블 클릭하면 PATH 변수를 수정할 수 있는 창이 뜬다.

여기서 새로 만들기를 이용해 아까 확인했던 Python 위치를 입력해주면 된다.

C:\Users\Administrator\AppData\Local\Programs\Python\Python311\Scripts\

 

이렇게 입력을 완료하면 이제 Python 명령어를 사용할 수 있을 것이다.

C:\Users\Administrator>python --version
Python 3.11.4

 

venv로 패키지 구성

 

이제 필요한 모듈을 다운받아 볼 것이다.

 

우리는 venv를 통해 환경을 구성하고 FastAPI를 이용해서 개발을 진행할 것이다.

venv
Python의 venv는 프로젝트별로 독립적인 가상 환경을 생성하여 서로 다른 패키지와 버전을 관리할 수 있게 해주는 도구입니다. 이를 통해 시스템 전체에 영향을 주지 않고 프로젝트 간의 패키지 충돌을 방지할 수 있습니다. venv로 생성한 환경은 activate 명령어로 활성화하여 사용할 수 있습니다.

간략하게 서로 다른 환경을 가상으로 구성해서 패키지 환경을 분리시키는 것이라고 이해하면 된다.

 

이제 venv를 통해 환경을 만들어보자

# python -m venv {env 이름}
C:\Users\Administrator\Documents\python_practice> python -m venv nowon9159_forum

 

python -m 명령어는 m 옵션을 통해 해당 모듈을 사용하겠다는 명령어이다.

C:\Users\Administrator\Documents\python_practice\nowon9159_forum\venvs\nowon9159_forum\Scripts>dir
 C 드라이브의 볼륨에는 이름이 없습니다.
 볼륨 일련 번호: ####

 C:\Users\Administrator\Documents\python_practice\nowon9159_forum\venvs\nowon9159_forum\Scripts 디렉터리

2024-09-02  오전 10:11    <DIR>          .
2024-09-02  오전 10:11    <DIR>          ..
2024-09-02  오전 10:04             2,148 activate
2024-09-02  오전 10:04             1,077 activate.bat
2024-09-02  오전 10:04            26,199 Activate.ps1
2024-09-02  오전 10:04               393 deactivate.bat
2024-09-02  오전 10:11           108,455 dotenv.exe
2024-09-02  오전 10:04           108,453 fastapi.exe
2024-09-02  오전 10:04           108,464 pip.exe
2024-09-02  오전 10:04           108,464 pip3.11.exe
2024-09-02  오전 10:04           108,464 pip3.exe
2024-09-02  오전 10:04           270,608 python.exe
2024-09-02  오전 10:04           259,352 pythonw.exe
2024-09-02  오전 10:11           108,454 uvicorn.exe
2024-09-02  오전 10:11           108,454 watchfiles.exe
              13개 파일           1,318,985 바이트
               2개 디렉터리  136,386,682,880 바이트 남음

 

venv를 생성하고 나면 Scripts 디렉터리로 이동해 activate를 찾아 실행시켜주면 해당 env로 패키지 환경이 설정된다.

C:\Users\Administrator\Documents\python_practice\nowon9159_forum\venvs\nowon9159_forum\Scripts>activate

(nowon9159_forum) C:\Users\Administrator\Documents\python_practice\nowon9159_forum\venvs\nowon9159_forum\Scripts>

 

activate로 해당하는 env를 적용하게 되면 (nowon9159_forum) 처럼 소괄호를 통해 현재 어떤 환경에 있는지 알 수 있다.

deactivate 명령어로 원래대로 돌아올 수 있다.

(nowon9159_forum) C:\Users\Administrator\Documents\python_practice\nowon9159_forum\venvs\nowon9159_forum\Scripts>deactivate
C:\Users\Administrator\Documents\python_practice\nowon9159_forum\venvs\nowon9159_forum\Scripts>

 

우리는 가상환경에서 fastapi를 설치해야 하기 때문에 항상 현재 환경을 생각해 패키지를 설치해주어야 한다. 그러므로 소괄호가 있는지 항상 확인이 필요하다.

(nowon9159_forum) C:\Users\Administrator\Documents\python_practice\nowon9159_forum\venvs\nowon9159_forum\Scripts>pip install fastapi

 

FastAPI 실행

 

fastapi를 설치하고 나면 uvicorn 이라는 모듈을 통해 fastapi를 실행시켜주어야 한다.

일단 uvicorn에 대해 간략히 알아보자.

Uvicorn은 Python의 비동기 웹 애플리케이션 서버(ASGI 서버)로, FastAPI와 같은 프레임워크와 함께 사용하여 고성능 네트워크 요청 처리를 지원합니다. 비동기 기능을 통해 많은 동시 연결을 효율적으로 처리할 수 있습니다. 가볍고 빠른 서버로 개발 및 프로덕션 환경에서 모두 사용 가능합니다.

 

uvicorn은 아래와 같이 설치 가능하다.

(nowon9159_forum) C:\Users\Administrator\Documents\python_practice\nowon9159_forum\projects\forum>pip install "uvicorn[standard]"

 

아래와 같이 fastapi를 실행할 수 있다.

# uvicorn {py 파일 이름}:{application 이름} --reload
(nowon9159_forum) C:\Users\Administrator\Documents\python_practice\nowon9159_forum\projects\forum>uvicorn main:app --reload

 

uvicorn 명령어가 처음엔 조금 혼동이 왔는데 아래와 같이 이해하면 된다.

uvicorn main:app --reload

 

main에 해당하는 부분은 main.py 파일에서의 main이다. 특정 파일의 이름을 입력해주면 되는 것이다.

$ tree .
.
|-- __pycache__
|   `-- main.cpython-311.pyc
`-- main.py
`-- good.py

 

만약 위와 같은 구조로 구성되어 있다면 good:app 으로도 명령어를 수행할수도 있는 것이다.

그리고 app의 경우 main.py의 코드에서 FastAPI() 를 선언한 인스턴스 명이다.

 

from fastapi import FastAPI

from starlette.middleware.cors import CORSMiddleware

app = FastAPI() # 인스턴스 생성

origins = [
    "http://localhost:3000",    # 또는 "http://localhost:5173"
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.get("/hello")

def hello():
    return {"message": "안녕하세요"}

 

실제로 명령어를 수행해보면 아래와 같다.

 

애프리케이션을 실행하고 URL로 접속할 수 있다.

/docs로 접속하면 Swagger API 문서를 확인할 수 있다.

 

위는 API에 대한 모든 테스트를 직접 해볼수 있고, /redoc을 입력해서 접속하게 되면 읽기만 가능한 문서를 확인할수도 있다.

 

이렇게 하면 Python에 대한 기초 설정은 마무리가 된다.

 

VSCode Interpreter 설정

Interpreter같은 경우 Ctrl + Shift + P 를 통해 Command Palette 를 실행해서 "Python interpreter"를 입력해주면 아래와 같이 인터프리터를 선택하는 항목이 있다.

 

인터프리터 선택을 누르면 경로 선택이 있을 것이다. 이 경로는 구성했던 venv 폴더 내에 Scripts 폴더에 있는 python.exe 파일을 지정해주면 된다.

 

이렇게 설정하고 나서 Ctrl + ` 로 기본 터미널을 실행하게 되면 가상 환경으로 인터프리터가 지정되게 된다.

 

react 기초 설정

React Install

react의 경우 Node.js의 설치가 필요하다. npm을 이용해서 react 관련된 패키지를 설치해야하기 때문이다.

 

링크에서 Node.js 최신 버전을 설치할 수 있다.

 

설치가 완료되면 node 명령어를 이용해 버전이 출력되는지 확인해준다.

C:\Users\Administrator\Documents\python_practice\nowon9159_forum\projects>node --version
v22.7.0

 

출력이 정상적으로 완료되면 npm도 사용할 수 있다.

react를 사용하기위한 모듈을 설치한다. g 플래그를 이용해 전역적으로 해당 모듈을 설치하게끔 한다.

C:\Users\Administrator\Documents\python_practice\nowon9159_forum\projects\frontend>npm install -g create-react-app

 

정상적으로 설치가 완료되었는지 확인해준다.

C:\Users\Administrator\Documents\python_practice\nowon9159_forum\projects\frontend>create-react-app --version
5.0.1

 

React src 생성 및 실행

 

create-react-app 명령어를 이용해 react 소스를 생성해준다.

# create-react-app {project name}
C:\Users\Administrator\Documents\python_practice\nowon9159_forum\projects\frontend>create-react-app forum

 

생성을 완료하면 생성이 완료된 프로젝트 dir로 이동해 npm start를 통해 react 앱을 실행시켜주면 된다.

C:\Users\Administrator\Documents\python_practice\nowon9159_forum\projects\frontend\forum>npm start

 

 

local에 기재된 url을 입력해서 접속하게 되면 정상적으로 react 애플리케이션이 구동중인 것을 알 수 있다.

 

---

여기까지 Python과 React에 대한 초기 설정을 완료해보았다.

추가적인 설정은 다음 글에서 작성해보도록 하겠다.