React: [Fiber] ์„œ๋ฒ„์—์„œ react-dom์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ requestAnimationFrame์ด throw๋˜๋Š”์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2017๋…„ 03์›” 03์ผ  ยท  5์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: facebook/react

๊ธฐ๋Šฅ ์„ ์š”์ฒญํ•˜๊ฑฐ๋‚˜ ๋ฒ„๊ทธ๋ฅผ๋ณด๊ณ  ํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?
๋ฒŒ๋ ˆ ๊ฐ™์€

ํ˜„์žฌ ํ–‰๋™์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?
React๋กœ ์„œ๋ฒ„ ์ธก ๋ Œ๋”๋ง์„ ์ˆ˜ํ–‰ ํ•  ๋•Œ react-dom (์ „ ์ด์ ์œผ๋กœ ReactDOMFrameScheduling.js ํ•„์š”)๋ฅผ ์š”๊ตฌํ•˜๋ฉด rAF๊ฐ€ ์ •์˜๋˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์— ์˜ˆ์™ธ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

Invariant Violation: React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers.
    at invariant (app/node_modules/fbjs/lib/invariant.js:44:15)
    at Object.<anonymous> (app/node_modules/react-dom/lib/ReactDOMFrameScheduling.js:30:3)

๋‹น์‹  ๊ฐ™์€ ํด๋ผ์ด์–ธํŠธ ์ธก ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ์ตœ์ƒ์œ„ ์ˆ˜์ž…์ด ๋ณดํŽธ์  ์ธ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€์žˆ๋Š” ๊ฒฝ์šฐ์— ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค react-router-scroll ํ•„์š” react-dom ๋Œ€์‹  react-dom/server .

์˜ˆ์ƒ๋˜๋Š” ๋™์ž‘์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?
requestAnimationFrame์ด ์‹ค์ œ๋กœ ํ˜ธ์ถœ๋˜์ง€ ์•Š๋Š” ํ•œ์ด ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š์„ ๊ฒƒ์œผ๋กœ ์˜ˆ์ƒํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ : rAF๋ฅผ ๋Š๋ฆฌ๊ฒŒ ํ™•์ธํ•˜๊ณ  rIC๋ฅผ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.

์–ด๋–ค ๋ฒ„์ „์˜ React์™€ ์–ด๋–ค ๋ธŒ๋ผ์šฐ์ € / OS๊ฐ€์ด ๋ฌธ์ œ์˜ ์˜ํ–ฅ์„ ๋ฐ›์Šต๋‹ˆ๊นŒ?
Node 7.7.1์—์„œ React 16.0.0-alpha.3. ์ด๋Š” Fiber๋ฅผ ์ถœ์‹œํ•˜๊ณ  ํ™œ์„ฑํ™” ํ•œ ์•ŒํŒŒ 3์—์„œ ์‹œ์ž‘๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

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

๋‚ด ์˜ˆ์ƒ ๋œ ๋™์ž‘์„ ๋‹ฌ์„ฑํ•˜๋Š” ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์€ React์˜ ๊ฐ ์†Œ๋น„์ž๊ฐ€ ๋‹ค๋ฅธ ์‚ฌ์šฉ์ž๋ณด๋‹ค ๋จผ์ € ๊ฐ€์ ธ์˜จ ํŒŒ์ผ์— ์•ฝ๊ฐ„์˜ polyfill์„ ์ •์˜ํ•˜๋Š” ๊ฒƒ์ด์ง€๋งŒ ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด์ด ๋ฌธ์ œ์— ๋ถ€๋”ช ํž ๊ฒƒ์œผ๋กœ ์˜ˆ์ƒํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

global.window = global;
window.addEventListener = () => {};
window.requestAnimationFrame = () => {
  throw new Error('requestAnimationFrame is not supported in Node');
};

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

๋‚ด ์˜ˆ์ƒ ๋œ ๋™์ž‘์„ ๋‹ฌ์„ฑํ•˜๋Š” ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์€ React์˜ ๊ฐ ์†Œ๋น„์ž๊ฐ€ ๋‹ค๋ฅธ ์‚ฌ์šฉ์ž๋ณด๋‹ค ๋จผ์ € ๊ฐ€์ ธ์˜จ ํŒŒ์ผ์— ์•ฝ๊ฐ„์˜ polyfill์„ ์ •์˜ํ•˜๋Š” ๊ฒƒ์ด์ง€๋งŒ ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด์ด ๋ฌธ์ œ์— ๋ถ€๋”ช ํž ๊ฒƒ์œผ๋กœ ์˜ˆ์ƒํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

global.window = global;
window.addEventListener = () => {};
window.requestAnimationFrame = () => {
  throw new Error('requestAnimationFrame is not supported in Node');
};

rAF polyfill์„ ๋Š๋ฆฌ๊ฒŒ ์ดˆ๊ธฐํ™”ํ•˜์—ฌ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ์ด์ œ ์ƒ๊ฐํ•˜๋ฉด findDOMNode (๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์ˆ˜ํ–‰ํ•˜๋Š” ์ž‘์—… ์ผ ๊ฐ€๋Šฅ์„ฑ์ด ๋†’์Œ)๋ฅผ ๊ฐ€์ ธ ์˜ค๋Š” ๊ฒƒ๋งŒ์œผ๋กœ๋„ ์ „์ฒด ํด๋ผ์ด์–ธํŠธ ์กฐ์ •์ž ์ดˆ๊ธฐํ™” ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๊ฒƒ์ด ๋ถˆํ–‰ ํ•ด ๋ณด์ž…๋‹ˆ๋‹ค. .

@gaearon ๋‹จ์œ„ ํ…Œ์ŠคํŠธ ์—์„œ ์žกํžˆ์ง€ ์•Š์•˜์–ด์•ผ ํ–ˆ์Šต๋‹ˆ๊นŒ ?

๋˜ํ•œ ๋” ์ค‘์š”ํ•œ ๊ฒƒ์€ react-dom ๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š๊ณ  ์„œ๋ฒ„์—์„œ findDOMNode ๋ฅผ ์‹คํ–‰ํ•˜๋Š” ์•ˆํ‹ฐ ํŒจํ„ด์ด๋ฉฐ, ํ•ด๋‹น ๊ตฌ์„ฑ ์š”์†Œ๋Š” ์„œ๋ฒ„์—์„œ ์‹คํ–‰๋˜๋Š” ํ›„ํฌ์—์„œ ์ด๋Ÿฌํ•œ ์š”์†Œ๋ฅผ ํ”ผํ•ด์•ผํ•ฉ๋‹ˆ๊นŒ?

๋˜ํ•œ ๋” ์ค‘์š”ํ•œ ๊ฒƒ์€ react-dom์„ ์š”๊ตฌํ•˜์ง€ ์•Š๊ณ  ์„œ๋ฒ„์—์„œ findDOMNode๋ฅผ ์•ˆํ‹ฐ ํŒจํ„ด์œผ๋กœ ์‹คํ–‰ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ฉฐ, ํ•ด๋‹น ๊ตฌ์„ฑ ์š”์†Œ๋Š” ์„œ๋ฒ„์—์„œ ์‹คํ–‰๋˜๋Š” ํ›„ํฌ์—์„œ์ด๋ฅผ ํ”ผํ•ด์•ผํ•ฉ๋‹ˆ๊นŒ?

์„œ๋ฒ„์—์„œ ์‹คํ–‰ํ•ด์„œ๋Š” ์•ˆ๋˜์ง€๋งŒ ๊ฐ€์ ธ ์˜ค๊ธฐ๋Š” ๊ดœ์ฐฎ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ํด๋ผ์ด์–ธํŠธ์—์„œ findDOMNode ๋ฅผ ์‚ฌ์šฉํ•˜์ง€๋งŒ ์—ฌ์ „ํžˆ ์„œ๋ฒ„์—์„œ ์ž‘๋™ํ•˜๋Š” ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์–ด๋–ป๊ฒŒ ์ž‘์„ฑํ•ฉ๋‹ˆ๊นŒ?

๋‹จ์œ„ ํ…Œ์ŠคํŠธ์—์„œ ์žกํžˆ์ง€ ์•Š์•˜์–ด์•ผ ํ–ˆ์Šต๋‹ˆ๊นŒ?

์•„๋‹ˆ์š”, ํ…Œ์ŠคํŠธ ํ™˜๊ฒฝ์˜ ์ผ๋ถ€๋กœ ์ „์—ญ rAF ํด๋ฆฌ ํ•„์„ ์„ค์ •ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ํ…Œ์ŠคํŠธ์—์„œ์ด๋ฅผ ํฌ์ฐฉํ•˜์ง€ ๋ชปํ•ฉ๋‹ˆ๋‹ค.

ํŽธ์ง‘ : PR์€ ๋‹จ์ง€ ์„ค๋ช…์„์œ„ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋‹จ์œ„ ํ…Œ์ŠคํŠธ๋ฅผ ์‹คํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค. ์•„์ง ๋ณดํ’€์ด์—†๊ณ  ๋” ์˜ˆ์˜๋‹ค.

์•„์ด๋””์–ด๋ฅผ ์ฝ”๋“œ์— ์ ๊ธฐ ์œ„ํ•ด PR์„ ์—ด์—ˆ์Šต๋‹ˆ๋‹ค.

ReactFiberScheduler ์—์„œ rAF ์ˆ˜ํ‘œ๋ฅผ ์˜ฎ๊ฒผ์Šต๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ ์ง€๊ธˆ์€ rAF ๊ฐ€ ํด๋ฆฌ ํ•„๋˜์ง€ ์•Š์œผ๋ฉด ๋˜์งˆ ์ˆ˜์žˆ๋Š” ๋Šฅ๋ ฅ์„ ์žƒ์—ˆ์Šต๋‹ˆ๋‹ค. ๋‹น์‹ ์ด ์–ธ๊ธ‰ ํ•œ ๊ฒŒ์œผ๋ฅธ ์ˆ˜ํ‘œ๋ฅผ์œ„ํ•œ ์˜ฌ๋ฐ”๋ฅธ ์žฅ์†Œ์ž…๋‹ˆ๊นŒ?

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