Polymer: ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์˜ ๋ช…๋ น๋ฌธ ์ง€์› - ํ–ฅ์ƒ

์— ๋งŒ๋“  2017๋…„ 06์›” 20์ผ  ยท  4์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: Polymer/polymer

์ œ์•ˆ

QML ๊ณผ ๊ฐ™์€ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์—์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ‘œํ˜„์‹ ๋˜๋Š” ๋ช…๋ น๋ฌธ์— ๋Œ€ํ•œ ์ง€์›์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด ํ•จ์ˆ˜ ํ˜ธ์ถœ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ:

<my-elem>[[_myConcat(myAttr1, " - ", myAttr2)]]</my-elem>

๊ทธ๋Ÿฌ๋‚˜ ์œ ํšจํ•œ js ๋ฌธ๋„ ์žˆ์œผ๋ฏ€๋กœ ์š”์†Œ ํด๋ž˜์Šค์— ๋ชจ๋“  ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์˜ˆ:

<my-elem>[[myAttr1 + " - " + myAttr2]]</my-elem>

๋˜๋Š”:

<button style="display: [[_isAdminDisplayBlockOrNone(isAdmin)]];">Admin login</button>

์—๊ฒŒ:

<button style='display: [[isAdmin ? "block" : "none"]];'>Admin login</button>

๋˜ํ•œ Math ๋ฐ Date ์™€ ๊ฐ™์€ ๋‚ด์žฅ js ๊ฐ์ฒด ์‚ฌ์šฉ์— ๋Œ€ํ•œ ์ง€์›์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ „์—ญ ํ•จ์ˆ˜ ํ˜ธ์ถœ ์˜ˆ:

<lint rel="import" href="an3thPartyLibrary.html">
...
<template>
    <div>[[an3thPartyFunction(myAttr)]]</div>
</template>

์ด๊ฒƒ์€ ์š”์†Œ ์ธํ„ฐํŽ˜์ด์Šค์™€ ์ฝ”๋”ฉ ์†๋„๋ฅผ ๋‹จ์ˆœํ™”ํ•ฉ๋‹ˆ๋‹ค.

ํด๋ฆฌ๋จธ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์ด ์ด๋ฏธ ์†์„ฑ์— ๋Œ€ํ•œ ๋ณ€๊ฒฝ ์ด๋ฒคํŠธ๋ฅผ ๊ฐ์‹œํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ตฌํ˜„์ด ์–ด๋ ต์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด์ œ๋Š” ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๋Œ€์‹  ์ „์ฒด ํ‘œํ˜„์‹์—์„œ eval ๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค.

databinding enhancement p3 review then close

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์ด๊ฒƒ์€ 0.5๋ถ€ํ„ฐ ์ง€์›๋˜์—ˆ์ง€๋งŒ ์ฃผ๋กœ ๋Ÿฐํƒ€์ž„ AFAIK์—์„œ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์„ ๊ตฌ๋ฌธ ๋ถ„์„ํ•˜์—ฌ ๋ฐœ์ƒํ•˜๋Š” ์„ฑ๋Šฅ ๋ฌธ์ œ๋กœ ์ธํ•ด ์˜๋„์ ์œผ๋กœ ์ œ๊ฑฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋˜ ๋‹ค๋ฅธ ์ด์œ ๋Š” ํ…œํ”Œ๋ฆฟ์— ๋„ˆ๋ฌด ๋งŽ์€ ๋…ผ๋ฆฌ๋ฅผ ๊ฐ–๋Š” ๊ฒƒ์€ ์ข‹์€ ์ƒ๊ฐ์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๊ฐœ์ธ์ ์œผ๋กœ ์ €๋Š” 0.5์—์„œ 1.x๋กœ์˜ ํฐ ํ”„๋กœ์ ํŠธ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์— ์ฐธ์—ฌํ–ˆ๊ณ  ํ•œ ๋ฒˆ์€ ์ด์™€ ๊ฐ™์ด ์—ฌ๋Ÿฌ ์‚ผํ•ญ ์—ฐ์‚ฐ์ž๊ฐ€ ์žˆ๋Š” ๋งค์šฐ ๊ธด ์ค„์˜ ์ผ๋ถ€๋ฅผ ๋†“์ณค์Šต๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ 2.0-preview ๋ถ„๊ธฐ๊ฐ€ ์žˆ๊ณ  ์ ์–ด๋„ @justinfagnani์™€์˜ ๋Œ€ํ™”์—์„œ ๊ธฐ์–ตํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ฏธ๋ž˜์— ์„ ํƒ์  ๋ฏน์Šค์ธ์œผ๋กœ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ๋Š” ํด๋ฆฌ๋จธ ํ‘œํ˜„์‹ ์ €์žฅ์†Œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  4 ๋Œ“๊ธ€

์ด๊ฒƒ์€ 0.5๋ถ€ํ„ฐ ์ง€์›๋˜์—ˆ์ง€๋งŒ ์ฃผ๋กœ ๋Ÿฐํƒ€์ž„ AFAIK์—์„œ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์„ ๊ตฌ๋ฌธ ๋ถ„์„ํ•˜์—ฌ ๋ฐœ์ƒํ•˜๋Š” ์„ฑ๋Šฅ ๋ฌธ์ œ๋กœ ์ธํ•ด ์˜๋„์ ์œผ๋กœ ์ œ๊ฑฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋˜ ๋‹ค๋ฅธ ์ด์œ ๋Š” ํ…œํ”Œ๋ฆฟ์— ๋„ˆ๋ฌด ๋งŽ์€ ๋…ผ๋ฆฌ๋ฅผ ๊ฐ–๋Š” ๊ฒƒ์€ ์ข‹์€ ์ƒ๊ฐ์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๊ฐœ์ธ์ ์œผ๋กœ ์ €๋Š” 0.5์—์„œ 1.x๋กœ์˜ ํฐ ํ”„๋กœ์ ํŠธ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์— ์ฐธ์—ฌํ–ˆ๊ณ  ํ•œ ๋ฒˆ์€ ์ด์™€ ๊ฐ™์ด ์—ฌ๋Ÿฌ ์‚ผํ•ญ ์—ฐ์‚ฐ์ž๊ฐ€ ์žˆ๋Š” ๋งค์šฐ ๊ธด ์ค„์˜ ์ผ๋ถ€๋ฅผ ๋†“์ณค์Šต๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ 2.0-preview ๋ถ„๊ธฐ๊ฐ€ ์žˆ๊ณ  ์ ์–ด๋„ @justinfagnani์™€์˜ ๋Œ€ํ™”์—์„œ ๊ธฐ์–ตํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ฏธ๋ž˜์— ์„ ํƒ์  ๋ฏน์Šค์ธ์œผ๋กœ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ๋Š” ํด๋ฆฌ๋จธ ํ‘œํ˜„์‹ ์ €์žฅ์†Œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

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

ํ…œํ”Œ๋ฆฟ์— JavaScript์™€ ์œ ์‚ฌํ•œ ํ‘œํ˜„์‹์„ ํฌํ•จํ•˜๋Š” ๊ฐ€์žฅ ์ข‹์€ ๋ฐฉ๋ฒ•์€ JavaScript๋งŒ ์‚ฌ์šฉํ•˜๊ณ  ์‚ฌ์šฉ์ž ์ •์˜ ํ‘œํ˜„์‹ ํŒŒ์„œ ๋ฐ ํ‰๊ฐ€๊ธฐ๋ฅผ ํด๋ผ์ด์–ธํŠธ์— ์ œ๊ณตํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ์šฐ๋ฆฌ๊ฐ€ lit-html๊ณผ LitElement๋กœ ๊ฐˆ ๋ฐฉํ–ฅ์ž…๋‹ˆ๋‹ค. ํด๋ฆฌ๋จธ + ํด๋ฆฌ๋จธ ํ‘œํ˜„๋ณด๋‹ค ํ›จ์”ฌ ๋น ๋ฅด๊ณ  ๊ฐ€๋ณ์Šต๋‹ˆ๋‹ค.

Polymer์˜ ํ‘œํ˜„ ์‹œ์Šคํ…œ์„ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š์„ ๊ฒƒ์ด๋ฏ€๋กœ ์ง€๊ธˆ ๋‹ซ๊ฒ ์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰