티스토리 뷰

반응형

✅ 압박면접 대응 시리즈 1편: 자바스크립트 원시 타입 vs 참조 타입 (면접관이 날카롭게 물을 때)

압박면접 스타일의 면접관은 단순히 **“알고 있나요?”**가 아니라,
**“정확히 이해했는지, 실무에서 어떻게 다뤘는지”**를 집요하게 파고듭니다.

이번 글은 가장 기초적이지만 압박질문으로 자주 나오는
JavaScript의 원시 타입과 참조 타입 차이에 대한 정리입니다.


📌 1. 기본 개념

✅ 원시 타입 (Primitive Types)

  • 값 자체가 메모리에 저장됨
  • 변경 불가능(immutable)
  • 변수에 할당할 때 값이 복사됨

종류:

  • string, number, boolean, null, undefined, symbol, bigint

✅ 참조 타입 (Reference Types)

  • 메모리에 값이 직접 저장되지 않고, **참조(주소)**가 저장됨
  • 변경 가능(mutable)
  • 변수에 할당할 때 주소가 복사되어 같은 객체를 가리킴

종류:

  • object, array, function, date, map, set 등

📌 2. 압박면접 예상 질문 & 답변 포인트

❓ Q1. 원시 타입과 참조 타입의 가장 큰 차이는 무엇인가요?

  • 답변:
    원시 타입은 변수에 값 자체가 저장되고, 참조 타입은 메모리 주소가 저장됩니다.
    따라서 원시 타입은 복사 시 값이 새로 생기지만, 참조 타입은 같은 객체를 가리켜 하나를 변경하면 다른 변수에도 영향을 줍니다.

❓ Q2. 얕은 복사와 깊은 복사의 차이는요?

반응형
  • 답변:
    얕은 복사(Shallow Copy)는 1단계 프로퍼티까지만 복사하고 내부 객체는 참조를 공유합니다.
    깊은 복사(Deep Copy)는 내부 객체까지 새로운 메모리에 할당합니다.
// 얕은 복사
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { ...obj1 };
obj2.b.c = 99;
console.log(obj1.b.c); // 99 (같은 참조)

// 깊은 복사
const obj3 = JSON.parse(JSON.stringify(obj1));
obj3.b.c = 77;
console.log(obj1.b.c); // 99 (영향 없음)

❓ Q3. 실제로 이 차이 때문에 문제가 된 경험이 있나요?

  • 답변 예시 (실무 경험):
    API 응답 객체를 여러 컴포넌트에서 공유하다가, 한 쪽에서 상태를 직접 변경해서 다른 컴포넌트에도 사이드 이펙트가 발생했습니다.
    원인은 참조 타입을 얕게 복사한 것이었고, 이후 immer 라이브러리를 도입하거나 structuredClone을 활용해 안전하게 깊은 복사를 적용했습니다.

📌 3. 커리어 성장 포인트로 연결하기

압박면접에서는 단순 개념이 아니라
**“이 개념을 실제로 어떻게 활용했는지”**를 보여주는 게 중요합니다.

  • “원시/참조 타입 차이를 몰라서 사이드 이펙트가 발생했는데, 이후 팀 내 코딩 컨벤션에 깊은 복사 가이드라인을 추가했습니다.”
  • “Redux 상태 관리에서 참조 타입 불변성을 유지하기 위해 immer를 도입했습니다.”

👉 이렇게 말하면 단순 개념 암기에서 팀에 기여하는 개발자로 어필할 수 있습니다.


📌 4. 면접장에서 활용할 한 줄 정리

“원시 타입은 값 자체를, 참조 타입은 메모리 주소를 다룹니다.
실무에서는 얕은 복사 때문에 사이드 이펙트가 생긴 경험이 있어,
이후 깊은 복사나 불변성 유지를 통해 문제를 해결했습니다.”



압박면접,JavaScript,원시타입,참조타입,얕은복사,깊은복사,불변성,Redux,면접준비,커리어성장


 

※ 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2026/04   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
글 보관함
반응형