๐ ์๊ฐ
์ด๋ฒ์ ํ๋ก๊ทธ๋ ์๋ธ ์น ์ฑ(PWA)์ ์ฃผ์ ๋ก ํ ์ฒซ ๋ฒ์งธ ์ ์, "SNS ์ฑ ์์ ๋ก ๋ฐฐ์ฐ๋ ํ๋ก๊ทธ๋ ์๋ธ ์น ์ฑ"
์ ์ถ๊ฐํ๊ฒ ๋์ด ๊ฐ๋ตํ ์๊ฐํ๋ ค๊ณ ํ๋ค.
๋ณธ ๋ธ๋ก๊ทธ์๋ ํ๋ก๊ทธ๋ ์๋ธ ์น ์ฑ์ ๋ํด ๊ฐ๋ตํ ์์๋ณผ ์ ์๋ ๊ฐ์ข๋ฅผ ์์ฑํ์๋๋ฐ, ํ๋ก๊ทธ๋ ์๋ธ ์น ์ฑ์ ๋ํด ๋ณด๋ค ๋ ๋ค์ํ๊ณ ์์ธํ ๋ด์ฉ์ ๋ค๋ฃฐ ์ ์๋ ๋ด์ฉ์ ์ ๋ฆฌํ์ฌ ์งํํ๊ฒ ๋์๋ค.
๐ ์ฑ ๋ณด๋ฌ ๊ฐ๊ธฐ
์ฑ
์ ๋ํ ์์ธํ ๋ด์ฉ์ ์๋ ์จ๋ผ์ธ ์์ ์์ ํ์ธํด๋ณผ ์ ์๋ค.
YES24
๊ต๋ณด๋ฌธ๊ณ
์๋ผ๋
์ธํฐํํฌ๋์
ํ๋ก๊ทธ๋ ์๋ธ ์น ์ฑ์ ์ ๋ฐ์ ์ธ ๋ด์ฉ๊ณผ ๋ค์ํ ํต์ฌ ๊ธฐ๋ฅ์ ๋ฐ๋ฐ๋ฅ๋ถํฐ ๊ตฌํํด๋ณด๋ฉฐ ํ ๊ฑธ์ ๋ ๋์๊ฐ ์ ์๋๋ก ๊ตฌ์ฑ๋์ด์๋ค.
์คํ๋ผ์ธ ํ๊ฒฝ์์ ์น ํ์ด์ง๋ฅผ ์ฌ์ฉํ๊ฑฐ๋ ๊ฒ์๋ฌผ์ ๋ํ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ ์์
์ํ, ๊ทธ๋ฆฌ๊ณ ์ข์์ ์๋ฆผ ๊ธฐ๋ฅ๊น์ง ๋ชจ๋ ์น ๊ธฐ์ ๋ง์ ์ฌ์ฉํ์ฌ ๊ฐ๋ฐํ๊ณ ํ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ํด ์์๋ณด๋ ๋ด์ฉ์ผ๋ก ๊ตฌ์ฑ๋์ด์๋ค.
๋ชจ๋ ์ค์ต์ ํตํด ๊ตฌํํ๋ ๊ธฐ๋ฅ๋ค์ ์ ์ง์ ์ธ ํฅ์์ ๊ณ ๋ คํ์ฌ ๊ตฌํํ๊ธฐ ๋๋ฌธ์, ์ต์ข
๊ฒฐ๊ณผ๋ฌผ์ IE11์์๋ ์ ์์ ์ผ๋ก ์ฌ์ฉํ ์ ์๋ ๋ชจ์ต์ ํ์ธํ ์ ์๋ค.
๋จ์ํ ํ๋ก๊ทธ๋ ์๋ธ ์น ์ฑ๊ณผ ๊ด๋ จ๋ ๊ธฐ์ ์ ์ธ ๋ด์ฉ๋ง ๋ค๋ฃจ๋ ๊ฒ์ด ์๋๋ผ, ์น ๊ธฐ์ ์ ๋ฐ์ ๊ณผ ํ๋ก๊ทธ๋ ์๋ธ ์น ์ฑ์ ๊ฐ๋
, PWA๋ก ๊ตฌํ๋ ์น ์ฑ ์ฌ๋ก์ ์ด๋ฅผ ํตํด ์ป์ ์ ์๋ ์ด์ ๋ฑ ๊ธฐ์ ๋์
์ด์ ์ ๊ณ ๋ คํด์ผ ํ ์ฌํญ๋ค์ ๋ํด์๋ ๊ฐ๋ตํ ์๊ฐํ๋ค.
์ ๋ฐ์ ์ธ ๋ด์ฉ์ ์ผ๋ฐ์ ์ธ ์น ์ฑ ์์ ์ธ Paper๋ฅผ ํ๋ก๊ทธ๋ ์๋ธ ์น ์ฑ์ผ๋ก ๋ฐ์ ์์ผ๋๊ฐ๋ ๋ฐฉํฅ์ผ๋ก ์ค์ต์ด ์งํ๋๋ค.
์ค์ต์ ํตํด ๋ฐฐ์ธ ์ ์๋ ์ฃผ์ ๋ด์ฉ์ ์๋์ ๊ฐ์ผ๋ฉฐ, ์ด๋ก > ๊ธฐ๋ณธ > ํ์ฉ ์์๋ก ๋ด์ฉ์ด ์ ๊ฐ๋๋ค.
[๊ฐ๋จํ SNS ์น ์ฑ - Paper ๋ฏธ๋ฆฌ ๋ณด๊ธฐ]
[์ฃผ์ ๋ด์ฉ]
์๋น์ค ์์ปค(Service Worker)
์คํ๋ผ์ธ ์บ์ฑ(์บ์ ์คํ ๋ฆฌ์ง)
IndexedDB
์น ์ฑ ๋งค๋ํ์คํธ(Web App Manifest)
๋ฐฑ๊ทธ๋ผ์ด๋ ๋๊ธฐํ
์๋น์ค ์์ปค์ ํ์ด์ง๊ฐ ๋ฉ์์ง ํต์
ํธ์ ๋ฉ์์ง (Firebase + ์๋ฒ ์ฐ๋)
(๋ถ๋ก)
ES6 ์๋ฐ์คํฌ๋ฆฝํธ ์ดํด๋ณด๊ธฐ
๋ผ์ดํธํ์ฐ์ค(Lighthouse)
์ํฌ ๋ฐ์ค(Workbox)
์ด์ฒ๋ผ ๋ค์ํ ๋ด์ฉ์ ๋ํด ์์ธํ๊ฒ ์ดํด๋ณด๋ฉฐ, ์ด๋ก ์ ์ธ ๋ด์ฉ์ ์ต๋ํ ์ฝ๊ฒ ์ดํดํ ์ ์๋๋ก 100์ฅ๊ฐ๋์ ๊ทธ๋ฆผ ์๋ฃ๊ฐ ์ค๋น๋์ด ์๋ค.
(์ฑ
์ ์ฒด ์ด๋ฏธ์ง ์ 188์ฅ, ๊ทธ์ค 100์ฅ๊ฐ๋์ ์ด๋ฏธ์ง๊ฐ ์ดํด๋ฅผ ๋๊ธฐ ์ํ ์๋ฃ)
๋ค๋ง, ์น ๊ฐ๋ฐ์ ํ ๋ฒ๋ ํด๋ณด์ง ์์ ์ด๋ณด์๋ถ๋ค์๊ฒ ๋ค์ ์ด๋ ค์ธ ์ ์์ผ๋ฉฐ, ๋ฏธ๋ฆฌ ์ค๋น๋์ด์๋ ์น ์ฑ์ ํ๋์ฉ ๊ฐ์ ํด๋๊ฐ๊ธฐ ๋๋ฌธ์ ์น ๊ฐ๋ฐ์ ๋ํ ๊ธฐ๋ณธ์ ์ธ ์ง์(์ฝ๊ฐ์ HTML, CSS, JS)์ด ํ์ํ๋ค.
๋ ๋ง์ ๋ด์ฉ์ ์ ๋ฌํ๊ณ ์ถ์ผ๋ ์๊ฐ๋ ์ด์ฏค์์ ์ค์ด๋๋ก ํ๊ฒ ๋ค.
์ค์ต์ ์งํํ๋ฉฐ ํ๋ํ๋ ์ง์ ๊ตฌํํด๋ณธ๋ค๋ฉด, ํ๋ก๊ทธ๋ ์๋ธ ์น ์ฑ์ ์ ๋ฐ์ ์ธ ๊ตฌ์ฑ๊ณผ ๊ฐ ๊ธฐ๋ฅ์ด ์ด๋ป๊ฒ ๋์ํ๊ณ ๊ตฌํ/ํ์ฉํด์ผ ํ๋์ง์ ๋ํ ๋ฐฉํฅ์ ์ก์ ์ ์์ ๊ฒ์ผ๋ก ๊ธฐ๋ํ๋ค.
๋ง์ ๊ด์ฌ๊ณผ ํผ๋๋ฐฑ ๋ถํํ๋ฉฐ ๋ธ๋ก๊ทธ์ ๋ฐฉ๋ฌธํด์ฃผ๋ ๋ชจ๋ ๋ถ๋ค๊ป ๊ฐ์ฌ์ ์ธ์ฌ๋ฅผ ์ฌ๋ฆฐ๋ค.
[์ฑ
๋ณด๋ฌ ๊ฐ๊ธฐ]
YES24
๊ต๋ณด๋ฌธ๊ณ
์๋ผ๋
์ธํฐํํฌ๋์