FrontEnd Develop/Project : Wallet Guardians

์†Œ๊ทน์ ์ธ ์žฌ๋ฌด๊ด€๋ฆฌ๋ฅผ ํ•˜๋Š” 20๋Œ€๋ฅผ ์œ„ํ•œ ํ”„๋กœ์ ํŠธ, <Wallet Guardians> #2. ํŒ€ ๊ตฌ์ถ•๊ณผ ๊ธฐ์ˆ  ์Šคํƒ ์†Œ๊ฐœ

Frisbeen 2025. 2. 21. 17:21

https://github.com/wallet-guardians

 

wallet-guardians

wallet-guardians has 2 repositories available. Follow their code on GitHub.

github.com

 

 

 

๐Ÿ‘ฅ ํŒ€ ์†Œ๊ฐœ

3๋ช…์˜ ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์ž์™€ 2๋ช…์˜ ํ”„๋ก ํŠธ ๊ฐœ๋ฐœ์ž๊ฐ€ ํ˜‘์—…์„ ํ–ˆ๋˜ ์†Œ๊ทœ๋ชจ ํ”„๋กœ์ ํŠธ์˜€๋‹ค.

ํŒ€์žฅ์ธ ๋‚ด๊ฐ€ PM์„ ๋งก์•˜๊ณ , ๋””์ž์ด๋„ˆ๊ฐ€ ์—†์–ด ํ‰์†Œ์— ํ•ด๋ณด๊ณ  ์‹ถ์€ ๋””์ž์ธ์ด ์žˆ๋˜ ๋‚ด๊ฐ€ ๋””์ž์ด๋„ˆ๋„ ๋งก์•˜๋‹ค..

 

๊ทธ๋Ÿฌ๋‚˜ ๋””์ž์ธ์€ ํŒ€์›๋“ค์ด ๋งŽ์ด ์•„์ด๋””์–ด๋„ ์ฃผ์…”์„œ ์–ด์ฐŒ๋ณด๋ฉด ๋‹ค๊ฐ™์ด ๋””์ž์ธ์„ ํ–ˆ๋‹ค๊ณ  ํ•˜๊ณ ์‹ถ๋‹ค.

 

์ฒซ ํ˜‘์—… ํ”„๋กœ์ ํŠธ์ด๋‹ˆ ๋งŒํผ, ์š•์‹ฌ์ด ์ƒ๊ฒจ PM, ๋””์ž์ด๋„ˆ, ํ”„๋ก ํŠธ๊ฐœ๋ฐœ ์„ธ๊ฐœ๋ฅผ ๋ชจ๋‘ ๋‹คํ–ˆ๋”๋‹ˆ ์ •๋ง ํ”ผ๊ณคํ•˜๊ธด ํ–ˆ์—ˆ๋‹ค.

๐Ÿง‘๐Ÿป‍๐Ÿ’ป Project Manager ์ตœ์›๋นˆ https://github.com/ChoiTheCreator
๐Ÿ— ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ ์„œ์•„์˜ https://github.com/Seooooo24
๐Ÿ— ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ ๊น€์‹œ์˜จ https://github.com/enohs
๐Ÿ— ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ ์ •์„์šฐ https://github.com/Jungsukwoo
๐ŸŽจ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ์ตœ์›๋นˆ https://github.com/ChoiTheCreator
๐ŸŽจ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ์ด์„ฑ์ง„ https://github.com/leesj0188
๐Ÿ–Œ UI/UX ๋””์ž์ด๋„ˆ ์ตœ์›๋นˆ https://github.com/ChoiTheCreator

 

๐Ÿ› ๏ธ ๊ธฐ์ˆ  ์Šคํƒ ์†Œ๊ฐœ

๐ŸŽจ Frontend

  • React.js + React Router: UI ๋ Œ๋”๋ง ๋ฐ ํŽ˜์ด์ง€ ๋ผ์šฐํŒ…
  • Recharts: ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™” (์†Œ๋น„ ๋ถ„์„ ์ฐจํŠธ)
  • Emotion.js (CSS-in-JS): UI ์Šคํƒ€์ผ๋ง
  • Axios: API ์š”์ฒญ ๋ฐ ๋ฐ์ดํ„ฐ ๊ด€๋ฆฌ
  • Context API: ์ƒํƒœ ๊ด€๋ฆฌ (์˜ˆ์‚ฐ, ์†Œ๋น„ ๋‚ด์—ญ ๋“ฑ)

๐Ÿ–ฅ๏ธ Backend

  • Spring Boot: REST API ๊ฐœ๋ฐœ
  • Spring Security + JWT: ์ธ์ฆ ๋ฐ ๋ณด์•ˆ
  • Spring Data JPA: DB ์—ฐ๋™ ๋ฐ ๊ด€๋ฆฌ
  • Google Cloud Storage: ์˜์ˆ˜์ฆ ์ด๋ฏธ์ง€ ์ €์žฅ, ํ”„๋กœํ•„ ์‚ฌ์ง„ ์ €์žฅ
  • cloudSQL: ์‚ฌ์šฉ์ž ๋ฐ ์†Œ๋น„ ๋ฐ์ดํ„ฐ ์ €์žฅ
  • Naver Cloud Platform: ์˜์ˆ˜์ฆ ๋ถ„์„ ๊ธฐ๋Šฅ OCR

๐Ÿ›  DevOps

  • Docker & Docker Compose: ๋ฐฐํฌ ๋ฐ ํ™˜๊ฒฝ ์„ค์ • ์ž๋™ํ™”
  • GitHub Actions: CI/CD ๊ตฌ์ถ•
  • Postman: API ํ…Œ์ŠคํŠธ ๋ฐ ๋ฌธ์„œํ™”
  • Figma: API ํ…Œ์ŠคํŠธ ๋ฐ ๋ฌธ์„œํ™”
  • Google Cloud Platform: ์„œ๋ฒ„ ์—”์ง„ ๊ตฌ๋™