Backbone: ๋ฉ”์„œ๋“œ๋ฅผ ํ™•์žฅํ•˜๊ธฐ ์œ„ํ•ด getter/setter ์ง€์› ์ถ”๊ฐ€

์— ๋งŒ๋“  2015๋…„ 02์›” 09์ผ  ยท  12์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: jashkenas/backbone

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 $#$๊ฐ€ ๋ฉ๋‹ˆ๋‹ค.

change wontfix

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

๋ฌผ๋ก ์ด์ฃ , ๊ทธ๋ ‡๊ฒŒ ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค

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

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๋กœ ๋ฐ”๊พธ๊ณ  ์‹ถ์œผ์‹ ๊ฐ€์š”? ์‚ดํŽด๋ณผ ๊ฐ€์น˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฌผ๋ก ์ด์ฃ , ๊ทธ๋ ‡๊ฒŒ ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค

๊ฐ€๋Š” ์ค‘์ธ๊ฐ€์š”? ์š”์ ์ด๋‚˜ ๊ทธ๊ฒƒ์— ๋Œ€ํ•ด ๋ญ”๊ฐ€๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ? ์ดฌ์˜์„ ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

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