Ryota Suzuki

requestIdleCallback์œผ๋กœ ์ดˆ๊ธฐ ๋ Œ๋”๋ง ์‹œ๊ฐ„ 14% ๋‹จ์ถ•ํ•˜๊ธฐ

์•ˆ๋…•ํ•˜์„ธ์š”. LINE ์ฆ๊ถŒ์˜ ํ”„๋ŸฐํŠธ ์—”๋“œ๋ฅผ ๋‹ด๋‹นํ•˜๊ณ  ์žˆ๋Š” ํŒŒ์ด๋‚ธ์…œ ๊ฐœ๋ฐœ ์„ผํ„ฐ์˜ Suzuki์ž…๋‹ˆ๋‹ค. ์ตœ๊ทผ ์›น ๋ฐ”์ดํƒˆ์ด ๋Œ€๋‘๋˜๋ฉด์„œ LINE ์ฆ๊ถŒ ํ”„๋ŸฐํŠธ ์—”๋“œ์—์„œ๋„ ์„ฑ๋Šฅ ๊ฐœ์„ ์— ํž˜์“ฐ๊ธฐ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. ์•ฝ 2์ฃผ ์ •๋„ ๊ฐœ์„  ์ž‘์—…์„ ์ง„ํ–‰ํ•œ ๋’ค ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ ๊ณ„์ธกํ•œ ๊ฒฐ๊ณผ, Lighthouse ์„ฑ๋Šฅ ์ ์ˆ˜๊ฐ€ ๊ธฐ์กด๋ณด๋‹ค 30์ ๊ฐ€๋Ÿ‰ ์ƒ์Šนํ–ˆ์Šต๋‹ˆ๋‹ค. ์„ฑ๋Šฅ์„ ๊ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•ด ๋‹ค์–‘ํ•œ ๋ฐฉ์•ˆ์„ ์‹ค์‹œํ–ˆ๋Š”๋ฐ์š”. ์ด๋ฒˆ ๊ธ€์—์„œ๋Š” ๊ทธ์ค‘์—์„œ๋„ ํฅ๋ฏธ๋กœ์› ๋˜ ์‚ฌ๋ก€๋กœ requestIdleCallback์„ ํ™œ์šฉํ•ด์„œ ๋ ˆ์ด์ง€ ๋กœ๋”ฉ(lazy loading) ๊ฐ€๋Šฅํ•œ ์ปดํฌ๋„ŒํŠธ์˜ ๋กœ๋”ฉ์„ ์ง€์—ฐ์‹œ์ผœ ์ดˆ๊ธฐ ๋ Œ๋”๋ง ์‹œ๊ฐ„์„ ์•ฝ 14% ๋‹จ์ถ•ํ•  ์ˆ˜ ์žˆ์—ˆ๋˜ ์ด์•ผ๊ธฐ๋ฅผ ๊ณต์œ ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

React ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ปค์Šคํ…€ ํ›…์œผ๋กœ ์ œ๊ณตํ•˜๊ธฐ

์•ˆ๋…•ํ•˜์„ธ์š”. LINE ์ฆ๊ถŒ์˜ ํ”„๋ŸฐํŠธ ์—”๋“œ๋ฅผ ๋‹ด๋‹นํ•˜๊ณ  ์žˆ๋Š” ํŒŒ์ด๋‚ธ์…œ ๊ฐœ๋ฐœ ์„ผํ„ฐ์˜ Suzuki์ž…๋‹ˆ๋‹ค. LINE ์ฆ๊ถŒ์—์„œ๋Š” React๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค(์ฐธ๊ณ (์ผ๋ณธ์–ด)). React์˜ 16.8 ๋ฒ„์ „์—์„œ ๋„์ž…๋œ ํ›…(hook) ๊ธฐ๋Šฅ์€ ๋งค์šฐ ํ˜์‹ ์ ์ธ๋ฐ์š”. ํŠนํžˆ ์ปค์Šคํ…€ ํ›…์ด๋ผ๋Š” ๊ฐœ๋… ๋•๋ถ„์— React์—์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์„ค๊ณ„ํ•˜๋Š” ๋ฐฉ์‹์ด ํฌ๊ฒŒ ๋ณ€ํ™”ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ €ํฌ ํŒ€์—์„œ๋„ ํ›…์˜ ์‹œ๋Œ€์— ์ปดํฌ๋„ŒํŠธ๋ฅผ ์„ค๊ณ„ํ•˜๋ฉด์„œ ์‹œํ–‰์ฐฉ์˜ค๋ฅผ ๊ฒช๊ณ  ์žˆ๋Š”๋ฐ์š”. ์ด๋ฒˆ ๊ธ€์—์„œ๋Š” ๊ทธ์ค‘์—์„œ๋„ ์ตœ๊ทผ์— ์ €ํฌ๊ฐ€ ์—ด์ค‘ํ•˜๊ณ  ์žˆ๋Š” ‘์ปค์Šคํ…€ ํ›…์œผ๋กœ ์ปดํฌ๋„ŒํŠธ ์ œ๊ณตํ•˜๊ธฐ’, ‘render hooks’๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋Š” ์„ค๊ณ„ ํŒจํ„ด์„ ์†Œ๊ฐœํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.