ํ”ผ๋“œ๋กœ ๋Œ์•„๊ฐ€๊ธฐ
I built a Real-time Bus Reservation System with React & FastAPI ๐Ÿš
Dev.toDev.to
Frontend

๊ฐœ๋ฐœ์ž๊ฐ€ React์™€ FastAPI๋ฅผ ํ™œ์šฉํ•ด ๋™์‹œ์„ฑ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•œ ์‹ค์‹œ๊ฐ„ ๋ฒ„์Šค ์˜ˆ๋งค ํ”Œ๋žซํผ์„ ๊ตฌ์ถ•ํ•œ ์‚ฌ๋ก€

I built a Real-time Bus Reservation System with React & FastAPI ๐Ÿš

ANIKET Jha2026๋…„ 3์›” 30์ผ1๋ถ„intermediate

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์„ ํšจ๊ณผ์ ์œผ๋กœ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค

์›๋ฌธ ์ฝ๊ธฐ