sunderls

sunderls is a front-end engineer

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

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

LINE MANGA: Page Stack์„ ์ด์šฉํ•ด์„œ ํŽ˜์ด์ง€ ์ „ํ™˜ ์ฒ˜๋ฆฌํ•˜๊ธฐ

์•ˆ๋…•ํ•˜์„ธ์š”, ์ €๋Š” LINE MANGA ๊ฐœ๋ฐœ์„ ๋‹ด๋‹นํ•˜๊ณ  ์žˆ๋Š” ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ ๊ฐœ๋ฐœ์ž, @sunderls์ž…๋‹ˆ๋‹ค.

์—ฌ๋Ÿฌ๋ถ„, ํ˜น์‹œ LINE ์•ฑ์—์„œ ๋งŒํ™”๋ฅผ ๋ณด์‹ค ์ˆ˜ ์žˆ๋Š” ๊ฒƒ*, ์•Œ๊ณ  ๊ณ„์…จ๋‚˜์š”? ๊ธˆ์‹œ์ดˆ๋ฌธ์ด๋ผ๋ฉด, ‘๋” ๋ณด๊ธฐ’ ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ LINE MANGA ๋ฉ”๋‰ด๋ฅผ ํ†ตํ•ด ๋ฉ‹์ง„ ๋งŒํ™”๋“ค์„ ๋งŒ๋ฝํ•ด ๋ณด์„ธ์š”.

์•„๋ž˜์˜ ๊ทธ๋ฆผ์€ LINE MANGA ์„œ๋น„์Šค์˜ ํ™”๋ฉด ์ค‘ ์ผ๋ถ€์ž…๋‹ˆ๋‹ค. ํŽ˜์ด์ง€ ์ „ํ™˜์ด ์ฐธ ๋งค๋„๋Ÿฝ์ง€ ์•Š๋‚˜์š”? ์—ฌ๋Ÿฌ๋ถ„๊ป˜ ์‚ด์ง ๊ท€๋”์„ ํ•ด๋“œ๋ฆฌ์ž๋ฉด, LINE MANGA ์„œ๋น„์Šค๋Š” ์›น ๊ธฐ๋ฐ˜์œผ๋กœ ๊ฐœ๋ฐœํ–ˆ์Šต๋‹ˆ๋‹ค. ์ €ํฌ๊ฐ€ ๋ณด๊ธฐ์—๋Š” ํŽ˜์ด์ง€ ์ „ํ™˜์ด ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ ๋ชป์ง€ ์•Š๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋Š”๋ฐ, ์—ฌ๋Ÿฌ๋ถ„์€ ์–ด๋–ป๊ฒŒ ์ƒ๊ฐํ•˜์„ธ์š”? ์ด๋ฒˆ ๊ธ€์„ ํ†ตํ•ด์„œ ์šฐ๋ฆฌ๊ฐ€ ์ด๋Ÿฐ ๊ฒฐ๊ณผ๋ฌผ์„ ์–ป๊ธฐ ์œ„ํ•ด ์–ด๋–ค ๋…ธ๋ ฅ์„ ํ–ˆ๋Š”์ง€ ์—ฌ๋Ÿฌ๋ถ„๊ป˜ ๊ฐ„๋‹จํžˆ ์†Œ๊ฐœํ•ด ๋“œ๋ฆฌ๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.

Code splitting์„ ์‰ฝ๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“  grow-loader

์•ˆ๋…•ํ•˜์„ธ์š”, ์ €๋Š” LINE MANGAํŒ€์˜ ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ ๊ฐœ๋ฐœ์ž, @sunderls์ž…๋‹ˆ๋‹ค. ์ผ๋ณธ์—์„œ๋Š” LINE์œผ๋กœ ๋งŒํ™”๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ, ์•Œ๊ณ  ๊ณ„์…จ๋‚˜์š”? ํ˜น์‹œ ์—ฌ๋Ÿฌ๋ถ„์€ LINE MANGA1) ์„œ๋น„์Šค๋ฅผ ์ด์šฉํ•ด ๋ณด์…จ๋‚˜์š”? ์˜ˆ์ „์— ๋ธ”๋กœ๊ทธ๋ฅผ ํ†ตํ•ด์„œ๋„ ๋‚˜๋ˆ„์—ˆ๋“ฏ์ด(LINE MANGA: Page Stack์„ ์ด์šฉํ•ด์„œ ํŽ˜์ด์ง€ ์ „ํ™˜ ์ฒ˜๋ฆฌํ•˜๊ธฐ), LINE MANGA๋Š” ์›น ๊ธฐ๋ฐ˜์œผ๋กœ ๊ตฌํ˜„๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์„œ๋น„์Šค๋Š” LINE ์•ฑ ์•ˆ์—์„œ ๊ตฌ๋™๋˜๋Š” ์„œ๋น„์Šค์ด๊ธฐ ๋•Œ๋ฌธ์—, LINE ์•ฑ์„ ์ด์šฉํ•  ๋•Œ์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ํŽธ์•ˆํ•˜๊ณ  ๋งค๋„๋Ÿฌ์šด UX๋ฅผ ์ œ๊ณตํ•˜๊ณ ์ž ์ €ํฌ๋Š” ๋งŽ์€ ๋…ธ๋ ฅ์„ ์Ÿ์•˜์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์šฐ๋ฆฌ์˜ ๋ชฉํ‘œ๋ฅผ ๋‹ฌ์„ฑํ•˜๊ณ ์ž code-splitting์„ ๋„์ž…ํ•˜์˜€๋Š”๋ฐ, ์ด ๊ธ€์„ ํ†ตํ•ด code-splitting์„ ์†์‰ฝ๊ฒŒ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ฐœ๋ฐœํ•œ, LINE์˜ ์˜คํ”ˆ ์†Œ์Šค ํ”„๋กœ์ ํŠธ์ธ grow-loader๋ฅผ ์—ฌ๋Ÿฌ๋ถ„๊ป˜ ์†Œ๊ฐœํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.