๐Ÿ“– ํ”„๋กœํผํ‹ฐ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ

c_yjยท2022๋…„ 6์›” 26์ผ
0

DeepDive

๋ชฉ๋ก ๋ณด๊ธฐ
13/42
post-thumbnail

โœ”๏ธ ๋‚ด๋ถ€ ์Šฌ๋กฏ๊ณผ ๋‚ด๋ถ€ ๋ฉ”์„œ๋“œ

๋‚ด๋ถ€ ์Šฌ๋กฏ๊ณผ ๋‚ด๋ถ€ ๋ฉ”์„œ๋“œ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์˜ ๊ตฌํ˜„ ์•Œ๊ณ ๋ฆฌ์ฆ˜์„ ์„ค๋ช…ํ•˜๊ธฐ ์œ„ํ•ด ECMAScript ์‚ฌ์–‘์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์˜์‚ฌ ํ”„๋กœํผํ‹ฐ์™€ ์˜์‚ฌ ๋ฉ”์„œ๋“œ๋‹ค.

  • ECMAScript ์‚ฌ์–‘์— ๋“ฑ์žฅํ•˜๋Š” ์ด์ค‘ ๋Œ€๊ด„ํ˜ธ ([[ ... ]])๋กœ ๊ฐ์‹ผ ์ด๋ฆ„๋“ค์ด ๋‚ด๋ถ€ ์Šฌ๋กฏ๊ณผ ๋‚ด๋ถ€ ๋ฉ”์„œ๋“œ๋‹ค.

โœ”๏ธ ํ”„๋กœํผํ‹ฐ ์–ดํ‹ฐ๋ฅด๋ทฐํŠธ์™€ ํ”„๋กœํผํ‹ฐ ๋””์Šคํฌ๋ฆฝํ„ฐ ๊ฐ์ฒด

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์€ ํ”„๋กœํผํ‹ฐ๋ฅผ ์ƒ์„ฑํ•  ๋–„ ํ”„๋กœํผํ‹ฐ์˜ ์ƒํƒœ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ํ”„๋กœํผํ‹ฐ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ๋ฅผ ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ์ž๋™ ์ •์˜ํ•œ๋‹ค.

  • ํ”„๋กœํผํ‹ฐ์˜ ์ƒํƒœ๋ž€ ํ”„๋กœํผํ‹ฐ์˜ ๊ฐ’, ๊ฐ’์˜ ๊ฐฑ์‹  ๊ฐ€๋Šฅ ์—ฌ๋ถ€, ์—ด๊ฑฐ ๊ฐ€๋Šฅ ์—ฌ๋ถ€, ์žฌ์ •์˜ ๊ฐ€๋Šฅ ์—ฌ๋ถ€๋ฅผ ๋งํ•œ๋‹ค.
  • ํ”„๋กœํผํ‹ฐ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์ด ๊ด€๋ฆฌํ•˜๋Š” ๋‚ด๋ถ€ ์ƒํƒœ ๊ฐ’์ธ ๋‚ด๋ถ€ ์Šฌ๋กฏ์ด๋‹ค.
  • ํ”„๋กœํผํ‹ฐ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ์— ์ง์ ‘ ์ ‘๊ทผํ•  ์ˆ˜ ์—†์ง€๋งŒ Object.getOwnPropertyDescriptor ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ„์ ‘์ ์œผ๋กœ ํ™•์ธํ•  ์ˆ˜๋Š” ์žˆ๋‹ค.
  • Object.getOwnPropertyDescriptor ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ ์ฒซ ๋ฒˆ์จฐ ๋งค๊ฐœ๋ณ€์ˆ˜์—๋Š” ๊ฐ์ฒด์˜ ์ฐธ์กฐ๋ฅผ ์ „๋‹ฌํ•˜๊ณ , ๋‘๋ฒˆ์จฐ ๋งค๊ฐœ๋ณ€์ˆ˜์—๋Š” ํ”„๋กœํผํ‹ฐ ํ‚ค๋ฅผ ๋ฌธ์ž์—ด๋กœ ์ „๋‹ฌํ•œ๋‹ค. ์ด๋–„ Object.getOwnPropertyDescriptor ๋ฉ”์„œ๋“œ๋Š” ํ”„๋กœํผํ‹ฐ ์–ดํ‹ฐ๋ฅด๋ทฐํŠธ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜๋Š” ํ”„๋กœํผํ‹ฐ ๋””์Šคํฌ๋Ÿฝํ„ฐ ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค. ๋งŒ์•ฝ ์กด์žฌํ•˜์ง€ ์•Š๋Š” ํ”„๋กœํผํ‹ฐ๋‚˜ ์ƒ์†๋ฐ›์€ ํ”„๋กœํผํ‹ฐ์— ๋Œ€ํ•œ ํ”„๋กœํผํ‹ฐ ๋””์Šคํฌ๋Ÿฝํ„ฐ๋ฅผ ์š”๊ตฌํ•˜๋ฉด undefined๊ฐ€ ๋ฐ˜ํ™˜๋œ๋‹ค.
  • Object.getOwnPropertyDescriptor ๋ฉ”์„œ๋“œ๋Š” ํ•˜๋‚˜์˜ ํ”„๋กœํผํ‹ฐ์— ๋Œ€ํ•ด ํ”„๋กœํผํ‹ฐ ๋””์Šคํฌ๋Ÿฝํ„ฐ ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜ํ•˜์ง€๋งŒ ES8์—์„œ ๋„์ž…๋œ Object.getOwnPropertyDescriptor ๋ฉ”์„œ๋“œ๋Š” ๋ชจ๋“  ํ”„๋กœํผํ‹ฐ์˜ ํ”„๋กœํผํ‹ฐ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜๋Š” ํ”„๋กœํผํ‹ฐ ๋””์Šคํฌ๋Ÿฝํ„ฐ ๊ฐ์ฒด๋“ค์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

โœ”๏ธ ๋ฐ์ดํ„ฐ ํ”„๋กœํผํ‹ฐ์™€ ์ ‘๊ทผ์ž ํ”„๋กœํผํ‹ฐ

  • ๋ฐ์ดํ„ฐ ํ”„๋กœํผํ‹ฐ
    ํ‚ค์™€ ๊ฐ’์œผ๋กœ ๊ตฌ์„ฑ๋œ ์ผ๋ฐ˜์ ์ธ ํ”„๋กœํผํ‹ฐ๋‹ค. ์ง–๊ธˆ๊นŒ์ง€ ์‚ดํŽด๋ณธ ๋ชจ๋“  ํ”„๋กœํผํ‹ฐ๋Š” ๋ฐ์ดํ„ฐ ํ”„๋กœํผํ‹ฐ๋‹ค.
  • ์ ‘๊ทผ์ž ํ”„๋กœํผํ‹ฐ
    ์ž์ฒด์ ์œผ๋กœ๋Š” ๊ฐ’์„ ๊ฐ–์ง€์•Š๊ณ  ๋‹ค๋ฅธ ๋ฐ์ดํ„ฐ ํ”„๋กœํผํ‹ฐ์˜ ๊ฐ’์„ ์ฝ๊ฑฐ๋‚˜ ์ €์žฅํ•  ๋–„ ํ˜ธ์ถœ๋˜๋Š” ์ ‘๊ทผ์ž ํ•จ์ˆ˜๋กœ ๊ตฌ์„ฑ๋œ ํ”„๋กœํผํ‹ฐ๋‹ค.

โšก๏ธ ๋ฐ์ดํ„ฐ ํ”„๋กœํผํ‹ฐ

๋ฐ์ดํ„ฐ ํ”„๋กœํผํ‹ฐ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํ”„๋กœํผํ‹ฐ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ๋ฅผ ๊ฐ–๋Š”๋‹ค. ์ด ํ”„๋กœํผํ‹ฐ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์ด ํ”„๋กœํผํ‹ฐ๋ฅผ ์ƒ์„ฑํ•  ๋•Œ ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ์ž๋™ ์ •์˜๋œ๋‹ค.

โšก๏ธ ์ ‘๊ทผ์ž ํ”„๋กœํผํ‹ฐ

์ ‘๊ทผ์ž ํ”„๋กœํผํ‹ฐ๋Š” ์ž์ฒด์ ์œผ๋กœ๋Š” ๊ฐ’์„ ๊ฐ–์ง€ ์•Š๊ณ  ๋‹ค๋ฅธ ๋ฐ์ดํ„ฐ ํ”„๋กœํผํ‹ฐ์˜ ๊ฐ’์„ ์ฝ๊ฑฐ๋‚˜ ์ €์žฅํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์ ‘๊ทผ์ž ํ•จ์ˆ˜๋กœ ๊ตฌ์„ฑ๋œ ํ”„๋กœํผํ‹ฐ๋‹ค.

์ ‘๊ทผ์ž ํ•จ์ˆ˜๋Š” getter/setter ํ•จ์ˆ˜๋ผ๊ณ ๋„ ๋ถ€๋ฅธ๋‹ค.

โšก๏ธํ”„๋กœํ† ํƒ€์ž…
ํ”„๋กœํ†  ํƒ€์ž…์€ ์–ด๋–ค ๊ฐ์ฒด์˜ ์ƒ์œ„(๋ถ€๋ชจ) ๊ฐ์ฒด์˜ ์—ญํ• ์„ ํ•˜๋Š” ๊ฐ์ฒด๋‹ค. ํ”„๋กœํ† ํƒ€์ž…์€ ํ•˜์œ„(์ž์‹) ๊ฐ์ฒด์—๊ฒŒ ์ž์‹ ์˜ ํ”„๋กœํผํ‹ฐ์™€ ๋ฉ”์„œ๋“œ๋ฅผ ์ƒ์†ํ•œ๋‹ค. ํ”„๋กœํ† ํƒ€์ž… ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๋‚˜ ๋ฉ”์„œ๋“œ๋ฅผ ์ƒ์†๋ฐ›์€ ํ•˜์œ„ ๊ฐ์ฒด๋Š” ์ž์‹ ์˜ ํ”„๋กœํผํ‹ฐ ๋˜๋Š” ๋ฉ”์„œ๋“œ์ธ ๊ฒƒ์ฒ˜๋Ÿผ ์ž์œ ๋กญ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

์ ‘๊ทผ์ž ํ”„๋กœํผํ‹ฐ์™€ ๋ฐ์ดํ„ฐ ํ”„๋กœํผํ‹ฐ๋ฅผ ๊ตฌ๋ณ„ํ•˜๋Š” ๋ฐฉ๋ฒ•

// ์ผ๋ฐ˜ ๊ฐ์ฒด์˜ __proto__์€ ์ ‘๊ทผ์ž ํ”„๋กœํผํ‹ฐ๋‹ค
Object.getOwnPropertyDescriptor(Object.prototype, `__proto__`)

// ํ•จ๊ตฌ ๊ฐ์ฒด์˜ prototype์€ ๋ฐ์ดํ„ฐ ํ”„๋กœํผํ‹ฐ๋‹ค
Object.getOwnPropertyDescriptor(function() {}, `prototype`)

โœ”๏ธ ํ”„๋กœํผํ‹ฐ๋ž€

์ƒˆ๋กœ์šด ํ”„๋กœํผํ‹ฐ๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด์„œ ํ”„๋กœํผํ‹ฐ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ๋ฅผ ๋ช…์‹œ์ ์œผ๋กœ ์ •์˜ํ•˜๊ฑฐ๋‚˜, ๊ธฐ์กด ํ”„๋กœํผํ‹ฐ์˜ ํ”„๋กœํผํ‹ฐ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ๋ฅผ ์žฌ์ •์˜ํ•˜๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค.
Object.defineProperty๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด ํ”„๋กœํผํ‹ฐ์˜ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ๋ฅผ ์ •์˜ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ธ์ˆ˜๋กœ๋Š” ๊ฐ์ฒด์˜ ์ฐธ์กฐ์™€ ๋ฐ์ดํ„ฐ ํ”„๋กœํผํ‹ฐ์˜ ํ‚ค์ธ ๋ฌธ์ž์—ด, ํ”„๋กœํผํ‹ฐ ๋””์Šคํฌ๋ฆฝํ„ฐ ๊ฐ์ฒด๋ฅผ ์ „๋‹ฌํ•œ๋‹ค.

โœ”๏ธ ๊ฐ์ฒด ๋ณ€๊ฒฝ ๋ฐฉ์ง€

๊ฐ์ฒด๋Š” ๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•œ ๊ฐ’์ด๋ฏ€๋กœ ์žฌํ• ๋‹น ์—†์ด ์ง์ ‘ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋‹ค. ์ฆ‰ ํ”„๋กœํผํ‹ฐ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜ ์‚ญ์ œํ•  ์ˆ˜ ์žˆ๊ณ , ํ”„๋กœํผํ‹ฐ ๊ฐ’์„ ๊ฐฑ์‹ ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, Object.defineProperty ๋˜๋Š” Object.defineProperties ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ”„๋กœํผํ‹ฐ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ๋ฅผ ์žฌ์ •์˜ํ•  ์ˆ˜๋„ ์žˆ๋‹ค.

โšก๏ธ ๊ฐ์ฒด ํ™•์žฅ ๊ธˆ์ง€

Object.preventExtensions ๋ฉ”์„œ๋“œ๋Š” ๊ฐ์ฒด์˜ ํ™•์žฅ์„ ๊ธˆ์ง€ํ•œ๋‹ค. ํ™•์žฅ์ด ๊ธˆ์ง€๋œ ๊ฐ์ฒด๋Š” ํ”„๋กœํผํ‹ฐ ์ถ”๊ฐ€๊ฐ€ ๊ธˆ์ง€๋œ๋‹ค.

โšก๏ธ ๊ฐ์ฒด ๋ฐ€๋ด‰

Object.seal ๋ฉ”์„œ๋“œ๋Š” ๊ฐ์ฒด๋ฅผ ๋ฐ€๋ด‰ํ•œ๋‹ค. ๋ฐ€๋ด‰๋œ ๊ฐ์ฒด๋Š” ์ฝ๊ธฐ์™€ ์“ฐ๊ธฐ๋งŒ ๊ฐ€๋Šฅํ•˜๋‹ค.

โšก๏ธ ๊ฐ์ฒด ๋™๊ฒฐ

object.freeze ๋ฉ”์„œ๋“œ๋Š” ๊ฐ์ฒด๋ฅผ ๋™๊ฒฐํ•œ๋‹ค. ๋™๊ฒฐ๋œ ๊ฐ์ฒด๋Š” ์ฝ๊ธฐ๋งŒ ๊ฐ€๋Šฅํ•˜๋‹ค.

โšก๏ธ ๋ถˆ๋ณ€ ๊ฐ์ฒด

์œ„์—์„œ ์‚ดํŽด๋ณธ ๋ณ€๊ฒฝ ๋ฐฉ์ง€ ๋ฉ”์„œ๋“œ๋“ค์€ ์–•์€ ๋ณ€๊ฒฝ ๋ฐฉ์ง€๋กœ ์ง์† ํ”„๋กœํผํ‹ฐ๋งŒ ๋ณ€๊ฒฝ์ด ๋ฐฉ์ง€๋˜๊ณ  ์ค‘์ฒฉ ๊ฐ์ฒด๊นŒ์ง€๋Š” ์˜ํ–ฅ์„ ์ฃผ์ง€๋Š” ๋ชปํ•œ๋‹ค.
๋”ฐ๋ผ์„œ ๊ฐ์ฒด์˜ ์ค‘์ฒฉ ๊ฐ์ฒด๊นŒ์ง€ ๋™๊ฒฐํ•˜์—ฌ ๋ณ€๊ฒฝ์ด ๋ถˆ๊ฐ€๋Šฅํ•œ ์ฝ๊ธฐ ์ „์šฉ์˜ ๋ถˆ๋ณ€ ๊ฐ์ฒด๋ฅผ ๊ตฌํ˜„ํ•˜๋ ค๋ฉด ๊ฐ์ฒด๋ฅผ ๊ฐ’์œผ๋กœ ๊ฐ–๋Š” ๋ชจ๋“  ํ”„๋กœํผํ‹ฐ์— ๋Œ€ํ•ด ์žฌ๊ท€์ ์œผ๋กœ Object.freeze ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•ด์•ผ ํ•œ๋‹ค.

profile
FrontEnd Developer

0๊ฐœ์˜ ๋Œ“๊ธ€