Front-end

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

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

TypeScript enum์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒŒ ์ข‹์€ ์ด์œ ๋ฅผ Tree-shaking ๊ด€์ ์—์„œ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”. LINE Growth Technology UIT ํŒ€์˜ Keishima(@pittanko_pta)์ž…๋‹ˆ๋‹ค. ์ด๋ฒˆ ๊ธ€์—์„œ๋Š” TypeScript์˜ enum์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ํŽธ์ด ์ข‹์€ ์ด์œ ๋ฅผ Tree-shaking ๊ด€์ ์—์„œ ์†Œ๊ฐœํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

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

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

๊ฐœ์„ ๋œ ํŽ˜์ด์ง€ ์Šคํƒ์œผ๋กœ LINE ์ฆ๊ถŒ์˜ ์›น ํŽ˜์ด์ง€ ์ „ํ™˜ ์ฒ˜๋ฆฌํ•˜๊ธฐ

์•ˆ๋…•ํ•˜์„ธ์š”! sunderls์ž…๋‹ˆ๋‹ค. ์ €๋Š” 2๋…„ ์ „์— ํŽ˜์ด์ง€ ์Šคํƒ์„ ์ฃผ์ œ๋กœ ‘LINE MANGA: Page Stack์„ ์ด์šฉํ•ด์„œ ํŽ˜์ด์ง€ ์ „ํ™˜ ์ฒ˜๋ฆฌํ•˜๊ธฐ’๋ผ๋Š” ๊ธ€์„ ์ผ๊ณ , ํ˜„์žฌ LINE ์ฆ๊ถŒ์—์„œ๋„ ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ด๋ฒˆ ๊ธ€์—์„œ๋Š” ํŽ˜์ด์ง€ ์Šคํƒ์ด ์–ด๋–ป๊ฒŒ ์ง„ํ™”ํ–ˆ๋Š”์ง€, ์–ด๋–ค ๊ณผ์ œ๋ฅผ ์•ˆ๊ณ  ์žˆ๋Š”์ง€ ํ•จ๊ป˜ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž์˜ LINE ์ž…์‚ฌ ํ›„๊ธฐ

์•ˆ๋…•ํ•˜์„ธ์š”! LINE์˜ UIT(User Interface Technology) ํŒ€์—์„œ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์„ ํ•˜๋Š” ์†กํ—Œ์šฉ์ž…๋‹ˆ๋‹ค. ๋’ค๋Œ์•„๋ณด๋‹ˆ LINE์— ์ž…์‚ฌํ•œ ์ง€ ๋ฒŒ์จ 8๊ฐœ์›”์ด๋‚˜ ์ง€๋‚ฌ๋”๋ผ๊ณ ์š”. ๊ทธ๋ž˜์„œ ์ง€๋‚œ 8๊ฐœ์›” ๋™์•ˆ ์ œ๊ฐ€ LINE์—์„œ ์–ด๋–ป๊ฒŒ ์ง€๋ƒˆ๋Š”์ง€ ๋˜๋Œ์•„๋ณด๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์ ธ๋ณด์•˜์Šต๋‹ˆ๋‹ค. ์ž…์‚ฌ ํ›„๊ธฐ ๊ฒธ ํšŒ๊ณ ๋ก์ด๋ผ๊ณ  ํ• ๊นŒ์š”.

LINE Search UI ๊ฐœ์„ ๊ธฐ

์•ˆ๋…•ํ•˜์„ธ์š”. ์ €๋Š” LINE UIT ์กฐ์ง์—์„œ ํ”„๋ก ํŠธ์—”๋“œ ์—…๋ฌด๋ฅผ ๋‹ด๋‹นํ•˜๊ณ  ์žˆ๋Š” ์ด์ƒ์›์ž…๋‹ˆ๋‹ค. ์ด๋ฒˆ ๊ธ€์—์„  ์ œ๊ฐ€ LINE Search ํ”„๋กœ์ ํŠธ๋ฅผ ๋‹ด๋‹นํ•  ๋•Œ ์ƒˆ๋กœ ์ถ”๊ฐ€๋œ UI๋ฅผ ์กฐ๊ธˆ ๋” ๊ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•ด ๋…ธ๋ ฅํ–ˆ๋˜ ๋‚ด์šฉ์„ ๊ณต์œ ํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

์ฒซ ๊ตฌํ˜„ ๊ฒฐ๊ณผ๋ฌผ
๋งˆ์ง€๋ง‰ ๊ตฌํ˜„ ๊ฒฐ๊ณผ๋ฌผ

TensorFlow.js: ์›น ํ”„๋ก ํŠธ์—”๋“œ์—์„œ ๋จธ์‹ ๋Ÿฌ๋‹ ํ™œ์šฉํ•˜๊ธฐ

์•ˆ๋…•ํ•˜์„ธ์š”! LINE์—์„œ ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ์„ ๋‹ด๋‹นํ•˜๊ณ  ์žˆ๋Š” Jun์ž…๋‹ˆ๋‹ค. ์ตœ๊ทผ ํ”„๋ŸฐํŠธ์—”๋“œ ๋ถ„์•ผ๋Š” ํฅ๋ฏธ๋กœ์šด ๊ธฐ์ˆ ์ด ๊ฐ€๋“ํ•ด์„œ ์ „๋ถ€ ๋‹ค ํŒŒ์•…ํ•˜๋Š” ๊ฒŒ ํž˜๋“ค ์ •๋„์ธ๋ฐ์š”. ๊ฐœ์ธ์ ์œผ๋กœ ๊ฐ€์žฅ ๊ด€์‹ฌ์ด ๊ฐ€๋Š” ๊ฑด ๋จธ์‹ ๋Ÿฌ๋‹์ž…๋‹ˆ๋‹ค. ์˜ค๋Š˜์€ ์›น ํ”„๋ŸฐํŠธ์—”๋“œ์—์„œ ๋จธ์‹ ๋Ÿฌ๋‹ ํ™œ์šฉํ•˜๊ธฐ๋ฅผ ์ฃผ์ œ๋กœ, TensorFlow.js๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ ๋จธ์‹ ๋Ÿฌ๋‹์„ ๊ตฌํ˜„ํ•ด ๋ณธ ๊ฒฝํ—˜์„ ๊ณต์œ ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

LINE ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœํŒ€์˜ OSS ํ™œ๋™ ์ด‰์ง„ ํ–‰์‚ฌ, ‘Letโ€™s Contribute OSS!’

์•ˆ๋…•ํ•˜์„ธ์š”? Frontend StandardizationํŒ€์˜ Kawasako์ž…๋‹ˆ๋‹ค. ์ €ํฌ ํŒ€์€ LINE ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ์กฐ์ง์˜ ์—ฌ๋Ÿฌ ์ œํ’ˆ ๊ฐœ๋ฐœ์— ๊ณตํ†ต์œผ๋กœ ํ•„์š”ํ•œ ๋„๊ตฌ๋ฅผ ๊ฐœ๋ฐœํ•˜๊ฑฐ๋‚˜, ๊ฐœ๋ฐœ์ž๊ฐ„ ์ •๋ณด ๊ต๋ฅ˜ ๋ฐ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์ด ๋”์šฑ ์›ํ™œํžˆ ์ด๋ฃจ์–ด์งˆ ์ˆ˜ ์žˆ๋„๋ก ๋‹ค์–‘ํ•œ ๊ธฐํš์„ ๋‹ด๋‹นํ•˜๋Š” ๋ถ€์„œ์ž…๋‹ˆ๋‹ค. ์˜ค๋Š˜์€ ์ €ํฌ์˜ ์—…๋ฌด๋„ ์†Œ๊ฐœํ•  ๊ฒธ, ์–ผ๋งˆ ์ „ ์—ด๋ฆฐ ์‚ฌ๋‚ด ์›Œํฌ์ˆ์— ๋Œ€ํ•ด ์ „ํ•ด๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.