Vue.js Carousels: SSR Support And Performance

Web Performance Optimization I am one of the CoE members inย GSShop. Our company invests startups, and I help them to grow. Last time, I was assistingย Luxstay(Vietnamese share house) by making their web faster. Cool! See howย web performance affects your business. This article is from the journey exploring the SSR support of theย Vue.jsย carousels. It ends with … Continue reading Vue.js Carousels: SSR Support And Performance

๋„ทํ”Œ๋ฆญ์Šค ์„ฑ๋Šฅ ์ผ€์ด์Šค์Šคํ„ฐ๋””

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

Pinterest ํ”„๋กœ๊ทธ๋ž˜์‹œ๋ธŒ ์›น ์•ฑ ์„ฑ๋Šฅ ์ผ€์ด์Šค ์Šคํ„ฐ๋””

Pinterest๊ฐ€ ๋ชจ๋ฐ”์ผ ํ•˜๋“œ์›จ์–ด์—์„œ๋„ ๋น ๋ฅด๊ฒŒ ๋กœ๋“œ๋  ์ˆ˜ ์žˆ๋„๋ก ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊ฐ€๋ณ๊ฒŒ ํ•˜๊ณ , ๋„คํŠธ์›Œํฌ ํƒ„๋ ฅ์„ฑ์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋„๋ก ์„œ๋น„์Šค ์›Œ์ปค(Service Worker)๋ฅผ ๋„์ž…ํ•œ ๊ฒƒ์— ๋Œ€ํ•ด ๋‹ค๋ฃฌ๋‹ค.

Tinder์˜ ํ”„๋กœ๊ทธ๋ž˜์‹œ๋ธŒ ์›น ์•ฑ ์„ฑ๋Šฅ ์ผ€์ด์Šค ์Šคํ„ฐ๋””

Tinder๋Š” ์ตœ๊ทผ ์›น ์•ฑ์„ ์ถœ์‹œํ–ˆ๋‹ค. (swiped right: ์•„์ดํฐ์˜ ๋ฐ€์–ด์„œ ์ž ๊ธˆ ํ•ด์ œ์™€, Tinder ์•ฑ์—์„œ ์šฐ์ธก์œผ๋กœ ๋ฐ€์–ด ๋งˆ์Œ์— ๋“œ๋Š” ์ƒ๋Œ€๋ฅผ ํ™•์ธํ•˜๋Š” ๊ฒƒ์„ ์—ฐ์ƒ์‹œํ‚ค๋Š” ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ์˜๋„๋ฅผ ํฌํ•จํ–ˆ๋‹ค). Tinder Online์€ ์ƒˆ๋กœ์šด ๋ฐ˜์‘ํ˜• ํ”„๋กœ๊ทธ๋ž˜์‹œ๋ธŒ ์›น ์•ฑ(Progressive Web App)์œผ๋กœ, ๋ฐ์Šคํฌํƒ‘๊ณผ ๋ชจ๋ฐ”์ผ์˜ ๋ชจ๋“  ์‚ฌ์šฉ์ž๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์„ฑ๋Šฅ ์ตœ์ ํ™”, ๋„คํŠธ์›Œํฌ ํšŒ๋ณต์„ฑ์„ ์œ„ํ•œ ์„œ๋น„์Šค ์›Œ์ปค(Service Worker) ๊ทธ๋ฆฌ๊ณ  ์ฑ„ํŒ… ์ฐธ์—ฌ๋ฅผ ๋„์šธ ํ‘ธ์‹œ ์•Œ๋ฆผ(Push Notifications)์ด ์ฃผ๋Š” ์ด์ ์„ ๋ˆ„๋ฆฌ๊ฒŒ ๋˜์—ˆ๋‹ค. ์˜ค๋Š˜์€ Tinder๊ฐ€ ์›น ์„ฑ๋Šฅ์— ๋Œ€ํ•ด ๋ฐฐ์šด ๊ฒƒ๋“ค ์•Œ์•„๋ณด์ž.

๋Ÿฌ์ŠคํŠธ (๊ทธ๋ฆฌ๊ณ  ๋ชจ๋“  ์–ธ์–ด)์—์„œ ์›น์–ด์…ˆ๋ธ”๋ฆฌ๋ฅผ ๋” ์ข‹๊ฒŒ๋งŒ๋“ค๊ธฐ

2018๋…„ ์›น ์–ธ์–ด๋ฅผ ๋ชฉํ‘œ๋กœํ•˜๋Š” ๋Ÿฌ์ŠคํŠธ ์ปค๋ฎค๋‹ˆํ‹ฐ๋Š” ์ด๋ฅผ ์œ„ํ•ด ๋‹ค์–‘ํ•œ ๋…ธ๋ ฅ์„ ํ•˜๊ณ ์žˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๋ฅผ ์‹คํ˜„์‹œํ‚ค๊ธฐ ์œ„ํ•ด ๋Ÿฌ์ŠคํŠธ๋กœ ์ž‘์„ฑํ•œ ์›น ์–ด์…ˆ๋ธ”๋ฆฌ ๋„๊ตฌ๋“ค์„ ๋งŒ๋“ค๊ณ  ์žˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ ์˜ค๋ธŒ์ ํŠธ๋ฅผ ์ฃผ๊ณ  ๋ฐ›๊ณ , npm ๋ชจ๋“ˆ๋กœ ํŒจํ‚ค์ง• ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ES ๋ชจ๋“ˆ๊ณผ์˜ ํ˜ธํ™˜๊นŒ์ง€. wasm-bindgen, wasm-pack ์ด ์–ด๋–ค ์›๋ฆฌ๋กœ ๋ฌด์Šจ ์ผ์„ ํ•ด์ฃผ๊ณ  ์žˆ๋Š”์ง€ ์•Œ์•„๋ณธ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๋Ÿฌํ•œ ๋…ธ๋ ฅ๋“ค์€ ๋Ÿฌ์ŠคํŠธ ์ด์™ธ์˜ ์–ธ์–ด๊นŒ์ง€ ์ง€์›ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ€๋Šฅ์„ฑ์„ ๋„“ํ˜€์ฃผ๊ณ  ์žˆ๋‹ค.