getter/setter๋ IE9+์์ ์ง์ ๋๊ณ ES6์์ ํจ์ฌ ๋ ๋๋ฆฌ ํผ์ง ๊ฒ์ด๊ธฐ ๋๋ฌธ์ Backbone์ ํ์ฅ ๋ฐฉ๋ฒ์ด ์ง์ํ๋ค๋ฉด ์ข์ ๊ฒ์ ๋๋ค.
var Person = Backbone.Model.extend({
get fullName() {
return this.get('firstName') + ' ' + this.get('lastName');
}
});
var elonMusk = new Person({
firstName: 'Elon',
lastName: 'Musk'
});
console.log(person.fullName); // >> Elon Musk
ํ์ฌ _.extend
๋ฅผ ์ฌ์ฉํ๋ฉด getter๋ฅผ ํธ์ถํ๊ธฐ ๋๋ฌธ์ undefined is not a function
$#$๊ฐ ๋ฉ๋๋ค.
person.fullName()
๋ก ์์ฑํ๋ ๊ฒ์ด ๋ ์ข์ง ์์ ์ด์ ๊ฐ ์์ต๋๊น? ๊ทธ๋์ ๊ทธ๊ฒ์ด ํจ์ ํธ์ถ์ด๋ผ๋ ๊ฒ์ ์ ์ ์์ต๋๊น?
getter์ setter๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๋๋ถ๋ถ JS์์ ๋์ ์๊ฐ์ด๋ฉฐ ๋ฐฑ๋ณธ ๋ชจ๋ธ์ ํต์ฌ ์์ด๋์ด ์ค ํ๋์ ์๋ฐฐ๋ฉ๋๋ค. ์กฐ๋ง๊ฐ ์ง์์ด ์ถ๊ฐ๋๋ ๊ฒ์ ๋ณผ ์ ์์์ง ๋ชจ๋ฅด๊ฒ ์ต๋๋ค.
๋ฌด์๋ณด๋ค ์ด๊ฒ์ ์๋ก์ด ํด๋์ค ๊ตฌ๋ฌธ๊ณผ ๋ถ๋ถ์ ์ผ๋ก ์ ๋ ฌ๋ฉ๋๋ค. ํด๋์ค ๊ตฌ๋ฌธ์ ์์ฑ ์ด๋์ ๋ผ์ด์ ๊ฐ ์์ผ๋ฉฐ ์์ง ์ด์ ๋ํ ์ฌ์๋ ์์ผ๋ฏ๋ก interop์ด ๋ฌธ์ ๊ฐ ๋ ๊ฒ์ ๋๋ค.
๊ทธ๋ค์ ๋ฐฑ๋ณธ ๋ชจ๋ธ์ ํต์ฌ ์์ด๋์ด ์ค ํ๋์ ๋ฐ๋ํฉ๋๋ค.
๊ทธ๊ฒ ๋ฌด์จ ํต์ฌ ์์ด๋์ด์ผ?
๋ํ getter๋ model.idAttribute
๋ฅผ ์ฌ์ฉํ์ฌ Backbone.Collection์ ๊ธฐ์กด ๋ฌธ์ ์ ๋ํ ๋ถ๋ถ์ ์ธ ์๋ฃจ์
์
๋๋ค.
๋ค๋ฅธ ์๋ฃจ์
์ผ๋ก jsperf๋ฅผ ๋ง๋๋ ๋ฐ ๋ช ๋ถ์ ๋ณด๋์ต๋๋ค.
http://jsperf.com/backbone-extend-with-define-property
๊ทธ๊ฒ ๋ฌด์จ ํต์ฌ ์์ด๋์ด์ผ?
๊ฐ์ฒด์ ์์ฑ์ ์ค์ ํ๊ณ ๊ฒ์ํ๋ ๊ฒ์ ํฌ๋ช
ํ๊ณ ๋
ผ๋ฆฌ์ ์ด์ด์ผ ํ๋ค๋ ์๊ฐ์
๋๋ค. obj.prop = val
๋ ํด๋น ์์ฑ ๊ฐ์ ์ค์ ํ๋ ๊ฒ ์ธ์๋ ๋ค๋ฅธ ์์
์ ์ํํ์ง ์๋๋ค๋ ๊ฒ์ ํญ์ ์๊ณ ์์ด์ผ ํ๋ฉฐ(๊ฒ์์ ๊ฒฝ์ฐ๋ ๋ง์ฐฌ๊ฐ์ง), ๊ณ์ฐ๋ ์์ฑ ๋ฐ ๋ณ๊ฒฝ ์ด๋ฒคํธ์ ๊ฐ์ ์์
์ ์ฒ๋ฆฌํ๊ธฐ ์ํด ํจ์๋ฅผ ์ฌ์ฉํด์ผ ํฉ๋๋ค. ์ด๊ฒ์ด attributes
์ฃผ์์ $ get
๋ฐ set
๋ํผ ๋ฉ์๋๊ฐ ์๋ ์ฃผ๋ ์ด์ ์
๋๋ค.
๋ํ getter๋ model.idAttribute๊ฐ ์๋ Backbone.Collection์ ๊ธฐ์กด ๋ฌธ์ ์ ๋ํ ๋ถ๋ถ์ ์ธ ์๋ฃจ์ ์ ๋๋ค.
ํ์ฌ _.result
๋ํผ๊ฐ ์๋ํ์ง ์๋ ์ด์ ๊ฐ ๋ฌด์์
๋๊น? idAttribute
๋ ๊ธฐ๋ณธ ๋๋ ํจ์์ผ ์ ์์ต๋๋ค. ์ด๊ฒ์ modelId
๋ก๋ ์์ ๋๊ณ ์์ต๋๋ค.
๋ด๊ฐ ๋งํ ๋ฌธ์ ์ ์ฐ๊ฒฐํ์ด์ผ ํด์ ์ฃ์กํฉ๋๋ค: https://github.com/jashkenas/backbone/issues/3408
์ ๋ ์ฃผ๋ก Backbone์ ํด๋์ค ๊ตฌ๋ฌธ์ด ES ํด๋์ค ๊ตฌ๋ฌธ๊ณผ ๊ฑฐ์ ํธํ๋๊ธฐ ๋๋ฌธ์ ์ด ๋ฌธ์ ๋ฅผ ์ ๊ธฐํ๊ณ ์์ผ๋ฉฐ, coffeescript์ ๋ํ ์ถ๊ฐ ์ง์์ ๊ณ ๋ คํ ๋ ํธํ๋๋ ๊ฒ์ด ํฉ๋ฆฌ์ ์ผ๋ก ๋ณด์ ๋๋ค.
CoffeeScript๋ ๋๋ถ๋ถ ๊ฐ์ ์ด์ ๋ก setter์ getter๋ฅผ ์ง์ํ์ง ์์ต๋๋ค(https://github.com/jashkenas/coffeescript/pull/2902๋ถํฐ ์์ํ์ฌ ๋ช ๊ฐ์ง ๋ฐฐ๊ฒฝ์ ๋ํ ๋ฌธ์ ์ดํด๋ณด๊ธฐ). ๋ฐฑ๋ณธ ๊ฐ์ฒด๋ฅผ ํด๋์ค๋ก ์ง์ํ๋ ๋ฐ ์ฅ์ ๋ฌผ์ด ๋์ด์๋ ์ ๋ฉ๋๋ค.
๋ด๊ฐ ๋งํ ๋ฌธ์ ์ ์ฐ๊ฒฐํ์ด์ผ ํด์ ์ฃ์กํฉ๋๋ค. #3408
์๊ธฐ์์ผ์ค? ๋๋ ๋ฐฉ๋ง์ด์์ ์ฐ๊ฒฐ์ ๋ณด๊ธฐ ์ํด ๊ธด์ฅํ๊ณ ์์ต๋๋ค.
๊ฒ๋ค๊ฐ extend
์ ๋ํ ๋ชจ๋ ๋ณ๊ฒฝ ์ฌํญ์ ์ฌ๊ธฐ๊ฐ ์๋ _.extend
์์ ์ํํด์ผ ํฉ๋๋ค. Wontfix๋ก ๋ซ์ต๋๋ค.
CoffeeScript๋ ๋๋ถ๋ถ ๊ฐ์ ์ด์ ๋ก setter์ getter๋ฅผ ์ง์ํ์ง ์์ต๋๋ค.
๋๋ getter/setter์ ๋ํด ๋งํ๋ ๊ฒ์ด ์๋๋ผ Backbone์ด CoffeeScript์์ ์ํธ ์ด์ฉ์ฑ์ ์ํด __super__
๋ฅผ ์ถ๊ฐํ ๋ฐฉ๋ฒ๊ณผ ๋์ผํ ๋ฐฉ์์ผ๋ก ES6 ํด๋์ค๋ฅผ ์ง์ํ๋ ๊ฒ๋ง์ด ์๋ฏธ๊ฐ ์๋ ๋ฐฉ๋ฒ์ ๋ํด ์ด์ผ๊ธฐํ๊ณ ์์์ต๋๋ค.
์๊ธฐ์์ผ์ค? ๋๋ ๋ฐฉ๋ง์ด์์ ์ฐ๊ฒฐ์ ๋ณด๊ธฐ ์ํด ๊ธด์ฅํ๊ณ ์์ต๋๋ค.
Collection.extend({
model: function() { return Model }
});
//
collection.modelId(model); // 'id' regardless if that's correct or not.
Collection.extend({
get model() { return Model }
});
//
collection.modelId(model); // correct for *some* of the common cases.
๊ฒ๋ค๊ฐ ํ์ฅํ ๋ชจ๋ ๋ณ๊ฒฝ ์ฌํญ์ ์ฌ๊ธฐ๊ฐ ์๋ _.extend์์ ์ํํด์ผ ํฉ๋๋ค. Wontfix๋ก ๋ซ์ต๋๋ค.
์๋ก์ด _.assign
๋ฉ์๋์ ์์ ์ ์๋ ๋ณ๊ฒฝ ์ฌํญ์ด ์๋ ๊ฒฝ์ฐ ์ด๋ ํ์คํ ์ด ๋ณ๊ฒฝ ์ฌํญ์ ์ ํฉํ ์์น๊ฐ ์๋๋๋ค. ๊ทธ๋ฌ๋ IMO์์ ์ง์ํ๋ ๊ฒ์ด ํจ์ฌ ๋ ํฉ๋ฆฌ์ ์
๋๋ค.
๋ํ ์ด ๋ฌธ์ ๊ฐ ์ข ๋ฃ๋๊ณ ์ํ์ง๊ธฐ ์ ์ Backbone์ ํ์ฅ์ ES ํด๋์ค์ ์ํธ ์ด์ฉ์ฑ ๋ฌธ์ ๊ฐ ์์ง๋ง CoffeeScript ํด๋์ค์๋ ๋ฌธ์ ๊ฐ ์๋ ์ด์ ๋ฅผ ์ค๋ช ํ๊ณ ์ถ์ต๋๋ค.
IE Tech Preview๊ฐ class
(Traceur ๋ฐ 6to5๋ ์์ง extends
๋ฅผ ๋ณํํ์ง ์์)๋ฅผ ์๊ฒฉ์ผ๋ก ์ ๋๋ก ์ง์ํ๋ ์ ์ผํ ๋ธ๋ผ์ฐ์ ์ด๊ธฐ ๋๋ฌธ์ ์ฐ๋ฆฌ๋ ์ด๊ฒ๊ณผ๋ ๊ฑฐ๋ฆฌ๊ฐ ๋ฉ์ต๋๋ค. ํ์ํ. ๋ฐฑ๋ณธ์ ์ฒ์๋ถํฐ ์ข์ ์์ด๋์ด๊ฐ ์๋ ๊ธฐ๋ฅ์ ์ง์ํ๊ธฐ ์ํด ์ด์ ๋ฒ์ ๊ณผ์ ํธํ์ฑ์ ๊นจ๋ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ์ง ์์ ๊ฒ์
๋๋ค.
Tracer์ 6to5๋ ์์ง
extends
๋ณํํ์ง ์์ต๋๋ค.
๋ ๋ค ์ค์ ๋ก๋ ๋๋ฆฌ ์ง์๋๋ ์ ์ ์์ฑ์ ๋ํด __proto__
์ ๋ํ ์ง์๋ง ํ์ํฉ๋๋ค.
๋ํ ๋ฐฑ์๋ ํธํ์ฑ์ ๊นจ์ผ ํ ์ด์ ๊ฐ ์์ผ๋ฉฐ ๊ฐ๋ฅํ ๊ฒฝ์ฐ Object.setPrototypeOf
๋ฅผ ์ ํ์ ์ผ๋ก ์ฌ์ฉํ๋ฉด ๋ ๋น ๋ฅด๊ฒ ๋ง๋ค ์ ์์ต๋๋ค.
@thejameskyle ์ด๊ฒ์ ์ด์๊ฐ ์๋ PR๋ก ๋ฐ๊พธ๊ณ ์ถ์ผ์ ๊ฐ์? ์ดํด๋ณผ ๊ฐ์น๊ฐ ์์ต๋๋ค.
๋ฌผ๋ก ์ด์ฃ , ๊ทธ๋ ๊ฒ ํ๊ฒ ์ต๋๋ค
๊ฐ๋ ์ค์ธ๊ฐ์? ์์ ์ด๋ ๊ทธ๊ฒ์ ๋ํด ๋ญ๊ฐ๊ฐ ์์ต๋๊น? ์ดฌ์์ ํ๊ณ ์ถ์ต๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋ฌผ๋ก ์ด์ฃ , ๊ทธ๋ ๊ฒ ํ๊ฒ ์ต๋๋ค