Skip to content

Latest commit

ย 

History

History
213 lines (157 loc) ยท 7.25 KB

README.md

File metadata and controls

213 lines (157 loc) ยท 7.25 KB

๐Ÿฃ WALKWALK - ๋ธ”๋ก์ฒด์ธ์„ ํ™œ์šฉํ•œ ์šด๋™ ๊ฒฉ๋ ค ์„œ๋น„์Šค ๐Ÿฃ

image
WALKWALK ๋งํฌ: https://j10d210.p.ssafy.io/




์„œ๋น„์Šค ๊ฐœ์š”

์šด๋™์„ ์•ˆ ํ•ด ๊ฑฑ์ •์ธ ์ฃผ๋ณ€์ธ์ด ์žˆ๋‹ค๋ฉด ์šฉ๋ˆ์„ ์ˆ˜๋‹จ์œผ๋กœ ์‚ผ์•„ ์šด๋™์„ ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์šด๋™๊ณผ ์šฉ๋ˆ ์ง€๊ธ‰ ๋‚ด์—ญ์€ ๋ธ”๋ก์ฒด์ธ์œผ๋กœ ํˆฌ๋ช…ํ•˜๊ฒŒ ์šด์˜๋ฉ๋‹ˆ๋‹ค.



์ฃผ์š” ๊ธฐ๋Šฅ

  • ๋ฏธ์…˜

    • ์šด๋™์„ ์‹œํ‚ค๋Š” ์‚ฌ๋žŒ์€ ํ• ๋ฆฌ, ์šด๋™์„ ํ•  ์‚ฌ๋žŒ์€ ๊ฐˆ๋ฆฌ๋กœ ๋‚˜๋‰˜์–ด ์•ฑ์„ ์‚ฌ์šฉํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
    • ํ• ๋ฆฌ์™€ ๊ฐˆ๋ฆฌ ๋งค์นญ์„ ํ•ด๋‘๋ฉด, ํ• ๋ฆฌ๋Š” ๊ฐˆ๋ฆฌ์—๊ฒŒ ๋ฏธ์…˜์„ ๊ฑธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
    • ํ•˜๋ฃจ ์ตœ์†Œ ์šด๋™(๊ฑธ์Œ) ์‹œ๊ฐ„์„ ์„ค์ •ํ•˜๊ณ , ์ด๋ฅผ ๋‹ฌ์„ฑํ•˜๋ฉด ์šฉ๋ˆ์„ ์ง€๊ธ‰ํ•ฉ๋‹ˆ๋‹ค.
  • ์‘์›

    • ์šด๋™ ์‹œ์ž‘ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ํ• ๋ฆฌ์—๊ฒŒ ์•Œ๋ฆผ์ด ๊ฐ‘๋‹ˆ๋‹ค.
    • ๊ทธ๋•Œ, ํ• ๋ฆฌ๋Š” ๊ฐˆ๋ฆฌ์—๊ฒŒ ์‘์› ๋ฉ”์‹œ์ง€๋ฅผ ๋ณด๋‚ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๋ฆฌํฌํŠธ

    • ์šด๋™ํ•˜๊ธฐ ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ ์ง„ํ–‰ํ•œ ์šด๋™์€ ๋ธ”๋ก์ฒด์ธ์— ์ €์žฅ์ด ๋ฉ๋‹ˆ๋‹ค.
    • ์ด ๋ฐ์ดํ„ฐ๋ฅผ ํ† ๋Œ€๋กœ ์›”๋ณ„ ๋ฆฌํฌํŠธ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
  • ๋žญํ‚น

    • ์นœ๊ตฌ๋“ค ์‚ฌ์ด์—์„œ ๋‚ด ์ˆœ์œ„๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
    • ์ˆœ์œ„๋Š” ๊ฑธ์Œ ์ˆ˜ ๊ธฐ์ค€ ์ผ, ์ฃผ, ์›”๋ณ„, ์ŠคํŠธ๋ฆญ(์šด๋™์„ ๊พธ์ค€ํžˆ ํ•œ ๊ธฐ๊ฐ„) ๊ธฐ์ค€์œผ๋กœ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.
    • ๊ฐ€์ƒ ๋งต์œผ๋กœ๋„ ์ด๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์ž๊ฐ€ ๋ฏธ์…˜

    • ์ž๊ธฐ ์ž์‹ ์—๊ฒŒ๋„ ์ตœ์†Œ ์šด๋™ ๊ธฐ์ค€์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
    • ์ดˆ๊ธฐ์—๋Š” WHO์˜ ์—ฐ๋ น๋Œ€๋ณ„ ๊ธฐ์ค€์œผ๋กœ ์ดˆ๊ธฐํ™”๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.
    • ์ž๊ฐ€ ๋ฏธ์…˜์„ ๊ธฐ์ค€์œผ๋กœ ์ŠคํŠธ๋ฆญ์ด ์‚ฐ์ •๋ฉ๋‹ˆ๋‹ค.



ํ”„๋กœ์ ํŠธ ์ •๋ณด

  • ํ”„๋กœ์ ํŠธ๋ช… :
    SSAFY 10๊ธฐ 2ํ•™๊ธฐ ํŠนํ™” ํ”„๋กœ์ ํŠธ - WALKWALK

  • ๊ธฐ๊ฐ„ :
    2024/02/19 ~ 2024/04/03 (45์ผ๊ฐ„ ์ง„ํ–‰)

  • ํŒ€์› :
    ํšจ๋„ํ•˜๊ธฐ 10์กฐ(D210)์˜ ํŒ€์›๋“ค์„ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค!

    ์ด๋ฆ„ ์—ญํ•  ๊ฐœ๋ฐœ ๋‚ด์šฉ
    ์ „์ˆ˜๋ฏผ ํŒ€์žฅ
    Backend
    Frontend
    - DB ์„ค๊ณ„
    - ํšŒ์›, Spring Security & JWT & OAuth2.0
    - ์ฑ„ํŒ… ๋ฐ tts, ์‘์› ๋ฉ”์‹œ์ง€ ๊ตฌํ˜„
    - ํ™”๋ฉด ์„ค๊ณ„
    ๊น€๊ทœ๋ฆฌ Frontend - Figma๋ฅผ ์ด์šฉํ•œ ํ™”๋ฉด ๋””์ž์ธ ์„ค๊ณ„
    - ๋ฉ”์ธ, ๋žญํ‚น, ์นœ๊ตฌ, ํ• ๋ฆฌ๊ฐˆ๋ฆฌ ๋ฏธ์…˜ ์„ค์ •, ์ƒ์ , ์‘์›๋ฉ”์‹œ์ง€, ๋ณด๋ฌผ์ฐพ๊ธฐ ํ™”๋ฉด ๊ตฌํ˜„
    - axios๋กœ API ์—ฐ๊ฒฐ
    - Zustand๋กœ ์ƒํƒœ๊ด€๋ฆฌ
    ๊น€์„ธํ˜„ Frontend
    Backend
    - DB ์„ค๊ณ„
    - ์„œ๋ฒ„ EC2 ๋ฐฐํฌ
    - CI/CD with Jenkins
    - ์นœ๊ตฌ, ํ• ๋ฆฌ๊ฐˆ๋ฆฌ ๊ด€๋ฆฌ
    - SSE ์•Œ๋ฆผ ์„œ๋น„์Šค
    - ๋ฉ”์ธํ™”๋ฉด, ํ• ๋ฆฌ๊ฐˆ๋ฆฌ, ์นœ๊ตฌ ํŽ˜์ด์ง€ ๊ตฌํ˜„
    ์‹ฌ๊ทœ์˜ Frontend
    Blockchain
    - ํ™”๋ฉด ์„ค๊ณ„
    - ๋ธ”๋ก์ฒด์ธ
    - ํšŒ์›๊ด€๋ฆฌ & OAuth2.0
    - ๊ฒฐ์ œ
    ์ตœ์ง€์ˆ˜ Backend - DB ์„ค๊ณ„
    - ์šด๋™ ๋ฐ์ดํ„ฐ, ๊ธฐ์ค€ ๋ฐ ์šด๋™ ๋„๋ฉ”์ธ api
    - ์Šคํ”„๋ง ๋ฐฐ์น˜ ๋ฐ ์Šค์ผ€์ค„๋ง์„ ํ†ตํ•œ ๋Œ€์šฉ๋Ÿ‰ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ ์„œ๋ฒ„ ๊ตฌํ˜„
    - ๋žญํ‚น ๋„๋ฉ”์ธ ํŽ˜์ด์ €๋ธ” ๊ตฌํ˜„
    ํ•œ์ฑ„์—ฐ Backend
    Blockchain
    - DB ์„ค๊ณ„
    - ์ง€๊ฐ‘ ๊ด€๋ฆฌ
    - ์นด์นด์˜คํŽ˜์ด API๋ฅผ ํ†ตํ•œ ๊ฒฐ์ œ ๊ตฌํ˜„
    - ๋ธ”๋ก์ฒด์ธ์„ ํ™œ์šฉํ•œ ์˜์ˆ˜์ฆ ๋ฐœ๊ธ‰



์ฃผ์š” ๊ธฐ์ˆ  ๋ฐ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ

์•„ํ‚คํ…์ฒ˜ ๊ตฌ์„ฑ๋„

Web App Reference Architecture (9)

Frontend

  • Visual Studio Code
  • HTML5, CSS3, JavaScript(ES6)
  • React
  • Stompjs
  • zustand
  • Nodejs
  • Vite
  • Tailwind CSS
  • ์‚ฌ์šฉํ•œ ์™ธ๋ถ€ API
    • Web Speech API
    • Google Fitness API
    • Google geoLocation API
    • Google Map React API

Backend

  • IntelliJ
  • JVM Open JDK
  • Spring Boot
    • Spring Data JPA
    • Spring Security
    • SSE Emitter
  • Maria DB
  • JWT
  • OAuth2.0
  • STOMP-WEB-SOCKET
  • REDIS Lettuce
  • REDIS
  • Gradle
  • AWS S3 Bucket Cloud
  • AWS Transcribe
  • AWS Lambda
  • Spring Batch
  • Google TTS Cloud AI
  • ์‚ฌ์šฉํ•œ ์™ธ๋ถ€ API
    • Google fitness API

BLOCKCHAIN

  • Solidity
  • Remix IDE
  • MetaMask
  • Ethereum
  • Sepolia TestNet
  • ethersjs
  • Web3j
  • Klaytn API Service

CI/CD

  • AWS EC2
  • Docker
  • Jenkins



ํ˜‘์—… ํˆด

  • GitLab - ์ฝ”๋“œ ๋ฒ„์ „ ๊ด€๋ฆฌ ๋ฐ MR๊ณผ ๋ฆฌ๋ทฐ
  • Jira - ๋งค์ฃผ ๋ชฉํ‘œ๋Ÿ‰ ์„ค์ •, ํ”„๋กœ์ ํŠธ ์ง„ํ–‰๋„ ํ™•์ธ
  • Notion - ํšŒ์˜๋ก ์ž‘์„ฑ, ๊ธฐ์ˆ  ๋ ˆํผ๋Ÿฐ์Šค ๊ณต์œ , ํ”„๋กœ์ ํŠธ ์‚ฐ์ถœ๋ฌผ ๊ด€๋ฆฌ
  • Figma - ๋ชฉ์—…, ์™€์ด์–ดํ”„๋ ˆ์ž„, ๋””์ž์ธ ๊ณต์œ 
  • MatterMost - ์ž๋ฃŒ ๋ฐ api ํ˜„ํ™ฉ๊ณผ ์š”์ฒญ์‚ฌํ•ญ ๊ณต์œ 
  • Code With Me - ์‹ค์‹œ๊ฐ„ ํ˜‘์—… ์ฝ”๋”ฉ



ํฌํŒ… ๋ฉ”๋‰ด์–ผ

ํฌํŒ… ๋ฉ”๋‰ด์–ผ ๋งํฌ!



ํ”„๋กœ์ ํŠธ ์‚ฐ์ถœ๋ฌผ

์™€์ด์–ดํ”„๋ ˆ์ž„

image

UI ๋””์ž์ธ

image

ERD

image

UCC ๋ฐ ์‹œ์—ฐ์˜์ƒ



์ฃผ์š” ์„œ๋น„์Šค ํ™”๋ฉด

1. ํšŒ์› ๊ฐ€์ž… ๋ฐ ๋กœ๊ทธ์ธ

image


2. ๋ฉ”์ธ ํ™”๋ฉด

image


3. ๋žญํ‚น

image


4. ์šด๋™ ํŽ˜์ด์ง€

image


5. ์‘์› ๋ฉ”์‹œ์ง€

image


6. ์‘์› ๋ฉ”์‹œ์ง€ ๋ณด๊ด€ํ•จ

image


7. ์‘์› ๋ฉ”์‹œ์ง€ ๋ณด๋‚ด๊ธฐ

image


8. ์นœ๊ตฌ ๋ชฉ๋ก

image


9. ์นœ๊ตฌ ๊ฒ€์ƒ‰

image


10. ์นœ๊ตฌ ์‹ ์ฒญ

image


11. ๋งˆ์ดํŽ˜์ด์ง€

image