์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

์ƒํ™œ์ฝ”๋”ฉ - JavaScript Immutability

์ƒํ™œ์ฝ”๋”ฉ์—์„œ ์ œ๊ณตํ•˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ด€๋ จ ๊ฐ•์˜๋กœ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋ณ€ํ•˜๊ฒŒ ๋‹ค๋ฃจ๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ์ˆ˜์—…์ž…๋‹ˆ๋‹ค.

Thumbnail

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[์›น ๊ฐœ๋ฐœ, ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋ณ€ํ•˜๊ฒŒ ๋‹ค๋ฃจ๋Š” ๋ฐฉ๋ฒ•

  • ์›์‹œ ๋ฐ์ดํ„ฐ ํƒ€์ž…๊ณผ ๊ฐ์ฒด์˜ ๋™์ž‘๋ฐฉ๋ฒ• ๊ฐ„์˜ ์ฐจ์ด

  • ๊ฐ์ฒด๋ฅผ ๋ณต์ œํ•˜๋Š” ๋ฐฉ๋ฒ•

  • ์›๋ณธ ๊ฐ์ฒด๋ฅผ ์ˆ˜์ •ํ•˜์ง€ ์•Š๊ณ  ๋ณต์ œ๋ณธ์„ ์ˆ˜์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•

1. ๊ฐ•์˜ ์†Œ๊ฐœ

์ƒํ™œ์ฝ”๋”ฉ์˜ JavaScript Immutability ์ˆ˜์—…์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋ณ€ํ•˜๊ฒŒ ๋‹ค๋ฃจ๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. JavaScript ๊ธฐ๋ณธ ๋ฌธ๋ฒ•์„ ์•Œ๊ณ  ์žˆ๋Š” ํ•™์Šต์ž๋ฅผ ๋Œ€์ƒ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋ณ€ํ•˜๊ฒŒ ํ•˜์—ฌ ์›๋ณธ์ด ํ›ผ์†๋˜๋Š” ๊ฒƒ์„ ๋ง‰๋Š” ๋ฐฉ๋ฒ•์„ ์‚ดํŽด๋ด…๋‹ˆ๋‹ค.

์ด ๊ฐ•์˜๋Š” ์•„๋ž˜์™€ ๊ฐ™์€ ๋‚ด์šฉ์„ ๋‹ค๋ฃจ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. 

  • ์›์‹œ ๋ฐ์ดํ„ฐ ํƒ€์ž…๊ณผ ๊ฐ์ฒด์˜ ๋™์ž‘๋ฐฉ๋ฒ• ๊ฐ„์˜ ์ฐจ์ด
  • ๊ฐ์ฒด๋ฅผ ๋ณต์ œํ•˜๋Š” ๋ฐฉ๋ฒ•
  • ์›๋ณธ ๊ฐ์ฒด๋ฅผ ์ˆ˜์ •ํ•˜์ง€ ์•Š๊ณ  ๋ณต์ œ๋ณธ์„ ์ˆ˜์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•

์•„๋ž˜ ๋‚ด์šฉ์€ ๋‹ค๋ฃจ๊ณ  ์žˆ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. 

  • ๋ถˆ๋ณ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

2. ๊ฐ•์˜ ๋Œ€์ƒ

๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋ณ€ํ•˜๊ฒŒ ๋‹ค๋ฃจ๋ฉด ๋ฐ์ดํ„ฐ๋“ค๊ฐ„์˜ ๊ฐ„์„ญ์œผ๋กœ ์ธํ•œ ๋ฒ„๊ทธ์˜ ๊ฐ€๋Šฅ์„ฑ์„ ํš๊ธฐ์ ์œผ๋กœ ๋‚ฎ์ถœ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ€๊ฒฝ ๋˜์—ˆ๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ๋งค์šฐ ์‰ฝ๊ฒŒ ์ฒดํฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ์™ธ์— Hot module reloading, time travel๊ณผ ๊ฐ™์€ ๊ณ ๊ธ‰ ๊ธฐ๋ฒ•์„ ๊ตฌํ˜„ํ•˜๋Š”๋ฐ ๊ธฐ์ดˆ๊ฐ€ ๋˜๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. 

์•„๋ž˜ ์ฝ”๋“œ์˜ ๊ฒฐ๊ณผ๋ฅผ ๋ชจ๋‘ ์˜ˆ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค๋ฉด ์ด ์ˆ˜์—…์€ ๋“ฃ์ง€ ์•Š์•„๋„ ๋ฉ๋‹ˆ๋‹ค.

var n1 = 1;
var n2 = 1;
console.log(n1 === n2);
=> true์ž…๋‹ˆ๋‹ค. ๋‹น์—ฐํ•ฉ๋‹ˆ๋‹ค.

var o1 = {name:'kim'}
var o2 = {name:'kim'}
console.log(o1 === o2);
=> false ์ž…๋‹ˆ๋‹ค. ์กฐ๊ธˆ ์• ๋งคํ•˜์ฃ . JavaScript๋Š” ๊ฐ’์ด ๋ฐ”๋€Œ์ง€ ์•Š๋Š” ์›์‹œ ๋ฐ์ดํ„ฐ ํƒ€์ž…๊ณผ ๊ฐ’์ด ๋ฐ”๋€” ์ˆ˜ ์žˆ๋Š” ๊ฐ์ฒด๋ฅผ ๋‹ค๋ฅด๊ฒŒ ์ทจ๊ธ‰ํ•ฉ๋‹ˆ๋‹ค.

var o1 = {name:'kim'}
var o2 = o1;
o2.name = 'lee';
console.log(o1.name);
=> lee ์ž…๋‹ˆ๋‹ค. o1์€ ์˜๋ฌธ๋„ ๋ชจ๋ฅด๊ณ  ์ž์‹ ์ด ๊ฐ€๋ฅดํ‚ค๊ณ  ์žˆ๋Š” name์˜ ๊ฐ’์ด ๋ฐ”๋€Œ์–ด ๋ฒ„๋ ธ์Šต๋‹ˆ๋‹ค.

var o1 = {name:'kim'}
var o2 = Object.assign({}, o1); // ๋นˆ ๊ฐ์ฒด์— o1์„ ๋ณต์‚ฌํ•ฉ๋‹ˆ๋‹ค.
o2.name = 'lee';
console.log(o1.name);
=> kim์ž…๋‹ˆ๋‹ค. o2๋ฅผ ๋ณ€๊ฒฝํ•ด๋„ o1์ด ์˜ํ–ฅ์„ ๋ฐ›์ง€ ์•Š์Šต๋‹ˆ๋‹ค. o2์— ๋Œ€ํ•ด์„œ o1์€ ๋ถˆ๋ณ€ํ•œ ์ƒํƒœ๋ฅผ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

var o1 = {score:[1,2]}
var o2 = Object.assign({}, o1);
o2.score.push(3);
console.log(o1.score)
=> [1,2,3] ์ž…๋‹ˆ๋‹ค. ์˜๋ฌธ๋„ ๋ชจ๋ฅด๊ณ  o1์ด ๋˜ ๋ฐ”๋€Œ์—ˆ์Šต๋‹ˆ๋‹ค. score๋Š” ๊ฐ์ฒด์˜ ์ผ์ข…์ธ ๋ฐฐ์—ด์ด๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

var o1 = {score:[1,2]}
var o2 = Object.assign({}, o1);
o2.score = o2.score.concat(); // ๋ฐฐ์—ด์„ ๋ณต์‚ฌํ•ฉ๋‹ˆ๋‹ค.
o2.score.push(3);
console.log(o1.score)
=> [1,2] ์ž…๋‹ˆ๋‹ค.

๋‹ค๋ฅธ ๋ฐฉ๋ฒ•๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ชฝ๋•… ๋‹ค ๋ณต์‚ฌ๋ฅผ ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.
var o1 = {score:[1,2]}
var o2 = JSON.parse(JSON.stringify(o1));
o2.score.push(3);
console.log(o1.score)
=> [1,2] ์ž…๋‹ˆ๋‹ค.

์›๋ณธ์ด ๋ฐ”๋€Œ์ง€ ์•Š๊ฒŒ ์กฐ์‹ฌํ•˜๋Š” ๊ฒƒ๋„ ์ข‹์ง€๋งŒ, ์›๋ณธ์ด ์•„์˜ˆ ์•ˆ ๋ฐ”๋€Œ๊ฒŒ ํ•˜๋Š” ๊ฒƒ๋„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
var o1 = {name:'kim'}
Object.freeze(o1);
o1.name = 'lee';
console.log(o1.name);
=> 'kim' ์ž…๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ ๊ฐ์ฒด๋Š” ์ด๊ฒŒ ์•ˆ๋ฉ๋‹ˆ๋‹ค.
var o1 = {score:[1,2]}
Object.freeze(o1);
o1.score.push(3);
console.log(o1.score);
// [1,2,3] ์ž…๋‹ˆ๋‹ค.

๋ฐฉ์–ด์ ์œผ๋กœ ๋ƒ‰๋™์„ ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
var o1 = {score:[1,2]}
Object.freeze(o1);
Object.freeze(o1.score);
o1.score.push(3);
console.log(o1.score);
// ๋ณ€๊ฒฝ์ด ์•ˆ๋ฉ๋‹ˆ๋‹ค. ์‹ฌ์ง€์–ด ํ•ญ์˜์„ฑ ์—๋Ÿฌ๋ฅผ ๋ฐœ์ƒ์‹œ์ผœ๋ฒ„๋ฆฝ๋‹ˆ๋‹ค.

3. ๊ฐ•์˜ ์ฐธ์—ฌ ์กฐ๊ฑด

์ด ๊ฐ•์˜๋ฅผ ๋“ฃ๊ธฐ ์œ„ํ•ด์„œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์€ ์„ ํ–‰ ์ง€์‹์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.
(๋‘˜ ์ค‘์— ํ•˜๋‚˜๋ฅผ ๊ณต๋ถ€ํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.)

4. ์ „์ฒด ์žฌ์ƒ์‹œ๊ฐ„

์ด 12๊ฐœ์˜ ์˜์ƒ์œผ๋กœ ์ด๋ฃจ์–ด์ง„ 1์‹œ๊ฐ„ ๋ถ„๋Ÿ‰์˜ ์ˆ˜์—…์ž…๋‹ˆ๋‹ค. 

5. ์ˆ˜์—… ์ €์ž‘๊ถŒ

์ด ๊ฐ•์˜๋Š” CC ๋ผ์ด์„ผ์Šค๋ฅผ ๋”ฐ๋ฅด๊ณ  ์žˆ์œผ๋ฉฐ, ์•„๋ž˜ ๋งํฌ์—์„œ๋„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
https://opentutorials.org/module/4075 ์ข‹์€ ์ง€์‹์„ ๊ณต์œ ํ•ด์ฃผ์‹œ๋Š” ์ƒํ™œ์ฝ”๋”ฉ์— ๊ฐ์‚ฌ์˜ ๋ง์”€์„ ์ „ํ•ฉ๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋ณ€ํ•˜๊ฒŒ ๋‹ค๋ค„ ๋ฒ„๊ทธ์˜ ๊ฐ€๋Šฅ์„ฑ์„ ๋‚ฎ์ถ”๊ณ  ์‹ถ์€ ๋ถ„

  • ๊ณ ๊ธ‰ JS ๊ธฐ๋ฒ•์„ ๊ตฌํ˜„ํ•˜๋Š” ๊ธฐ์ดˆ๋ฅผ ์Œ“๊ณ  ์‹ถ์€ ๋ถ„

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • JavaScript

  • NodeJS(์„ ํƒ)

์•ˆ๋…•ํ•˜์„ธ์š”
Egoing Lee์ž…๋‹ˆ๋‹ค.

297,439

๋ช…

์ˆ˜๊ฐ•์ƒ

7,597

๊ฐœ

์ˆ˜๊ฐ•ํ‰

1

๊ฐœ

๋‹ต๋ณ€

4.9

์ 

๊ฐ•์˜ ํ‰์ 

44

๊ฐœ

๊ฐ•์˜

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

93๊ฐœ

4.9

93๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

  • ๊น€๊ธฐํ˜ธ

    โˆ™

    ์ˆ˜๊ฐ•ํ‰ 5

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    33% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    ์ด๊ฒƒ์€ ํฌ๋ง์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค!

    • ์žฅ๋ณ‘ํ›ˆ

      โˆ™

      ์ˆ˜๊ฐ•ํ‰ 1

      โˆ™

      ํ‰๊ท  ํ‰์  5.0

      5

      100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

      ์ด๊ณ ์ž‰ ๋‹น์‹ ์€...

      • hello_hi

        โˆ™

        ์ˆ˜๊ฐ•ํ‰ 1

        โˆ™

        ํ‰๊ท  ํ‰์  5.0

        5

        100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

        • ์ง€ํ˜„์Šน

          โˆ™

          ์ˆ˜๊ฐ•ํ‰ 2

          โˆ™

          ํ‰๊ท  ํ‰์  5.0

          5

          100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

          ์ƒํ™œ์ฝ”๋”ฉ ์ตœ๊ณ ์ž…๋‹ˆ๋‹ค.

          • ์ตœ์˜์›

            โˆ™

            ์ˆ˜๊ฐ•ํ‰ 1

            โˆ™

            ํ‰๊ท  ํ‰์  5.0

            5

            100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

            ์žฌ๋ฏธ์žˆ๋Š” ํ•™์Šต์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค

            Egoing Lee๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜

            ์ง€์‹๊ณต์œ ์ž๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

            ๋น„์Šทํ•œ ๊ฐ•์˜

            ๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

            ๋ฌด๋ฃŒ