티스토리 뷰
반응형
✅ 압박면접 대응 시리즈 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,면접준비,커리어성장
'AI + Career' 카테고리의 다른 글
| ✅ 압박면접 대응 시리즈 3편: ES6+ 주요 기능 (Arrow Function, Promise, Async/Await) (0) | 2025.08.29 |
|---|---|
| ✅ 압박면접 대응 시리즈 2편: 자바스크립트 클로저(Closure)와 실무 활용 (0) | 2025.08.28 |
| ✅ 1분 / 3분 / 5분 자기소개 스크립트 (Fullstack Developer 버전) (0) | 2025.08.26 |
| ✅ 자기소개 (Fullstack Developer 버전) (0) | 2025.08.25 |
| ✅ 본인이 선호하는 개발 환경, 도구 및 이유는? (0) | 2025.08.22 |
※ 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 웹개발
- DevOps
- llm
- nextJS
- LangChain
- SEO최적화
- Express
- fastapi
- 쿠버네티스
- JWT
- Next.js
- Redis
- NestJS
- Prisma
- JAX
- flax
- 생성형AI
- PostgreSQL
- kotlin
- seo 최적화 10개
- Docker
- 딥러닝
- rag
- 백엔드개발
- CI/CD
- ai철학
- node.js
- Python
- REACT
- 개발블로그
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
글 보관함
반응형

