Gatsby: Suspense ๋ฐ React.lazy๊ฐ€ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2019๋…„ 02์›” 21์ผ  ยท  1๋…ผํ‰  ยท  ์ถœ์ฒ˜: gatsbyjs/gatsby

capture d ecran 2019-02-21 a 10 57 39

์„ค๋ช…

<Suspense> ์‚ฌ์šฉํ•  ๋•Œ๋งŒ yarn build ์— ์˜ค๋ฅ˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
yarn develop ์— ์˜ค๋ฅ˜๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

React.lazy() ๋˜๋Š” Loadable components ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ์ ์— ์œ ์˜ํ•˜์‹ญ์‹œ์˜ค.

import React, { Suspense } from 'react';

const Dashboard = props => {
  return (
      <Suspense fallback={<>Hey</>}>
        Hello
      </Suspense>
  );
};

export default Dashboard;

์žฌํ˜„ ๋‹จ๊ณ„

yarn build

์˜ˆ์ƒ ๊ฒฐ๊ณผ

๋นŒ๋“œ๊ฐ€ ์„ฑ๊ณตํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์‹ค์ œ ๊ฒฐ๊ณผ

๋นŒ๋“œ๊ฐ€ ์‹คํŒจํ•ฉ๋‹ˆ๋‹ค.

ํ™˜๊ฒฝ

์ฒด๊ณ„:
์šด์˜ ์ฒด์ œ: macOS 10.14.2
CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
์…ธ: 3.2.57 - /bin/bash
๋ฐ”์ด๋„ˆ๋ฆฌ:
๋…ธ๋“œ: 11.9.0 - /usr/local/bin/node
์›์‚ฌ: 1.13.0 - /usr/local/bin/yarn
npm: 6.5.0 - /usr/local/bin/npm
์–ธ์–ด:
ํŒŒ์ด์ฌ: 2.7.10 - /usr/bin/python
๋ธŒ๋ผ์šฐ์ €:
ํฌ๋กฌ: 72.0.3626.109
ํŒŒ์ด์–ดํญ์Šค: 65.0.1
์‚ฌํŒŒ๋ฆฌ: 12.0.2
npmํŒจํ‚ค์ง€:
๊ฐœ์ธ ๋น„: ^2.0.0 => 2.0.118
๊ฐœ์ธ ๋น„-cli: ^2.4.6 => 2.4.9
๊ฐœ์ธ ๋น„ ์ด๋ฏธ์ง€: ^2.0.26 => 2.0.29
๊ฐœ์ธ ๋น„ ํ”Œ๋Ÿฌ๊ทธ์ธ ๊ฐ์ •: ^4.0.1 => 4.0.3
๊ฐœ์ธ ๋น„ ํ”Œ๋Ÿฌ๊ทธ์ธ ๋ฐ˜์‘ ํ—ฌ๋ฉง: ^3.0.0 => 3.0.6
๊ฐœ์ธ ๋น„ ํ”Œ๋Ÿฌ๊ทธ์ธ ์ƒคํ”„: ^2.0.17 => 2.0.20
๊ฐœ์ธ ๋น„ ์†Œ์Šค ํŒŒ์ผ ์‹œ์Šคํ…œ: ^2.0.12 => 2.0.20
๊ฐœ์ธ ๋น„ ํŠธ๋žœ์Šคํฌ๋จธ ์ƒคํ”„: ^2.1.10 => 2.1.13
npmGlobalํŒจํ‚ค์ง€:
๊ฐœ์ธ ๋น„-cli: 2.4.8

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

์ด ๋ฌธ์ œ๋ฅผ ์—ด์–ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! ์–ธ๊ธ‰ํ–ˆ๋“ฏ์ด ์ด๊ฒƒ์€ Gatsby์™€ ์•ฝ๊ฐ„ ์ ‘ํ•ฉ๋‹ˆ๋‹ค.

Gatsby๋Š” Suspense & React.Lazy๊ฐ€ ์•„์ง ์ง€์›ํ•˜์ง€ ์•Š๋Š” SSR์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ์ „์ฒด ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ดํŠธ๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ์Šฌํ”„๊ฒŒ๋„ ํŽ˜์ด์ง€์˜ ์ •์  ์ƒ์„ฑ์„ ๊ฐ€์งˆ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. React ๋Š” SSR์ด ํ•ด๊ฒฐ๋  ๋•Œ๊นŒ์ง€ Loadable ๊ตฌ์„ฑ ์š”์†Œ ํŒจํ‚ค์ง€ ๋ฅผ ์‚ฌ์šฉํ•˜๋„๋ก ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค.

React Team์˜ ์›๋ž˜ ์ถ”์ฒœ:
https://reactjs.org/docs/code-splitting.html#reactlazy

React.lazy ๋ฐ Suspense๋Š” ์•„์ง ์„œ๋ฒ„ ์ธก ๋ Œ๋”๋ง์— ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์„œ๋ฒ„ ๋ Œ๋”๋ง ์•ฑ์—์„œ ์ฝ”๋“œ ๋ถ„ํ• ์„ ์ˆ˜ํ–‰ํ•˜๋ ค๋ฉด Loadable Components๋ฅผ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์—๋Š” ์„œ๋ฒ„ ์ธก ๋ Œ๋”๋ง์„ ์‚ฌ์šฉํ•œ ๋ฒˆ๋“ค ๋ถ„ํ• ์— ๋Œ€ํ•œ ์ข‹์€

์ถ”๊ฐ€๋กœ ๋„์›€์„ ๋“œ๋ฆด ์ˆ˜ ์žˆ๋Š” ๊ฒฝ์šฐ ์ฃผ์ €ํ•˜์ง€ ๋ง๊ณ  ์ด ๋ฌธ์ œ์— ๋Œ€ํ•ด ์—ฐ๋ฝํ•˜๊ฑฐ๋‚˜ ์˜๊ฒฌ์„ ๋ง์”€ํ•ด ์ฃผ์„ธ์š”. ๋‹ค์‹œ ๊ฒ€ํ† ํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

๊ฐœ์ธ ๋น„ ๐Ÿ’ช๋ฅผ ์ด์šฉํ•ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

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

์ด ๋ฌธ์ œ๋ฅผ ์—ด์–ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! ์–ธ๊ธ‰ํ–ˆ๋“ฏ์ด ์ด๊ฒƒ์€ Gatsby์™€ ์•ฝ๊ฐ„ ์ ‘ํ•ฉ๋‹ˆ๋‹ค.

Gatsby๋Š” Suspense & React.Lazy๊ฐ€ ์•„์ง ์ง€์›ํ•˜์ง€ ์•Š๋Š” SSR์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ์ „์ฒด ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ดํŠธ๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ์Šฌํ”„๊ฒŒ๋„ ํŽ˜์ด์ง€์˜ ์ •์  ์ƒ์„ฑ์„ ๊ฐ€์งˆ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. React ๋Š” SSR์ด ํ•ด๊ฒฐ๋  ๋•Œ๊นŒ์ง€ Loadable ๊ตฌ์„ฑ ์š”์†Œ ํŒจํ‚ค์ง€ ๋ฅผ ์‚ฌ์šฉํ•˜๋„๋ก ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค.

React Team์˜ ์›๋ž˜ ์ถ”์ฒœ:
https://reactjs.org/docs/code-splitting.html#reactlazy

React.lazy ๋ฐ Suspense๋Š” ์•„์ง ์„œ๋ฒ„ ์ธก ๋ Œ๋”๋ง์— ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์„œ๋ฒ„ ๋ Œ๋”๋ง ์•ฑ์—์„œ ์ฝ”๋“œ ๋ถ„ํ• ์„ ์ˆ˜ํ–‰ํ•˜๋ ค๋ฉด Loadable Components๋ฅผ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์—๋Š” ์„œ๋ฒ„ ์ธก ๋ Œ๋”๋ง์„ ์‚ฌ์šฉํ•œ ๋ฒˆ๋“ค ๋ถ„ํ• ์— ๋Œ€ํ•œ ์ข‹์€

์ถ”๊ฐ€๋กœ ๋„์›€์„ ๋“œ๋ฆด ์ˆ˜ ์žˆ๋Š” ๊ฒฝ์šฐ ์ฃผ์ €ํ•˜์ง€ ๋ง๊ณ  ์ด ๋ฌธ์ œ์— ๋Œ€ํ•ด ์—ฐ๋ฝํ•˜๊ฑฐ๋‚˜ ์˜๊ฒฌ์„ ๋ง์”€ํ•ด ์ฃผ์„ธ์š”. ๋‹ค์‹œ ๊ฒ€ํ† ํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

๊ฐœ์ธ ๋น„ ๐Ÿ’ช๋ฅผ ์ด์šฉํ•ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

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