๊ฐ๋ฐ์๊ฐ React์ FastAPI๋ฅผ ํ์ฉํด ๋์์ฑ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ค์๊ฐ ๋ฒ์ค ์๋งค ํ๋ซํผ์ ๊ตฌ์ถํ ์ฌ๋ก
I built a Real-time Bus Reservation System with React & FastAPI ๐
AI ์์ฝ
Context
๋ฒ์ค ์ข์ ๋์ ์์ฝ ์ ๊ฒฝ์ ์กฐ๊ฑด(race condition) ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ค. ์ฌ๋ฌ ์ฌ์ฉ์๊ฐ ๊ฐ์ ๋น ์ข์์ ๋์์ ์ ํํ๋ฉดdouble booking์ด ๋ฐ์ํ ์ ์๋ค. ๊ธฐ์กด ๋ฐฉ์์ ๋ฐ์ดํฐ๋ฒ ์ด์ค ์์ค์ ์ ๊ธ๋ง์ผ๋ก๋ ์กฐ๊ฑด์ ๋ณด์ฅํ๊ธฐ ์ด๋ ต๋ค.
Technical Solution
- WebSocket์ ํตํด ์ข์ ์ ํ ์ ์ค์๊ฐ ์ ๊ธ ์ด๋ฒคํธ๋ฅผ ๋ชจ๋ ํ์ฑ ์ธ์ ์ ๋๊ธฐํํ๋ค.
- React + Vite์ Tailwind CSS, Framer Motion์ ๊ฒฐํฉํ์ฌ ์ง๊ด์ ์ธ ์ข์ ๋งคํ UI๋ฅผ ๊ตฌํํ๋ค.
- Python FastAPI์ ๋น๋๊ธฐ ์คํ ํน์ฑ์ ํ์ฉํ์ฌ ๋์ ์์ฒญ์ ํจ์จ์ ์ผ๋ก ์ฒ๋ฆฌํ๋ค.
- MongoDB๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ฐํ ๋ฌธ์ ๊ตฌ์กฐ๋ก ์ข์ ๋ฐ ์์ฝ ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํ๋ค.
- ๊ด๋ฆฌ์ ๋์๋ณด๋์์ ๋ ธ์ , ๋ฒ์ค, ์์ฝ ํํฉ์ ์ค์๊ฐ์ผ๋ก ๋ชจ๋ํฐ๋งํ ์ ์๋ค.
Impact
์น์์ผ ๊ธฐ๋ฐ ์ ๊ธ ๋ฉ์ปค๋์ฆ์ผ๋ก ๋์์ ๊ฐ์ ์ข์์ ์์ฝํ๋ ค๋ ์ฌ์ฉ์์๊ฒ ์ฆ์ ์ ๊ธ ์ํ๋ฅผ ์๋ฆฐ๋ค.
Key Takeaway
์ค์๊ฐ ์ข์ ์์ฝ ์์คํ ์์ ์ฌ์ฉ์์ ๋ฐ์ดํฐ ์ ํฉ์ฑ์ ๋์์ ๋ณด์ฅํ๋ ค๋ฉด ์น์์ผ์ ํตํ ์ฆ์ ์ ๊ธ ๋๊ธฐํ๊ฐ ํ์์ ์ด๋ค.
์ค์ฒ ํฌ์ธํธ
์ค์๊ฐ ์ข์ ์์ฝ ์์คํ ์์ concurrent seat selection ์ถฉ๋์ ๋ฐฉ์งํ๋ ค๋ฉด WebSocket event-driven ๋ฐฉ์์ผ๋ก ์ข์ ์ ๊ธ ์ํ๋ฅผ ๋ชจ๋ ํด๋ผ์ด์ธํธ์ ์ฆ์ ๋๊ธฐํํ๋ ์ํคํ ์ฒ๋ฅผ ์ ์ฉ ์ race condition์ ํจ๊ณผ์ ์ผ๋ก ํด๊ฒฐํ ์ ์๋ค