0Pricing
JavaScript Academy · 강의

안전한 객체 병합, 동결과 봉인

예상치 못한 결과 없이 객체를 병합하고 프로토타입 오염을 피하며 Object.freeze와 Object.seal로 데이터를 보호합니다.

안전한 객체 병합, 동결과 봉인은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 3개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

안전한 병합이 필요한 이유

목표: 안전하게 병합하고 상태를 보호합니다.

  • 전개 구문 또는 Object.assign으로 얕게 병합하기
  • 키를 필터링하여 프로토타입 오염 방지하기
  • 안전한 대상에는 Object.create(null) 사용하기
  • 객체를 잠그려면 freeze와 seal 사용하기
안전한 객체 병합, 동결과 봉인 — 일러스트레이션 1

얕은 병합(전개 구문)

새 객체를 만들 때 전개 구문(또는 Object.assign({}, a, b))을 사용하고 입력을 변경하지 마십시오.

// Shallow merge with spread keeps sources unchanged
const a = { x: 1, y: 2 };
const b = { y: 9, z: 3 };

// Later keys win on conflicts
const merged1 = { ...a, ...b };

console.log("a:", a);
console.log("b:", b);
console.log("merged1:", merged1);
안전한 객체 병합, 동결과 봉인 — 일러스트레이션 2

프로토타입 오염 방지

키가 외부에서 들어오는 경우 작은 허용 목록/거부 목록을 작성하고, 대상으로 Object.create(null)을 사용하십시오.

// Avoid prototype pollution: use a null-prototype target and skip special keys
function safeMergeUntrusted(pairs) {
  // target has no prototype
  const out = Object.create(null);

  // keys to skip
  const BLOCK = new Set(["__proto__", "prototype", "constructor"]);

  for (const [k, v] of pairs) {
    if (typeof k !== "string") continue;
    if (BLOCK.has(k)) continue;
    out[k] = v;
  }
  return out;
}

const inputPairs = [
  ["name", "Ayla"],
  ["__proto__", { hacked: true }],
  ["role", "user"]
];

const safe = safeMergeUntrusted(inputPairs);

console.log("safe.name:", safe.name);
console.log("safe.role:", safe.role);
console.log("safe.__proto__ is undefined?", safe.__proto__ === undefined);
안전한 객체 병합, 동결과 봉인 — 일러스트레이션 3

복제 + 할당

Object.assign({}, ...)은 초보자도 쉽게 읽을 수 있는 안전한 패턴입니다.

// Object.assign can also create a new object
const base = { a: 1, b: 2 };
const patch = { b: 5 };

// New object as first arg → sources untouched
const merged2 = Object.assign({}, base, patch);

console.log("base:", base);
console.log("patch:", patch);
console.log("merged2:", merged2);
안전한 객체 병합, 동결과 봉인 — 일러스트레이션 4

freeze와 seal 비교

freeze는 모든 변경을 막고, seal은 추가와 삭제를 막지만 기존 속성의 업데이트는 허용합니다.

// Freeze: no add/remove/change
const frozen = Object.freeze({ id: 1, tag: "locked" });
// Seal: no add/remove, but you may change existing values
const sealed = Object.seal({ id: 2, tag: "open" });

// Attempts (silently fail in non-strict mode)
frozen.tag = "new";
sealed.tag = "updated";
sealed.newKey = 123;

console.log("frozen:", frozen);
console.log("sealed:", sealed);
안전한 객체 병합, 동결과 봉인 — 일러스트레이션 5

안전한 병합 습관

팁:

  • 새 객체를 우선 사용하십시오: {...a, ...b} 또는 Object.assign({}, a, b).
  • 신뢰할 수 없는 키에는 Object.create(null)을 사용하고 __proto__, prototype, constructor를 건너뛰십시오.
  • Object.freeze로 구성을 보호하고, Object.seal로 모델을 보호하십시오.
안전한 객체 병합, 동결과 봉인 — 일러스트레이션 6

프로토타입 오염 기초 퀴즈

빠른 확인: 신뢰할 수 없는 병합에 가장 안전한 대상입니다.

안전한 객체 병합, 동결과 봉인 — 일러스트레이션 7

복습

복습: 새 객체를 만들어 병합하고, 신뢰할 수 없는 키를 필터링하며, freeze/seal로 중요한 데이터 구조를 보호하십시오.

안전한 객체 병합, 동결과 봉인 — 일러스트레이션 8

자주 묻는 질문

“안전한 객체 병합, 동결과 봉인” 강의는 무료인가요?

네 — “안전한 객체 병합, 동결과 봉인” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

“안전한 객체 병합, 동결과 봉인”에서 뭘 배우나요?

예상치 못한 결과 없이 객체를 병합하고 프로토타입 오염을 피하며 Object.freeze와 Object.seal로 데이터를 보호합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 2번째 강의입니다.

“안전한 객체 병합, 동결과 봉인” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 입력 검증과 이스케이프 기초
  2. 안전한 객체 병합, 동결과 봉인
  3. 프레임워크 없이 오류 경계 이해하기
← JavaScript Academy(으)로 돌아가기