Front-End

Sentry๋กœ ์‚ฌ๋‚ด ์—๋Ÿฌ ๋กœ๊ทธ ์ˆ˜์ง‘ ์‹œ์Šคํ…œ ๊ตฌ์ถ•ํ•˜๊ธฐ

์•ˆ๋…•ํ•˜์„ธ์š”. LINE Plus UIT ํŒ€ ๋ณต๋‹คํ›ˆ์ž…๋‹ˆ๋‹ค. ์ด๋ฒˆ ๊ธ€์—์„œ๋Š” Sentry ์˜จ ํ”„๋ ˆ๋ฏธ์Šค(On-Premise) ๊ตฌ์ถ•๊ธฐ๋ฅผ ๊ณต์œ ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. LINE์—์„œ ์™œ Sentry๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋๋Š”์ง€ ๋จผ์ € ๋ง์”€๋“œ๋ฆฌ๊ณ  ํด๋ผ์šฐ๋“œ ๋Œ€์‹  ์˜จ ํ”„๋ ˆ๋ฏธ์Šค ๋ฐฉ์‹์œผ๋กœ ๊ตฌ์ถ•ํ•˜๊ฒŒ ๋œ ์ด์œ ๋ฅผ ์„ค๋ช…ํ•œ ๋’ค ๋งˆ์ง€๋ง‰์œผ๋กœ ์–ด๋–ป๊ฒŒ ๊ตฌ์ถ•ํ–ˆ๋Š”์ง€ ๋ง์”€๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

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

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

LINE ๋ฉ”์‹ ์ € ํ”„๋กœํ•„ ๊พธ๋ฏธ๊ธฐ์— CSS Flexbox๋ฅผ ํ™œ์šฉํ•œ Flex ๋ ˆ์ด์•„์›ƒ ์ ์šฉํ•˜๊ธฐ

์•ˆ๋…•ํ•˜์„ธ์š”. LINE ํ”„๋กœํ•„๊ณผ ์Šคํ† ๋ฆฌ๋ฅผ ๋‹ด๋‹นํ•˜๊ณ  ์žˆ๋Š” ์กฐ์˜์ค€, ๋ฐ•ํ˜„๋ฏผ์ž…๋‹ˆ๋‹ค. ์˜ฌํ•ด ์ง„ํ–‰ํ•œ ์—ฌ๋Ÿฌ ํ”„๋กœ์ ํŠธ ์ค‘์—์„œ ‘ํ”„๋กœํ•„ ๊พธ๋ฏธ๊ธฐ’๋ผ๋Š” ํ”„๋กœ์ ํŠธ๋ฅผ ์—ฌ๋Ÿฌ๋ถ„๋“ค๊ณผ ๊ณต์œ ํ•˜๊ณ  ์‹ถ์–ด์„œ ์ด๋ ‡๊ฒŒ ๊ธ€๋กœ ์ „ํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ํ˜น์‹œ ๋น„์Šทํ•œ ์ƒํ™ฉ์—์„œ ์ €ํฌ์™€ ๊ฐ™์€ ๊ณ ๋ฏผ์„ ํ•˜์‹œ๋Š” ๋ถ„๋“ค์—๊ฒŒ ์ด ๊ธ€์ด ๋„์›€์ด ๋˜๊ธฐ๋ฅผ ๋ฐ”๋ผ๋ฉฐ, ์ฆ๊ฒ๊ณ  ์žฌ๋ฏธ์žˆ๊ฒŒ ์ฝ์–ด์ฃผ์‹œ๊ธธ ๋ฐ”๋ผ๊ฒ ์Šต๋‹ˆ๋‹ค.

UICollectionView๋ฅผ ์ด์šฉํ•œ LINE iOS ๋Œ€ํ™”๋ฐฉ ๋ฆฌํŒฉํ† ๋ง – 2

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

UICollectionView๋ฅผ ์ด์šฉํ•œ LINE iOS ๋Œ€ํ™”๋ฐฉ ๋ฆฌํŒฉํ† ๋ง – 1

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

LINE Free Call์— iOS ๋‹คํฌ ๋ชจ๋“œ ์ ์šฉํ•˜๊ธฐ

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

๋ฐ์ดํ„ฐ ๊ธฐ๋ฐ˜์œผ๋กœ ์ง€์†์ ์ธ CI/CD ๊ฐœ์„  ํ™˜๊ฒฝ ๋งŒ๋“ค๊ธฐ

์ €๋Š” ์˜ฌํ•ด 6์›”์— LINE์— ์ž…์‚ฌํ•ด LINE ๋ฉ”์‹ ์ € ํด๋ผ์ด์–ธํŠธ์™€ ๊ด€๋ จ๋œ CI(Continuous Integration)/CD(Continuous Delivery) ์—…๋ฌด๋ฅผ ์ง€์†์ ์œผ๋กœ ๊ฐœ์„ ํ•˜๊ณ  ์ž๋™ํ™”ํ•˜๋Š” DevOps ์—ญํ• ์„ ์ˆ˜ํ–‰ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ ๊ธ€์—์„œ๋Š” ์ง€์†์ ์ธ CI/CD ๊ฐœ์„ ์„ ์œ„ํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ์‹œ๊ฐํ™”ํ•˜๊ณ  ํ™œ์šฉํ•ด ๋‚˜๊ฐ„ ๊ฒฝํ—˜์„ ๊ณต์œ ํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

Don’t block the event loop! ๋งค๋„๋Ÿฌ์šด ๊ฒฝํ—˜์„ ์œ„ํ•œ JavaScript ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ

์›น ์„œ๋น„์Šค๋ฅผ ์‚ฌ์šฉํ•˜๋‹ค ๋ณด๋ฉด ๊ฐ‘์ž๊ธฐ ํ™”๋ฉด์ด ๋ฉˆ์ถ”๊ฑฐ๋‚˜, ํƒ€์ดํ•‘ํ•œ ๊ฒŒ ํ™”๋ฉด์— ๋ฐ”๋กœ๋ฐ”๋กœ ๋ฐ˜์˜๋˜์ง€ ์•Š๋Š”๋‹ค๊ฑฐ๋‚˜, ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ๋งค๋„๋Ÿฝ๊ฒŒ ๋™์ž‘ํ•˜์ง€ ์•Š๋Š” ๋“ฑ์˜ ํ˜„์ƒ์„ ์ข…์ข… ๋งˆ์ฃผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ํ•ด์น˜๋Š” ๋Œ€ํ‘œ์ ์ธ ์˜ˆ๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ์•ผ๊ธฐํ•˜๋Š” ์›์ธ์—๋Š” ์—ฌ๋Ÿฌ ๊ฐ€์ง€๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ์ง€๋งŒ, ๊ทธ์ค‘์—์„œ JavaScript ์–ธ์–ด์˜ ํŠน์ง• ์ค‘ ํ•˜๋‚˜์ธ run-to-completion, JavaScript ์ฝ”๋“œ๊ฐ€ ๊ตฌ๋™๋˜๋Š” JavaScript ์—”์ง„, ์ฝœ ์Šคํƒ(call stack), ์ด๋ฒคํŠธ ๋ฃจํ”„(event loop), ํƒœ์Šคํฌ ํ(task queue) ๋“ฑ์„ ์ค‘์ ์ ์œผ๋กœ ์‚ดํ”ผ๋ฉฐ ์›์ธ์„ ๋ถ„์„ํ•ด ๋ณด๊ณ , ๋ถ„์„ํ•œ ์›์ธ์„ ๋ฐ”ํƒ•์œผ๋กœ ๋ช‡ ๊ฐ€์ง€ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•๋„ ์ œ์‹œํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

UIT Global Workshop 2019 – 3๊ฐœ๊ตญ ์ฐธ๊ฐ€์ž ์ธํ„ฐ๋ทฐ

์•ˆ๋…•ํ•˜์„ธ์š”. LINE UIT(User Interface Technology) ํŒ€ ์—”์ง€๋‹ˆ์–ด ์˜คํ˜œ์„ฑ์ž…๋‹ˆ๋‹ค. LINE์—์„œ๋Š” ๋ชจ๋‘๊ฐ€ ์•Œ๊ณ  ์žˆ๋Š” ๋ฉ”์‹ ์ € ์„œ๋น„์Šค๋ฅผ ์‹œ์ž‘์œผ๋กœ ๋‰ด์Šค, ์Œ์•…, ๋™์˜์ƒ ์„œ๋น„์Šค์™€ ๊ฐ™์€ ์ปจํ…์ธ ํ˜• ์„œ๋น„์Šค๋Š” ๋ฌผ๋ก  LINE Pay, ๊ฐ€๊ณ„๋ถ€์™€ ๊ฐ™์€ ๊ธˆ์œต ์„œ๋น„์Šค๊นŒ์ง€ ๋งค์šฐ ๋‹ค์–‘ํ•œ ์„œ๋น„์Šค๋ฅผ ๊ธ€๋กœ๋ฒŒํ•˜๊ฒŒ ์ „๊ฐœํ•ด ๋‚˜๊ฐ€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

LINE UIT ํŒ€์€ ์ด๋Ÿฐ ๋‹ค์–‘ํ•œ ์„œ๋น„์Šค์˜ ์›น ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ์ˆ ์„ ๋‹ด๋‹นํ•˜๊ณ  ์žˆ๋Š” ํŒ€์ž…๋‹ˆ๋‹ค. ํ•œ๊ตญ์€ ๋ฌผ๋ก  ์ผ๋ณธ, ๋ฒ ํŠธ๋‚จ, ๋Œ€๋งŒ ๋“ฑ ์„ธ๊ณ„ ์—ฌ๋Ÿฌ ๋„์‹œ์—์„œ ๋งค์ผ ๊ณ ๊ตฐ๋ถ„ํˆฌํ•˜๋ฉฐ ๊ฐœ๋ฐœํ•˜๊ณ  ์žˆ๋Š”๋ฐ์š”. ์ด๋ ‡๊ฒŒ ํ‰์†Œ์—๋Š” ์„ธ๊ณ„ ๊ฐ์ง€์—์„œ ๋‹ค์–‘ํ•œ ํ˜•ํƒœ๋กœ ์ผํ•˜๊ณ  ์žˆ๋Š” UIT ํŒ€์˜ LINERs๊ฐ€ 1๋…„์— ํ•œ ๋ฒˆ ๋‹ค๊ฐ™์ด ๋ชจ์ด๋Š” ํŠน๋ณ„ํ•œ ๋‚ ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ‘UIT Global Workshop’์ด ์—ด๋ฆฌ๋Š” ๋‚ ์ž…๋‹ˆ๋‹ค. 2019๋…„์—๋Š” ์ด ์›Œํฌ์ˆ์ด ์ง€๋‚œ 9์›” 4์ผ๋ถ€ํ„ฐ 9์›” 6์ผ๊นŒ์ง€ ํ•œ๊ตญ์—์„œ ๊ฐœ์ตœ๋˜์—ˆ๋Š”๋ฐ์š”. ์ด 130๋ช…์˜ ํŒ€์›์ด ๋ชจ์—ฌ ์„œ๋กœ์˜ ์ง€์‹์„ ๊ณต์œ ํ•˜๋ฉฐ ๋”์šฑ ๋„“์€ ์„ธ๊ณ„๋ฅผ ๊ฒฝํ—˜ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ ๊ธ€์—์„œ๋Š” UIT Global Workshop์— ์ฐธ์—ฌํ–ˆ๋˜ ํŒ€์›๊ณผ์˜ ์ธํ„ฐ๋ทฐ๋ฅผ ํ†ตํ•ด ๋‹น์‹œ์˜ ํ˜„์žฅ ๋ถ„์œ„๊ธฐ๋ฅผ ์—ฌ๋Ÿฌ๋ถ„๊ป˜ ๊ณต์œ ํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.

๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ๋•Œ ์‚ฌ๊ณ ๊ฐ€ ์ค‘์š”ํ•œ ์ด์œ 

๊ฐœ๋ฐœ์ž๋Š” ๋ฌธ์ œ์— ์ง๋ฉดํ–ˆ์„ ๋•Œ ์ฝ”๋“œ๋ฅผ ์‚ดํŽด๋ณด๋ฉฐ ์›์ธ์„ ์ฐพ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๊ทธ ๋ฌธ์ œ๊ฐ€ ๋กœ์ง์— ๋‚ด์žฌ๋œ ๋ฒ„๊ทธ๊ฐ€ ์•„๋‹ˆ๋ผ๋ฉด, ‘๋ฌธ์ œ๋ฅผ ์–ด๋–ป๊ฒŒ ํ•ด๊ฒฐํ•  ๊ฒƒ์ธ๊ฐ€?’์— ๋Œ€ํ•œ ์‚ฌ๊ณ (ๆ€่€ƒ)๊ฐ€ ๋” ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ์ €๋Š” ๊ธฐ์กด์— ๋„ค์ดํ‹ฐ๋ธŒ(native)๋กœ ๊ตฌํ˜„๋˜์–ด ์žˆ๋Š” ‘์นœ๊ตฌ/๋Œ€ํ™”’ ํƒญ์˜ ๊ฒ€์ƒ‰ ํ™”๋ฉด์„ ์›น ๋ทฐ๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ํ•˜๋Š” ์ž‘์—…์„ ์ง„ํ–‰ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ ๊ธ€์—์„  ์ด ๊ณผ์ •์—์„œ ๋ฐœ์ƒํ•œ ๋ฌธ์ œ๋ฅผ ์‚ฌ๋ก€๋กœ ์‚ฌ๊ณ ์˜ ์ค‘์š”์„ฑ์„ ์ „๋‹ฌํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.