Next.js: ์˜คํ”„๋ผ์ธ ์šฐ์„  ์ง€์›

์— ๋งŒ๋“  2017๋…„ 01์›” 23์ผ  ยท  47์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: vercel/next.js

์˜คํ”„๋ผ์ธ ์ง€์›์€ ๋งค์šฐ ์œ ์šฉํ•˜๋ฉฐ ์ตœ์‹  PWA๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. HTML ๋งค๋‹ˆํŽ˜์ŠคํŠธ์™€ ํ•จ๊ป˜ ์›น์‚ฌ์ดํŠธ์™€ ๊ธฐ๋ณธ ์•ฑ ๊ฐ„์˜ ๊ฒฉ์ฐจ๋ฅผ ํ•ด์†Œํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.

์ด ๊ธฐ๋Šฅ์—๋Š” ๋‘ ๊ฐ€์ง€ ๋‹ค๋ฅธ ํŠน์ง•์ด ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์˜คํ”„๋ผ์ธ ์ง€์›: ์˜จ๋ผ์ธ ์ƒํƒœ์—์„œ ์‚ฌ์ดํŠธ๊ฐ€ ๋กœ๋“œ๋œ ๊ฒฝ์šฐ ์˜คํ”„๋ผ์ธ ์ƒํƒœ์—์„œ๋„ ์‚ฌ์ดํŠธ๋ฅผ ํƒ์ƒ‰ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๊ตฌํ˜„ํ•˜๊ธฐ ๊ฐ€์žฅ ์‰ฌ์šด ๊ธฐ๋Šฅ์ด์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

  • ์˜คํ”„๋ผ์ธ ์šฐ์„  ์ง€์›: ๋ธŒ๋ผ์šฐ์ €์— ์‚ฌ์ดํŠธ๊ฐ€ ๋กœ๋“œ๋˜์ง€ ์•Š์•˜๋”๋ผ๋„ ์˜คํ”„๋ผ์ธ ์ƒํƒœ์—์„œ๋„ ์‚ฌ์ดํŠธ๋ฅผ ์—ด ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค.

webpack-offline ํ”Œ๋Ÿฌ๊ทธ์ธ ๋•๋ถ„์— ๋‘˜ ๋‹ค ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ์–ด์จŒ๋“  React์™€ Next.js๋ฅผ ๋™์‹œ์— ๋ฐฐ์šฐ๊ธฐ ๋•Œ๋ฌธ์— ์•„์ง ์ž‘๋™์‹œํ‚ค์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค.

์ž‘๋™ํ•˜๋„๋ก ํ•˜๋Š” ๋‹จ๊ณ„:

  • webpack-offline

npm install offline-plugin --save-dev

  • ๋ฃจํŠธ ํด๋”์— ์‚ฌ์šฉ์ž ์ •์˜ next.config.js ๋งŒ๋“ค๊ธฐ
const OfflinePlugin = require('offline-plugin');

module.exports = {
  webpack: (config, { dev }) => {
        config.plugins = [
            new OfflinePlugin()
        ];
    return config
  }
};

  • webpack-offline ์ดˆ๊ธฐํ™”

์ด๊ฒƒ์€ ๋‚ด๊ฐ€ ๋ฌธ์ œ๊ฐ€ ์žˆ๋Š” ๋‹จ๊ณ„์ž…๋‹ˆ๋‹ค. ์ตœ์ƒ์œ„ ์ˆ˜์ค€ ๋‚ด๋ถ€์˜ componentDidMount ๋‚ด๋ถ€ ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ์ˆ˜ํ–‰ํ•ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

์ด ๋ฌธ์ œ๋Š” ์ด ๋ฌธ์ œ์— ๋Œ€ํ•ด ๊ณ„์† ์ž‘์—…ํ•˜๋ผ๋Š” ์•Œ๋ฆผ์ด๊ธฐ๋„ ํ•˜๊ณ  ๋” ์ž˜ ์•Œ๊ณ  ์žˆ๋Š” ์‚ฌ๋žŒ์˜ ๋„์›€์„ ์š”์ฒญํ•˜๋Š” ๊ฒƒ์ด๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค.

feature request

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์•ˆ๋…•ํ•˜์„ธ์š” ์—ฌ๋Ÿฌ๋ถ„. Google์˜ ์šฐ๋ฆฌ ํŒ€์€ https://github.com/GoogleChrome/sw-precache ๋ฐ https://github.com/GoogleChrome/sw-toolbox ์™€ ๊ฐ™์€ React/Webpack ํ—ค๋น„์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๋ช‡ ๊ฐ€์ง€ Service Worker ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(Webpack ํ”Œ๋Ÿฌ๊ทธ์ธ ํฌํ•จ)์—์„œ ์ž‘์—…ํ•ฉ๋‹ˆ๋‹ค. Lyft, Housing.com, Flipkart ๋“ฑ๊ณผ ๊ฐ™์€ ์‚ฌ์ดํŠธ

Next๊ฐ€ ์˜คํ”„๋ผ์ธ ์ง€์›์„ ํƒ์ƒ‰ํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ•˜๋ฉด ๋ช‡ ๊ฐ€์ง€ ์ง€์นจ์„ ๊ณต์œ ํ•˜๊ฒŒ ๋˜์–ด ๊ธฐ์ฉ๋‹ˆ๋‹ค. ์ฝ”๋“œ ๋ถ„ํ• ์ด ์ด๋ฏธ ์ˆ˜ํ–‰๋˜๊ณ  ์žˆ๋Š” ๊ฒฝ์šฐ PRPL ๊ณผ ๊ฐ™์€ ํŒจํ„ด์„

ํ•ด๋‹น ํŽ˜์ด์ง€์— ๋Œ€ํ•œ ์ฆ‰๊ฐ์ ์ธ ๋ฐ˜๋ณต ๋กœ๋“œ๋ฅผ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ ์™ธ์—๋„ V8์˜ ์ฝ”๋“œ ์บ์‹ฑ์„ ์ผ์ฐ ์„ ํƒํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ๋ฐ˜๋ณต ๋ฐฉ๋ฌธ์— ๋Œ€ํ•œ ๊ตฌ๋ฌธ ๋ถ„์„/์ปดํŒŒ์ผ ์‹œ๊ฐ„์ด ์˜ค๋Š˜๋ณด๋‹ค ๋‚ฎ์Šต๋‹ˆ๋‹ค.

@rauchg ๊ฐ€ ํฅ๋ฏธ ์™ธ์ณ์ฃผ์„ธ์š” :)

๋ชจ๋“  47 ๋Œ“๊ธ€

์ด์— ๋Œ€ํ•œ ์„ค๋ช…/๋ฌธ์„œ/์˜ˆ์ œ์™€ ํ•จ๊ป˜ ์ด๊ฒƒ์ด ์ž‘๋™ํ•˜๋Š” ๊ฒƒ์„ ๋ณด๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

next/prefetch๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๋ฏธ๋ฆฌ ๊ฐ€์ ธ์˜ค์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์•„์ง ์˜คํ”„๋ผ์ธ ๋™์ž‘์„ ํ—ˆ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. https://github.com/zeit/next.js/issues/740

Next.js์™€ ์ง์ ‘์ ์ธ ๊ด€๋ จ์€ ์—†์ง€๋งŒ ์‹ค์ œ๋กœ ์˜คํ”„๋ผ์ธ์œผ๋กœ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐ์ดํ„ฐ์˜ ์–‘์€ ์–ผ๋งˆ๋‚˜ ๋˜๋Š”์ง€ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค(์˜ˆ: ์›น ์•ฑ์— ๋™์˜์ƒ์ด ์žˆ๋Š” ๊ฒฝ์šฐ -- ๋ธŒ๋ผ์šฐ์ €์— ์—„๊ฒฉํ•œ ์ œํ•œ์ด ์žˆ์Šต๋‹ˆ๊นŒ? ๋ชจ๋ฐ”์ผ์€ ์–ด๋–ป์Šต๋‹ˆ๊นŒ?), ์‚ฌ์šฉ์ž๊ฐ€ ๊ตฌ์ฒด์ ์œผ๋กœ ์–ด๋–ป๊ฒŒ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ํ•œ ๊ฐ€์ง€ ๋ถ€ํƒ์ด ๋‚˜์ค‘์— ์‚ฌ์ „ ๋‹ค์šด๋กœ๋“œ ํ•  ๋“ฑ ๋‚ด๊ฐ€ ์ด์ „์— ์–ธ๊ธ‰ ํ•œ ์ผ์„ ์—ฌ๊ธฐ : https://github.com/zeit/next.js/issues/24#issuecomment -258804529 (๋‹ค์Œ / ํ”„๋ฆฌ ํŽ˜์น˜ ์ „์— ์ผ์ด์—ˆ๋‹ค ).

ํ”Œ๋žซํผ, ๋ธŒ๋ผ์šฐ์ € ๋ฐ ๋ฒ„์ „์— ๋”ฐ๋ผ ๋‹ค์–‘ํ•œ ๋ฐ์ดํ„ฐ ์ œํ•œ์ด ์žˆ์Šต๋‹ˆ๋‹ค. "๋ธŒ๋ผ์šฐ์ € ์ €์žฅ์†Œ ๋‚จ์šฉ์ž"์—์„œ ์ œํ•œ์„ ํ…Œ์ŠคํŠธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. https://demo.agektmr.com/storage/

์˜คํ”„๋ผ์ธ ์ €์žฅ ๋ฐ ์บ์‹ฑ์„ ์œ„ํ•œ ํ‘œ์ค€ํ™”๋œ ๋ฐฉ๋ฒ•์€ IndexedDB์ž…๋‹ˆ๋‹ค. ์ด์ œ iOS Safari(v10)์—์„œ๋„ ์ง€์›๋˜์ง€๋งŒ ์„ฑ๋Šฅ ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ํ˜„์žฌ ๊ด‘๋ฒ”์œ„ํ•œ ์ง€์›์ด ์žˆ์Šต๋‹ˆ๋‹ค. http://caniuse.com/#feat =indexeddb

์˜ˆ๋ฅผ ๋“ค์–ด PouchDB๋Š” ์—ฌ์ „ํžˆ Safari์—์„œ IndexedDB ๋Œ€์‹  WebSQL์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. https://github.com/pouchdb/pouchdb/issues/5572
localForage์™€ ๋™์ผ: https://github.com/localForage/localForage/issues/604

PouchDB์—๋Š” ๋ฐ์ดํ„ฐ ์ œํ•œ์— ๋Œ€ํ•œ ๋ฉ‹์ง„ ์š”์•ฝ์ด ์žˆ์Šต๋‹ˆ๋‹ค. https://pouchdb.com/faq.html#data_limits (์•ฝ๊ฐ„ ๊ตฌ์‹)
๊ทธ๋ฆฌ๊ณ  ์ด ๋” ์˜ค๋ž˜๋œ ๊ธฐ์‚ฌ์—์„œ๋Š” ๋ชจ๋ฐ”์ผ ๋ธŒ๋ผ์šฐ์ €์™€ ๊ด€๋ จ๋œ ์ผ๋ถ€ ์Šคํ† ๋ฆฌ์ง€ ์˜ค๋ฅ˜ ๋ฐ ๊ธฐํƒ€ ์ธก๋ฉด์„ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•๋„ ์–ธ๊ธ‰ํ•ฉ๋‹ˆ๋‹ค. https://www.html5rocks.com/en/tutorials/offline/quota-research/

์ผ๋ถ€ ๋ธŒ๋ผ์šฐ์ €์—์„œ ํ˜„์žฌ ํ• ๋‹น๋Ÿ‰์„ ์ฟผ๋ฆฌํ•˜๊ณ  ๋” ๋งŽ์€ ์˜๊ตฌ ์ €์žฅ์†Œ๋ฅผ ์š”์ฒญํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. https://jakearchibald.com/2014/offline-cookbook/#cache -persistence

๋˜ ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์€ ์„œ๋น„์Šค ์›Œ์ปค์™€ ํ•จ๊ป˜ ๊ธด ์บ์‹œ ๋งŒ๋ฃŒ ๊ฐ’๊ณผ ๋ณ€๊ฒฝ ๋ถˆ๊ฐ€๋Šฅํ•œ ์บ์‹œ ์ œ์–ด๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ์„ ํƒํ•œ ๊ฐ ๋ฆฌ์†Œ์Šค์— ๋Œ€ํ•ด http ์š”์ฒญ์„ ํ•จ์œผ๋กœ์จ ์‚ฌ์šฉ์ž ์ง€์ • ์บ์‹ฑ์„ ์‰ฝ๊ฒŒ ํ—ˆ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋˜ํ•œ ์˜ค๋ž˜๋œ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์•„์ฃผ ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ œํ•œ์„ ํ”ผํ•˜๊ธฐ ์œ„ํ•ด ๋‹ค์–‘ํ•œ ์บ์‹œ๋ฅผ ์œ ์ง€ ๊ด€๋ฆฌํ•˜๊ณ  ์ˆ˜๋™์œผ๋กœ ์‚ญ์ œํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์€ ์„œ๋น„์Šค ์ž‘์—…์ž๋ฅผ ์ง€์›ํ•˜๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ๋งŒ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
https://developer.mozilla.org/en-US/docs/Web/API/Cache
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers

๊ณต๊ฐ„์ด ๋ถ€์กฑํ•  ๋•Œ ๋ธŒ๋ผ์šฐ์ €๋Š” ์ œํ•œ ๋‚ด์— ์žˆ์„ ๋•Œ๊นŒ์ง€ ์ „์ฒด ์›๋ณธ์„ ํ•œ ๋ฒˆ์— ์ œ๊ฑฐํ•  ์ˆ˜ ์žˆ์Œ์„ ๊ธฐ์–ตํ•˜์‹ญ์‹œ์˜ค.
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria

Addy Osmani์˜ ๋˜ ๋‹ค๋ฅธ ์œ ์šฉํ•œ ๊ธฐ์‚ฌ: https://medium.com/dev-channel/offline-storage-for-progressive-web-apps-70d52695513c#.9vja3t8gp

๋ถ„๋ช…ํžˆ ์ €์žฅ์†Œ API๋„ ์ž‘์—… ์ค‘์ž…๋‹ˆ๋‹ค. https://storage.spec.whatwg.org/

์ด๊ฒƒ์€ ์‹ค์ œ๋กœ ์˜๊ตฌ ์ €์žฅ์„ ํ—ˆ์šฉํ•ฉ๋‹ˆ๋‹ค.
"์ „ํ†ต์ ์œผ๋กœ ์‚ฌ์šฉ์ž๊ฐ€ ์žฅ์น˜์˜ ์ €์žฅ ๊ณต๊ฐ„์ด ๋ถ€์กฑํ•˜๋ฉด ์ด๋Ÿฌํ•œ API๋กœ ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ๊ฐœ์ž…ํ•  ์ˆ˜ ์—†์ด ์†์‹ค๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์˜๊ตฌ ์ƒ์ž๋Š” ์‚ฌ์šฉ์ž์˜ ๋™์˜ ์—†์ด๋Š” ์ง€์šธ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋ฐ์ดํ„ฐ ๋ณด์žฅ์ด ์‚ฌ์šฉ์ž์—๊ฒŒ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค. ์›น์— ๋Œ€ํ•œ ๊ธฐ๋ณธ ํ”Œ๋žซํผ์—์„œ ์ฆ๊ฒผ์Šต๋‹ˆ๋‹ค."

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

@impronuncible ๊ฐ์‚ฌ

์–ด๋–ค ๊ฒฐ์ •์„ ๋งํ•˜๋Š” ๊ฒ๋‹ˆ๊นŒ? ๋‚˜๋Š” ์šฐ๋ฆฌ๊ฐ€ ๋ฌธ์ œ๋ฅผ ๋‘ ๊ฐ€์ง€ ์ฃผ์š” ๋ฌธ์ œ๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

1) ์ •์  ์ž์‚ฐ ์บ์‹ฑ: js, HTML, ์ด๋ฏธ์ง€์™€ ๊ฐ™์ด ... ์ด๊ฒƒ์€ /static ์ œ์™ธํ•˜๊ณ  ์ตœ์†Œํ•œ ์˜คํ”„๋ผ์ธ ํ”Œ๋ ˆ์ด๋ฒ„์—์„œ ๊ฑฐ์˜ ์ด๋ฏธ ๊ตฌํ˜„๋˜์—ˆ์œผ๋ฉฐ ๋ฐ˜์‘์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค๋Š” ์ ์„ ๊ฐ์•ˆํ•  ๋•Œ ๋‹ค์Œ๊ณผ ๊ฐ™์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค. webpack-offline ๋ฐ ์„œ๋น„์Šค ์ž‘์—…์ž๋ฅผ ํ†ตํ•ด ์„ ํ˜ธ๋˜๋Š” ๊ตฌํ˜„ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค.

2) ๋ฐ์ดํ„ฐ ์บ์‹ฑ: ์ƒํƒœ, ์ฟผ๋ฆฌ, ํœ˜๋ฐœ์„ฑ ๋ฐ์ดํ„ฐ, .... ์‚ฌ์šฉ์ž๊ฐ€ ๋ฐ์ดํ„ฐ๋ฅผ ๋กœ๋“œํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ถ”์ •ํ•ด์•ผ ํ•˜๋ฏ€๋กœ ๋” ๋งŽ์€ ๋ฌธ์ œ๋ฅผ ์ œ๊ธฐํ•ฉ๋‹ˆ๋‹ค. redux๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ƒํƒœ๋ฅผ ๋ณด์กดํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ์‚ฌ๋žŒ๋“ค์€ ์›ํ•˜๋Š” ๋Œ€๋กœ redux์— ๋ฐ์ดํ„ฐ๋ฅผ ๋„ฃ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋˜๋Š” ์ฟผ๋ฆฌ ๋ฐ ๋Œ์—ฐ๋ณ€์ด๋ฅผ ์บ์‹ฑํ•˜์—ฌ ์ด๋Ÿฌํ•œ ๊ฒฝ์šฐ๋ฅผ ์ปค๋ฒ„ํ•ด์•ผ ํ•˜๋Š” GraphQL/Apollo๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

@servermeta ๊ทธ๊ฒƒ์€ ๊ท€ํ•˜์˜ ๊ฒฝ์šฐ์— ๋”ฐ๋ผ ๋‹ค๋ฆ…๋‹ˆ๋‹ค. ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ๊ณต๊ฒฉ์ ์ธ ์บ์‹ฑ ์ „๋žต ๊ตฌํ˜„์„ ๋งˆ์น˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์ปค์Šคํ…€ ์„œ๋ฒ„์™€ https://serviceworke.rs/ ์˜ ์ „๋žต๋งŒ ์‚ฌ์šฉํ•˜๋ฉด

@ooade ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

์–ด์จŒ๋“  ๋‚˜๋Š” ๊ทธ ์ƒํƒœ๊ฐ€ ์ƒˆ๋กœ ๊ณ ์นจ, ๋‹ค์‹œ๋กœ๋“œ ์‚ฌ์ด์— ์ง€์†๋˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์„ ์•Œ์•˜์Šต๋‹ˆ๋‹ค. ์ด ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ƒ๊ฐํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

@ooade ๊ฐ์‚ฌ

๋ฌธ์ œ๋ฅผ ๋‚˜๋ˆ„์–ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์˜คํ”„๋ผ์ธ ๋ฐ์ดํ„ฐ ๊ฒ€์ƒ‰์€ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๋งก๊ฒจ์•ผ ํ•˜๊ณ  redux ์ƒํƒœ๋ฅผ ๋ณด์กดํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์„ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค:

https://github.com/rt2zz/redux-persist

์ด๋ฅผ ํ†ตํ•ด localstorage์— ์ƒํƒœ๋ฅผ ์ €์žฅํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์ƒˆ๋กœ ๊ณ ์นจ, ๋‹ค์‹œ ๋กœ๋“œ, ํƒญ ๋ฐ ์„ธ์…˜ ๊ฐ„์— ์œ ์ง€๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š” ์—ฌ๋Ÿฌ๋ถ„. Google์˜ ์šฐ๋ฆฌ ํŒ€์€ https://github.com/GoogleChrome/sw-precache ๋ฐ https://github.com/GoogleChrome/sw-toolbox ์™€ ๊ฐ™์€ React/Webpack ํ—ค๋น„์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๋ช‡ ๊ฐ€์ง€ Service Worker ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(Webpack ํ”Œ๋Ÿฌ๊ทธ์ธ ํฌํ•จ)์—์„œ ์ž‘์—…ํ•ฉ๋‹ˆ๋‹ค. Lyft, Housing.com, Flipkart ๋“ฑ๊ณผ ๊ฐ™์€ ์‚ฌ์ดํŠธ

Next๊ฐ€ ์˜คํ”„๋ผ์ธ ์ง€์›์„ ํƒ์ƒ‰ํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ•˜๋ฉด ๋ช‡ ๊ฐ€์ง€ ์ง€์นจ์„ ๊ณต์œ ํ•˜๊ฒŒ ๋˜์–ด ๊ธฐ์ฉ๋‹ˆ๋‹ค. ์ฝ”๋“œ ๋ถ„ํ• ์ด ์ด๋ฏธ ์ˆ˜ํ–‰๋˜๊ณ  ์žˆ๋Š” ๊ฒฝ์šฐ PRPL ๊ณผ ๊ฐ™์€ ํŒจํ„ด์„

ํ•ด๋‹น ํŽ˜์ด์ง€์— ๋Œ€ํ•œ ์ฆ‰๊ฐ์ ์ธ ๋ฐ˜๋ณต ๋กœ๋“œ๋ฅผ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ ์™ธ์—๋„ V8์˜ ์ฝ”๋“œ ์บ์‹ฑ์„ ์ผ์ฐ ์„ ํƒํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ๋ฐ˜๋ณต ๋ฐฉ๋ฌธ์— ๋Œ€ํ•œ ๊ตฌ๋ฌธ ๋ถ„์„/์ปดํŒŒ์ผ ์‹œ๊ฐ„์ด ์˜ค๋Š˜๋ณด๋‹ค ๋‚ฎ์Šต๋‹ˆ๋‹ค.

@rauchg ๊ฐ€ ํฅ๋ฏธ ์™ธ์ณ์ฃผ์„ธ์š” :)

@addyosmani ์˜คํ”„๋ผ์ธ ์ง€์›์€ 2.0 ์•ˆ์ •ํ™” ์ดํ›„ ์ตœ์šฐ์„  ์ˆœ์œ„ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค.

@rauchg 2.0 ์•ˆ์ •์ ์ธ ์ถœ์‹œ ๋‚ ์งœ์— ๋Œ€ํ•œ ์˜ˆ์ƒ์ด ์žˆ์Šต๋‹ˆ๊นŒ?
์šฐ๋ฆฌ๋Š” ๋ณธ๊ฒฉ์ ์ธ ํ”„๋กœ๋•์…˜์„ ์‹œ์ž‘ํ•˜๋ ค๊ณ  ํ•˜๋ฉฐ Next.js๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.
๋‚˜๋Š” ๋ชจ๋“  ์œ ํ˜•์˜ ๊ฒฌ์ , ์ผ / ์ฃผ / ์›”์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค ...
์ •๋ง ๊ณ ๋ง™์Šต๋‹ˆ๋‹ค!

@Ajar-Ajar 2.0.0์ด ์˜ค๋Š˜ ์ถœ์‹œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

@rauchg ๋Š” ์—ฌ๊ธฐ์—์„œ ์ถ”์ ํ•  ์˜คํ”„๋ผ์ธ ์šฐ์„  ์ง€์›์ž…๋‹ˆ๊นŒ ์•„๋‹ˆ๋ฉด ๋‹ค๋ฅธ ๋ฌธ์ œ๋ฅผ ๋งŒ๋“ค ์˜ˆ์ •์ž…๋‹ˆ๊นŒ?

@jevakallio์˜ ์ƒˆ๋กœ ์˜คํ”ˆ ์†Œ์Šค redux-offline ๋„ ์ฐธ์กฐํ•˜์‹ญ์‹œ์˜ค. ๋‹ค์Œ + redux-offline ์˜ˆ์ œ๊ฐ€ ์žˆ์œผ๋ฉด ์ •๋ง ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ ์ด๊ฒƒ์„ ๋‹ฌ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ์ •๋ณด๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ? next.config.js๋ฅผ ์ˆ˜ํ–‰ํ•˜๊ณ  ์˜คํ”„๋ผ์ธ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์„ค์น˜ํ•˜๋ ค๊ณ  ์‹œ๋„ํ–ˆ์ง€๋งŒ ์ž‘๋™ํ•˜์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ์€ ๋ฉ‹์ง„ ํ”„๋กœ์ ํŠธ์ด์ง€๋งŒ ์ด ๊ธฐ๋Šฅ(์˜คํ”„๋ผ์ธ ์šฐ์„ )์ด ๊ธฐ๋ณธ์ ์œผ๋กœ ์ œ๊ณต๋œ๋‹ค๋ฉด ์ •๋ง ์™„๋ฒฝํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

@saulflores95 @ooade ์˜ NextSimpleStarter ์˜ ๋ฐฉ์‹์ด ์ €์—๊ฒŒ ํšจ๊ณผ์ ์ด์—ˆ์Šต๋‹ˆ๋‹ค :)

@AugustinLF NextSimpleStarter๋Š” ์˜คํ”„๋ผ์ธ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. https://github.com/ooade/NextSimpleStarter/issues/23#issuecomment -294310240

@sedubois ์™€์„œ ์ด๊ฒƒ์„ ์ฝ๋Š” ์‚ฌ๋žŒ์—๊ฒŒ๋Š” ์•ฝ๊ฐ„ ๊ณผ์žฅ๋œ ํ‘œํ˜„์ž…๋‹ˆ๋‹ค. ๊ณต์ •ํ•˜๊ฒŒ ๋งํ•˜๋ฉด sw-precache ๋ฐ sw-toolbox๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ผ๋ถ€ ์˜คํ”„๋ผ์ธ ๊ธฐ๋Šฅ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚ด ์•ฑ์€ ์ด ๋‘ ๊ฐ€์ง€ ๋„๊ตฌ๋กœ๋งŒ ์˜คํ”„๋ผ์ธ์—์„œ ์ž‘๋™ํ•˜์ง€๋งŒ ๋‚ด ์•ฑ์˜ ์ดˆ๊ธฐ ์ƒํƒœ๋Š” ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ตฌ์ฒด์ ์œผ๋กœ ๋งํ•˜๋ฉด ์ฒ˜์Œ์— ์œ ์„ ์œผ๋กœ ์ „์†ก๋œ ๊ฒƒ ์ด์ƒ์œผ๋กœ ์ƒํƒœ๋ฅผ ๊ตฌ์„ฑํ•˜๊ธฐ ์œ„ํ•œ ์˜คํ”„๋ผ์ธ ์†”๋ฃจ์…˜์„ ์ œ๊ณตํ•˜์ง€ ์•Š๋Š”๋‹ค๊ณ  ๋งํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

@timmywil , nextjs ์˜คํ”„๋ผ์ธ ์ง€์› ์•ฑ์˜ GitHub ์ €์žฅ์†Œ๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ? ๊ฐ์‚ฌ ํ•ด์š”.

Safari์— ํ•„์š”ํ•œ appcache ์‚ฌ์šฉํ•˜์—ฌ ๋‹ค์Œ ์˜คํ”„๋ผ์ธ ์ง€์›(๋ฒ ํƒ€) ๋ฒ„์ „์„ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. http://github.com/ssured/nownextmicro๋ฅผ ์‚ดํŽด๋ณด์‹ญ์‹œ์˜ค.

์•ˆ๋…•ํ•˜์„ธ์š”, ์ƒ์šฉ๊ตฌ์— ์˜คํ”„๋ผ์ธ ์ง€์›์„ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.
https://github.com/Sly777/ran

์•ฝ๊ฐ„ ๋ฒ„๊ทธ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ '์‹คํ—˜์ '์ด๋ผ๋Š” ์ด๋ฆ„์ด ๋ถ™์—ˆ์–ด์š” ๐Ÿ˜„ ์–ด์จŒ๋“  ๋„์›€์ด ๋˜์—ˆ์œผ๋ฉด ํ•ฉ๋‹ˆ๋‹ค.

@rauchg ์ด ๊ธฐ๋Šฅ์ด ์—ฌ์ „ํžˆ ์šฐ์„  ์ˆœ์œ„์ž…๋‹ˆ๊นŒ?

@rauchg next.js 4.0 ๋ฒ ํƒ€๊ฐ€ ์ถœ์‹œ๋˜๋ฉด์„œ ํ•ด๋‹น ๋ฒ„์ „์˜ ๋กœ๋“œ๋งต์— ์˜คํ”„๋ผ์ธ ์ฒซ ๋ฒˆ์งธ ์ง€์›์ด ํฌํ•จ๋  ๊ฐ€๋Šฅ์„ฑ์ด ์žˆ์Šต๋‹ˆ๊นŒ?

๊ธฐ๋Šฅ ์†Œ์‹ ๋ถ€ํƒ๋“œ๋ฆด๊ฒŒ์š”^^

Next.js 5.0์ด ์ถœ์‹œ๋˜์—ˆ์ง€๋งŒ(์ถ•ํ•˜ํ•ฉ๋‹ˆ๋‹ค!) ์˜คํ”„๋ผ์ธ ์ง€์›์— ๋Œ€ํ•œ ์–ธ๊ธ‰์ด ์—†์Šต๋‹ˆ๋‹ค. ๊ณต์œ ํ•˜๊ณ  ์‹ถ์€ ์ƒˆ๋กœ์šด ๋กœ๋“œ๋งต์ด ์žˆ์Šต๋‹ˆ๊นŒ? ์ง€๊ธˆ๊นŒ์ง€ ๋†€๋ผ์šด ์ผ์„ ํ•ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค

@idhard ์‹ค์ œ๋กœ ๊ธฐ๋ณธ์ ์œผ๋กœ ์˜คํ”„๋ผ์ธ ์ง€์›์„ ์ง€์›ํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
(ํ•˜์ง€๋งŒ ์ƒํ™ฉ์ด ๋ฐ”๋€” ์ˆ˜ ์žˆ์Œ)

๊ทธ๋Ÿฌ๋‚˜ ์šฐ๋ฆฌ๋Š” Next.js๊ฐ€ ๋งˆ๋ฒ•์„ ๋ถ€๋ฆฌ์ง€ ์•Š๋„๋ก ํ•˜๋Š” ๊ณผ์ •์— ์žˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ง์ ‘ ์›นํŒฉ ํ”Œ๋Ÿฌ๊ทธ์ธ๊ณผ ๋กœ๋”๋ฅผ ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๋‹ค์Œ 5๋‹จ๊ณ„๋Š” 1๋‹จ๊ณ„์ž…๋‹ˆ๋‹ค.

@idhard ํฌ๊ด„์ ์ธ ์˜คํ”„๋ผ์ธ ์ง€์›์— ๋Œ€ํ•ด ์ง๊ด€์ ์ด์ง€ ์•Š์„ ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์ผ๋ถ€ ์•ฑ์€ ํ™•์‹คํžˆ ํ•ด๋‹น ๊ธฐ๋Šฅ์ด ํ™œ์„ฑํ™”๋˜๋Š” ๊ฒƒ์„ ์›ํ•˜์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋‚ด ๊ฐœ์ธ ์›น์‚ฌ์ดํŠธ์—์„œ ๋‚˜๋Š” https://github.com/zeit/next.js/tree/canary/examples/with-sw-precache๋ฅผ ์‚ฌ์šฉ ํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ์šฐ๋ฆฌ๋Š” ๋˜ํ•œ iOS Once iOS์—์„œ ํ”„๋กœ๋•์…˜์—์„œ ^๋ฅผ ์‚ฌ์šฉํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. 11.3์ด ์ถœ์‹œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

@hanford ๋„ค, ๋น„์Šทํ•œ ํ† ๋ก ์ด CRA์—์„œ ์ˆ˜ํ–‰๋˜์—ˆ์œผ๋ฉฐ ๊ธฐ๋ณธ์ ์œผ๋กœ ์›น ์ž‘์—…์ž ์ง€์›์„ ์ œ๊ฑฐํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค(https://github.com/facebook/create-react-app/issues/2554#event-1431558318). ํ•˜์ง€๋งŒ ์—ฌ์ „ํžˆ ์›น ์ž‘์—…์ž๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  PWA๋Š” ์˜คํ”„๋ผ์ธ ์ง€์›์„ ์œ„ํ•œ ์‚ฌ์‹ค์ƒ์˜ ์†”๋ฃจ์…˜์ด ๋  ๊ฒƒ์ด๋ฏ€๋กœ Next์˜ ํŒ€์ด ๋ฏธ๋ฆฌ ๊ฐ€์ ธ์˜จ ํŽ˜์ด์ง€์™€ ๊ฐ™์€ ๊ณต์‹ ์ง€์›์„ ์ถ”๊ฐ€ํ•  ๊ณ„ํš์ด ์žˆ๋Š”์ง€ ์•„๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

@idhard ์˜ˆ, ํ•ต์‹ฌ ํŒ€์— ๋Œ€ํ•œ ํฅ๋ฏธ๋กœ์šด ๋”œ๋ ˆ๋งˆ์ž…๋‹ˆ๋‹ค. ์œ„์—์„œ ์–ธ๊ธ‰ํ•œ sw-precache ํ”Œ๋Ÿฌ๊ทธ์ธ์— ์ •๋ง ๋งŒ์กฑํ–ˆ์Šต๋‹ˆ๋‹ค.

๋‚ด ๊ฐœ์ธ ์›น ์‚ฌ์ดํŠธ๋Š” ์ •์  ๋””๋ ‰ํ† ๋ฆฌ์—์„œ manifest.json ๋ฅผ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ๊ณผ ํ•จ๊ป˜ sw-precache webpack ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ถ๊ธˆํ•˜์‹œ๋‹ค๋ฉด ์ฝ”๋“œ๋Š” ์—ฌ๊ธฐ .. ์ปค๋ฐ‹์ด ์กฐ๊ธˆ ์—‰์„ฑํ•˜์ง€๋งŒ ์ง€๋‚œ์ฃผ์— ์˜คํ”„๋ผ์ธ ์ง€์›๊ณผ ๋งค๋‹ˆํŽ˜์ŠคํŠธ json์„ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.

@hanford iOS 11.3์—์„œ ์–ด๋–ค ์ผ์ด ๋ฐœ์ƒํ•ฉ๋‹ˆ๊นŒ? ์„œ๋น„์Šค ์ž‘์—…์ž๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ? ๋” ๋งŽ์€ ์ •๋ณด๊ฐ€ ์žˆ๋Š” ์ฐธ๊ณ  ์ž๋ฃŒ๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

@hanford @idhard ์šฐ๋ฆฌ๋Š” CRA ์ด์ „์— ์„œ๋น„์Šค ์›Œ์ปค๋ฅผ ์‹œ๋„ํ–ˆ์ง€๋งŒ ๋งŽ์€ ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.
์ด๊ฒƒ์ด ์šฐ๋ฆฌ๊ฐ€ ์ˆœ์ˆ˜ํ•˜๊ฒŒ ์ „ํ†ต์ ์ธ ์›น ์บ์‹ฑ ๊ธฐ์ˆ ๋กœ ํ”„๋ฆฌํŽ˜์นญ ์†”๋ฃจ์…˜์„ ๊ตฌ์ถ•ํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ•œ ์ด์œ ์ž…๋‹ˆ๋‹ค.
๊ทธ๊ฒƒ์€ ํ›Œ๋ฅญํ•˜๊ฒŒ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ์ƒˆ๋กœ์šด ๊ฐœ์„  ์‚ฌํ•ญ์ด ๊ณง ์ œ๊ณต๋  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

๋„ค ๋ฌผ๋ก  ์˜คํ”„๋ผ์ธ์€ SW๊ฐ€ ํ•„์š”ํ•œ ๊ณณ์ž…๋‹ˆ๋‹ค.
๊ทธ๋Ÿฌ๋‚˜ ๋งค์šฐ ๋ถˆ์•ˆ์ •ํ•˜๊ณ  API๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์–ด๋ ต์Šต๋‹ˆ๋‹ค. ์ผ์ด ์ž˜๋ชป๋˜์–ด ์‚ฌ์ดํŠธ๊ฐ€ ์†์ƒ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ ์šฐ๋ฆฌ๋Š” ์Šค์Šค๋กœ ํ•˜๊ณ  ์‹ถ์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๊ทธ๋Ÿฌ๋‚˜ ์šฐ๋ฆฌ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ Next.js ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ํ†ตํ•ด sw-precache ์™€ ๊ฐ™์€ ๊ฒƒ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค(๋˜๋Š” ๋‹จ์ˆœํžˆ ์›นํŒฉ ๋กœ๋” ๋ฐ ํ”Œ๋Ÿฌ๊ทธ์ธ ์„ธํŠธ ์ถ”๊ฐ€).

@sedubiois ๋Š” iOS Safari์—์„œ Apples ๊ณ„ํš์— ๋Œ€ํ•ด https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_11_1.html ์„ ์ฐธ์กฐ

์˜ˆ @ssured @sedubois ์„œ๋น„์Šค ์ž‘์—…์ž๊ฐ€ iOS 11.3์˜ Mobile Safari์— ์ƒ๋ฅ™ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ๋งค์šฐ ํฅ๋ฏธ์ง„์ง„ํ•ฉ๋‹ˆ๋‹ค! ์ €๋Š” iOS 11.3 ๋ฒ ํƒ€ 2๋ฅผ ์‚ฌ์šฉ ์ค‘์ด๋ฉฐ ์ˆ˜๋งŽ์€ ๋ฒ„๊ทธ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

@arunoda ๊ฐ€ ์ œ์•ˆํ•˜๋Š” ๊ฒƒ์€ Next.js ํ˜„์žฌ ์บ์‹ฑ ์ „๋žต(์บ์‹œ ์ œ์–ด ํ—ค๋”, etag ๋“ฑ)์ด ์„œ๋น„์Šค ์›Œ์ปค๋ณด๋‹ค ํ›จ์”ฌ ์•ˆ์ •์ ์ด๋ผ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์„œ๋น„์Šค ์›Œ์ปค๋Š” ๋ช‡ ๊ฐ€์ง€ ์ •๋ง ๊น”๋”ํ•œ ์ƒˆ ๊ธฐ๋Šฅ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค. ํŠนํžˆ ๋„คํŠธ์›Œํฌ ์š”์ฒญ์— ๋Œ€ํ•œ ๋ณด๋‹ค ์„ธ๋ฐ€ํ•œ ์ œ์–ด(์บ์‹œ๋œ ์ฝ˜ํ…์ธ ๋ฅผ ์ผ์ฐ ๋ฐ˜ํ™˜) .. ํ•˜์ง€๋งŒ Next.js๋Š” ๋ชจ๋“  ๊ณณ์—์„œ ์ž‘๋™ํ•˜๊ณ  ์˜ค๋ฒ„ํ—ค๋“œ๊ฐ€ ์ƒ๋‹นํžˆ ์ ์Šต๋‹ˆ๋‹ค. (์„œ๋น„์Šค ์›Œ์ปค๋ฅผ ๋“ฑ๋ก ์ทจ์†Œํ•˜๋Š” ๊ฒƒ์€ ์ด์ฒด์ ์ธ ๊ณ ํ†ต์ž…๋‹ˆ๋‹ค)

@ssured @sedubois ์ €๋ฒˆ์— Zeit์—์„œ ์ถœ์‹œํ•œ ํ”Œ๋Ÿฌ๊ทธ์ธ๊ณผ ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ ์ž‘๋™ํ•˜๋Š” ์ž‘์€ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค .. ์˜คํ”„๋ผ์ธ ๋‹ค์Œ ์•ฑ์„ ์™„ํ™”ํ•˜๊ณ  ๊ธฐ์กด ์•ฑ์— ์—ฐ๊ฒฐํ•˜๋Š” ๊ฒƒ์ด ๋งค์šฐ ๊ฐ„๋‹จํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

ํ”ผ๋“œ๋ฐฑ์ด ์žˆ์œผ๋ฉด ์•Œ๋ ค์ฃผ์„ธ์š”! https://github.com/hanford/next-offline

@hanford ์šฐ๋ฆฌ์˜ ์‚ถ์„ ์กฐ๊ธˆ ๋” ์‰ฝ๊ฒŒ ๋งŒ๋“ค์–ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค
@arunoda next.js 5์˜ ํ”Œ๋Ÿฌ๊ทธ์ธ ์ง€์›์€

์•ž์œผ๋กœ ๋ฌด์—‡์„ ํ• ์ง€ ๊ฒฐ์ •ํ•˜๋Š” ๋‹ค๋ฅธ ์‚ฌ๋žŒ์„ ์œ„ํ•ด sw-precache ์›นํŒฉ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ๋น„๊ต์  ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค( ์˜ˆ: ๋‹ค์‹œ ).

์ž์ฒด ์†”๋ฃจ์…˜์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์—ˆ์ง€๋งŒ hanford์—์„œ ์ œ๊ณตํ•˜๋Š” ์†”๋ฃจ์…˜์œผ๋กœ ์ „ํ™˜ํ–ˆ์Šต๋‹ˆ๋‹ค. ํ”Œ๋Ÿฌ๊ทธ์ธ์ด ์„œ๋น„์Šค ์›Œ์ปค๋ฅผ ์ž๋™ ๋“ฑ๋กํ•˜๋Š” ๊ฒƒ์„ ๋ฉˆ์ถ”๊ธฐ ์œ„ํ•ด next.config.js์—์„œ ๋ช‡ ๊ฐ€์ง€ ์ˆ˜์ •์„ ํ•ด์•ผ ํ–ˆ์ง€๋งŒ ์ž˜ ์ž‘๋™ํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์ด์ œ ์‚ฌ์šฉ์ž ์ง€์ • ์„œ๋ฒ„์—์„œ ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋‚ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ๊ฒฝ๋กœ ์„ค์ •์ด article/:slug๋กœ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด URL ์ค‘ ํ•˜๋‚˜๋ฅผ ๋ฐฉ๋ฌธํ•˜๋ฉด ์„œ๋น„์Šค ์ž‘์—…์ž๊ฐ€ ํ•ด๋‹น URL์— ๋Œ€ํ•œ ๋ฌธ์„œ๋ฅผ ๋ฐœ์†กํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋ˆ„๊ตฌ๋“ ์ง€ ๋‚ด๊ฐ€ ๊ทธ๊ฒƒ์„ ๋ฉˆ์ถ”๊ณ  ๋Œ€์‹  ๊ธฐ์‚ฌ๋ฅผ ์ œ๊ณตํ•˜๋„๋ก ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ? ์ด๊ฒƒ์€ Workbox์˜ ์„ค์ •๊ณผ ๊ด€๋ จ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

ํ–ฅํ›„ NextJS ๋ฆด๋ฆฌ์Šค์—์„œ ์„œ๋น„์Šค ์›Œ์ปค์˜ ํ†ตํ•ฉ์ด๋‚˜ ์˜คํ”„๋ผ์ธ ์ง€์›์„ ๊ณ„์† ๊ธฐ๋Œ€ํ•ด์•ผ ํ•ฉ๋‹ˆ๊นŒ? ์˜ˆ์ „์— ์–ด๋–ค ๋ถ„๋“ค์ด ์šฐ์„ ์ˆœ์œ„ ๊ธฐ๋Šฅ์ด๋ผ๊ณ  ํ•˜์…จ๋˜ ๊ฒƒ ๊ฐ™์€๋ฐ, ์ด ๋ฌธ์ œ๊ฐ€ ๊ณต๊ฐœ๋œ์ง€ 1๋…„ ๋ฐ˜์ด ๋„˜์—ˆ์Šต๋‹ˆ๋‹ค...

@caribou-code ์ €๋Š” Zeit ํŒ€์˜ Next.js ๊ณ„ํš์— ๋Œ€ํ•ด ๋งํ•  ์ˆ˜ ์—†์ง€๋งŒ, ์ €๋Š” ์ด๊ฒƒ์„ ์ž ์‹œ ์ „์— ์ผ์Šต๋‹ˆ๋‹ค: https://github.com/hanford/next-offline ์„œ๋น„์Šค ์›Œ์ปค๋ฅผ ์ž๋™์œผ๋กœ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š”

๋‚˜๋Š” ์—ฌ๋Ÿฌ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์—์„œ ๊ทธ๊ฒƒ์„ ์‚ฌ์šฉํ–ˆ๊ณ  ๊ฝค ์ž˜ ์ž‘๋™ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‚ด๋ถ€์ ์œผ๋กœ๋Š” ๋งค์šฐ ํฅ๋ฏธ๋กœ์šด ํ”„๋กœ์ ํŠธ์ธ googles workbox๋ฅผ ํ™œ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. https://developers.google.com/web/tools/workbox/

next-offline ์‚ฌ์šฉํ•˜๋Š” ๋ช‡ ๊ฐ€์ง€ ์˜ˆ:

@hanford ์—ฌ๊ธฐ์— ๊ฒŒ์‹œํ•˜๊ธฐ ์ „์— next-offline์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์—ˆ๋Š”๋ฐ ๊ฝค ์ข‹์Šต๋‹ˆ๋‹ค! ์‹ค์ œ๋กœ ์‹ค์ œ๋กœ ์ž‘๋™ํ•˜๋Š” ์ง€๊ธˆ๊นŒ์ง€ ๊ตฌํ˜„ํ•œ ์œ ์ผํ•œ ์†”๋ฃจ์…˜์ž…๋‹ˆ๋‹ค. ์ž˜ ํ–ˆ์–ด!

๊ทธ๋Ÿฌ๋‚˜ NextJS ๋ฆฌํฌ์ง€ํ† ๋ฆฌ์— ์ด์— ๋Œ€ํ•œ ์˜ˆ๊ฐ€ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— sw-precache-webpack-plugin ๊ณผ ํ•จ๊ป˜ ์ž‘๋™ํ•˜๋Š” ์†”๋ฃจ์…˜์„ ์–ป๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค. ์„œ๋น„์Šค ์›Œ์ปค. ๊ทธ ํ”Œ๋Ÿฌ๊ทธ์ธ๋„ ๊ฝค ์ธ๊ธฐ๊ฐ€ ์žˆ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด 1๋…„ ์ „์— NextSimpleStarter๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ sw-precache๋งŒ์œผ๋กœ๋Š” ๋Œ€๋ถ€๋ถ„์˜ ์˜คํ”„๋ผ์ธ ์š”๊ตฌ ์‚ฌํ•ญ์„ ์ถฉ์กฑํ•  ์ˆ˜ ์—†๋‹ค๋Š” ์‚ฌ์‹ค์„ ์•Œ๊ฒŒ ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ตœ๊ทผ์— ๋Œ€๋ถ€๋ถ„์˜ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” workbox๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์œผ๋กœ ์ „ํ™˜ํ–ˆ์Šต๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ ์•„์ง ํ˜„์žฌ ํ‘œ์ค€(์•„์ด์ฝ˜ ํฌ๊ธฐ ๋“ฑ)์œผ๋กœ ์—…๋ฐ์ดํŠธํ•˜์ง€ ์•Š์•˜์œผ๋ฉฐ ๋ฉฐ์น  ๋‚ด๋กœ ์ˆ˜์ •ํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. ๋ฌด๋ฃŒ๋กœ ์ฒดํ—˜ํ•ด ๋ณด์„ธ์š”. ๋งŒ์กฑ์Šค๋Ÿฝ์ง€ ์•Š์œผ๋ฉด ๋ฌธ์ œ๋ฅผ ์‚ญ์ œํ•˜์‹ญ์‹œ์˜ค.

@hanford ๋ฉ‹์ง€๋„ค์š” . ๊ฐœ๋ฐœ ๋ชจ๋“œ์—์„œ ์‹คํ–‰๋˜์ง€๋งŒ ํ•ด๋‹น ๋ชจ๋“œ์—๋Š” ์„œ๋น„์Šค ์›Œ์ปค๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ๊ท€ํ•˜์˜ readme ์—์„œ ๋…ธ๋“œ ์„œ๋ฒ„ ์—†์ด ์„œ๋น„์Šค ์›Œ์ปค์™€ ํ•จ๊ป˜ ํ”„๋กœ๋•์…˜ ๋ชจ๋“œ์—์„œ ์ž‘๋™ํ•˜๋„๋ก ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ๋‚ด ์•ฑ์„ Netlify์— ๋ฐฐํฌํ•˜๊ณ  next export ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚ด ์•ฑ์€ ์™„์ „ํžˆ ์ •์ ์ž…๋‹ˆ๋‹ค. ๋‚˜๋Š” ์•„๋ฌด ๋ฌธ์ œ๊ฐ€ ์‚ฌ์šฉํ•˜์ง€์ด next export ๊ทธ ๋ฌธ์ œ๊ฐ€ ์žˆ๋‹ค๋ฉด . ๋‚˜๋Š” ๊ฐ€์žฅ ์„ฑ๋Šฅ์ด ์ข‹๊ณ  ๋น„์šฉ์ด ๋“ค์ง€ ์•Š๋Š” ์ผ์„ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ทจ๋ฏธ ์•ฑ์ด๋ผ ์œตํ†ต์„ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

@ooade ์ด๊ฒƒ๋„ ์ข‹์•„ ๋ณด์ด์ง€๋งŒ ์‹œ์ž‘ํ•  ๋•Œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ง€์‹œ์— ๋”ฐ๋ผ "์„œ๋ฒ„๋ฆฌ์Šค"๋ฅผ "์„œ๋ฒ„"๋กœ ๋ณ€๊ฒฝํ•˜๋ฉด ํ•ด๋‹น ์˜ค๋ฅ˜๊ฐ€ ์ˆ˜์ •๋˜์—ˆ์ง€๋งŒ ๋‹ค์Œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.

A bad HTTP response code (404) was received when fetching the script.

@dancancro next-offline ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด์„œ next-export ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

next-offline ์˜ ๋ฌธ์ œ๋ฅผ ์žฌ์ƒ์‚ฐํ•˜๋Š” ๋ช‡ ๊ฐ€์ง€ ๋‹จ๊ณ„์™€ ํ•จ๊ป˜ ์—ด์–ด์„œ ๋” ๊นŠ์ด ์‚ดํŽด๋ณผ ์ˆ˜ ์žˆ๋„๋ก ํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?

@hanford ๋‹น์‹ ์ด ์›ํ•œ๋‹ค๋ฉด ๊ทธ๋ ‡๊ฒŒ ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ๋‚˜๋Š” ํŠน๋ณ„ํ•œ ๊ฒƒ์„ ํ•˜์ง€ ์•Š์•˜์œผ๋ฉฐ ์Šคํƒ€ํ„ฐ์— ๋Œ€ํ•ด ์–ด๋–ค ๋ฌธ์ œ๊ฐ€ ์žˆ๋‹ค๊ณ  ์ œ์•ˆํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋ฌธ์ œ๋ฅผ ์žฌํ˜„ํ•˜๋Š” ๋‹จ๊ณ„๋Š” ๋‹จ์ˆœํžˆ ์‚ฌ์šฉ์ž์˜ ์ง€์‹œ ์ž…๋‹ˆ๋‹ค. ์œ ์ผํ•œ ๋ฌธ์ œ๋Š” ํ”„๋กœ๋•์…˜ ๋ชจ๋“œ์—์„œ ์‹คํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ชจ๋ฅธ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด ์กฐ๊ฑด ์œผ๋กœ ํŒ๋‹จํ•˜๋ฉด ์„œ๋น„์Šค ์›Œ์ปค๋Š” dev ๋ชจ๋“œ์— ๋“ฑ๋ก๋˜์–ด์„œ๋Š” ์•ˆ ๋˜๋ฏ€๋กœ ๋‚˜์—๊ฒŒ ์ผ์–ด๋‚œ ์ผ์€ ์˜ˆ์ƒ๋œ ๋™์ž‘์ž…๋‹ˆ๋‹ค. ํ”„๋กœ๋•์…˜ ๋ชจ๋“œ์—์„œ ์‹คํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ next export ๊ฐ€ ๊ฐ€๋Šฅํ•œ ๊ฒฝ์šฐ next export ํ•˜์—ฌ ํ”„๋กœ๋•์…˜ ๋ชจ๋“œ์—์„œ ์ •์  ์„œ๋ฒ„ ๋ Œ๋”๋ง ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ ๊ฐ™์€ ๋ช‡ ๊ฐ€์ง€ ์ง€์นจ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

@dancancro ์ดํ•ดํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๊ทธ ๋…ผ์˜๋Š” ์—ฌ๊ธฐ์„œ ์ผ์–ด๋‚˜์„œ๋Š” ์•ˆ ๋ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ํ™•์‹คํžˆ Next.js ์ž์ฒด์˜ ๋ฌธ์ œ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค.

์—ฌ๊ธฐ ์—์„œ ๋ฌธ์ œ๋ฅผ ์—ฌ

๊ด€๋ จ ์—†๋Š” ๋ฌธ์ œ/๋ฆฌํฌ์ง€ํ† ๋ฆฌ์—์„œ ํ† ๋ก ํ•˜๋Š” ๊ฒฝ์šฐ ์ปค๋ฎค๋‹ˆํ‹ฐ์— ๋„์›€์ด ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ์ตœ๊ทผ์— Next.js๋ฅผ ์œ„ํ•œ ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฌ์šด Zero config PWA ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค: next-pwa

์—ฌ๊ธฐ์—์„œ ์˜ˆ์ œ๋ฅผ ํ™•์ธํ•˜์„ธ์š”.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰