Encapsulate Record, ๋ ˆ์ฝ”๋“œ ์บก์Šํ™” ํ•˜๊ธฐ๋ฅผ ์•Œ์•„๋ณด์ž.

์š”์•ฝ

์ฝ”๋“œ

organization = {name: "์• ํฌ๋ฏธ ๊ตฌ์Šค๋ฒ ๋ฆฌ", country: "GB"};
class Organization {
    constructor(data) {
        this._name = data.name;
        this._country = data.country;
    }
 
    get name() {return this._name;}
    set name(aString) {this._name = aString;}
    get country() {return this._country;}
    set country(aCountryCode) {this._country = aCountryCode;}
}

๋ฐฐ๊ฒฝ

  • ๋ณดํ†ต์˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋Š” ๋ฐํ„ฐ ๋ ˆ์ฝ”๋“œ๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ๊ตฌ์กฐ๋ฅผ ์ œ๊ณตํ•œ๋‹ค.
  • ๋ฌถ์–ด์„œ ๊ด€๋ฆฌํ•œ๋‹ค๋Š” ์ ์—์„œ๋Š” ํŽธํ•˜๋‚˜, ๊ฐ€๋ณ€ ๋ฐ์ดํ„ฐ๋ฅผ ํ‘œํ˜„ํ•˜๋ ค๋ฉด ์ข€ ๋ฒˆ๊ฑฐ๋กญ๋‹ค.
  • ์˜ˆ๋ฅผ ๋“ค์–ด ๋ฒ”์œ„๋ฅผ ๋‚˜ํƒ€๋‚ด๊ธฐ ์œ„ํ•ด์„œ๋Š” {start: 1, end: 5}์™€ ๊ฐ™์ด ํ‘œํ˜„ํ•ด์•ผ ํ•œ๋‹ค.
  • ๊ทธ๋Ÿผ ๊ธธ์ด๋ผ๋Š” ์ •๋ณด๋ฅผ ์•Œ๊ธฐ์œ„ํ•ด์„œ๋Š” ๊ณ„์‚ฐํ•ด์„œ ์–ป์–ด์•ผ ํ•œ๋‹ค. ์ด ๊ฐ’๊นŒ์ง€ ์บก์Šํ™”๋Š” ์•ˆ๋œ๋‹ค.
  • ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ์ฒด๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํŽธ์ด ๋‚ซ๋‹ค.
  • ๊ฐ๊ฐ์˜ ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์ด๋ ‡๊ฒŒ ๋˜๋ฉด ๋ฌด์—‡์ด ์ €์žฅ๋˜์—ˆ๋Š”์ง€, ๊ณ„์‚ฐ๋˜์—ˆ๋Š”์ง€ ์•Œ ํ•„์š”๊ฐ€ ์—†๋‹ค.
    • ๋ฌผ๋ก  ํŠน์ • ์ƒํ™ฉ์—์„œ๋Š” ์ด ์•Œ ์ˆ˜ ์—†๋Š” ์ƒํ™ฉ์ด ์„ฑ๋Šฅ ๋ฌธ์ œ๋กœ ์ง๊ฒฐ๋  ์ˆ˜๋„ ์žˆ๋‹ค.
    • ๊ณ„์‚ฐ ํ”„๋กœํผํ‹ฐ๋ฅผ ๊ณ„์†ํ•ด์„œ ํ˜ธ์ถœํ•˜๊ฒŒ ๋˜์–ด ์„ฑ๋Šฅ์ด ์ €ํ•˜๋  ์ˆ˜ ์žˆ๋‹ค. ์‚ฌ์šฉ์ž๋Š” ๊ณ„์‚ฐ ํ”„๋กœํผํ‹ฐ์ธ์ค„ ๋ชจ๋ฅด๊ณ  ์‚ฌ์šฉํ–ˆ๋Š”๋ฐ ๋ง์ด๋‹ค.

์ ˆ์ฐจ

  1. ๋ ˆ์ฝ”๋“œ๋ฅผ ๋‹ด์€ ๋ณ€์ˆ˜๋ฅผ ์บก์Šํ™” ํ•œ๋‹ค.
  2. ๋ ˆ์ฝ”๋“œ๋ฅผ ๊ฐ์‹ผ ๋‹จ์ˆœํ•œ ํด๋ž˜์Šค๋กœ ํ•ด๋‹น ๋ณ€์ˆ˜์˜ ๋‚ด์šฉ์„ ๊ต์ฒดํ•œ๋‹ค.
  3. ํ…Œ์ŠคํŠธ ํ•œ๋‹ค.
  4. ์›๋ณธ ๋ ˆ์ฝ”๋“œ ๋Œ€์‹  ์ƒˆ๋กœ ์ •์˜ํ•œ ํด๋ž˜์Šค ํƒ€์ž…์˜ ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜๋“ค์„ ์ƒˆ๋กœ ๋งŒ๋“ ๋‹ค.
  5. ๋ ˆ์ฝ”๋“œ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ์˜ˆ์ „ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์ „๋ถ€ ์ƒˆ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋„๋ก ๋ฐ”๊พผ๋‹ค.
  6. ํด๋ž˜์Šค์—์„œ ์›๋ณธ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ์ ‘๊ทผ์ž๋“ค์„ ์ œ๊ฑฐํ•œ๋‹ค.
  7. ๋ ˆ์ฝ”๋“œ์˜ ํ•„๋“œ๋„ ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ์ธ ์ค‘์ฒฉ ๊ตฌ์กฐ๋ผ๋ฉด ๋ ˆ์ฝ”๋“œ ์บก์Šํ™”ํ•˜๊ธฐ๋ฅผ ์žฌ๊ท€์ ์œผ๋กœ ์ ์šฉํ•œ๋‹ค.

์‚ฌ์‹ค ์–ด๋–ป๊ฒŒ ํ•˜๋ฉด ์•ˆ๋ง๊ฐ€ํŠธ๋ฆฌ๊ณ  ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์„๊นŒ๋ฅผ ๊ณ ๋ฏผํ•˜๋ฉด ๋‚˜์˜ค๋Š” ์ ˆ์ฐจ๋‹ค. ์ €๊ฑธ ๋ฉ์ฒญํ•˜๊ฒŒ ์™ธ์šฐ์ง€ ์•Š๋„๋ก ์ฃผ์˜ํ•˜์ž.

์˜ˆ์‹œ

const organization = {name: "์• ํฌ๋ฏธ ๊ตฌ์Šค๋ฒ ๋ฆฌ", country: "GB"};
 
// Client 1
result += `<h1>${organization.name}</h1>`;
organization.name = newName;
  • ๋จผ์ € organization์„ ์บก์Šํ™” ํ•˜์ž.
function getRawDataOfOrganization() {
    return organization;
}
 
// Client 1
result += `<h1>${getRawDataOfOrganization().name}</h1>`;
getRawDataOfOrganization().name = newName;
  • ์ด์ œ organization์„ ๊ฐ์‹ผ ํด๋ž˜์Šค๋ฅผ ๋งŒ๋“ค์ž.
class Organization {
    constructor(data) {
        this._data = data;
    }
}
 
const organization = new Organization({name: "์• ํฌ๋ฏธ ๊ตฌ์Šค๋ฒ ๋ฆฌ", country: "GB"});
 
function getRawDataOfOrganization() {
    return organization._data;
}
 
function getOrganization() {
    return organization;
}
 
// Client 1
result += `<h1>${getRawDataOfOrganization().name}</h1>`;
getRawDataOfOrganization().name = newName;
  • ํด๋ž˜์Šค ์•ˆ์— ๋ ˆ์ฝ”๋“œ ์ž์ฒด๋ฅผ ๋„ฃ์—ˆ๋‹ค.
  • ๊ทธ๋ฆฌ๊ณ  ๋ฐ”๊นฅ์—์„œ ์‚ฌ์šฉํ•  ๋•Œ๋Š” ํ•ด๋‹น ํด๋ž˜์Šค์—์„œ ๋ ˆ์ฝ”๋“œ๋ฅผ ์ ‘๊ทผํ•ด์„œ ๋ฑ‰๋„๋ก ๋ณ€๊ฒฝํ–ˆ๋‹ค.
  • ์ด๋ ‡๊ฒŒ ํ•ด์„œ ์ฝ”๋“œ๋ฅผ ๊ธฐ์กด๊ณผ ๋˜‘๊ฐ™์ด ๋Œ๋ฆฌ๋˜, ์ˆ˜์ •ํ•˜๋Š” ๋ฒ”์œ„๋ฅผ ์ œํ•œํ–ˆ๋‹ค.
    • ๋ฆฌํŒฉํ† ๋ง์—์„œ ์ด๊ฒŒ ์ œ์ผ ์ค‘์š”ํ•˜๋‹ค. ๊ฒฐ๊ตญ ๋‚ด๊ฐ€ ์ˆ˜์ •ํ•˜๊ณ ์ž ํ•˜๋Š” ๋ฒ”์œ„๋ฅผ ์ค„์—ฌ๋†“๊ณ  ์ž‘์—…์„ ์‹œ์ž‘ํ•˜๋Š” ๊ฒƒ.
    • ๊ทธ๋ž˜์•ผ ๋ณธ๋™์ž‘ ๊ทธ๋Œ€๋กœ ๋Œ์•„๊ฐ€๋Š”์ง€ ํ™•์ธํ•˜๊ธฐ ์‰ฝ๋‹ค.
class Organization {
    constructor(data) {
        this._data = data;
    }
 
    set name(aString) {
        this._data.name = aString;
    }
 
    get name() {
        return this._data.name;
    }
}
 
function getOrganization() {
    return organization;
}
 
const organization = new Organization({name: "์• ํฌ๋ฏธ ๊ตฌ์Šค๋ฒ ๋ฆฌ", country: "GB"});
result += `<h1>${organization.name}</h1>`;
getOrganization().name = newName;
  • getRawDataOfOrganization()์„ getOrganization()์œผ๋กœ ๋ณ€๊ฒฝํ–ˆ๋‹ค.
  • ๋งˆ์ง€๋ง‰์œผ๋กœ ์ •๋ฆฌ ์ž‘์—…ํ•˜์ž.
class Organization {
    constructor(data) {
        this._name = data.name;
        this._country = data.country;
    }
 
    get name() {return this._name;}
    set name(aString) {this._name = aString;}
    get country() {return this._country;}
    set country(aCountryCode) {this._country = aCountryCode;}
}

์ค‘์ฒฉ๋œ ๋ ˆ์ฝ”๋“œ์˜ ๊ฒฝ์šฐ

  • ๋ ˆ์ฝ”๋“œ๊ฐ€ ์ง€๊ธˆ์€ ๊ฐ„๋‹จํ–ˆ์ง€๋งŒ ๋งŒ์•ฝ ์—„์ฒญ ๋ณต์žกํ•˜๋‹ค๋ฉด?
  • ๋ณต์žกํ•œ json parsing ์ „์˜ ์ƒํƒœ๋กœ ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค๋ฉด?
  • ์ผ๋‹จ ๊ฐ€์žฅ ์ค‘์š”ํ•œ๊ฒƒ์€ ์•„๋ฌด๋ž˜๋„ ์บก์Šํ™”๋‹ค. ๊ฒฝ๊ณ„์—์„œ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•˜๊ฒŒ ๋  ๊ฒƒ์ธ์ง€ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋งž์ถ”๊ณ ,
  • ๋‚ด๋ถ€์—์„œ ์ด์ „ ๊ฐ์ฒด๋ฅผ ๊ทธ๋Œ€๋กœ ๋˜์ง€๋„๋ก ์„ ์ž‘์—…ํ•œ๋‹ค.
  • ๊ทธ ๋‹ค์Œ ๋‚ด๋ถ€์—์„œ ๋ณ€๊ฒฝํ•ด์„œ ๋˜์ง€๋„๋ก ์ž‘์—…ํ•˜๋ฉด ๋œ๋‹ค.
  • ์‚ฌ์‹ค ์ด ๋‹จ๊ณ„์—์„œ ๊ณ ๋ฏผํ•ด๋ณด์•„์•ผ ํ•˜๋Š” ๊ฒƒ์€ ๊ฐ์‹ผ ๊ฐ์ฒด๋ฅผ ์š”์ฒญํ•  ๋•Œ, ์›๋ณธ ๋ ˆ์ฝ”๋“œ๋Š” ๊ทธ๋Œ€๋กœ ๋‘๊ณ , ๋ณต์‚ฌํ•ด์„œ ๋˜์งˆ ๊ฒƒ์ธ๊ฐ€ ์ฐธ์กฐ๋กœ ๋˜์งˆ ๊ฒƒ์ธ๊ฐ€ ์ด๋Ÿฐ ๊ฑฐ๋‹ค.
  • ์ง€๊ธˆ ๋ฌธ์ œ๋Š” ๊ณตํ†ต์˜ ๋ ˆ์ฝ”๋“œ๊ฐ€ ์ด๋ฏธ ์žˆ๊ณ , ์ด๊ฑธ ๊ฐ์ฒด ํ˜•ํƒœ๋กœ ๊ฐ์‹ธ๋Š” ๊ฒƒ์ธ๋ฐ, ๋ณ€๊ฒฝ์— ๋Œ€ํ•ด ์–ด๋–ป๊ฒŒ ๋Œ€์ฒ˜ํ•ด์•ผ ํ•˜๋Š”์ง€์— ๋Œ€ํ•œ ํŒ๋‹จ์ด ์š”๊ตฌ๋œ๋‹ค.
  • ๊ฐ์ฒด๊ฐ€ ํฌ๋ฉด ๋ณต์‚ฌ ๋น„์šฉ์ด ์ปค์งˆ ๊ฒƒ์ด๊ณ , ๊ทธ๋ ‡๋‹ค๊ณ  ์ฐธ์กฐ๋กœ ๋‘๋ฉด ๋ณ€๊ฒฝ์— ๋Œ€ํ•œ ๋ถ€์ž‘์šฉ์ด ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค.

Reference