์›๊ธ€: https://hacks.mozilla.org/2018/04/javascript-to-rust-and-back-again-a-wasm-bindgen-tale/

์—ญ์ž ์ฃผ:

์›๊ธ€์˜ ์˜๋„๋ฅผ ํ•ด์น˜์ง€ ์•Š๋Š” ๋ฒ”์œ„์—์„œ ์˜์—ญ์„ ํฌํ•จํ•œ๋‹ค.

์˜๋„๋ฅผ ๋ช…ํ™•ํ•˜๊ฒŒ ์ „๋‹ฌํ•˜๊ธฐ ์œ„ํ•œ ๋ช‡๋ช‡ ๋‹จ์–ด๋Š” ๋ฒˆ์—ญํ•˜์ง€ ์•Š์•˜๋‹ค.

์šฐ๋ฆฌ๋Š” ์ตœ๊ทผ WebAssembly ์ปดํŒŒ์ผ์ด ์–ผ๋งˆ๋‚˜ ๋น ๋ฅธ์ง€, ์–ผ๋งˆ๋‚˜ ๋น ๋ฅธ JS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š”์ง€, ๊ฑฐ๊ธฐ์— ์–ผ๋งˆ๋‚˜ ๋” ์ž‘์€ ๋ฐ”์ด๋„ˆ๋ฆฌ๋ฅผ ๋งŒ๋“ค์–ด ์ฃผ๋Š”์ง€ ํ™•์ธํ–ˆ๋‹ค. ๋”์šฑ์ด ์šฐ๋ฆฌ๋Š” Rust์™€ JavaScript ์ปค๋ฎค๋‹ˆํ‹ฐ์˜ ๋” ๋‚˜์€ ํ˜‘์—…์„ ์œ„ํ•œ ๊ณ„ํš์„ ์„ธ์› ๊ณ , ์ด๊ฒƒ์—๋Š” ๋‹ค๋ฅธ ์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋“ค์„ ์œ„ํ•œ ๊ฒƒ๋„ ํฌํ•จ๋˜์–ด์žˆ๋‹ค. ์ด์ „ ๊ธ€์—์„œ๋„ ์Šฌ์ฉ ๋งํ–ˆ์ง€๋งŒ โ€ฆ


์ด๋ฒˆ ๊ธ€์€ ์›น ์ปดํฌ๋„ŒํŠธ ์†Œ๊ฐœ ์—ฐ์žฌ 5๋ฒˆ์งธ๋กœ ์›น ์ปดํฌ๋„ŒํŠธ๋ฅผ react์ฒ˜๋Ÿผ ์ฝ”๋”ฉํ•˜๊ธฐ๋ฅผ ํ•ด๋ณด๊ฒ ๋‹ค. ์‚ฌ์šฉํ•˜๋Š” ์˜ˆ์ œ ์ „์ฒด ์ฝ”๋“œ๋Š” Todo Web Components์—์„œ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ์ง€๋‚œ ์—ฐ์žฌ์—์„œ ์•Œ์•„๋ณด์•˜๋˜ ์ปค์Šคํ…€ ์—˜๋ฆฌ๋จผํŠธ, ์‰๋„์šฐ ๋” ๊ทธ๋ฆฌ๊ณ  lit-HTML์„ ์‚ฌ์šฉํ•˜์—ฌ ์›น ์ปดํฌ๋„ŒํŠธ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์–ด๋–ป๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š”์ง€ ํ™•์ธํ•ด๋ณด์ž.

์›น ์ปดํฌ๋„ŒํŠธ TODO APP

๊ธ€์„ ์ฝ๊ธฐ ์ „์— ์•„๋ž˜์˜ ๋งํฌ์—์„œ ์˜ˆ์ œ ํŽ˜์ด์ง€๋ฅผ ์—ด์–ด๋‘๊ณ  ์‹œ์ž‘ํ•˜์ž.

Todo Web Components ์•ฑ ์ €์žฅ โ€ฆ


์›๊ธ€: https://medium.com/dev-channel/treebo-a-react-and-preact-progressive-web-app-performance-case-study-5e4f450d5299

์›์ €์ž: Treebo: Lakshya Ranganath, Chrome: Addy Osmani

๋ฒˆ์—ญ: ์ตœ๊ทœ์šฐ

์—ญ์ž ์ฃผ

  • ์ด ๋ฒˆ์—ญ ๊ธ€์€ ์›์ €์ž ์ค‘ ํ•˜๋‚˜์ธ Addy Osmani์˜ ํ—ˆ๋ฝ์„ ๋ฐ›์•„ ๊ฒŒ์‹œํ–ˆ๋‹ค.
  • ์ง์—ญ์ด ์–ด์ƒ‰ํ•œ ๊ฒฝ์šฐ ๋ถ€๋“์ด ์˜์—ญ ๋˜๋Š” ์›๋ฌธ์„ ์‚ฌ์šฉํ•˜์˜€๋‹ค.
  • ๋˜ํ•œ ์›๋ฌธ์—์„œ๋Š” ๋ฌธ์–ด์ฒด๋กœ ์‚ฌ์šฉ๋˜์—ˆ์œผ๋‚˜ first-paint, time-to-interactive๋“ฑ ์ค‘์š”ํ•œ ๊ฐ’์„ ์ด์•ผ๊ธฐ ํ•˜๋Š” ๊ฒฝ์šฐ๋Š” ๋ฒˆ์—ญํ•˜์ง€ ์•Š๊ณ  ์ดํƒค๋ฆญ์œผ๋กœ ํ‘œํ˜„ํ•˜์˜€๋‹ค.

ํŠธ๋ฆฌ๋ณด โ€ฆ


์ด๋ฒˆ ๊ธ€์€ ์›น ์ปดํฌ๋„ŒํŠธ ์†Œ๊ฐœ ์—ฐ์žฌ 4๋ฒˆ์งธ๋กœ Template Element๊ณผ HTML Imports์— ๋Œ€ํ•œ ๊ธ€์ด๋‹ค. ์„œ๋‘์— ๋ฐํžˆ์ž๋ฉด, ์ด ๋‘ ํ‘œ์ค€์˜ ํ๋ฆ„์€ ์›น ์ปดํฌ๋„ŒํŠธ ๊ฐœ๋ฐœ์—์„œ ์ œ์™ธ๋  ๊ฒƒ์œผ๋กœ ๋ณด์ธ๋‹ค. ๋”ฐ๋ผ์„œ ๋‘ ํ‘œ์ค€์„ ์ž์„ธํžˆ ์•Œ์•„๋ณด๊ธฐ๋ณด๋‹ค๋Š” ์ด๊ฒƒ๋“ค์ด ์›น ์ปดํฌ๋„ŒํŠธ๋กœ์จ ์‚ฌ์šฉ๋˜๊ฒŒ ๋œ ๋ฐฐ๊ฒฝ๊ณผ ํ•œ๊ณ„์ , ๊ทธ๋ฆฌ๊ณ  Polymer Summit 2017์—์„œ ๋‚˜์˜จ ํ˜„์žฌ์˜ ๋™ํ–ฅ์„ ์ด์•ผ๊ธฐ๋กœ ํ’€์–ด๋ณด์•˜๋‹ค. ์ง์ ‘ ์‹ค์Šตํ•  ๋‚ด์šฉ๋„ ์—†์œผ๋‹ˆ ๊ฐ€๋ณ๊ฒŒ ์ด์•ผ๊ธฐ โ€ฆ


์ด ๊ธ€์€ ์›น ์ปดํฌ๋„ŒํŠธ ์†Œ๊ฐœ ์—ฐ์žฌ๋กœ ๊ทธ์ค‘ ์„ธ ๋ฒˆ์งธ์ธ ์‰๋„์šฐ ๋”์— ๋Œ€ํ•œ ๊ธ€์ด๋‹ค. ์•„๋งˆ๋„ ์ด์ „ ๊ธ€์˜ ์ปค์Šคํ…€ ์—˜๋ฆฌ๋จผํŠธ ๊ธ€์„ ์ฝ๊ณ  ์˜จ ๋ถ„์€ ์—ฌ๋Ÿฌ ์ŠคํŽ™, API, ๊ธฐ์–ตํ•ด ๋‘์–ด์•ผ ํ•  ๊ฒƒ๋“ค๋กœ ์งˆ๋ ธ์„์ง€๋„ ๋ชจ๋ฅด๊ฒ ๋‹ค.(๋‘ ๋ฒˆ์œผ๋กœ ์ž˜๋ผ์„œ ๊ธ€์„ ์ผ์œผ๋ฉด ์ข‹์•˜์„ ๊ฒƒ ๊ฐ™๋‹ค.) ๊ทธ๋Ÿฌ๋‚˜ ์ด๋ฒˆ ์‹œ๊ฐ„ ์‰๋„์šฐ ๋”์„ ์‚ฌ์šฉํ•˜๋Š”๋ฐ ๋ฐฐ์›Œ์•ผ ํ•˜๋Š” API๋Š” element.attachShadow()ํ•จ์ˆ˜ ํ•˜๋‚˜๋ฟ์ด๋‹ˆ ๊ฐ€๋ฒผ์šด โ€ฆ


์˜ค๋Š˜์€ ์ด์ „์— ์ผ๋˜ ๊ธ€ WebComponents: Keep calm and #UseThePlatform์— ์ด์–ด์ง€๋Š” ๊ฒƒ์œผ๋กœ, Web Components์˜ ์ฃผ์š” ํ‘œ์ค€ ์ค‘ ํ•˜๋‚˜์ธ Custom Elements์— ๋Œ€ํ•œ ๊ธ€์ด๋‹ค.

tl;dr

  • <div> ๋Œ€์‹  <current-time>์ฒ˜๋Ÿผ ์ ์ ˆํ•œ ์ด๋ฆ„์˜ ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค
  • HTML Element์™€ Javascript Class๋ฅผ ํ•œ ๋ชธ์œผ๋กœ ๋งŒ๋“ค์–ด ์ค€๋‹ค
  • IE11 ์ด์ƒ๋งŒ ์ง€์›, Polyfill ํ•„์š”ํ•  ์ˆ˜๋„ ์žˆ โ€ฆ


Web Components: Keep calm and #UseThePlatform

์ด ํฌ์Šคํ„ฐ(Keep Calm and Carry On)์€ ์˜๊ตญ ์ •๋ถ€๊ฐ€ ์ œ2์ฐจ ์„ธ๊ณ„ ๋Œ€์ „์ด ๋ฐœ๋ฐœํ•˜๊ธฐ ์ „ ๋Œ€๊ทœ๋ชจ ๊ณต์ค‘ ํญ๊ฒฉ์ด ์˜ˆ๊ณ ๋œ ๊ฐ€์šด๋ฐ ์˜๊ตญ ์‹œ๋ฏผ๋“ค์—๊ฒŒ โ€œํ‰์ƒ์‹ฌ์„ ์œ ์ง€ํ•˜๊ณ  ํ•˜๋˜ ์ผ์„ ๊ณ„์†ํ•ด๋ผโ€๋ผ๋Š” ๋œป์œผ๋กœ ๋ฐฐํฌํ–ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ํ˜„์žฌ webcomponents.org๋Š” ๋ฌด์Šจ ์ด์œ ์ธ์ง€ ์ƒ๋‹จ์— ์ „์Ÿ ์‹œ ์‚ฌ์šฉ๋˜์—ˆ๋˜ ํฌ์Šคํ„ฐ์˜ ํŒจ๋Ÿฌ๋””๋กœ โ€œKeep calm and #UseThePlatformโ€์ด๋ผ๋Š” ๋ชจํ† ๋ฅผ ๋‹ฌ์•„๋†“์•˜๋‹ค. ๊ตฌ๊ธ€์€ ์ง€๊ธˆ ์ž๋ฐ”์Šค โ€ฆ


As of last week one of my colleague has translated an article about ES6 Proxy. Soon after I read that, I came up with an idea about Javascript AOP(Aspect Oriented Programming). I talked to myself, Is there anyone who talk about it? Howโ€™s it going on in Javascript world? Here I share what I found and explain how Proxy is related with AOP.

Actually AOP is not the hot issue in Javascript world at least for now. So letโ€™s start from the โ€œAOPโ€ not the โ€œJavascript AOPโ€. You will find a term Cross-cutting Concern every time you search for whatโ€ฆ


์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ AOP ๋ง›๋ณด๊ธฐ

์ง€๋‚œ์ฃผ ES6 Proxy์— ๋Œ€ํ•ด ์“ด FE Weekly์˜ ์—ฐ๊ด€ ์ฃผ์ œ๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ AOP(Aspect Oriented Programming)๋ฅผ ์ •ํ–ˆ๋‹ค.

AOP(Aspect Oriented Programming)๊ฐ€ ๋ญ”๋ฐ?

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐœ๋ฐœ ์ด์•ผ๊ธฐ์—์„œ AOP๋Š” ์ƒ์†Œํ•œ ์ฃผ์ œ์ด๋‹ค. ๋ณดํ†ต AOP ๊ฐœ๋…์„ ์„ค๋ช…ํ•  ๋•Œ ๋Œ€ํ‘œ์ ์œผ๋กœ Cross-cutting Concern ์ด๋ผ๋Š” ๋ง์„ ํ•œ๋‹ค. ์ง์—ญํ•˜์ž๋ฉด ํšก๋‹จ ๊ด€์‹ฌ์‚ฌ ๋ผ๊ณ ํ•  ์ˆ˜ ์žˆ๊ฒ ์œผ๋‚˜, ์กฐ๊ธˆ ๋” ์‰ฝ๊ฒŒ ์–˜๊ธฐํ•˜์ž๋ฉด โ€œ๋กœ๊ทธ๋ฅผ ๋‚จ๊ฒจ์•ผ ํ•  ๊ณณ์€ ์—ฌ๊ธฐ, ์ €๊ธฐ, ๊ทธ๋ฆฌ๊ณ  ๋˜ ์ €๊ธฐ๊ฐ€ ๋˜๊ฒ ๊ตฐโ€, โ€œ์‚ฌ์šฉ์ž ์ž…๋ ฅ์„ ๋ฐ›๋Š” ์ด~๋Ÿฌํ•œ ๋ถ€๋ถ„๋“ค์—์„œ๋Š” ์œ ํšจ์„ฑ์„ ๊ฒ€์ฆํ•ด์•ผ ํ•ดโ€ ๋ผ๊ณ  ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ๊ณตํ†ต๋œ ๊ด€์‹ฌ์‚ฌ ์ •๋„๋กœ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๊ฒ ๋‹ค.

์•„๋ž˜์˜ ์˜ˆ์ œ๋ฅผ ๋จผ์ € ์‚ดํŽด๋ณด์ž

class BookCollection {
...
โ€ฆ

KyuWoo Choi ๐ŸŒพ

https://kyu.io/ - frontend developer @nhnent โ€ข write sometimes โ€ข code everyday โ€ข dream always

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store