Question 1

프로세스와 스레드의 차이점은 무엇인가요?

Accepted Answer

프로세스는 실행 중인 프로그램, 스레드는 프로세스 내의 실행 흐름 단위입니다.

| 특성 | 프로세스 | 스레드 |
|------|---------|--------|
| 메모리 | 독립된 메모리 공간 | 메모리 공유 |
| 생성 비용 | 높음 | 낮음 |
| 통신 | IPC (파이프, 소켓 등) | 공유 메모리 |
| 안정성 | 독립적 (하나 죽어도 다른 것에 영향 없음) | 하나 죽으면 전체 영향 |

**웹 브라우저 관점:**
- 각 탭은 별도 프로세스 (크래시 격리)
- JavaScript는 싱글 스레드 (이벤트 루프로 비동기 처리)
- Web Worker로 백그라운드 스레드 사용 가능

```javascript
// Web Worker - 별도 스레드에서 실행
const worker = new Worker('worker.js');
worker.postMessage({ data: heavyData });
worker.onmessage = (e) => console.log(e.d

Question 2

가비지 컬렉션(Garbage Collection)이란 무엇인가요?

Accepted Answer

가비지 컬렉션(GC)은 사용되지 않는 메모리를 자동으로 해제하는 메커니즘입니다.

**JavaScript의 GC 알고리즘:**

1. **참조 카운팅**: 참조 수가 0이면 해제 (순환 참조 문제)
2. **Mark-and-Sweep** (현재 사용): 루트에서 도달 불가능한 객체를 해제

```javascript
// 메모리 누수 사례
// 1. 해제되지 않는 이벤트 리스너
element.addEventListener('click', handler);
// element가 제거되어도 handler가 참조 유지 → 메모리 누수

// 2. 클로저에 의한 참조 유지
function createLeak() {
  const largeData = new Array(1000000);
  return () => console.log(largeData.length);
  // largeData가 클로저에 의해 유지됨
}

// 3. React에서의 메모리 누수 방지
useEffect(() =>

Question 3

콜 스택(Call Stack)과 힙(Heap) 메모리를 설명해주세요.

Accepted Answer

JavaScript 엔진의 메모리는 크게 **콜 스택**과 **힙**으로 나뉩니다.

**콜 스택 (Call Stack):**
함수 호출을 추적하는 LIFO(후입선출) 자료구조입니다.
```js
function a() { b(); }
function b() { c(); }
function c() { console.log('hello'); }
a();

// 콜 스택 변화:
// [a] → [a, b] → [a, b, c] → [a, b] → [a] → []
```
- 원시 타입(number, string, boolean) 값이 저장됨
- 함수 실행 컨텍스트(매개변수, 지역 변수) 저장
- 크기 제한 있음 → 스택 오버플로 가능 (무한 재귀)

**힙 (Heap):**
객체, 배열, 함수 등 참조 타입이 저장되는 비정형 메모리 영역입니다.
```js
const obj = { name: 'Kim' };
// 스택: obj → 힙 주소(참조)
// 힙: { name: 'Kim' } 실제

Question 4

캐시 메모리의 동작 원리와 프론트엔드 캐싱과의 연관성은?

Accepted Answer

캐시 메모리는 CPU와 메인 메모리 사이에서 **자주 사용되는 데이터를 빠르게 제공**하는 소형 고속 메모리입니다.

**캐시 계층:**
- L1 캐시: 가장 빠름, 가장 작음 (32~64KB), CPU 코어별
- L2 캐시: 중간 (256KB~1MB), CPU 코어별
- L3 캐시: 가장 큼 (수 MB~수십 MB), 코어 공유

**캐시 동작 원리:**
- **Temporal Locality**: 최근 접근한 데이터는 다시 접근될 가능성 높음
- **Spatial Locality**: 인접한 메모리 주소의 데이터도 함께 캐시

**프론트엔드 캐싱과의 공통 원리:**

| CPU 캐시 | 프론트엔드 캐시 |
|----------|----------------|
| L1/L2/L3 계층 | 메모리 > 디스크 > CDN > 서버 |
| Cache Hit/Miss | Cache-Control hit/miss |
| LRU 교체 정책 | LRU 기반 캐시 무효화 |
| Temporal Lo

Question 5

동시성(Concurrency)과 병렬성(Parallelism)의 차이점은?

Accepted Answer

**동시성(Concurrency):**
여러 작업을 **논리적으로 동시에** 다루는 것입니다. 실제로는 하나의 실행 단위가 작업 간 전환하며 처리합니다.
```
[작업 A ■■□□■■]
[작업 B □□■■□□]  ← 하나의 코어에서 번갈아 실행
```

**병렬성(Parallelism):**
여러 작업을 **물리적으로 동시에** 실행하는 것입니다. 여러 CPU 코어가 각각 작업을 처리합니다.
```
[코어 1: 작업 A ■■■■■■]
[코어 2: 작업 B ■■■■■■]  ← 실제로 동시 실행
```

**JavaScript에서의 적용:**

**동시성 — 이벤트 루프 기반:**
```js
// 싱글 스레드지만 여러 비동기 작업을 동시에 다룸
const [users, posts] = await Promise.all([
  fetch('/api/users'),
  fetch('/api/posts'),
]);
// 네트워크 요청은 동시에 발생, 결과 처리는 싱글 스레드
```

**병렬성

Question 6

데드락(Deadlock)이란 무엇이고 프론트엔드에서 유사한 상황은?

Accepted Answer

데드락은 두 개 이상의 프로세스가 서로의 자원을 기다리며 **무한 대기**에 빠지는 상태입니다.

**데드락 발생 조건 (4가지 모두 충족 시):**
1. **상호 배제**: 자원을 동시에 사용할 수 없음
2. **점유 대기**: 자원을 보유한 채 다른 자원 대기
3. **비선점**: 강제로 자원을 뺏을 수 없음
4. **순환 대기**: 자원 대기가 원형으로 연결

**프론트엔드 유사 상황:**

1. **순환 의존성 (Circular Dependency):**
```javascript
// moduleA.js
import { b } from './moduleB';
export const a = b + 1;

// moduleB.js
import { a } from './moduleA';
export const b = a + 1; // undefined!
```

2. **상태 업데이트 무한 루프:**
```jsx
// BAD: useEffect에서 의존성인 state를 업데이트
u

CS 기초

01프로세스와 스레드의 차이점은 무엇인가요?보통프로세스

02가비지 컬렉션(Garbage Collection)이란 무엇인가요?보통메모리

03콜 스택(Call Stack)과 힙(Heap) 메모리를 설명해주세요.보통메모리

04캐시 메모리의 동작 원리와 프론트엔드 캐싱과의 연관성은?보통메모리

05동시성(Concurrency)과 병렬성(Parallelism)의 차이점은?보통동시성

06데드락(Deadlock)이란 무엇이고 프론트엔드에서 유사한 상황은?보통동시성