Question 1

클로저(Closure)란 무엇인가요?

Accepted Answer

클로저는 함수가 선언될 때의 렉시컬 환경(Lexical Environment)을 기억하여, 함수가 자신의 스코프 밖에서 실행되더라도 그 환경에 접근할 수 있는 기능입니다.

```javascript
function createCounter() {
  let count = 0; // 외부 함수의 변수

return {
    increment: () => ++count,
    getCount: () => count,
  };
}

const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
counter.getCount();  // 2
// count 변수는 직접 접근 불가 → 데이터 은닉
```

- **데이터 은닉**: private 변수를 만들 수 있습니다.
- **상태 유지**: 함수 호출 간에 상태를 유지합니다.
- **주의점**: 클로저가 참조하는 변수는 GC되지 않으므로 메모리

Question 2

Promise와 async/await의 차이점을 설명해주세요.

Accepted Answer

Promise는 비동기 작업의 결과를 나타내는 객체이고, async/await는 Promise를 더 직관적으로 사용하는 문법적 설탕(syntactic sugar)입니다.

```javascript
// Promise 체이닝
function fetchData() {
  return fetch('/api/data')
    .then(res => res.json())
    .then(data => {
      console.log(data);
      return data;
    })
    .catch(err => console.error(err));
}

// async/await (동일한 동작)
async function fetchData() {
  try {
    const res = await fetch('/api/data');
    const data = await res.json();
    console.log(data);
    return data;
  }

Question 3

이벤트 루프(Event Loop)의 동작 원리를 설명해주세요.

Accepted Answer

이벤트 루프는 JavaScript의 단일 스레드 환경에서 비동기 작업을 처리하는 메커니즘입니다.

**실행 순서:**
1. **Call Stack**: 동기 코드가 실행되는 곳
2. **Microtask Queue**: Promise, MutationObserver (우선 실행)
3. **Macrotask Queue**: setTimeout, setInterval, I/O

```javascript
console.log('1'); // 동기

setTimeout(() => console.log('2'), 0); // Macrotask

Promise.resolve().then(() => console.log('3')); // Microtask

console.log('4'); // 동기

// 출력 순서: 1, 4, 3, 2
```

- Call Stack이 비면 Microtask Queue를 먼저 모두 처리합니다.
- Microtask가 모두 처리된 후 Macrotask를 하나 실

Question 4

JavaScript에서 this는 어떻게 결정되나요?

Accepted Answer

`this`는 함수가 **호출되는 방식**에 따라 동적으로 결정됩니다.

```javascript
// 1. 일반 함수 호출 → window(전역) 또는 undefined(strict)
function show() { console.log(this); }
show(); // window (non-strict)

// 2. 메서드 호출 → 해당 객체
const obj = { name: 'Kim', show() { console.log(this.name); } };
obj.show(); // 'Kim'

// 3. 생성자 호출 → 새 인스턴스
function User(name) { this.name = name; }
const user = new User('Lee'); // this → user 인스턴스

// 4. call/apply/bind → 명시적 바인딩
show.call({ name: 'Park' }); // this → { name: 'Park' }

// 5. 화살표 함수

Question 5

프로토타입(Prototype)과 프로토타입 체인을 설명해주세요.

Accepted Answer

JavaScript는 프로토타입 기반 언어로, 객체는 다른 객체를 프로토타입으로 참조하여 속성과 메서드를 상속받습니다.

```javascript
function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  return \`안녕하세요, \${this.name}입니다.\`;
};

const kim = new Person('Kim');
kim.greet(); // '안녕하세요, Kim입니다.'

// 프로토타입 체인
// kim → Person.prototype → Object.prototype → null
console.log(kim.hasOwnProperty('name')); // true
// hasOwnProperty는 Object.prototype에서 찾음
```

- 객체에서 속성을 찾을 때 자신 → 프로토타입 → 프로토타입의 프로토타입 순으로 탐색합니다.
- `__proto__`

Question 6

깊은 복사(Deep Copy)와 얕은 복사(Shallow Copy)의 차이점은?

Accepted Answer

**얕은 복사(Shallow Copy):**
1단계 프로퍼티만 복사합니다. 중첩 객체는 참조를 공유합니다.
```js
const original = { a: 1, nested: { b: 2 } };
const shallow = { ...original };
shallow.nested.b = 99;
console.log(original.nested.b); // 99 — 참조 공유!
```
- 방법: `{ ...obj }`, `Object.assign()`, `Array.prototype.slice()`

**깊은 복사(Deep Copy):**
모든 단계의 프로퍼티를 새로 생성합니다. 완전히 독립된 복사본입니다.
```js
const original = { a: 1, nested: { b: 2 } };
const deep = structuredClone(original);
deep.nested.b = 99;
console.log(original.nested.b); // 2 — 독립!
`

Question 7

ES Modules과 CommonJS의 차이점은?

Accepted Answer

**CommonJS (CJS):**
```js
// 내보내기
module.exports = { add };
// 가져오기
const { add } = require('./math');
```
- Node.js의 기본 모듈 시스템
- **동기적** 로딩 (런타임에 실행)
- `require()`는 어디서든 호출 가능 (조건부 로딩 가능)

**ES Modules (ESM):**
```js
// 내보내기
export function add(a, b) { return a + b; }
// 가져오기
import { add } from './math.js';
```
- ECMAScript 표준 모듈 시스템
- **비동기적** 로딩 가능
- `import`/`export`는 반드시 최상위에 위치

**핵심 차이:**
| | CommonJS | ES Modules |
|---|---|---|
| 로딩 시점 | 런타임 (동기) | 파싱 시점 (정적 분석) |
| Tree Shaking | 불가 |

Question 8

WeakMap과 WeakSet은 무엇이고 언제 사용하나요?

Accepted Answer

**WeakMap**과 **WeakSet**은 키(WeakMap) 또는 값(WeakSet)이 **약한 참조(weak reference)**로 유지되어 가비지 컬렉션을 방해하지 않는 컬렉션입니다.

**WeakMap:**
```js
const cache = new WeakMap();
function process(obj) {
  if (cache.has(obj)) return cache.get(obj);
  const result = /* 무거운 계산 */;
  cache.set(obj, result);
  return result;
}
// obj에 대한 다른 참조가 사라지면 캐시 항목도 자동 정리
```

**Map과의 차이:**
| | Map | WeakMap |
|---|---|---|
| 키 타입 | 아무 값 | 객체만 |
| 열거 | 가능 (size, forEach) | 불가 |
| GC | 키 참조 유지 → 메모리 누수 가능 | 키가 GC 대상이면 자동 제거 |

**We

Question 9

AbortController를 이용한 요청 취소 패턴을 설명해주세요.

Accepted Answer

AbortController는 진행 중인 비동기 작업을 취소할 수 있는 웹 API입니다.

**기본 사용법:**
```javascript
const controller = new AbortController();
fetch('/api/data', { signal: controller.signal })
  .catch(err => {
    if (err.name === 'AbortError') console.log('요청 취소됨');
  });
setTimeout(() => controller.abort(), 3000);
```

**React에서의 활용:**
```javascript
useEffect(() => {
  const controller = new AbortController();
  async function fetchData() {
    try {
      const res = await fetch(`/api/search?q=${query}`, {

Question 10

JavaScript 에러 핸들링 패턴과 커스텀 에러 클래스를 설명해주세요.

Accepted Answer

체계적인 에러 핸들링은 안정적인 애플리케이션의 핵심입니다.

**커스텀 에러 클래스:**
```javascript
class AppError extends Error {
  constructor(message, statusCode, code) {
    super(message);
    this.name = 'AppError';
    this.statusCode = statusCode;
    this.code = code;
  }
}
class NotFoundError extends AppError {
  constructor(resource) {
    super(`${resource}을(를) 찾을 수 없습니다`, 404, 'NOT_FOUND');
  }
}
```

**에러 핸들링 패턴:**
```javascript
// 1. try-catch
try {
  await fetchData();
} catch (err) {
  if (err instanceof NotFoundE

JavaScript

01클로저(Closure)란 무엇인가요?보통스코프/클로저

02Promise와 async/await의 차이점을 설명해주세요.보통비동기

03이벤트 루프(Event Loop)의 동작 원리를 설명해주세요.보통이벤트

04JavaScript에서 this는 어떻게 결정되나요?보통this

05프로토타입(Prototype)과 프로토타입 체인을 설명해주세요.보통프로토타입

06깊은 복사(Deep Copy)와 얕은 복사(Shallow Copy)의 차이점은?보통객체

07ES Modules과 CommonJS의 차이점은?보통모듈

08WeakMap과 WeakSet은 무엇이고 언제 사용하나요?보통메모리

09AbortController를 이용한 요청 취소 패턴을 설명해주세요.보통비동기

10JavaScript 에러 핸들링 패턴과 커스텀 에러 클래스를 설명해주세요.보통에러 처리