๐Ÿ› ๏ธ์•„ํ‚คํ…์ฒ˜ ์„ค๊ณ„

์ดํ•˜์–€ยท2023๋…„ 1์›” 16์ผ
0

๐ŸŽฟ Smailegate(Winter-Devcamp)

๋ชฉ๋ก ๋ณด๊ธฐ
14/49
post-thumbnail

์•„์ฃผ์•„์ฃผ ๊ธธ๊ณ  ๊ธธ์—ˆ๋˜ ์•„ํ‚คํ…์ฒ˜ ์„ค๊ณ„...
์–ด๋–ค ๊ฒƒ์„ ๊ฐœ๋ฐœํ• ์ง€, ๊ตฌ๊ธ€๋ง์ด๋‚˜ ์ฑ… ๋“ฑ์˜ ์ž๋ฃŒ๋ฅผ ์‚ดํŽด๋ณด๊ณ  ๊ตฌํ˜„ํ•˜๋Š” ๋ถ€๋ถ„๋งŒ ๊ณ ๋ คํ•ด์™”๊ธฐ ๋•Œ๋ฌธ์— ์ด๋Ÿฐ ์„ค๊ณ„ ์ž์ฒด๊ฐ€ ์ •๋ง ์ฒ˜์Œ์ด์—ˆ๋‹ค.
๊ทธ๋ž˜์„œ ์•„ํ‚คํ…์ฒ˜๋ฅผ ์„ค๊ณ„ํ•˜๋Š” ๋ฐฉ๋ฒ•๋ถ€ํ„ฐ ๊ณต๋ถ€ํ•˜๋Š๋ผ ๋‹ค๋ฅธ ํŒ€์›๋“ค๋ณด๋‹ค ์กฐ๊ธˆ ๋Šฆ๊ฒŒ ์‹œ์ž‘ํ•˜๊ณ , ์˜ค๋ž˜๊ฑธ๋ฆฐ ๊ฒƒ ๊ฐ™์ง€๋งŒ!
์ด๋Ÿฐ ๊ณผ์ •์„ ์–ธ์  ๊ฐ€๋ฅผ ๊ฑฐ์ณ์•ผ ํ–ˆ๊ณ , ์ง€๊ธˆ ํ•  ์ˆ˜ ์žˆ์–ด์„œ ์˜คํžˆ๋ ค ์ข‹์•„ ๋งˆ์ธ๋“œ๋กœ ํ•ด๋ณด๊ธฐ๋กœ ํ–ˆ๋‹ค.

์•„ํ‚คํ…์ฒ˜ ์„ค๊ณ„ ์ดˆ์•ˆ

  • ์ด ๋ถ€๋ถ„๊ณผ ๊ด€๋ จํ•ด์„œ๋Š” ์—ฌ๊ธฐ์ €๊ธฐ์—์„œ ๊ฐ€์ ธ์˜จ ๋งํฌ๋“ค๊ณผ ์–ด๋””์„œ ๊ฐ€์ ธ์™”๋Š”์ง€ ๋ชจ๋ฅผ ์ž๋ฃŒ๋“ค์ด ์กฐ๊ธˆ ํฌํ•จ๋˜์–ด ์žˆ์–ด์„œ ๋ถ€๋“์ดํ•˜๊ฒŒ pdf๋กœ ๊ณต์œ ํ•˜๊ฒ ๋‹ค.
    ์•„ํ‚คํ…์ฒ˜ ์„ค๊ณ„ ์ดˆ์•ˆ

ํŒ€์›๋“ค๊ณผ ๊ณต์œ ํ•˜๊ธฐ ์œ„ํ•œ ์ง„์งœ "์„ค๊ณ„" ์‹œ์ž‘!

  • ๊ธฐ๋ณธ์ ์œผ๋กœ ๊ณต๋ถ€ํ•œ ๋‚ด์šฉ์„ ๋ฐ”ํƒ•์œผ๋กœ, ์•„ํ‚คํ…์ฒ˜ ์„ค๊ณ„๋ฅผ ์ง„ํ–‰ํ–ˆ๋‹ค.
    1์›” 9์ผ ํšŒ์˜ ์ด์ „๊นŒ์ง€ ์ž‘์„ฑํ–ˆ๋˜ ์ž๋ฃŒ๋Š” ์•„๋ž˜์— ์ž‘์„ฑํ–ˆ๋‹ค.
    ์•„ํ‚คํ…์ฒ˜ ์„ค๊ณ„ v1

  • ์ž‘์„ฑํ•œ ๋‚ด์šฉ์œผ๋กœ, 1์ฐจ์ ์ธ ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ›์•„ ๋‹ค์‹œ ๋„˜๊ธธ ์ž๋ฃŒ๋ฅผ ๋งŒ๋“ค์—ˆ๋‹ค.

์•„ํ‚คํ…์ฒ˜ ์„ค๊ณ„(๋„˜๊ธธ ์ž๋ฃŒ)

๋ฐฑ์—”๋“œ ๊ตฌ์กฐ, ๊ตฌ์ฒด์ ์ธ ์ฒ˜๋ฆฌ ๊ณผ์ •, ํŠน์ • ๊ธฐ์ˆ  ์‚ฌ์šฉ ์ด์œ  ๋“ฑ๋“ฑ(์ถ”๊ฐ€๋  ์˜ˆ์ •)

์ธ์ฆ / ์ธ๊ฐ€ ์„œ๋ฒ„

  • ๋ฐฑ์—”๋“œ ๊ตฌ์กฐ
  • ํŠน์ • ๊ธฐ์ˆ  ์‚ฌ์šฉ ์ด์œ 
  1. API Gateway : ํŠธ๋ž˜ํ”ฝ ๋ถ„์‚ฐ, ๋ณด์•ˆ ๋ฌธ์ œ ๋Œ€์ฒ˜์— ์šฉ์ด
  2. spring boot & JWT : ๊ฒ€์ฆ๋œ ์ธ์ฆ ๋ฐฉ์‹ ์‚ฌ์šฉ ๊ฐ€๋Šฅ, ๋ณด์•ˆ ์ธก๋ฉด - ์„ธ์…˜๋ณด๋‹ค ์œ ๋ฆฌ
  3. MySQL ์‚ฌ์šฉ ์ด์œ  : ์ต์ˆ™ํ•œ DBMS - Token ๋ฐฉ์‹ : ์†๋„์™€ ๋กœ๊ทธ์•„์›ƒ ์ธก๋ฉด์—์„œ redis ์‚ฌ์šฉ ๊ณ ๋ ค
  • ๊ตฌ์ฒด์ ์ธ ์ฒ˜๋ฆฌ ๊ณผ์ •
  1. ํšŒ์›๊ฐ€์ž…

  2. ๋กœ๊ทธ์ธ โ†’ ๋กœ๊ทธ์•„์›ƒ๋„ ์œ ์‚ฌํ•œ ๊ณผ์ •

๋˜๋Š”

  1. ์ •๋ณด ์ˆ˜์ •
            
  • URI & Response
  1. URI ์„ค์ •
  • Response ์„ค์ •
    - HTTP ์„œ๋ฒ„ ์ฝ”๋“œ ๋ฐฉ์‹์— ์˜๊ฑฐํ•˜์—ฌ ์„ค์ • ์˜ˆ์ •.

์•Œ๋ฆผ ์„œ๋ฒ„

  • ๋ฐฑ์—”๋“œ ๊ตฌ์กฐ
    - ์ถœ์ฒ˜ : https://geundung.dev/114

    ์ฐธ๊ณ ) ์„ค๋ช…
    1) ๋ธŒ๋ผ์šฐ์ €์—์„œ ํ‘ธ์‹œ ์„œ๋น„์Šค ๊ตฌ๋… + VAPID ๊ณต๊ฐœ ํ‚ค ์ „๋‹ฌ
    2) ๊ตฌ๋… ์ •๋ณด ์ˆ˜์‹ 
    3) ๊ตฌ๋… ์ •๋ณด ์„œ๋ฒ„๋กœ ์ „๋‹ฌ
    4) ๊ตฌ๋… ์ •๋ณด + ๋ฉ”์‹œ์ง€ + VAPID ๋น„๊ณต๊ฐœํ‚ค๋กœ ์•”ํ˜ธํ™”๋œ JWT
    5) VAPID ๊ณต๊ฐœ ํ‚ค๋กœ ์œ ํšจ์„ฑ ๊ฒ€์ฆ & ๊ฒ€์ฆ๋œ ๊ฒฝ์šฐ ๊ตฌ๋… ์ •๋ณด์— ํ•ด๋‹นํ•˜๋Š” ๋ธŒ๋ผ์šฐ์ €๋กœ ํ‘ธ์‹œ ๋ฉ”์‹œ์ง€ ๋ฐœ์†ก
    *4,5๋ฒˆ ๊ณผ์ • : ๋ฐ์ดํ„ฐ ์œ„์กฐ, ํ‚ค ๋ถˆ์ผ์น˜ โ†’ ํ‘ธ์‹œ ๋ฉ”์‹œ์ง€๋Š” ์œ ํšจํ•˜์ง€ ์•Š์€ ์ƒํƒœ๊ฐ€ ๋˜์–ด ๋ธŒ๋ผ์šฐ์ €๊นŒ์ง€ ๋„๋‹ฌํ•˜์ง€ ๋ชปํ•˜๊ณ  ์„œ๋น„์Šค์—์„œ ํ๊ธฐ๋จ.

  • ๊ตฌ๊ธ€์˜ FCM ํ”„๋กœ์ ํŠธ๋ฅผ ์ด์šฉํ•œ PWA ํ‘ธ์‹œ ์•Œ๋ฆผ ๋ฐฉ์‹ ์‚ฌ์šฉ

  1. ํŠน์ • ๊ธฐ์ˆ  ์‚ฌ์šฉ ์ด์œ 
    - ๊ตฌ๊ธ€ FCM(Firebase Cloud Messaging) : web-push ์ œ๊ณต + subscription ์ฒ˜๋ฆฌ ์ธํ„ฐํŽ˜์ด์Šค ์ œ๊ณต

  2. ๊ตฌ์ฒด์ ์ธ ์ฒ˜๋ฆฌ ๊ณผ์ •
    - ์ถœ์ฒ˜ : https://blog.hoseung.me/2021-11-28-web-push-notification/

    ์„ค๋ช…
    a. Push Manager ๊ตฌ๋… : ์œ ์ €๊ฐ€ ํ‘ธ์‹œ ๋งค๋‹ˆ์ €๋ฅผ ๊ตฌ๋…ํ•˜๋„๋ก ํ•จ.
    b. PushSubscription์„ ์„œ๋ฒ„์— ์ €์žฅ : 1๋ฒˆ๋‹จ๊ณ„์—์„œ ์–ป์€ pushsubscription์„ ์ €์žฅํ•จ.
    c. Push Message ์ „์†ก : ๋ผ์ด๋ธŒ ๊ด€๋ จ ์•Œ๋ฆผ์„ ์ „์†กํ•จ.
    d. Push Event ํŠธ๋ฆฌ๊ฑฐ : ํ‘ธ์‹œ ์„œ๋น„์Šค๋กœ Push Message๊ฐ€ ์ „๋‹ฌ๋˜๋ฉด, ์„œ๋น„์Šค ์›Œ์ปค์—ย Push Event๊ฐ€ ํŠธ๋ฆฌ๊ฑฐ๋จ.
    e. ์•Œ๋ฆผ์„ ๋ณด์—ฌ์คŒ : ์œ„์˜ ๋ชจ๋“  ๋‹จ๊ณ„๋ฅผ ๊ฑฐ์ณ์„œ ์ตœ์ข…์ ์œผ๋กœ๋Š” ์œ ์ €์—๊ฒŒ ํ‘ธ์‹œ ์•Œ๋ฆผ์ด ๋ณด์—ฌ์ง€๊ฒŒ ๋จ.

  • URI & Response
    : notification๋‚ด์˜ ๋‹ค๋ฅธ ๊ตฌ์กฐ๊ฐ€ ๋” ํ•„์š”ํ•œ์ง€ ๊ณ ๋ฏผ์ž„.
  • ๋” ๊ณ ๋ คํ•  ๋‚ด์šฉ
  1. HTTPS, DOMAIN์ด ํ•„์š”ํ•จ โ†’ ๋ฌด๋ฃŒ SSL ์ธ์ฆ์„œ ๋ฐœ๊ธ‰ & ๋ฌด๋ฃŒ ๋„๋ฉ”์ธ ๋ฐœ๊ธ‰ ์‚ฌ์ดํŠธ ๋“ฑ์„ ์ด์šฉํ•ด์„œ ํ•ด๊ฒฐ ์˜ˆ์ •.
  • ์งˆ๋ฌธ

    ์•Œ๋ฆผ ์„œ๋ฒ„ ๊ฐœ๋ฐœ ์‹œ์—, URI๋ฅผ ๋ฐ˜๋“œ์‹œ ์‚ฌ์ „์— ์„ค๊ณ„ํ•˜๊ณ  ํ•ด์•ผํ• ์ง€ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค.
    ์‚ฌ์‹ค ๊ธฐ๋ณธ์ ์ธ URI์— notificatain/{id} ์ •๋„๋กœ๋งŒ ๊ตฌ๋ถ„ํ•ด๋„ ๋  ๊ฒƒ์ด๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ค์–ด์„œ ๊ณ ๋ฏผ์ž…๋‹ˆ๋‹ค.
    โ†’ URI ์˜ˆ์‹œ
    ShMarket/README.md at dev ยท Kim-SiHwan/ShMarket

์ง€๊ธˆ ํ˜„์žฌ ๊ณ ๋ฏผ?


์ง€๊ธˆ์€ ์•Œ๋ฆผ ์„œ๋ฒ„๊ฐ€ ์ ์  ๋” ๊ณ ๋ฏผ๋˜๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค.....
๊ฐ„๋‹จํ•˜๊ฒŒ ์›น ํ‘ธ์‹œ ์•Œ๋ฆผ์œผ๋กœ ์ƒ๊ฐํ–ˆ๋Š”๋ฐ??
๋” ์ƒ๊ฐ์„ ํ•ด๋ณด๋‹ˆ, ์šฐ๋ฆฌ๊ฐ€ ๊ฐœ๋ฐœํ•  ์›นํŽ˜์ด์ง€ ๋‚ด์—์„œ ์•Œ๋ฆผ์ด ์Œ“์ด๊ณ , ๊ทธ๊ฑธ ์กฐํšŒํ•˜๊ณ  ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ํ•ด์•ผํ•˜๋Š”๊ฑฐ ์•„๋‹Œ๊ฐ€? ์ด๋Ÿฐ ์ƒ๊ฐ์ด ๋“ ๋‹ค.
์–ด์งธ์•ผํ• ๊นŒ....?

์ง€๊ธˆ ๋‚ด ์ƒ๊ฐ : SSE, WebSocket, FCM(์›น ํ‘ธ์‹œ) ์ •๋„.....? ๋„์ €ํžˆ ๋ชจ๋ฅด๊ฒ ๋‹ค...

๊ฐ„๋‹จํ•œ ๋ฆฌ๋ทฐ!(๊ณ„๋™์› ์บ ํ”„์žฅ๋‹˜ ver)

  • 1์ธ ํ”„๋กœ์ ํŠธ
    • ๋ณ€์ˆ˜๋ช… ๋“ฑ์˜ ์ด๋ฆ„์ด ๋„ˆ๋ฌด ๊ธธ๊ฒŒ ์„ค์ •๋˜์–ด ์žˆ์Œ.
    • ์ฟ ํ‚ค์™€ ์„ธ์…˜ ๋ฐฉ์‹์„ ์‚ฌ์šฉํ–ˆ์—ˆ๋‹ค๋ฉด, ์ด๋ฒˆ ํ”„๋กœ์ ํŠธ์—์„œ๋„ ์‚ฌ์šฉํ–ˆ์–ด๋„ ์ข‹์•˜์„ ๊ฒƒ ๊ฐ™์Œ.
  • ํŒ€ํ”„๋กœ์ ํŠธ(๋‚ด ๋ถ€๋ถ„)
    • ์ธ์ฆ/์ธ๊ฐ€ ์„œ๋ฒ„
      • ๋„ˆ๋ฌด ๊ณผ๋„ํ•˜๊ฒŒ ์„œ๋ฒ„๋ฅผ ๋‚˜๋ˆˆ ๊ฒฝํ–ฅ์ด ์žˆ์Œ โ†’ ์˜คํžˆ๋ ค ์ค„์—ฌ๋ฒ„๋ฆฌ๋Š” ๊ฒƒ์ด ํ›จ์”ฌ ๋‚˜์„ ๊ฒƒ์ž„.
        • (email ์„œ๋ฒ„์™€ auth ์„œ๋ฒ„ โ†’ ํ•ฉ์น˜๋Š” ๊ฒƒ์ด ์ข‹์Œ)
      • ์ž‘์€ ๊ทœ๋ชจ ์•ˆ์—์„œ์˜ MSA๋Š” ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ด ํ›จ์”ฌ ์ข‹์Œ
profile
์–ธ์  ๊ฐ€ ๋‚ด ์ฝ”๋“œ๋กœ ์„ธ์ƒ์— ๊ธฐ์—ฌํ•  ์ˆ˜ ์žˆ๋„๋ก, BE&Data Science ๊ฐœ๋ฐœ ๊ธฐ๋ก ๋…ธํŠธโ˜˜๏ธ

0๊ฐœ์˜ ๋Œ“๊ธ€