์ด๊ทผ๋‘ฅ
๊ทผ๋‘ฅ์ด์˜ ๋ธ”๋กœ๊ทธ
์ด๊ทผ๋‘ฅ
์ „์ฒด ๋ฐฉ๋ฌธ์ž
874,952
์˜ค๋Š˜
323
์–ด์ œ
187

๊ณต์ง€์‚ฌํ•ญ

  • ์ „์ฒด๋ณด๊ธฐ (107)
    • ์›น (9)
    • ์–ธ์–ด & ํ”„๋ ˆ์ž„์›Œํฌ (53)
      • JavaScript (7)
      • TypeScript (0)
      • Node.js (11)
      • Vue.js (3)
      • React (0)
      • React Native (0)
      • C & C++ (19)
      • Java & JSP (9)
      • Python (4)
    • ์ปดํ“จํ„ฐ ๊ณผํ•™ (3)
      • ์•Œ๊ณ ๋ฆฌ์ฆ˜ (0)
      • ์ž๋ฃŒ๊ตฌ์กฐ (3)
    • ๊ธฐํƒ€ (9)
      • Linux (1)
      • Git (2)
      • DialogFlow (4)
    • ์ผ์ƒ (13)
      • ๊ฒŒ์ž„ (13)
    • ์นผ๋Ÿผ (9)
      • ํšŒ๊ณ  (0)
      • ๋‚˜๋งŒ์˜ ๊ธ€ (0)
      • ์ œํ’ˆ ๋ฆฌ๋ทฐ (9)
    • __Dev__ (9)
      • Release (9)
๋ฐ˜์‘ํ˜•

์ธ๊ธฐ ๊ธ€

  • ์›น ํ‘ธ์‹œ ์•Œ๋ฆผ(Web Push Notification)
    2022.06.13
    ์›น ํ‘ธ์‹œ ์•Œ๋ฆผ(Web Push Notification)
  • [Tomcat] ์•„ํŒŒ์น˜ ํ†ฐ์บฃ ์„œ๋ฒ„ ํฌํŠธ ๋ณ€๊ฒฝํ•˜๊ธฐ
    2018.08.24
    [Tomcat] ์•„ํŒŒ์น˜ ํ†ฐ์บฃ ์„œ๋ฒ„ ํฌํŠธ ๋ณ€๊ฒฝํ•˜๊ธฐ
  • [Node.js] ์‹ค์‹œ๊ฐ„ ์ฑ„ํŒ… ์„œ๋น„์Šค ๋งŒ๋“ค๊ธฐ(5) - ์ฑ„ํŒ…โ‹ฏ
    2018.05.31
    [Node.js] ์‹ค์‹œ๊ฐ„ ์ฑ„ํŒ… ์„œ๋น„์Šค ๋งŒ๋“ค๊ธฐ(5) - ์ฑ„ํŒ…โ‹ฏ
  • [C/C++] ์ฝ˜์†”๊ฒŒ์ž„ ํ”„๋กœ๊ทธ๋ž˜๋ฐ (1) - ํ”„๋กœ์ ํŠธ ์ƒ์„ฑโ‹ฏ
    2017.12.19
    [C/C++] ์ฝ˜์†”๊ฒŒ์ž„ ํ”„๋กœ๊ทธ๋ž˜๋ฐ (1) - ํ”„๋กœ์ ํŠธ ์ƒ์„ฑโ‹ฏ
  • [Vue 3] Composition API์™€ ํ…œํ”Œ๋ฆฟ ์ฐธ์กฐ(โ‹ฏ
    2020.10.02
    [Vue 3] Composition API์™€ ํ…œํ”Œ๋ฆฟ ์ฐธ์กฐ(โ‹ฏ

ํƒœ๊ทธ

  • vue
  • ์›น ํ™•์žฅ
  • ํ”„๋กœ๊ทธ๋ ˆ์‹œ๋ธŒ ์›น ์•ฑ
  • vue3
  • ES6
  • Java FX
  • spread syntax
  • vuex
  • AstroWar
  • javascript
  • vue-next
  • ํŒŒํ‹ฐํด
  • java
  • WWDC
  • ์ถœ๊ฐ„
  • ์ดํŽ™ํŠธ
  • ์ดํด๋ฆฝ์Šค
  • Hello World!
  • Scanner
  • WWDC20
  • Deemo
  • vue.js
  • ์ž๋ฐ”
  • Composition API
  • ์ž๋ฐ” ํ”„๋กœ์ ํŠธ
  • ์ „๊ฐœ ๊ตฌ๋ฌธ
  • composition-api
  • Vue 3
  • pwa
  • self

์ตœ๊ทผ ๋Œ“๊ธ€

  • ์–ด๋””์—์„œ๋„ ์ด๋Ÿฐ ์นœ์ ˆํ•œ ์„ค๋ช…์€ ๋ฐ›์„ ์ˆ˜ ์—†์—ˆ์Šต๋‹ˆ๋‹ค. ์‘์šฉโ‹ฏ
    ๋ฏธ์ณค๋‹ค...
  • ์ •๋ง ๋„ˆ๋ฌด ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค ์„ ์ƒ๋‹˜ ๋งŽ์€ ๋„์›€์ด ๋˜๊ณ ์žˆ์Šต๋‹ˆ๋‹ค ์–ด๋–ปโ‹ฏ
    ๊น€์ค€ํƒœ
  • ์ปค์„œ ์œ„์น˜์ด๋™ ํ•จ์ˆ˜๊นŒ์ง€ ํ–ˆ๋Š”๋ฐ ์ปดํŒŒ์ผํ•˜๋ฉด Makefile.โ‹ฏ
    Qour94
  • iOS์˜ ๊ฒฝ์šฐ ์• ํ”Œ์—์„œ ๊ฐœ๋ฐœํ•˜๊ณ  ์žˆ๋Š” webkit ์—”์ง„์„ โ‹ฏ
    ์ด๊ทผ๋‘ฅ
  • android, IOS์—์„œ ๋œ๋‹ค๊ณ  ํ–ˆ๋Š”๋ฐ Notificaโ‹ฏ
    ์‚ฝ์ž๋ฃจ๋ถ€๋Œ€

์ตœ๊ทผ ๊ธ€

  • ์›น ํ‘ธ์‹œ ์•Œ๋ฆผ(Web Push Notification)
    2022.06.13
    ์›น ํ‘ธ์‹œ ์•Œ๋ฆผ(Web Push Notification)
  • ์Šคํƒ(Stack)
    2022.05.26
    ์Šคํƒ(Stack)
  • ๋ฐฐ์—ด(Array)
    2022.05.25
    ๋ฐฐ์—ด(Array)
  • C์–ธ์–ด๋กœ ๋ฐฐ์šฐ๋Š” ์ž๋ฃŒ๊ตฌ์กฐ
    2022.05.24
    C์–ธ์–ด๋กœ ๋ฐฐ์šฐ๋Š” ์ž๋ฃŒ๊ตฌ์กฐ
  • [Vue 3] Composition API์™€ ํ…œํ”Œ๋ฆฟ ์ฐธ์กฐ(โ‹ฏ
    2020.10.02
    [Vue 3] Composition API์™€ ํ…œํ”Œ๋ฆฟ ์ฐธ์กฐ(โ‹ฏ

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • ํ™ˆ
  • ๋ฏธ๋””์–ด๋กœ๊ทธ
  • ๋ฐฉ๋ช…๋ก
hELLO ยท Designed By ์ •์ƒ์šฐ.
์ด๊ทผ๋‘ฅ

๊ทผ๋‘ฅ์ด์˜ ๋ธ”๋กœ๊ทธ

[PWA] SNS ์•ฑ ์˜ˆ์ œ๋กœ ๋ฐฐ์šฐ๋Š” ํ”„๋กœ๊ทธ๋ ˆ์‹œ๋ธŒ ์›น ์•ฑ ์ถœ๊ฐ„!
์›น

[PWA] SNS ์•ฑ ์˜ˆ์ œ๋กœ ๋ฐฐ์šฐ๋Š” ํ”„๋กœ๊ทธ๋ ˆ์‹œ๋ธŒ ์›น ์•ฑ ์ถœ๊ฐ„!

2020. 7. 31. 01:14
๋ฐ˜์‘ํ˜•

SNS ์•ฑ ์˜ˆ์ œ๋กœ ๋ฐฐ์šฐ๋Š” ํ”„๋กœ๊ทธ๋ ˆ์‹œ๋ธŒ ์›น ์•ฑ

 

๐ŸŽ‰ ์†Œ๊ฐœ

์ด๋ฒˆ์— ํ”„๋กœ๊ทธ๋ ˆ์‹œ๋ธŒ ์›น ์•ฑ(PWA)์„ ์ฃผ์ œ๋กœ ํ•œ ์ฒซ ๋ฒˆ์งธ ์ €์„œ, "SNS ์•ฑ ์˜ˆ์ œ๋กœ ๋ฐฐ์šฐ๋Š” ํ”„๋กœ๊ทธ๋ ˆ์‹œ๋ธŒ ์›น ์•ฑ"
์„ ์ถœ๊ฐ„ํ•˜๊ฒŒ ๋˜์–ด ๊ฐ„๋žตํžˆ ์†Œ๊ฐœํ•˜๋ ค๊ณ  ํ•œ๋‹ค.


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

๐Ÿ“– ์ฑ… ๋ณด๋Ÿฌ ๊ฐ€๊ธฐ


์ฑ…์— ๋Œ€ํ•œ ์ž์„ธํ•œ ๋‚ด์šฉ์€ ์•„๋ž˜ ์˜จ๋ผ์ธ ์„œ์ ์—์„œ ํ™•์ธํ•ด๋ณผ ์ˆ˜ ์žˆ๋‹ค.

YES24
๊ต๋ณด๋ฌธ๊ณ 
์•Œ๋ผ๋”˜
์ธํ„ฐํŒŒํฌ๋„์„œ

ํ”„๋กœ๊ทธ๋ ˆ์‹œ๋ธŒ ์›น ์•ฑ์˜ ์ „๋ฐ˜์ ์ธ ๋‚ด์šฉ๊ณผ ๋‹ค์–‘ํ•œ ํ•ต์‹ฌ ๊ธฐ๋Šฅ์„ ๋ฐ‘๋ฐ”๋‹ฅ๋ถ€ํ„ฐ ๊ตฌํ˜„ํ•ด๋ณด๋ฉฐ ํ•œ ๊ฑธ์Œ ๋” ๋‚˜์•„๊ฐˆ ์ˆ˜ ์žˆ๋„๋ก ๊ตฌ์„ฑ๋˜์–ด์žˆ๋‹ค.

์˜คํ”„๋ผ์ธ ํ™˜๊ฒฝ์—์„œ ์›น ํŽ˜์ด์ง€๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ๊ฒŒ์‹œ๋ฌผ์— ๋Œ€ํ•œ ๋ฐฑ๊ทธ๋ผ์šด๋“œ ๋™๊ธฐํ™” ์ž‘์—… ์ˆ˜ํ–‰, ๊ทธ๋ฆฌ๊ณ  ์ข‹์•„์š” ์•Œ๋ฆผ ๊ธฐ๋Šฅ๊นŒ์ง€ ๋ชจ๋‘ ์›น ๊ธฐ์ˆ ๋งŒ์„ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐœ๋ฐœํ•˜๊ณ  ํ™œ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๋Š” ๋‚ด์šฉ์œผ๋กœ ๊ตฌ์„ฑ๋˜์–ด์žˆ๋‹ค.

๋ชจ๋“  ์‹ค์Šต์„ ํ†ตํ•ด ๊ตฌํ˜„ํ•˜๋Š” ๊ธฐ๋Šฅ๋“ค์€ ์ ์ง„์ ์ธ ํ–ฅ์ƒ์„ ๊ณ ๋ คํ•˜์—ฌ ๊ตฌํ˜„ํ•˜๊ธฐ ๋•Œ๋ฌธ์—, ์ตœ์ข… ๊ฒฐ๊ณผ๋ฌผ์„ IE11์—์„œ๋„ ์ •์ƒ์ ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ชจ์Šต์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

๋‹จ์ˆœํžˆ ํ”„๋กœ๊ทธ๋ ˆ์‹œ๋ธŒ ์›น ์•ฑ๊ณผ ๊ด€๋ จ๋œ ๊ธฐ์ˆ ์ ์ธ ๋‚ด์šฉ๋งŒ ๋‹ค๋ฃจ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ์›น ๊ธฐ์ˆ ์˜ ๋ฐœ์ „๊ณผ ํ”„๋กœ๊ทธ๋ ˆ์‹œ๋ธŒ ์›น ์•ฑ์˜ ๊ฐœ๋…, PWA๋กœ ๊ตฌํ˜„๋œ ์›น ์•ฑ ์‚ฌ๋ก€์™€ ์ด๋ฅผ ํ†ตํ•ด ์–ป์„ ์ˆ˜ ์žˆ๋˜ ์ด์  ๋“ฑ ๊ธฐ์ˆ  ๋„์ž… ์ด์ „์— ๊ณ ๋ คํ•ด์•ผ ํ•  ์‚ฌํ•ญ๋“ค์— ๋Œ€ํ•ด์„œ๋„ ๊ฐ„๋žตํžˆ ์†Œ๊ฐœํ•œ๋‹ค.

์ „๋ฐ˜์ ์ธ ๋‚ด์šฉ์€ ์ผ๋ฐ˜์ ์ธ ์›น ์•ฑ ์˜ˆ์ œ์ธ Paper๋ฅผ ํ”„๋กœ๊ทธ๋ ˆ์‹œ๋ธŒ ์›น ์•ฑ์œผ๋กœ ๋ฐœ์ „์‹œ์ผœ๋‚˜๊ฐ€๋Š” ๋ฐฉํ–ฅ์œผ๋กœ ์‹ค์Šต์ด ์ง„ํ–‰๋œ๋‹ค.


์‹ค์Šต์„ ํ†ตํ•ด ๋ฐฐ์šธ ์ˆ˜ ์žˆ๋Š” ์ฃผ์š” ๋‚ด์šฉ์€ ์•„๋ž˜์™€ ๊ฐ™์œผ๋ฉฐ, ์ด๋ก  > ๊ธฐ๋ณธ > ํ™œ์šฉ ์ˆœ์„œ๋กœ ๋‚ด์šฉ์ด ์ „๊ฐœ๋œ๋‹ค.

[๊ฐ„๋‹จํ•œ SNS ์›น ์•ฑ - Paper ๋ฏธ๋ฆฌ ๋ณด๊ธฐ]

์ตœ์ข… ๋ชจ์Šต ์‚ดํŽด๋ณด๊ธฐ

 

์‹ค์Šต์„ ์œ„ํ•ด ๊ธฐ๋ณธ ์ œ๊ณต๋˜๋Š” Paper ์„œ๋ฒ„

 

์ข‹์•„์š” ํ‘ธ์‹œ ์•Œ๋ฆผ

 

iOS / Android / Window / macOS ๋“ฑ ๋‹ค์–‘ํ•œ ํ™˜๊ฒฝ์— PWA๋ฅผ ์„ค์น˜ํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค

[์ฃผ์š” ๋‚ด์šฉ]

์„œ๋น„์Šค ์›Œ์ปค(Service Worker)
์˜คํ”„๋ผ์ธ ์บ์‹ฑ(์บ์‹œ ์Šคํ† ๋ฆฌ์ง€)
IndexedDB
์›น ์•ฑ ๋งค๋‹ˆํŽ˜์ŠคํŠธ(Web App Manifest)
๋ฐฑ๊ทธ๋ผ์šด๋“œ ๋™๊ธฐํ™”
์„œ๋น„์Šค ์›Œ์ปค์™€ ํŽ˜์ด์ง€๊ฐ„ ๋ฉ”์‹œ์ง€ ํ†ต์‹ 
ํ‘ธ์‹œ ๋ฉ”์‹œ์ง€ (Firebase + ์„œ๋ฒ„ ์—ฐ๋™)

(๋ถ€๋ก)
ES6 ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‚ดํŽด๋ณด๊ธฐ
๋ผ์ดํŠธํ•˜์šฐ์Šค(Lighthouse)
์›Œํฌ ๋ฐ•์Šค(Workbox)



์ด์ฒ˜๋Ÿผ ๋‹ค์–‘ํ•œ ๋‚ด์šฉ์— ๋Œ€ํ•ด ์ƒ์„ธํ•˜๊ฒŒ ์‚ดํŽด๋ณด๋ฉฐ, ์ด๋ก ์ ์ธ ๋‚ด์šฉ์€ ์ตœ๋Œ€ํ•œ ์‰ฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก 100์žฅ๊ฐ€๋Ÿ‰์˜ ๊ทธ๋ฆผ ์ž๋ฃŒ๊ฐ€ ์ค€๋น„๋˜์–ด ์žˆ๋‹ค.
(์ฑ… ์ „์ฒด ์ด๋ฏธ์ง€ ์ˆ˜ 188์žฅ, ๊ทธ์ค‘ 100์žฅ๊ฐ€๋Ÿ‰์˜ ์ด๋ฏธ์ง€๊ฐ€ ์ดํ•ด๋ฅผ ๋•๊ธฐ ์œ„ํ•œ ์ž๋ฃŒ)

๋‹ค๋งŒ, ์›น ๊ฐœ๋ฐœ์„ ํ•œ ๋ฒˆ๋„ ํ•ด๋ณด์ง€ ์•Š์€ ์ดˆ๋ณด์ž๋ถ„๋“ค์—๊ฒ ๋‹ค์†Œ ์–ด๋ ค์šธ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋ฏธ๋ฆฌ ์ค€๋น„๋˜์–ด์žˆ๋Š” ์›น ์•ฑ์„ ํ•˜๋‚˜์”ฉ ๊ฐœ์„ ํ•ด๋‚˜๊ฐ€๊ธฐ ๋•Œ๋ฌธ์— ์›น ๊ฐœ๋ฐœ์— ๋Œ€ํ•œ ๊ธฐ๋ณธ์ ์ธ ์ง€์‹(์•ฝ๊ฐ„์˜ HTML, CSS, JS)์ด ํ•„์š”ํ•˜๋‹ค.



๋” ๋งŽ์€ ๋‚ด์šฉ์„ ์ „๋‹ฌํ•˜๊ณ  ์‹ถ์œผ๋‚˜ ์†Œ๊ฐœ๋Š” ์ด์ฏค์—์„œ ์ค„์ด๋„๋ก ํ•˜๊ฒ ๋‹ค.

์‹ค์Šต์„ ์ง„ํ–‰ํ•˜๋ฉฐ ํ•˜๋‚˜ํ•˜๋‚˜ ์ง์ ‘ ๊ตฌํ˜„ํ•ด๋ณธ๋‹ค๋ฉด, ํ”„๋กœ๊ทธ๋ ˆ์‹œ๋ธŒ ์›น ์•ฑ์˜ ์ „๋ฐ˜์ ์ธ ๊ตฌ์„ฑ๊ณผ ๊ฐ ๊ธฐ๋Šฅ์ด ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๊ณ  ๊ตฌํ˜„/ํ™œ์šฉํ•ด์•ผ ํ•˜๋Š”์ง€์— ๋Œ€ํ•œ ๋ฐฉํ–ฅ์„ ์žก์„ ์ˆ˜ ์žˆ์„ ๊ฒƒ์œผ๋กœ ๊ธฐ๋Œ€ํ•œ๋‹ค.

๋งŽ์€ ๊ด€์‹ฌ๊ณผ ํ”ผ๋“œ๋ฐฑ ๋ถ€ํƒํ•˜๋ฉฐ ๋ธ”๋กœ๊ทธ์— ๋ฐฉ๋ฌธํ•ด์ฃผ๋Š” ๋ชจ๋“  ๋ถ„๋“ค๊ป˜ ๊ฐ์‚ฌ์˜ ์ธ์‚ฌ๋ฅผ ์˜ฌ๋ฆฐ๋‹ค.


[์ฑ… ๋ณด๋Ÿฌ ๊ฐ€๊ธฐ]
YES24
๊ต๋ณด๋ฌธ๊ณ 
์•Œ๋ผ๋”˜
์ธํ„ฐํŒŒํฌ๋„์„œ

๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋™์ผ์กฐ๊ฑด
    '์›น' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
    • ์›น ํ‘ธ์‹œ ์•Œ๋ฆผ(Web Push Notification)
    • [WWDC20] Safari Web Extension/์‚ฌํŒŒ๋ฆฌ ์›น ํ™•์žฅ ์‚ดํŽด๋ณด๊ธฐ
    • [PWA] ํ”„๋กœ๊ทธ๋ ˆ์‹œ๋ธŒ ์›น ์•ฑ ์‹œ์ž‘ํ•˜๊ธฐ (6) - Push, ํ‘ธ์‹œ ์•Œ๋ฆผ
    • [PWA] ํ”„๋กœ๊ทธ๋ ˆ์‹œ๋ธŒ ์›น ์•ฑ ์‹œ์ž‘ํ•˜๊ธฐ (5) - Push, ํ‘ธ์‹œ ์•Œ๋ฆผ
    pwa, ๊ณต์ง€, ์ถœ๊ฐ„, ํ”„๋กœ๊ทธ๋ ˆ์‹œ๋ธŒ ์›น ์•ฑ
    ์ด๊ทผ๋‘ฅ
    ์ด๊ทผ๋‘ฅ
    ์ƒˆ๋กœ์šด ๊ฒƒ์„ ์ข‹์•„ํ•˜๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž โœจ
    ๋Œ“๊ธ€์“ฐ๊ธฐ

    ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”