임서인 학습해라

프로그래밍 면접질문대비 스터디 3주차

Lim임 — Tue, 21 Apr 2026 13:23:03 +0900

면접 준비 3주차

CS

1. OSI 7계층과 그 존재 이유, TCP/IP 4계층에 대해 설명해보세요.

OSI 7계층이란?

OSI(Open Systems Interconnection) 모델은 네트워크 통신을 7개의 계층으로 나눈 표준 모델입니다.
각 계층은 독립적인 역할을 가지며, 바로 위아래 계층과만 통신합니다.

OSI 7계층이 존재하는 이유

표준화: 서로 다른 회사, 운영체제, 장비 간 통신이 가능하도록 공통 규약을 정의합니다.
모듈화: 특정 계층에 문제가 생기면 그 계층만 수정·교체할 수 있어 유지보수가 용이합니다.
추상화: 개발자가 하위 계층의 물리적 구현을 몰라도 상위 계층에서 통신 기능을 사용할 수 있습니다.

계층	이름	역할	예시
7	응용(Application)	사용자와 직접 상호작용	HTTP, FTP, DNS
6	표현(Presentation)	데이터 인코딩/압축/암호화	SSL, JPEG, ASCII
5	세션(Session)	통신 세션 관리 (연결 유지/종료)	NetBIOS
4	전송(Transport)	데이터 신뢰성, 흐름 제어, 포트 관리	TCP, UDP
3	네트워크(Network)	IP 주소 기반 라우팅	IP, ICMP
2	데이터링크(Data Link)	MAC 주소 기반 노드 간 통신, 오류 검출	Ethernet, Wi-Fi
1	물리(Physical)	비트를 전기/광신호로 변환	케이블, 허브

TCP/IP 4계층

실제 인터넷에서 사용하는 모델로, OSI 7계층을 실용적으로 단순화한 모델입니다.

TCP/IP 계층	대응하는 OSI 계층	역할
응용(Application)	5, 6, 7	HTTP, DNS, FTP
전송(Transport)	4	TCP, UDP
인터넷(Internet)	3	IP, ICMP
네트워크 접근(Network Access)	1, 2	Ethernet, Wi-Fi

OSI는 이론적 표준, TCP/IP는 실제 인터넷에서 사용하는 구현 모델입니다.

예상 꼬리 질문 ①: TCP와 UDP의 차이점은 무엇인가요?

TCP는 연결 지향 프로토콜로, 3-way handshake를 통해 연결을 맺고 데이터의 순서 보장, 재전송, 흐름 제어를 지원합니다. 신뢰성이 높지만 속도가 상대적으로 느립니다. 파일 전송, HTTP 통신 등에 사용됩니다.

UDP는 비연결형 프로토콜로, 연결 과정 없이 데이터를 바로 전송합니다. 신뢰성은 낮지만 속도가 빠릅니다. 실시간 스트리밍, 게임, DNS 조회 등에 사용됩니다.

예상 꼬리 질문 ②: 3-way handshake가 무엇인가요?

TCP 연결을 수립하는 과정입니다.

SYN: 클라이언트가 서버에 연결 요청
SYN-ACK: 서버가 요청을 수락하고 응답
ACK: 클라이언트가 확인 응답 → 연결 수립

연결 종료 시에는 4-way handshake(FIN → ACK → FIN → ACK)를 사용합니다.

2. 인증과 인가에 대해 설명해주세요.

인증 (Authentication)

"당신이 누구인지"를 확인하는 과정입니다.
사용자가 주장하는 신원이 실제로 맞는지 검증합니다.

예시: 로그인 시 아이디/비밀번호 입력, 지문 인식, OTP 인증

인가 (Authorization)

"당신이 무엇을 할 수 있는지"를 결정하는 과정입니다.
인증된 사용자가 특정 리소스나 기능에 접근할 권한이 있는지 확인합니다.

예시: 일반 유저는 관리자 페이지 접근 불가, 본인 게시글만 수정 가능

순서

인증 → 인가 순으로 이루어집니다. 인증 없이는 인가가 의미가 없습니다.

- 실제 웹에서의 흐름 (JWT 기준)

사용자가 로그인 → 서버가 신원을 인증하고 JWT 토큰 발급
이후 요청마다 토큰을 헤더에 포함
서버가 토큰을 검증해 해당 유저의 권한을 확인 → 인가

예상 꼬리 질문 ①: 세션 기반 인증과 토큰 기반 인증(JWT)의 차이는 무엇인가요?

세션 기반 인증은 서버가 세션 정보를 직접 저장(상태 유지, stateful)하고, 클라이언트는 세션 ID만 쿠키로 가집니다.

서버 메모리를 사용하고, 분산 서버 환경에서 세션 공유 문제가 생길 수 있습니다.

JWT 기반 인증은 서버가 상태를 저장하지 않고(stateless), 토큰 자체에 유저 정보와 서명이 담겨 있습니다. 서버 부하는 낮지만 토큰이 탈취되면 만료 전까지 막기 어렵습니다. 그래서 Access Token의 만료 시간을 짧게 하고 Refresh Token을 함께 사용합니다.

예상 꼬리 질문 ②: JWT의 구조를 설명해주세요.

JWT는 점(.)으로 구분된 세 부분으로 구성됩니다.

Header: 토큰 타입(JWT)과 알고리즘(HS256 등) 정보, Base64로 인코딩
Payload: 사용자 ID, 권한, 만료 시간 등 클레임(claim) 데이터, Base64로 인코딩
Signature: Header + Payload를 비밀키로 서명한 값 → 위변조 방지

Payload는 Base64 인코딩이라 누구나 디코딩할 수 있으므로, 비밀번호 같은 민감한 정보는 담으면 안 됩니다.

3. 컴파일러와 인터프리터의 차이점과 각 예시를 설명하세요.

사진출처: https://blog.naver.com/tipsware/221041215416

인간이 이해할 수 있는 고수준 언어(C++,Java,JavaScript 등)를 CPU가 이해할 수 있는 저수준 언어(기계어)로 번역(변환)하는 방식은 두 가지로, *인터프리터 방식과 *컴파일러 방식이 있다.

컴파일러 (Compiler)

소스 코드 전체를 한꺼번에 분석하고 기계어(또는 중간 코드)로 변환한 후 실행 파일을 생성합니다.

실행 전에 모든 번역이 완료되므로 실행 속도가 빠릅니다.
문법 오류가 있으면 컴파일 자체가 실패합니다.
예시: C, C++, Go, Rust, Java (→ 바이트코드로 컴파일)

**오브젝트 코드(목적코드):

[ .c > .obj ] 소스코드를 컴파일한 결과물, 즉 컴파일된 파일

C언어의 경우)

1. [파일명.c]인 소스파일에 프로그램을 작성하여 저장함 >

2. 컴파일러에 의해 어셈블리 코드로 변함(일반적인 컴파일러들은 어셈블러의 역할도 수행) > 바이너리 코드로 변경됨 > 변경된 바이너리 코드는 [파일명.obj]인 오브젝트 파일로 불리고 링커의 대상이 됨 >

3. 링커로 인해 [파일명.exe]인 *실행파일을 만듦.

*실행파일: CPU에 일을 시키는 프로그램

*컴파일(Compiler/번역,변환하는 프로그램) [C,C++,C#,JAVA,Ada,파스칼 등]

프로그램 소스코드 전체를 한꺼번에 스캔하여 번역하는 과정을 거친다.

초기실행 시간이 오래 걸리지만, 작업을 **단순화시켜 전체적인 실행시간은 더 빠를 수 있다는 장점이 있다.

변환하는 과정에서 **오브젝트 코드(Object Code)라는 파일을 만들어야 하기 때문에 많은 메모리가 필요함
전체 코드를 검사한 후 오류메세지를 생성하기에, 프로그램 실행 전에 오류를 발견할 수 있다는 장점이 있다.

**단순화

컴파일 과정에서 특정 함수를 많이 반복해야 할 경우, 함수를 반복하는 것이 아니라 함수의 결과물을 반복하도록 컴파일한다. 이처럼 불필요한 동작을 제거하는 방식을 최적화(Optimization)라 한다.

-----

인터프리터 (Interpreter)

소스 코드를 한 줄씩 읽고 즉시 실행합니다. 별도의 실행 파일을 생성하지 않습니다.

즉시 실행 가능하고 디버깅이 편하지만 실행 속도가 상대적으로 느립니다.
오류가 있는 줄에 도달해야 오류가 발생합니다.
예시: Python, JavaScript(전통적), Ruby

JavaScript는 컴파일러? 인터프리터?

JavaScript는 원래 인터프리터 언어였지만, 현대 엔진(V8 등)은 JIT(Just-In-Time) 컴파일 방식을 사용합니다. 실행 시점에 자주 사용되는 코드를 기계어로 컴파일해 성능을 높입니다. 즉, 두 방식의 장점을 혼합한 형태입니다.

장점 / 단점

*인터프리터(Interpreter/해석기) [JavaScript,Python,Ruby,스크래치 등]

자바스크립트 파일을 받으면, 코드를 한 줄 한 줄 해석하면서

바로 기계어(Machine Code)로 번역하여 실행하는 방식.

코드실행 전 *컴파일 단계가 없기 때문에 실행속도가 빠르다는 장점이 있다.

별도의 실행파일이 없어서, 매 실행마다 인터프리트 과정이 반복 수행되어 메모리 사용 효율은 좋으나 실행시간이 더 소요됨
한 번에 한 문장씩 번역 및 실행하기 때문에 오류를 만나면 그 즉시 프로그램을 중지한다.
소스코드가 쉽게 공개된다는 단점이 있다.

[출처] 개초보 리액트 설명문[리액트뭐임/인터프리터뭐임]|작성자 뫠

예상 꼬리 질문 ①: JIT 컴파일이란 무엇인가요?

JIT(Just-In-Time) 컴파일은 프로그램 실행 중에 필요한 코드를 실시간으로 기계어로 컴파일하는 방식입니다. 인터프리터처럼 바로 실행할 수 있는 유연성을 가지면서, 자주 실행되는 코드(hot code)는 컴파일해 캐싱하여 실행 속도를 높입니다. V8 엔진(Chrome, Node.js)이 대표적으로 JIT를 사용합니다.

예상 꼬리 질문 ②: Java는 컴파일 언어인가요, 인터프리터 언어인가요?

Java는 두 가지 모두에 해당합니다.

소스 코드(.java)를 컴파일러가 바이트코드(.class)로 변환합니다.
JVM(Java Virtual Machine)이 바이트코드를 인터프리팅하거나 JIT 컴파일로 실행합니다.

"한 번 작성하면 어디서나 실행(Write Once, Run Anywhere)"이 가능한 이유가 바로 JVM 덕분입니다.

4. 가상 메모리에 대해 설명해보세요.

가상 메모리란?

실제 물리적 RAM의 크기에 관계없이, 각 프로세스가 자신만의 독립적인 연속된 메모리 공간을 갖는 것처럼 보이게 하는 메모리 관리 기법입니다.

운영체제가 물리 메모리(RAM)와 하드디스크의 일부(스왑 공간)를 조합해 프로세스에게 가상의 주소 공간을 제공합니다.

왜 필요한가?

물리 메모리보다 큰 프로그램을 실행할 수 있습니다.
각 프로세스가 독립된 주소 공간을 가지므로 다른 프로세스의 메모리에 직접 접근할 수 없어 보안과 안정성이 향상됩니다.
여러 프로세스가 메모리를 효율적으로 공유할 수 있습니다.

동작 원리 (페이징 기법)

가상 주소 공간과 물리 메모리를 동일한 크기의 블록(페이지)으로 나눕니다.
페이지 테이블이 가상 주소 → 물리 주소를 매핑합니다.
필요한 페이지만 물리 메모리에 올려두고, 나머지는 디스크에 저장합니다.

페이지 폴트 (Page Fault)

프로세스가 접근하려는 페이지가 물리 메모리에 없을 때 발생합니다. OS가 해당 페이지를 디스크에서 RAM으로 불러오는데, 이 과정에서 성능 저하가 발생합니다. 페이지 폴트가 너무 자주 발생하면 스래싱(Thrashing) 이 생겨 성능이 급격히 저하됩니다.

예상 꼬리 질문 ①: 스래싱(Thrashing)이란 무엇인가요?

프로세스가 실제 작업보다 페이지를 교체하는 데 더 많은 시간을 소비하는 현상입니다.
메모리에 너무 많은 프로세스가 올라가 있을 때, 각 프로세스에 할당된 페이지 수가 부족해져 페이지 폴트가 연속적으로 발생합니다. 해결책으로는 프로세스 수를 줄이거나, 물리 메모리를 증설하거나, 워킹 셋(Working Set) 기법으로 필요한 페이지를 예측해 메모리에 유지하는 방법이 있습니다.

예상 꼬리 질문 ②: 페이지 교체 알고리즘에는 어떤 것이 있나요?

물리 메모리가 가득 찼을 때 어떤 페이지를 내보낼지 결정하는 알고리즘입니다.

FIFO: 가장 먼저 올라온 페이지를 먼저 제거. 구현 간단하지만 성능이 좋지 않을 수 있음.
LRU (Least Recently Used): 가장 오랫동안 사용되지 않은 페이지 제거. 실제로 많이 사용되는 방식.
OPT (Optimal): 앞으로 가장 오랫동안 사용되지 않을 페이지 제거. 이론상 최적이지만 미래를 알 수 없어 실제 구현은 불가.

프론트엔드

1. 호이스팅에 대해서 설명해주세요.

호이스팅(Hoisting)이란?

JavaScript 엔진이 코드를 실행하기 전 변수 선언과 함수 선언을 해당 스코프의 최상단으로 끌어올리는 동작입니다.

실제 코드가 이동하는 것이 아니라, 자바스크립트 엔진이 코드를 파싱하는 단계에서 선언을 먼저 메모리에 등록하는 것입니다.

선언 정보만 등록되며 변수종류와 뭐에따라 달라집니다.

변수 호이스팅

var 호이스팅

var는 선언과 동시에 undefined로 초기화됩니다. 선언 전에 접근해도 에러가 나지 않고 undefined를 반환합니다.

console.log(a); // undefined
var a = 1;

let, const 호이스팅

ES5에 나온 개념으로

let과 const도 호이스팅이 되지만 초기화가 되지 않아, 선언 전에 접근하면 ReferenceError가 발생합니다.
이 선언 시점 전까지의 구간을 TDZ(Temporal Dead Zone, 일시적 사각지대) 라고 합니다.

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 1;

함수 선언식 vs 함수 표현식

함수 선언식(function foo() {})은 함수 전체가 호이스팅되어 선언 전에 호출할 수 있습니다.
함수 표현식(const foo = function() {})은 변수 선언만 호이스팅되므로 선언 전에 호출하면 에러가 납니다.

hello(); // "Hello!" (함수 선언식은 가능)
function hello() { console.log("Hello!"); }

greet(); // TypeError: greet is not a function
var greet = function() { console.log("Hi!"); }

예상 꼬리 질문 ①: TDZ(Temporal Dead Zone)가 무엇인가요?

let과 const로 선언된 변수가 호이스팅은 되었지만 아직 초기화되지 않은 상태의 구간입니다. 스코프의 시작부터 실제 선언문에 도달하기 전까지가 TDZ입니다. 이 구간에서 해당 변수에 접근하면 ReferenceError가 발생합니다. TDZ는 예측하기 어려운 var의 동작을 개선하기 위해 도입된 개념입니다.

var에는 TDZ가 없다.

예상 꼬리 질문 ②: var 대신 let/const를 써야 하는 이유는 무엇인가요?

스코프: var는 함수 스코프, let/const는 블록 스코프입니다. var는 if문이나 for문 블록 밖에서도 접근이 가능해 예상치 못한 버그를 유발합니다.
재선언: var는 같은 스코프에서 같은 이름으로 재선언이 가능하지만, let/const는 불가능합니다.
호이스팅 안전성: var는 undefined로 초기화되어 조용히 버그를 만들 수 있지만, let/const는 TDZ로 명확한 에러를 냅니다.
const: 재할당이 불가능하므로 의도하지 않은 값 변경을 방지합니다. 기본적으로 const를 사용하고, 재할당이 필요한 경우만 let을 사용하는 것이 권장됩니다.

let과 const의 차이점이뭔가요?

const 재할당 불가 let은 재할당 가능

const는 값을 바꿀 수 없나요?

const obj = { name: "seoin" };
obj.name = "kim";   // ✅ 가능 (참조값은 그대로, 내부 프로퍼티만 변경)
obj = {};           // ❌ 불가 (참조 자체를 바꾸는 재할당)

const는 참조(주소)가 고정되는 것이지, 참조한 데이터의 내용까지 고정하는 게 아닙니다.

2. CSR vs SSR vs SSG 차이를 설명하세요.

CSR (Client-Side Rendering)

브라우저가 빈 HTML을 받고, JavaScript 번들을 다운로드한 후 클라이언트 측에서 직접 화면을 렌더링하는 방식입니다.

장점: 초기 로딩 이후 페이지 전환이 빠르고 부드럽습니다 (SPA 경험). 서버 부하가 낮습니다.
단점: 초기 로딩이 느립니다. JavaScript가 실행되기 전까지 빈 화면이 보입니다. 크롤러가 JS를 실행하지 못하는 경우 SEO에 불리합니다.
예시: React (기본), Vue, Angular

브라우저가 빈 HTML을 렌더링 하고 JS로

인증에 적합

SSR (Server-Side Rendering)

사용자가 요청할 때마다 서버에서 HTML을 완성해 클라이언트에 전달하는 방식입니다.

장점: 초기 로딩이 빠르고 완성된 HTML을 내려주므로 SEO에 유리합니다. 실시간 데이터 반영에 적합합니다.
단점: 요청마다 서버에서 렌더링하므로 서버 부하가 높습니다. 페이지 이동 시 전체 새로고침이 발생할 수 있습니다.
예시: Next.js (getServerSideProps), Nuxt.js

서버가 HTML을 미리 완성해두고 요청시에 보내줌

SEO에는 유리할 수 있으나 서버부하가 높아지는 단점이 있습니다.

뉴스나 커머스에 적합

SSG (Static Site Generation)

빌드 시점에 미리 모든 HTML을 생성해두고, 요청 시 정적 파일을 그대로 서빙하는 방식입니다.

장점: 응답 속도가 가장 빠릅니다 (CDN 캐싱 가능). SEO에 매우 유리합니다. 서버가 없어도 됩니다.
단점: 내용이 변경될 때마다 재빌드가 필요합니다. 실시간 데이터에 적합하지 않습니다.
예시: Next.js (getStaticProps), Gatsby, Jekyll

빌드 타임

속도와 SEO에는 최적 자주바뀌는 데이터는 부적합

블로그나 문서에 적합

비교 요약

	CSR	SSR	SSG
렌더링 위치	클라이언트	서버 (요청마다)	빌드 타임
초기 로딩	느림	빠름	가장 빠름
SEO	불리	유리	매우 유리
실시간 데이터	적합	적합	부적합
서버 부하	낮음	높음	없음
적합한 서비스	대시보드, 관리자 페이지	뉴스, 커머스	블로그, 문서

예상 꼬리 질문 ①: Next.js의 ISR(Incremental Static Regeneration)이란 무엇인가요?

ISR은 SSG의 단점을 보완한 방식으로, 특정 주기(예: 60초마다)마다 정적 페이지를 백그라운드에서 재생성합니다. 정적 파일의 빠른 응답 속도를 유지하면서도 일정 주기로 최신 데이터를 반영할 수 있습니다. Next.js에서 getStaticProps에 revalidate 옵션을 설정하면 사용할 수 있습니다.

예상 꼬리 질문 ②: SEO 관점에서 CSR의 단점을 어떻게 보완할 수 있나요?

CSR은 크롤러가 JS 실행 전 빈 HTML만 보는 경우 SEO에 불리합니다. 보완 방법으로는:

SSR 도입: Next.js처럼 서버에서 완성된 HTML을 내려줍니다.
Pre-rendering: React Helmet, React Snap 등으로 주요 페이지를 미리 정적 HTML로 생성합니다.
Dynamic Rendering: Googlebot 같은 크롤러에게는 SSR 결과를, 일반 사용자에게는 CSR 결과를 제공합니다.
메타 태그 관리: 크롤러가 읽는 <title>, <meta>, Open Graph 태그를 적절히 설정합니다.

? 크롤러가 왜 빈 HTML만 보게될까요?

크롤러는 HTML파일만 읽고 JS를 실행하지 않는데, CSR은 초기 HTML의 텅빈페이지를 보게되는구나

SSR은 완성된 HTML(JS)포함된

? Hydration

하이드레이션은 서버에서 렌더링된 정적 html에 자바스크립트 이벤트리스너나 동적 연결하는 것을 의미합니다.

프로그래밍 면접질문대비 스터디 2주차

Lim임 — Wed, 15 Apr 2026 14:04:29 +0900

2주차 CS 기초

Q1. async/await에 대해 설명해보세요.

async/await는 Promise를 더 읽기 쉽게 작성하기 위한 문법입니다.

내부적으로는 Promise를 기반으로 동작하며, 비동기 코드를 마치 동기 코드처럼 작성할 수 있게 해줍니다.

async 키워드를 함수 앞에 붙이면, 그 함수는 항상 Promise를 반환합니다.

함수 내부에서 await 키워드를 사용하면, 해당 Promise가 resolve될 때까지 실행을 일시 중지하고 결과값을 반환받습니다.

에러 처리는 try/catch로 할 수 있어 .catch()를 연결하는 것보다 가독성이 좋습니다.

// Promise 방식
fetch('/api/user')
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((err) => console.error(err));

// async/await 방식 (더 읽기 쉬움)
async function getUser() {
  try {
    const res = await fetch('/api/user');
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

⚠️ 주의: await는 async 함수 내부에서만 사용 가능합니다.
await는 해당 줄에서 기다리지만, 메인 스레드를 블로킹하지 않습니다 — 이벤트 루프가 다른 작업을 처리할 수 있습니다.

Promise의 문법적 설탕, async 함수는 항상 Promise 반환, await = Promise resolve 대기, try/catch 에러 처리

Q2. www.google.com을 주소창에 입력하면 어떻게 될까요?

1단계 - URL 파싱 & DNS 조회:
브라우저는 입력된 URL을 파싱하고, www.google.com의 IP 주소를 찾기 위해 DNS(Domain Name System) 조회를 합니다. 브라우저 캐시 → OS 캐시 → 로컬 DNS 서버 → Root DNS → TLD(.com) DNS → google.com 권한 DNS 순으로 조회합니다.

2단계 - TCP 연결 (3-way handshake):
IP 주소를 찾으면 서버와 TCP 3-way handshake로 연결을 맺습니다. HTTPS라면 여기에 TLS Handshake도 추가됩니다.

3단계 - HTTP 요청:
브라우저가 서버에 GET / HTTP 요청을 보냅니다.

4단계 - 서버 응답:
서버가 HTML, CSS, JS 등의 리소스를 응답으로 전송합니다.

5단계 - 브라우저 렌더링:
HTML → DOM 트리, CSS → CSSOM 트리 생성 후 렌더 트리 구성 → 레이아웃 → 페인트 → 화면 출력.

주소 입력
  → DNS 조회 (IP 주소 획득)
  → TCP 3-way handshake (+ TLS handshake if HTTPS)
  → HTTP GET 요청
  → 서버 응답 (HTML/CSS/JS)
  → 브라우저 렌더링
  → 화면 출력  ️

핵심 키워드: DNS, TCP 3-way handshake, TLS handshake, HTTP 요청, 브라우저 렌더링

Q3. 쿠키와 세션의 차이에 대해서 설명해주세요.

모범 답변:

쿠키와 세션은 모두 HTTP의 무상태성(Stateless)을 보완하기 위한 방법으로, 사용자 상태를 유지하는 데 사용됩니다.
가장 큰 차이는 데이터를 어디에 저장하느냐입니다.

쿠키(Cookie) 는 데이터를 클라이언트(브라우저) 에 저장합니다.
서버가 Set-Cookie 헤더를 통해 브라우저에 전달하고, 이후 요청마다 자동으로 서버에 전송됩니다. 만료 시간을 설정할 수 있어 브라우저를 닫아도 유지됩니다. 다만 클라이언트에 저장되기 때문에 조작·탈취 위험이 있어 민감한 정보 저장에는 적합하지 않습니다.

세션(Session) 은 데이터를 서버에 저장합니다.
클라이언트에는 세션을 식별하는 세션 ID만 쿠키로 저장됩니다. 브라우저를 닫으면 세션이 만료되고, 실제 데이터는 서버에 있어 보안이 더 강합니다. 단, 사용자가 많아지면 서버 메모리 부담이 증가합니다.

항목	쿠키	세션
저장 위치	클라이언트(브라우저)	서버
만료	설정된 만료 시간까지	브라우저 종료 시 / 서버 설정 시간
보안	상대적으로 취약	상대적으로 안전
서버 부하	없음	있음 (세션 데이터 관리)
용량 제한	약 4KB	서버 설정에 따라 다름

핵심 키워드: 저장 위치, 무상태성 보완, 세션 ID, 보안, 서버 부하

Q4. TCP 3-way, 4-way handshake에 대해서 설명해보세요.

3way는 연결설정 4way는 연결 끊는 과정

모범 답변:

TCP 3-way handshake는 클라이언트와 서버가 신뢰성 있는 연결을 맺기 위한 과정입니다. 3단계로 진행됩니다.

SYN: 클라이언트가 서버에 연결 요청 (SYN 패킷 전송)

SYN + ACK: 서버가 요청을 수락하고, 자신도 연결 요청 (SYN+ACK 전송)

ACK: 클라이언트가 확인 응답 (ACK 전송) → 연결 완료

클라이언트          서버
    │──── SYN ────▶│
    │◀── SYN+ACK ──│
    │──── ACK ────▶│
    │   연결 완료   │

TCP 4-way handshake는 연결을 종료할 때 사용하며, 4단계가 필요합니다.
양쪽이 각각 독립적으로 종료 신호를 보내야 하기 때문입니다.

FIN: 클라이언트가 종료 요청

ACK: 서버가 확인 응답 (서버는 아직 데이터 전송 가능)

FIN: 서버가 종료 준비 완료 신호

ACK: 클라이언트가 확인 → 연결 종료

클라이언트          서버
    │──── FIN ────▶│
    │◀──── ACK ────│  (서버: 아직 보낼 데이터 있을 수 있음)
    │◀──── FIN ────│  (서버: 이제 다 보냄)
    │──── ACK ────▶│
    │   연결 종료   │

클라이언트는 마지막 ACK 후 바로 종료하지 않고 TIME_WAIT 상태를 유지합니다.
혹시 ACK가 유실됐을 때 서버가 FIN을 재전송하면 다시 응답하기 위함입니다.

핵심 키워드: SYN, ACK, FIN, 3-way(연결), 4-way(종료), TIME_WAIT

2주차 프론트엔드

Q1. 클로저에 대해서 설명해주세요.

모범 답변:

클로저(Closure) 란, 함수가 선언될 당시의 렉시컬 환경(Lexical Environment)(어디서만들어졌는지)을 기억하는 것입니다.
즉, 내부 함수가 외부 함수의 실행이 끝난 후에도 외부 함수의 변수에 접근할 수 있는 특성입니다.

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

  return function () {
    count++; // 외부 함수 종료 후에도 count에 접근 가능!
    return count;
  };
}

const increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2
console.log(increment()); // 3

위 예시에서 counter()가 실행을 마쳤지만, 반환된 함수는 여전히 count를 기억하고 있습니다. 이것이 클로저입니다.

클로저의 활용:

데이터 은닉: 외부에서 count에 직접 접근 불가 → 캡슐화 효과

상태 유지: 함수 호출 간 상태를 유지

팩토리 함수: 설정값을 고정한 함수 생성

핵심 키워드: 렉시컬 환경, 외부 변수 접근, 데이터 은닉, 상태 유지

Q2. 코드 스플리팅(Code Splitting)이란?

모범 답변:

코드 스플리팅이란, 하나의 큰 JavaScript 번들 파일을 여러 개의 작은 청크(chunk)로 분리하는 기술입니다. 사용자가 실제로 필요한 코드만 그때그때 로드하게 해서 초기 로딩 속도를 개선합니다.

번들링 없이 모든 JS를 한 파일에 담으면, 사용자가 처음 페이지에 접속할 때 불필요한 코드까지 전부 다운로드해야 합니다. 코드 스플리팅을 적용하면 당장 필요한 코드만 먼저 로드하고, 나머지는 필요할 때 동적으로 가져옵니다.

// ❌ 코드 스플리팅 없이 (모든 컴포넌트를 처음부터 다 로드)
import HeavyComponent from './HeavyComponent';

// ✅ 코드 스플리팅 적용 (필요할 때 로드)
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>로딩 중...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

분리할 가치가 있는 경우:
  ✅ 파일 크기가 큰 것 (보통 50KB 이상 기준)
  ✅ 자주 방문 안 하는 페이지
  ✅ 특정 사용자만 보는 기능 (관리자, 프리미엄 등)
분리 안 하는 게 나은 경우:
  ❌ 모든 페이지에서 쓰는 공통 컴포넌트 (Header, Button 등)
  ❌ 크기가 작은 것
  ❌ 첫 화면에 바로 보여야 하는 것

적용 방법:

Route 기반 스플리팅: 페이지 단위로 분리 (가장 일반적)

컴포넌트 기반 스플리팅: 무거운 컴포넌트만 분리

dynamic import(): webpack/Vite가 자동으로 청크로 분리

핵심 키워드: 번들 분리, 초기 로딩 속도, React.lazy, dynamic import, Route 기반 스플리팅

URL 파싱  -> 프로토콜 도메인 경로 분리

브라우저 캐시 os 캐시 라우터 캐시 dns 캐시 확인
캐시의 ip주소가있으면 DNS생략 없으면 DNS resolver가 ip주소 반환

주소 얻으면 TCP 3way handshake 양방향 연결 수립
HTTPS인 경우에는 TCP 연결 후 TLS handshake 진행 -> 암호화된 통신 채널 생성

HTTP 요청 전송  GET
서버 응답 HTML CSS JS 이미지 등등

브라우저 렌더링
HTML -> DOM 트리
CSS -> CSSOM 트리
DOM + CSSOM -> 렌더 트리
레이아웃
페인트
화면 출력

TCP 핸드쉐이크 TLS 핸드쉐이크 머가다르냐

TCP가 수립되고 TLS 다음에 한다
TLS 가 뭐냐

스코프는 함수ㄱ나 변수가 접근할 수 있는
전역스코프 -> 함수레벨 스코프 -> 블록레벨 스코프

자바스크립트 특징중에하나가
함수가 선언된 시점의 스코프를 기억하는것이 클로저
외부함수의 변수를 기억하고 참조할 수 있는 함수

자바스크릡트의 스코프 구조를 통해
함수가 선언된 시점이 어디인지 알 수 있고
그 함수가 실행될때 외부함수의 변수를 참조할 수 있는것이 클로저

자바스크립트가 렉시컬 스코프를 따른다
함수가 호출되었을때 선언되었을 떄 기준으로 스코프가 결정되는데
정적환경
렉시컬 스코프
캡쳐했던 그 변수를 쓸 수 있디.
함수 선언시에 변수를

자바스크립트는 랙시컬 스코프 환경을 따르고

클로저를 사용하게 되면 주의할 점

외부함수의 변수를 계속 참조하고있기때문에
외부함수가 실행이끝나도 변수는 외부함수를 참조하고있어서
메모리에서 해제가 되지 않아서 (가비지 컬렉터가 수거하지 못해서)
메모리 누수가 발생할 수 있다.

메모리가 사라지지 않아서

클로저 자체를 없애거나 범위를 줄이기

불필요하게 클로저를 만들고 있으면 구조를 바꿔야 한다.

function create() {
  const huge = new Array(1000000);

  return function () {
    console.log("hi");
  };
}

이건 huge를 쓸 필요 없는데 계속 붙잡고 있음

→ 해결: 아예 밖으로 빼거나 제거

const huge = new Array(1000000);

function create() {
  return function () {
    console.log("hi");
  };
}

참조를 명시적으로 끊기

클로저 안에서 큰 데이터를 쓰다가 더 이상 필요 없으면 끊어준다.

function create() {
  let huge = new Array(1000000);

  return function () {
    console.log("hi");
    huge = null; // 참조 끊기
  };
}

→ 이렇게 하면 이후 GC가 수거 가능

이벤트 / 타이머 정리 (실무에서 제일 중요)

이게 진짜 많이 터지는 케이스다.

useEffect(() => {
  const handler = () => console.log(data);

  window.addEventListener("click", handler);

  return () => {
    window.removeEventListener("click", handler);
  };
}, []);

이걸 안 하면

→ handler가 클로저로 data 계속 잡고 있음
→ 컴포넌트 사라져도 메모리 안 날아감

useEffect cleanup 필수

useEffect(() => {
  const id = setInterval(() => {
    console.log("running");
  }, 1000);

  return () => clearInterval(id);
}, []);

이거 안 하면 interval이 계속 살아있어서
→ 클로저 + 메모리 계속 유지됨

필요한 값만 참조하기

클로저 안에서 전체 객체를 들고 있지 말고
진짜 필요한 값만 뽑아서 쓰는 게 좋다

// ❌ 안좋은 예
const user = { name: "a", data: huge };

function fn() {
  console.log(user.name);
}

→ user 전체가 잡힘

// ✅ 좋은 예
const name = user.name;

function fn() {
  console.log(name);
}

리액트 useState 클로저

트랜잭션은 하나의작업단위를 성공 혹은 실패할 수 있는 성질
ACID
원자성 -> all or nothing
일관성 -> 트랜잭션 전후 데이터는 일관성을 유지해야한다.
독립성 -> 트랜잭션은 독립적으로 실행되어야한다. 다른 트랜잭션이 끼어들 수 없음
지속성 -> 트랜잭션이 완료되면 데이터는 영구적으로 저장되어야한다.

쿠키 세션
사용자의 상태를 저장하기 위한 기술
쿠키는 클라이언트 서버 둘다 저장
세션은 서버에 저장

프로그래밍 면접질문대비 스터디 1주차

Lim임 — Tue, 7 Apr 2026 13:35:02 +0900

CS 기초

Q1. GET과 POST의 차이점에 대해서 설명해보세요.

GET과 POST는 HTTP 메서드로, 가장 큰 차이는 데이터를 어디에 담느냐와 목적에 있습니다.

GET은 데이터를 URL의 쿼리스트링에 담아서 서버에 요청합니다. 주로 데이터를 조회할 때 사용하며, URL에 데이터가 노출되기 때문에 민감한 정보 전송에는 적합하지 않습니다. 또한 브라우저에 캐싱될 수 있고, URL 길이 제한이 있어 대용량 데이터 전송이 어렵습니다.

POST는 데이터를 HTTP Body에 담아서 전송합니다. 주로 데이터를 생성하거나 변경하는 작업에 사용하며, Body에 담기 때문에 URL에 노출되지 않아 상대적으로 안전합니다. 또한 데이터 크기 제한도 없습니다.

정리하면, GET은 멱등성이 있어 같은 요청을 여러 번 해도 결과가 동일하지만, POST는 요청마다 서버 데이터가 달라질 수 있습니다.

핵심 키워드: 쿼리스트링 vs Body, 조회 vs 생성, 캐싱, 멱등성

get은 주로 데이터를 조회할 때 사용하며 데이터를 url의 쿼리스트링에 담아서 서버에 요청합니다
url은 노출되는 부분이기때문에 민감한 정보 전송에는 적합하지 않습니다.

post 는 주로 데이터를 생성하거나 변경하는 작업에 사용하며 데이터를 HTTP BODY에 담아서 전송합니다. http body는 url에 노출되지 않아 상대적으로는 안전합니다.

Q2. 객체 지향 프로그래밍이란 무엇인가요?

객체 지향 프로그래밍, 즉 OOP(Object-Oriented Programming) 는 프로그램을 객체라는 단위로 구성하는 프로그래밍 패러다임입니다. 현실 세계의 사물을 객체로 추상화하여, 객체들 간의 상호작용으로 프로그램을 설계합니다.

현실 세계의 사물을 객체로 추상화하여, 객체들 간의 상호작용으로 프로그램을 설계합니다.

OOP의 핵심 특징은 4가지입니다.

첫째, 캡슐화는 객체의 데이터와 메서드를 하나로 묶고, 외부에서 직접 접근하지 못하도록 은닉하는 것입니다.

둘째, 상속은 부모 클래스의 속성과 메서드를 자식 클래스가 물려받아 재사용성을 높이는 것입니다.

셋째, 다형성은 같은 인터페이스를 가진 메서드가 객체 타입에 따라 다르게 동작하는 것입니다.

넷째, 추상화는 공통된 특성을 추출하여 불필요한 세부 내용을 숨기고, 핵심만 드러내는 것입니다.

이러한 특성 덕분에 코드의 재사용성, 유지보수성, 확장성이 높아집니다.

핵심 키워드: 캡슐화, 상속, 다형성, 추상화, 재사용성

Q3. HTTP와 HTTPS의 차이점에 대해서 설명해보세요.

HTTP는 HyperText Transfer Protocol의 약자로, 클라이언트와 서버 간 데이터를 주고받기 위한 통신 규약입니다.

하지만 HTTP는 데이터를 평문(Plain Text) 으로 전송하기 때문에, 중간에 제3자가 데이터를 가로채면 내용이 그대로 노출됩니다.

HTTPS는 HTTP에 SSL/TLS 프로토콜을 추가한 것입니다.

데이터를 암호화하여 전송하기 때문에 중간에 가로채더라도 내용을 알 수 없습니다. 동작 과정에서는 서버가 CA(인증 기관) 으로부터 발급받은 인증서를 클라이언트에 제공하고, 클라이언트는 이를 검증한 후 대칭키를 생성해 암호화 통신을 시작합니다. 이 과정을 TLS Handshake라고 합니다.

또한 HTTPS는 데이터 암호화 외에도 데이터 무결성(전송 중 변조 방지)과 서버 인증(진짜 서버인지 확인)도 보장합니다. 때문에 로그인, 결제 등 민감한 정보를 다루는 서비스에서는 반드시 HTTPS를 사용해야 합니다.

핵심 키워드: SSL/TLS, 암호화, TLS Handshake, CA 인증서, 무결성

영지: http는 암호화되지않은 https가 도입된 secure가 붙은 약자로서

http의 데이터를 암호화된 통신 프로토콜이 포함되어있습니다.

좀 더 제3자에게 정보가 노출되지 않을 숭 ㅣㅆ기땜누에

보안에 신경쓴 통신규약

? HTTPS 포트번호

HTTP 80 HTTPS 443

? 암호화 계층에 대해 간단하게 설명해주세요

TLS Handshake 과정에서 SSL인증서를 서버 공개키로 설정을 하면 클라ㅣ언트가 바아서 검증하고 검증이 끝나면 공개킬호 암호화한 세션키로 전송한 다음에 암호화된 통신을 그떄부터 시작을 해서 핸드쉐이크 해서 연결이 맺어져서 통신이 가능해지는 것

? 그럼 HTTP를 사용하는 경우는 뭔가요? HTTPS가 무조건 좋은 거 아닌가요?

서빕스 관점에서는 https가 보안에 상대적으로 좋기 때문에 https를 사용하는 것이 맞다고 보고

서비스가 아닌 내부적으로 런칭이 되지않은 http를 사용하는게

예전에는 주요 이유가 아마도 인증서 비용과 웹 서버의 부하 때문이었을 것입니다. 하지만 오늘날에는 무료로 인증서를 얻을 수 있고, 클라우드 호스팅도 비교적 저렴합니다. 요즘 방문하는 대부분의 웹사이트는 https를 사용합니다. 더 이상 http만 사용할 이유는 없습니다.

목적에 따라 다르지.
집에서 뭐 테스트하는 거, 별로 안 중요한 거: HTTP
공격자한테 노출될 위험 0인 두 개체 간의 데이터 전송 (예: 별도 네트워크의 두 장치/컨테이너): HTTP
그 외: HTTPS

Q4. 자바스크립트는 싱글 스레드인데 어떻게 비동기 처리가 가능한지 설명해보세요.

자바스크립트 엔진은 싱글 스레드로 동작하지만, 비동기 처리가 가능한 이유는 이벤트 루프(Event Loop) 와 Web API 덕분입니다.

구체적으로 설명하면, 자바스크립트 엔진에는 콜 스택(Call Stack) 이 하나 있어서 코드를 순서대로 실행합니다.

그런데 setTimeout이나 fetch 같은 비동기 작업이 들어오면, 이 작업들을 브라우저의 Web API에게 넘깁니다. Web API는 별도의 스레드로 해당 작업을 처리하고, 완료되면 콜백 함수를 태스크 큐(Task Queue) 에 넣습니다.

이벤트 루프는 콜 스택이 비어 있는지 계속 확인하다가, 비어 있으면 태스크 큐에서 콜백을 꺼내 콜 스택에 올려 실행시킵니다.

즉, 자바스크립트 자체는 싱글 스레드지만, 무거운 비동기 작업은 브라우저(또는 Node.js)의 환경에 위임하고, 그 결과만 이벤트 루프를 통해 받아처리하는 구조 덕분에 논블로킹 비동기 처리가 가능한 것입니다.

핵심 키워드: 이벤트 루프, 콜 스택, Web API, 태스크 큐, 논블로킹

하연: 자바스크립트 엔진 단독으로 동작하는게 아니라 브라우저나 nodejs같은 런타임 환경

자바스크립트 자체는 싱글스레드이지만 비동기 잡업은 브라우저나 런타임 환경으로 위임됩니다

좀 더 상세히 말씀드ㄹ면

settimeout이나 네트워크요청같은 비동기작더을 만나면

백그라운드로 넘기고 콜스택에서 제거한 이후

작업완료되면 콜백함수를 큐로 보내 대기시킵니다

스택이 비워지면 큐에있던 콜백을 스택으로 올려보내 실행하게됩니다.

큐에도 우선순위가 있다는것

마이크로테스트 큐에들어가고

셋타임아웃은 테스크 큐

이벤트 루프는 마이크로테스크 큐를 비우고 테스크 큐를 처리합니다.

이러한게 중요한 이유는 브라우저환겨에서 js실행과 ui렌더링이 같은 메인 스레드를 공유하기때문인데

무거운 동기작업을 하면 화면을 멈추는 콜백 프로미스 어싱크어웨잇 적절한 비동기처리를 해주어야합니다.

? 비동기 처리가 뭔가요?

가스불 하나씩 - 동기처리

가스불 네개 다쓸 수있는데 하나 요리안끝나도 쓸 수있음 - 비동기

비동기는 안기다린다!! 멀티스레드처럼 가스불이 여러개있는거랑은 분리해서 생각해야한다.

기다리지 않

? 자바스크립트에서 비동기 처리를 구현하는 방법

setTime out으로 구현할 수 있다고 알고있ㅇ므

settimeout은 비동기를 볼 수 있음

콜백개념이 가장 기본적인 프로미스랑 어싱크어웨잇이 있다.

백엔드

Q5. REST란 무엇인가요?

REST는 Representational State Transfer의 약자로, 웹의 장점을 최대한 활용하기 위한 소프트웨어 아키텍처 스타일입니다.

HTTP를 기반으로 클라이언트와 서버 간의 통신 규칙을 정의합니다.

REST의 핵심 원칙은 크게 6가지가 있는데, 실무에서 중요한 것들을 말씀드리겠습니다.

첫째, 자원(Resource) 기반 URI입니다. 모든 자원은 고유한 URI로 식별되며, 행위가 아닌 명사로 표현합니다. 예를 들어 /users, /users/1 이런 식으로요.

둘째, HTTP 메서드로 행위를 표현합니다. 조회는 GET, 생성은 POST, 수정은 PUT/PATCH, 삭제는 DELETE를 사용합니다.

셋째, 무상태성(Stateless) 입니다. 서버는 클라이언트의 상태를 저장하지 않으며, 매 요청은 독립적으로 처리됩니다.

이런 원칙을 잘 따른 API를 RESTful API라고 하는데, 이를 통해 클라이언트와 서버가 독립적으로 개발되고 확장성이 높은 시스템을 만들 수 있습니다.

핵심 키워드: 자원 기반 URI, HTTP 메서드, 무상태성, RESTful

김영재 답변:
REST란 웹 기반 API를 설계하는 아키텍처이고 자원에 이름을 붙여서 상태를 주고받는 것입니다.

HTTP URI를 통해 자원을 명시하고

GET post put delete등을 통해서 crud를 적용하는 것입니다.

? RESTful하지않은

자원 명시 규칙에 어긋나는 http 메서드 랑 중복되는의미가 들어가ㅓ는 update user find 같은 uri의 일므을 붙이면 restful하지못하다.

? PUT PATCH중에 무엇을 쓰는ㄱ ㅓㅅ이 좋을까요

PATCH와 PUT은 자원의 전첼르 바꾸는가 일부를 바꾸는가에 대한 관점 차이인데

크게 차이없다 PATCH 쓰지말라 혼용해서 쓰지말라 통일해서 써라

PUT으로 통일하는 팀도 있고, PATCH를 구분해서 쓰는 팀도 있습니다.
저는 팀 컨벤션에 따르는 게 중요하다고 생각하며, 개인적으로는 단순함을 위해 PUT으로 통일하는 방식도 충분히 합리적이라고 생각합니다."

Q6. 정규화에 대해 설명해주세요.

정규화란 관계형 데이터베이스에서 데이터 중복을 최소화하고 데이터 무결성을 유지하기 위해 테이블을 설계하는 과정입니다.

목적은 삽입, 수정, 삭제 시 발생하는 이상 현상(Anomaly) 을 방지하는 것입니다.

정규화는 단계별로 이루어집니다.

1NF(제1정규형): 하나의 컬럼에는 원자적인 값(더 이상 나눌 수 없는 값)만 존재해야 합니다. 예를 들어, 전화번호 컬럼에 여러 번호가 들어가면 안 됩니다.

2NF(제2정규형): 1NF를 만족하면서, 부분적 함수 종속을 제거합니다. 즉 복합 기본키에서 일부 키에만 종속된 컬럼을 분리합니다.

3NF(제3정규형): 2NF를 만족하면서, 이행적 함수 종속을 제거합니다. 기본키가 아닌 컬럼이 다른 비기본키 컬럼에 종속되지 않아야 합니다.

다만 정규화를 과도하게 적용하면 조인이 많아져 성능이 저하될 수 있어서, 실무에서는 성능을 위해 의도적으로 중복을 허용하는 역정규화(Denormalization) 를 적용하기도 합니다.

핵심 키워드: 데이터 중복 제거, 이상 현상, 1NF/2NF/3NF, 함수 종속성, 역정규화

프론트엔드

Q7. 브라우저에서 렌더링 원리에 대해서 설명해보세요.

브라우저의 렌더링 과정은 크게 5단계로 나눌 수 있습니다.

1단계 - 파싱: 브라우저는 서버로부터 받은 HTML을 파싱하여 DOM(Document Object Model) 트리를 생성하고, CSS를 파싱하여 CSSOM(CSS Object Model) 트리를 생성합니다.

2단계 - 렌더 트리 생성: DOM과 CSSOM을 결합하여 실제 화면에 표시될 요소들만 포함한 렌더 트리(Render Tree) 를 만듭니다. display: none인 요소는 렌더 트리에 포함되지 않습니다.

3단계 - 레이아웃(Layout / Reflow): 렌더 트리를 기반으로 각 요소의 위치와 크기를 계산합니다.

4단계 - 페인트(Paint): 계산된 스타일을 기반으로 요소를 실제 픽셀로 화면에 그립니다.

5단계 - 합성(Composite): 여러 레이어를 합쳐 최종 화면을 완성합니다.

추가로, JavaScript가 DOM을 변경하면 리플로우(Reflow) 나 리페인트(Repaint) 가 발생할 수 있어 성능에 영향을 줍니다. 때문에 React 같은 프레임워크는 Virtual DOM을 사용하여 불필요한 렌더링을 최소화합니다.

1단계 문서파싱

1-1: HTML 파싱

브라우저는 HTML 문서를 파싱하여 DOM트리(Document Odject Model Tree)를 구성합니다 (DOM트리가뭔가요?)

1-2: CSS 파싱

CSS 파일과 스타일 요소를 파싱하여 CSSOM트리 (CSS Object Model Tree)를 구성합니다.

2단계 렌더 트리 생성

구성한 DOM과 CSSOM을 결합하여 렌더트리를 형성합니다.

이 렌더트리는 실제 페이지를 렌더링하는데 필요한 모든 노드와 스타일 정보를 포함합니다.

display:none인 요소는 포함하지 않습니다.

visibility:invisible은 공간은 차지하고 보이지 않게만 하기 때문에 렌더 트리에 포함됩니다.

3단계 레이아웃 계산

각 노드의 정확한 위치와 크기를 각 속성과 스타일에 따라 어느 위치에 어느 크기로 출력될지 계산합니다

4단계 페인트

계산된 레이아웃에 따라 노드를 실제화면에 그립니다. 이때 텍스트, 색, 이미지, 그림자 효과등이 모두 처리됩니다.

5단계 페인팅 이후

어떠한 액션이나 이벤트에 따라 수정되면 렌더 트리와 각 요소들의 크기와 위치를 다시 계산하고(Reflow) 다시 출력합니다(Repaint)

이 현상을 줄이기 위해서는 visibility:invisible보다 display:none을 사용하고(공간차지안함)

transform 과 opacity는 Reflow Repaint가 일어나지 않습니다.

따라서 left, right, width, height보다 transform을, visibility보다 display, opacity를 사용하는 것이 도움이 됩니다.

완전 최종단계에서 transform 과 opacity를 사용하기 때문에 (2단계에서 일어남) 애니메이션은 transform과 opacity를 사용하는게 성능 면에서 유리하다

면접 답변:

브라우저 렌더링은 HTML, CSS, JavaScript 등의 웹 페이지 자원을 브라우저가 화면에 그리는 과정을 말합니다. 브라우저 렌더링 과정은 HTML문서 파싱하여 DOM트리를 형성하고 CSS문서를 파싱해서 CSSOM트리를 형성하고 DOM트리와 CSSOM트리를 결합하여 렌더트리를 형성합니다. 브라우저는 렌더 트리를 이용해서 각 요소의 크기 위치를 계산하는 레이아웃을 거쳐 화면에 요소를 그리는 페인팅 과정을 거치게 됩니다.

? HTML 파싱 중에 스크립트 태그를 만나게 되면 파싱을 멈추고 js가 먼저 실행되는데,

이떄 블로킹되지 않도록 처리하려면 어떻게 해야하는지

파싱 블로킹이 되지 않기 위해서는 스크립트 태그를 바디 맨 아래에 두거나

스크립트 태그 안에 defer 라는 속성을 https://weirdsector.tistory.com/55

핵심 키워드: DOM, CSSOM, 렌더 트리, Reflow, Repaint, Virtual DOM

DOM트리

HTML의 각 태그를 노드 객체로 변환하여 계층구조(트리)로 만듭니다.

<!-- 원본 HTML -->
<html>
  <body>
    <h1>안녕하세요</h1>
    <p>반갑습니다</p>
  </body>
</html>

DOM 트리로 변환:

Document
└── html
    └── body
        ├── h1  →  "안녕하세요"
        └── p   →  "반갑습니다"

* JavaScript에서 document.querySelector('h1') 같은 걸 쓸 수 있는 이유가 바로 이 DOM 트리가 만들어졌기 때문

CSSOM 트리

CSS파일의 요소에 어떤 스타일이 적용되는지 트리로 표현한 것

body { font-size: 16px; }
h1   { color: blue; }
p    { color: gray; }

CSSOM 트리:

body (font-size: 16px)
├── h1 (color: blue, font-size: 16px 상속)
└── p  (color: gray, font-size: 16px 상속)

* CSS는 상속(Cascading) 이 있기 때문에, 부모에 적용된 스타일이 자식으로 내려가는 것도 CSSOM이 계산

왜 두 개를 따로 만드나요?

HTML과 CSS는 역할이 다르기 때문

두 트리를 합쳐서 렌더 트리(Render Tree)를 만들어 그걸 기반으로 출력한다.

렌더트리

DOM 트리 + CSSOM 트리 = 렌더 트리
"실제로 화면에 보여줄 것들만" 골라서 스타일까지 붙인 트리

DOM 트리              CSSOM 트리
─────────             ──────────
html                  body
└── body              ├── h1  { color: blue, font-size: 24px }
    ├── h1            ├── p   { display: none }
    ├── p             └── span{ color: gray }
    └── span

           ↓ 결합 (display:none 제외!)

         렌더 트리
         ─────────
         body
         ├── h1   { color: blue, font-size: 24px }
         └── span { color: gray }
         
         ← p는 display:none 이라 렌더 트리에서 제외! ❌

Q8. SPA에서 라우팅이 어떻게 동작하나요?

전통적인 MPA(Multi Page Application)에서는 페이지를 이동할 때마다 서버에 새로운 HTML을 요청했습니다.

하지만 SPA(Single Page Application) 에서는 최초에 HTML을 한 번만 받고, 이후 페이지 이동은 JavaScript가 직접 화면을 교체하여 처리합니다.

SPA 라우팅 방식에는 크게 두 가지가 있습니다.

Hash 방식: URL에서 # 뒤의 값이 바뀌어도 브라우저는 서버에 요청을 보내지 않습니다.

왜 서버 요청이 없냐?
# 뒤의 값(해시)은 원래부터 브라우저 내부에서만 사용하는 값이에요.
서버엔 절대 전송하지 않는 게 브라우저의 규칙입니다.

이를 이용해 JavaScript가 # 이후 값을 읽어 화면을 전환합니다. 예) example.com/#/home

(React Router의 방식)

History API 방식: HTML5의 history.pushState() API를 사용하여 URL을 변경하되 서버 요청 없이 화면만 바꿉니다.
이 함수는 "URL은 바꾸되 서버에 요청은 보내지 마" 라는 특별한 명령입니다.

React Router가 이 방식을 사용합니다. 예) example.com/home

// 버튼 클릭 시
document.getElementById('menuBtn').addEventListener('click', () => {
  
  // URL을 /menu 로 바꾸지만 서버 요청 ❌
  history.pushState(null, '', '/menu');
  
  // JavaScript가 직접 화면을 교체
  document.getElementById('app').innerHTML = '<h1>메뉴 페이지</h1>';
});

처음 접속: myapp.com
       ↓
서버가 index.html 딱 한 번 전송
(+ React/Vue 앱 전체 JS 코드 포함)
       ↓
이후부터는 JS가 모든 걸 관리

유저: /menu 클릭
       ↓
┌──────────────────────────────────┐
│  React Router가 중간에서 가로챔   │
│  "서버야 잠깐, 내가 처리할게"     │
└──────────────────────────────────┘
       ↓
history.pushState('/menu') → URL만 변경
       ↓
React가 <MenuPage /> 컴포넌트 렌더링
       ↓
서버 요청 없이 화면 전환 완료! ✅

새로고침 문제 (중요!)
History API 방식의 함정이 있어요.

유저가 myapp.com/menu 에서 새로고침 누름
       ↓
브라우저: "서버야, /menu 페이지 줘!"
       ↓
서버: "??? /menu 파일이 없는데..." → 404 에러

History API 방식은 URL이 깔끔하지만, 새로고침 시 서버에 해당 경로로 요청이 가기 때문에 서버에서 모든 경로에 대해 동일한 index.html을 반환하도록 설정해야 합니다. 이를 Fallback 설정이라고 합니다.

서버 설정: "어떤 URL로 요청이 와도 index.html 줘"
       ↓
index.html 받음
       ↓
JS 앱이 로드되면서 URL을 보고 /menu 화면 렌더링 ✅

핵심 키워드: History API, pushState, Hash 라우팅, index.html Fallback, React Router

"SPA는 최초 접속 시 index.html 하나만 받고, 이후 페이지 이동은 history.pushState() API로 URL만 바꾸고 JavaScript가 화면을 교체합니다. 서버 요청 없이 동작하기 때문에 빠르고 부드럽지만, 새로고침 시 서버에서 404가 나지 않도록 모든 경로에 index.html을 반환하는 Fallback 설정이 필요합니다."

프로젝트에서 적용한 사례를 1~2문장 연결하자

아는 부분은 자신있게 모르는 부분은 솔직하게

피드백 추가질문

동기 비동기

promise

async await

SECTION 5.3 비선형 자료 구조

Lim임 — Wed, 25 Mar 2026 14:39:51 +0900

비선형 자료 구조

비선형 자료 구조란 일렬로 나열하지 않고 자료 순서나 관계가 복잡한 구조를 말합니다.
일반적으로 트리나 그래프를 말합니다.

5.3.1 그래프

그래프는 정점(vertex) 과 간선(edge) 으로 이루어진 자료 구조입니다.

정점과 간선

"어떠한 곳에서 어떠한 곳으로 무언가를 통해 간다"

어떠한 곳 → 정점(vertex)

무언가(길) → 간선(edge)

개념	설명
단방향 간선	한쪽 방향으로만 갈 수 있음 (예: 짝사랑)
양방향 간선	양쪽 방향 모두 갈 수 있음 (예: 서로 좋아함)
outdegree	해당 정점에서 나가는 간선의 수
indegree	해당 정점으로 들어오는 간선의 수

보통 "U에서부터 V로 간다."라고 표현합니다.

가중치

간선과 정점 사이에 드는 비용을 뜻합니다.
예) 성남 → 네이버까지 택시비가 13,000원이라면, 해당 간선의 가중치는 13,000원

5.3.2 트리

트리는 그래프의 일종으로, 정점과 간선으로 이루어진 계층적 데이터의 집합입니다.
루트 노드, 내부 노드, 리프 노드 등으로 구성됩니다.

트리로 이루어진 집합을 숲(forest) 이라고 합니다.

트리의 특징

부모-자식 계층 구조를 가집니다.
같은 경로상에서 위에 있으면 부모, 아래에 있으면 자식 노드
V - 1 = E : 간선 수 = 노드 수 - 1
임의의 두 노드 사이의 경로는 유일하게 존재합니다.

트리의 구성

노드 종류	설명
루트 노드	가장 위에 있는 노드. 트리 탐색의 시작점
내부 노드	루트 노드와 리프 노드 사이에 있는 노드
리프 노드	자식 노드가 없는 노드 (끝 노드)

트리의 높이와 레벨

용어	설명
깊이	루트 노드부터 특정 노드까지의 최단 거리
높이	루트 노드부터 리프 노드까지 거리 중 가장 긴 거리
레벨	보통 깊이와 같은 의미 (문제마다 기준이 다를 수 있음)
서브트리	트리 내의 하위 집합 (부분집합)

이진 트리

자식 노드 수가 두 개 이하인 트리

종류	설명
정이진 트리 (full binary tree)	자식 노드가 0개 또는 2개
완전 이진 트리 (complete binary tree)	왼쪽부터 채워져 있으며, 마지막 레벨만 비어있을 수 있음
변질 이진 트리 (degenerate binary tree)	자식 노드가 하나밖에 없음
포화 이진 트리 (perfect binary tree)	모든 노드가 꽉 차 있음
균형 이진 트리 (balanced binary tree)	왼쪽/오른쪽 높이 차이가 최대 1 (예: 레드 블랙 트리)

이진 탐색 트리 (BST)

오른쪽 하위 트리: 노드 값보다 큰 값
왼쪽 하위 트리: 노드 값보다 작은 값

연산	평균	최악
탐색 / 삽입 / 삭제	O(log n)	O(n)

⚠️ 삽입 순서에 따라 선형(편향) 트리가 될 수 있어 최악 O(n)이 발생할 수 있습니다.

AVL 트리

AVL 트리(Adelson-Velsky and Landis tree)는 BST의 최악 케이스를 방지하기 위해 스스로 균형을 잡는 이진 탐색 트리입니다.

두 자식 서브트리의 높이 차이는 항상 최대 1
삽입/삭제 시 균형이 깨지면 트리를 회전시켜 균형을 복원

연산	시간 복잡도
탐색 / 삽입 / 삭제	O(log n)

레드 블랙 트리

균형 이진 탐색 트리로, C++ STL의 set, multiset, map, multimap이 이 구조로 구현되어 있습니다.

각 노드는 빨간색 또는 검은색 비트를 추가로 저장
"모든 리프 노드와 루트 노드는 블랙, 레드 노드의 자식은 반드시 블랙" 등의 규칙으로 균형 유지

연산	시간 복잡도
탐색 / 삽입 / 삭제	O(log n)

5.3.3 힙

힙은 완전 이진 트리 기반의 자료 구조입니다.

종류	설명
최대힙	루트 노드가 항상 최댓값 (부모 ≥ 자식, 재귀적으로 적용)
최소힙	루트 노드가 항상 최솟값 (부모 ≤ 자식, 재귀적으로 적용)

최대힙의 삽입

새 노드를 마지막 노드에 삽입
부모 노드와 비교하며 위로 올라가며 스왑 → 힙 조건 만족

최대힙의 삭제

루트 노드(최댓값) 삭제
마지막 노드를 루트로 올린 후 아래로 내려가며 스왑 → 재구성

5.3.4 우선순위 큐

우선순위 큐는 우선순위가 높은 요소가 먼저 나오는 자료 구조입니다.
힙을 기반으로 구현됩니다.

#include <bits/stdc++.h>
using namespace std;

priority_queue<int, vector<int>, greater<int>> pq; // 오름차순 (최소힙)
// priority_queue<int, vector<int>, less<int>> pq; // 내림차순 (최대힙)

int main() {
    pq.push(5);
    pq.push(4);
    pq.push(3);
    pq.push(2);
    pq.push(1);
    cout << pq.top() << "\n";
    return 0;
}
/*
1
*/

greater → 오름차순(최소 우선), less → 내림차순(최대 우선)

5.3.5 맵

맵(map)은 키(key)와 값(value)의 쌍으로 이루어진 자료 구조입니다.
레드 블랙 트리 기반으로 구현되며, 삽입 시 자동 정렬됩니다.

종류	정렬 보장
`map`	✅ 정렬 보장
`unordered_map`	❌ 정렬 없음 (해시 기반, 더 빠름)

주요 함수: insert(), emplace(), [], find(), erase(), size(), clear()

#include <bits/stdc++.h>
using namespace std;

int main() {
    unordered_map<string, int> umap;

    umap.insert({"test1", 1});   // insert로 추가
    umap.emplace("test5", 5);    // emplace로 추가
    umap["test1"] = 4;           // 값 변경 (권장 방식)

    for (auto element : umap) {
        cout << element.first << " :: " << element.second << '\n';
    }

    auto search = umap.find("test4");
    if (search != umap.end()) {
        cout << "found: " << search->first << " " << (*search).second << '\n';
    } else {
        cout << "not found.." << '\n';
    }

    umap["test1"]++;
    cout << umap["test1"] << "\n";
    cout << umap.size() << "\n";

    umap.erase("test1");
    cout << umap.size() << "\n";
    return 0;
}
/*
test5 :: 5
test1 :: 4
not found..
5
2
1
*/

순회 시 element.first → 키, element.second → 값

5.3.6 셋

셋(set)은 고유한(unique) 값만 저장하는 컨테이너입니다.
중복 요소가 없으며, 특정 순서에 따라 요소를 저장합니다.

pair는 두 가지 형을 담을 수 있는 구조이며 first, second로 접근합니다.
나머지 사용법은 map과 유사합니다.

5.3.7 해시 테이블

해시 테이블은 무한에 가까운 데이터를 유한한 해시 값으로 매핑한 테이블입니다.
C++에서는 unordered_map으로 구현합니다.

연산	평균 시간 복잡도	최악 시간 복잡도
삽입 / 삭제 / 탐색	O(1)	O(n)

⚠️ 해시 충돌이 많이 발생하면 최악 O(n)까지 떨어질 수 있습니다.

SECTION 5.2 선형 자료 구조

Lim임 — Wed, 25 Mar 2026 14:39:46 +0900

선형 자료 구조

선형 자료 구조란 요소가 일렬로 나열되어 있는 자료 구조를 말합니다.

5.2.1 연결 리스트

연결 리스트는 데이터를 감싼 노드를 포인터로 연결해서 공간적인 효율성을 극대화시킨 자료 구조입니다.

연산	시간 복잡도
삽입 / 삭제	O(1)
탐색	O(n)

prev 포인터와 next 포인터로 앞과 뒤의 노드를 연결한 구조이며, 맨 앞에 있는 노드를 헤드(head) 라고 합니다.

종류

종류	특징
싱글 연결 리스트	`next` 포인터만 가짐
이중 연결 리스트	`next` + `prev` 포인터 둘 다 가짐
원형 이중 연결 리스트	이중 연결 리스트와 같지만, 마지막 노드의 `next`가 헤드 노드를 가리킴

이 책에서는 이중 연결 리스트 를 기반으로 설명합니다.

주요 함수: push_front(), push_back(), insert(), pop_front(), pop_back()

#include <bits/stdc++.h>
using namespace std;

int main() {
    list<int> a;
    for (int i = 0; i < 10; i++) a.push_back(i);
    for (int i = 0; i < 10; i++) a.push_front(i);

    auto it = a.begin(); it++;
    a.insert(it, 1000);

    for (auto it : a) cout << it << " ";
    cout << '\n';

    a.pop_front();
    a.pop_back();

    for (auto it : a) cout << it << " ";
    cout << '\n';

    return 0;
}
/*
9 1000 8 7 6 5 4 3 2 1 0 0 1 2 3 4 5 6 7 8 9
1000 8 7 6 5 4 3 2 1 0 0 1 2 3 4 5 6 7 8
*/

5.2.2 배열

배열(array)은 같은 타입의 변수들로 이루어져 있고, 크기가 정해져 있으며, 인접한 메모리 위치에 있는 데이터를 모아놓은 집합입니다. 중복을 허용하고 순서가 있습니다.

연산	시간 복잡도
접근(참조)	O(1)
삽입 / 삭제	O(n)

어떤 걸 써야 할까?

데이터 추가/삭제 가 많다 → 연결 리스트

데이터 접근/참조 가 많다 → 배열

랜덤 접근 vs 순차적 접근

구분	설명
랜덤 접근	임의의 인덱스에 동일한 시간에 바로 접근 가능
순차적 접근	저장된 순서대로 처음부터 하나씩 검색

배열 vs 연결 리스트 비교

항목	배열	연결 리스트
n번째 요소 접근	O(1) ⚡ 빠름	O(n) 느림
데이터 추가/삭제	O(n) 느림	O(1) ⚡ 빠름
비유	번호 붙은 상자 → 번호만 알면 바로 꺼냄	선으로 연결된 상자 → 하나씩 열어봐야 함

#include <bits/stdc++.h>
using namespace std;

int a[10];

int main() {
    for (int i = 0; i < 10; i++) a[i] = i;
    for (auto it : a) cout << it << " ";
    cout << '\n';
    return 0;
}
/*
0 1 2 3 4 5 6 7 8 9
*/

5.2.3 벡터

벡터(vector)는 동적으로 요소를 할당할 수 있는 동적 배열입니다.
컴파일 시점에 개수를 모른다면 벡터를 써야 합니다. 중복을 허용하고 순서가 있으며 랜덤 접근이 가능합니다.

연산	시간 복잡도
탐색	O(1)
맨 뒤 삽입/삭제 (`push_back`, `pop_back`)	O(1)
중간 삽입/삭제	O(n)

push_back()이 O(1)인 이유 — amortized 복잡도

매번 배열 크기를 늘리는 게 아니라, 2의 제곱승 + 1마다 크기를 2배 로 늘립니다.
n번 push_back()을 했을 때 평균 비용은 약 3 으로, 상수에 수렴하기 때문에 amortized O(1) 이라고 합니다.

주요 함수: push_back(), pop_back(), erase(), find(), fill(), clear()

#include <bits/stdc++.h>
using namespace std;

vector<int> v;

int main() {
    for (int i = 1; i <= 10; i++) v.push_back(i);
    for (int a : v) cout << a << " ";
    cout << "\n";

    v.pop_back();
    for (int a : v) cout << a << " ";
    cout << "\n";

    v.erase(v.begin(), v.begin() + 1);
    for (int a : v) cout << a << " ";
    cout << "\n";

    auto a = find(v.begin(), v.end(), 100);
    if (a == v.end()) cout << "not found" << "\n";

    fill(v.begin(), v.end(), 10);
    for (int a : v) cout << a << " ";
    cout << "\n";

    v.clear();
    for (int a : v) cout << a << " ";
    cout << "\n";

    return 0;
}
/*
1 2 3 4 5 6 7 8 9 10
1 2 3 4 5 6 7 8 9
2 3 4 5 6 7 8 9
not found
10 10 10 10 10 10 10 10

*/

벡터 순회 방법 (두 가지는 동일)

for (int a : v) cout << a << '\n';
for (int i = 0; i < v.size(); i++) cout << v[i] << '\n';

벡터에 pair 값이 들어간다면 → for (pair<int,int> a : v) 방식으로 순회

5.2.4 스택

스택(stack)은 가장 마지막으로 들어간 데이터가 가장 먼저 나오는 성질을 가진 자료 구조입니다.

LIFO (Last In First Out)

연산	시간 복잡도
삽입 / 삭제	O(1)
탐색	O(n)

활용 예시: 재귀 함수/알고리즘, 웹 브라우저 방문 기록, 실행 취소(Undo)

5.2.5 큐

큐(queue)는 먼저 집어넣은 데이터가 먼저 나오는 성질을 지닌 자료 구조입니다.

FIFO (First In First Out) — 스택과 반대 개념

연산	시간 복잡도
삽입 / 삭제	O(1)
탐색	O(n)

활용 예시: CPU 프로세스/스레드 대기열, 네트워크 접속 대기열, 너비 우선 탐색(BFS), 캐시

SECTION 5.3 비선형 자료 구조

비선형 자료 구조란 일렬로 나열하지 않고 자료 순서나 관계가 복잡한 구조를 말합니다.
일반적으로 트리나 그래프를 말합니다.

SECTION 5.1 복잡도

Lim임 — Wed, 25 Mar 2026 14:39:40 +0900

자료 구조(Data Structure) 기초 — 복잡도 완벽 정리

자료 구조(data structure)란 효율적으로 데이터를 관리하고 수정, 삭제, 탐색, 저장할 수 있는 데이터 집합을 말합니다.

사전 지식 — STL이란?

STL(Standard Template Library) 은 C++의 표준 템플릿 라이브러리로, 스택·배열 등 다양한 자료 구조와 알고리즘 함수를 제공하는 라이브러리 묶음입니다.

C++는 어려운 언어처럼 느껴지지만, 자료 구조를 공부하는 수준에서는 매우 쉬운 난이도만 알아도 충분합니다.
별도 설치 없이 아래 링크에서 바로 실행해볼 수 있어요.
C++ 온라인 컴파일러

5.1 복잡도

복잡도는 크게 두 가지로 나뉩니다.

시간 복잡도 — 알고리즘 실행에 걸리는 시간
공간 복잡도 — 알고리즘 실행에 필요한 메모리 공간

5.1.1 시간 복잡도

C++ 기본 문법 훑기

시간 복잡도에 앞서, C++의 기본 구조를 간단히 살펴보겠습니다.
아래는 입력받은 문자열을 출력하는 가장 간단한 예제입니다.

#include <bits/stdc++.h>  // (1) STL 전체 포함 헤더
using namespace std;      // (2) std 네임스페이스 기본 설정
string a;                 // (3) 문자열 변수 선언

int main()
{
    cin >> a;             // (4) 입력
    cout << a << "\n";    // (5) 출력
    return 0;             // (6) 프로세스 정상 종료
}

번호	설명
(1)	`bits/stdc++.h` — 모든 표준 라이브러리가 포함된 헤더
(2)	`std::cin` → `cin` 처럼 네임스페이스 없이 사용 가능하게 설정
(3)	`<타입> <변수명>` 형태로 선언. `a`는 lvalue, `"큰돌"`은 rvalue
(4)	입력: `cin`, `scanf` 등
(5)	출력: `cout`, `printf` 등
(6)	`return 0` — 정상 종료 신호

빅오(Big-O) 표기법

시간 복잡도 = 입력 크기 n에 대해 알고리즘이 실행되는 데 걸리는 시간

주요 로직의 반복 횟수를 기준으로 측정하며, 빅오 표기법으로 나타냅니다.

예를 들어 아래 코드의 시간 복잡도를 계산해봅시다.

for (int i = 0; i < 10; i++) {
    for (int j = 0; j < n; j++) {
        for (int k = 0; k < n; k++) {
            if (true) cout << k << '\n';  // 10 * n * n 번 실행
        }
    }
}
for (int i = 0; i < n; i++) {
    if (true) cout << i << '\n';          // n번 실행
}

총 연산량 = 10n² + n
→ 빅오 표기법으로는 O(n²)

핵심 원칙: 가장 영향이 큰 항만 남기고, 상수 계수와 하위 항은 제거합니다.
n이 커질수록 n²이 압도적으로 커지기 때문에 나머지는 무시해도 됩니다.

시간 복잡도가 왜 필요한가?

효율적인 코드로 개선하는 척도가 되기 때문입니다.

예를 들어 어떤 버튼을 누를 때 O(n²) 알고리즘으로 9초가 걸린다면,
이를 O(n) 알고리즘으로 개선하면 3초로 줄일 수 있습니다.

속도 비교

O(1) < O(log n) < O(n) < O(n log n) < O(n²) < O(2ⁿ)

O(n²) 보다는 O(n), O(n) 보다는 O(1) 을 항상 지향하세요.

5.1.2 공간 복잡도

공간 복잡도 = 프로그램 실행 시 필요한 자원(메모리) 공간의 양

정적 변수뿐만 아니라, 재귀 함수로 인해 동적으로 쌓이는 공간도 포함합니다.

int a[1004];  // 1004 × 4바이트 = 약 4KB 사용

5.1.3 자료 구조별 시간 복잡도

자료 구조를 선택할 때는 평균과 최악의 시간 복잡도를 함께 고려해야 합니다.

평균 시간 복잡도

자료 구조	접근	탐색	삽입	삭제
배열(Array)	O(1)	O(n)	O(n)	O(n)
스택(Stack)	O(n)	O(n)	O(1)	O(1)
큐(Queue)	O(n)	O(n)	O(1)	O(1)
이중 연결 리스트	O(n)	O(n)	O(1)	O(1)
해시 테이블	O(1)	O(1)	O(1)	O(1)
이진 탐색 트리(BST)	O(log n)	O(log n)	O(log n)	O(log n)
AVL 트리	O(log n)	O(log n)	O(log n)	O(log n)
레드 블랙 트리	O(log n)	O(log n)	O(log n)	O(log n)

최악 시간 복잡도

자료 구조	접근	탐색	삽입	삭제
배열(Array)	O(1)	O(n)	O(n)	O(n)
스택(Stack)	O(n)	O(n)	O(1)	O(1)
큐(Queue)	O(n)	O(n)	O(1)	O(1)
이중 연결 리스트	O(n)	O(n)	O(1)	O(1)
해시 테이블	O(n)	O(n)	O(n)	O(n)
이진 탐색 트리(BST)	O(n)	O(n)	O(n)	O(n)
AVL 트리	O(log n)	O(log n)	O(log n)	O(log n)
레드 블랙 트리	O(log n)	O(log n)	O(log n)	O(log n)

⚠️ BST vs AVL/레드 블랙 트리
BST는 편향 트리가 되면 최악 O(n)까지 떨어질 수 있지만,
AVL이나 레드 블랙 트리는 자동으로 균형을 맞춰 항상 O(log n)을 보장합니다.

SECTION 4.6 조인의 종류 4.7 조인의 원리

Lim임 — Wed, 18 Mar 2026 13:58:31 +0900

SECTION 4.6 조인의 종류

두 개 이상의 테이블을 묶어서 하나의 결과물을 만드는 것

MySQL: JOIN 쿼리

MongoDB: lookup 쿼리 (단, 성능이 RDBMS보다 낮아 되도록 사용 지양)

조인 종류

종류	설명
내부 조인 (INNER JOIN)	두 테이블에서 모두 일치하는 행만 반환
왼쪽 조인 (LEFT OUTER JOIN)	왼쪽 테이블 전체 + 오른쪽 일치 행 (없으면 NULL)
오른쪽 조인 (RIGHT OUTER JOIN)	오른쪽 테이블 전체 + 왼쪽 일치 행 (없으면 NULL)
합집합 조인 (FULL OUTER JOIN)	양쪽 테이블 전체 (일치 안 해도 포함, 없으면 NULL)

SECTION 4.7 조인의 원리

4.7.1 중첩 루프 조인 (NLJ, Nested Loop Join)

중첩 for문과 같은 원리로 조인하는 방식

for each row in t1 {
    for each row in t2 {
        if 조건 일치 → 결과 반환
    }
}

랜덤 접근 비용이 높아 대용량 테이블에는 부적합
발전형: 블록 중첩 루프 조인(BNL) — 테이블을 작은 블록으로 나눠 블록 단위로 조인

4.7.2 정렬 병합 조인 (Sort Merge Join)

각 테이블을 조인 필드 기준으로 정렬 후 조인하는 방식

사용 조건:
- 적절한 인덱스가 없을 때
- 대용량 테이블 조인 시
- 조인 조건이 <, > 등 범위 비교 연산자일 때

4.7.3 해시 조인 (Hash Join)

해시 테이블을 기반으로 조인하는 방식 (MySQL 8.0.18부터 지원)

하나의 테이블이 메모리에 올라갈 수 있을 때 중첩 루프 조인보다 효율적
동등(=) 조인에서만 사용 가능
메모리 초과 시 디스크 사용 → 비용 증가

해시 조인 단계

단계	설명
빌드 단계	두 테이블 중 더 작은 테이블을 메모리에 해시 테이블로 빌드. 조인 필드가 해시 키로 사용
프로브 단계	나머지 테이블을 읽으며 해시 테이블에서 일치하는 레코드를 찾아 반환

각 테이블을 한 번씩만 읽으므로 중첩 루프 조인보다 성능 우수
메모리 사용량은 시스템 변수 join_buffer_size로 제어

SECTION 4.5 인덱스

Lim임 — Wed, 18 Mar 2026 13:52:49 +0900

SECTION 4.5 인덱스

4.5.1 인덱스의 필요성

데이터를 빠르게 찾을 수 있는 장치 (책의 찾아보기와 동일한 개념)

인덱스를 설정하면 전체 탐색 없이 원하는 데이터에 빠르게 접근 가능

4.5.2 B-트리

인덱스는 보통 B-트리(Balanced Tree) 자료 구조로 구성
구성: 루트 노드 → 브랜치 노드 → 리프 노드
탐색 시 루트부터 시작해 리프 노드까지 내려가며 값을 비교

대수확장성

트리 깊이가 리프 노드 수에 비해 매우 느리게 성장하는 특성

깊이가 1 증가할 때마다 최대 인덱스 항목 수는 4배 증가

트리 깊이	인덱스 항목 수
3	64
5	1,024
7	16,384
10	1,048,576

→ 깊이 10짜리 트리로 100만 개 레코드 검색 가능

4.5.3 인덱스 만드는 방법

MySQL

종류	생성 방법	특징
클러스터형 인덱스	`PRIMARY KEY` 또는 `UNIQUE NOT NULL`	테이블당 1개, 성능 더 좋음
세컨더리 인덱스	`CREATE INDEX ...`	여러 개 가능, 다양한 필드 쿼리에 사용

MongoDB

도큐먼트 생성 시 ObjectID가 기본키로 자동 설정
세컨더리키를 추가해 복합 인덱스 설정 가능

4.5.4 인덱스 최적화 기법(MongoDB 기반)

1. 인덱스는 비용이다

인덱스 탐색 시 인덱스 리스트 → 컬렉션 순으로 두 번 탐색 (읽기 비용 증가)
컬렉션 수정 시 인덱스도 수정 필요 → B-트리 균형 조절 비용 발생
무작정 모든 필드에 인덱스 설정은 비효율적
가져와야 하는 데이터 양이 많을수록 인덱스가 오히려 비효율

2. 항상 테스팅하라

서비스 특징(서비스에서 사용하는 객체 깊이, 데이터 양)에 따라 최적화 기법이 달라짐
explain() 함수로 쿼리 실행 후 소요 시간 측정·최소화

3. 복합 인덱스 생성 순서: 같음 → 정렬 → 다중 값 → 카디널리티

같음(==): equal 비교 쿼리 필드를 가장 먼저 인덱스로 설정
정렬: 정렬에 쓰는 필드를 그다음 인덱스로 설정
다중 값: >, < 등 범위 쿼리 필드는 나중에 설정
카디널리티: 유니크한 값이 많은(카디널리티 높은) 필드를 우선 설정
- 예: age vs email → email의 카디널리티가 더 높으므로 email 먼저

SECTION 4.4 데이터베이스의 종류

Lim임 — Wed, 18 Mar 2026 13:44:25 +0900

4.4.1 관계형 데이터베이스 (RDBMS)

행과 열을 가지는 표 형식 데이터를 저장하며 SQL로 조작하는 데이터베이스

대표 제품: MySQL, PostgreSQL, Oracle, SQL Server, MSSQL
각 제품마다 표준 SQL 외에 자체 SQL을 사용
- Oracle → PL/SQL
- SQL Server → T-SQL
- MySQL → SQL

MySQL

현재 가장 많이 사용하는 데이터베이스 (스택오버플로우 2021 기준 1위)
메타, 트위터 등 대형 기업에서 사용
C, C++로 개발
주요 기능: MyISAM 인덱스 압축, B-트리 기반 인덱스, 스레드 기반 메모리 할당, 최대 64개 인덱스
롤백, 커밋, 이중 암호 지원 보안 제공
쿼리 캐시 지원: 동일한 쿼리 재요청 시 구문 분석·최적화·실행을 건너뛰고 캐시 결과 반환
모듈식 스토리지 엔진 아키텍처: 데이터 웨어하우징, 트랜잭션, 고가용성 처리에 강점

PostgreSQL

MySQL 다음으로 개발자들이 선호하는 데이터베이스
특징: VACUUM (디스크 조각 영역 회수 장치)
최대 테이블 크기: 32TB
SQL 외에도 JSON으로 데이터 접근 가능
지정 시간 복구, 로깅, 접근 제어, 중첩 트랜잭션, 백업 지원

4.4.2 NoSQL 데이터베이스

"Not only SQL" — SQL을 사용하지 않는 데이터베이스

MongoDB

JSON으로 데이터 접근, BSON(Binary JSON) 형태로 저장
기본 스토리지 엔진: 와이어드타이거(WiredTiger) -> 키-값 모델에서 확장된 도큐먼트 기반 데이터베이스
빅데이터 저장 성능 우수, 고가용성·샤딩·레플리카셋 지원
스키마 없이 데이터 삽입 가능 → 로깅, 다양한 도메인 분석에 강점
도큐먼트 생성 시 ObjectID 자동 생성 (기본키 역할)

유닉스 타임스탬프(4바이트) + 랜덤 값(5바이트) + 카운터(3바이트)

redis

인메모리 데이터베이스 + 키-값 모델 기반

일반 DB는 보통
하드디스크(SSD/HDD)에 저장

근데 인메모리 DB는
메모리에 바로 올려놓고 사용 -> 속도가 진짜 빠름!

기본 데이터 타입: 문자열(string), 최대 512MB
이외에도 셋(set), 해시(hash) 등 지원
주요 사용 사례:
- pub/sub 기반 채팅 시스템
- 다른 DB 앞단의 캐싱 계층
- 세션 정보 관리
- sorted set을 이용한 실시간 순위표

일반 DB는 보통
하드디스크(SSD/HDD)에 저장

근데 인메모리 DB는
메모리에 바로 올려놓고 사용

SECTION 4.3 트랜잭션과 무결성

Lim임 — Tue, 10 Mar 2026 13:34:33 +0900

SECTION 4.3 트랜잭션과 무결성

4.3.1 트랜잭션 (Transaction)

하나의 논리적 기능을 수행하기 위한 *여러 쿼리들을 하나로 묶은 작업 단위
*이에 대한 특징은 원자성, 일관성, 독립성, 지속성이 있으며 이를 ACID특징이라고 함.

커밋 & 롤백

커밋(commit): 여러 쿼리가 성공적으로 처리되어 DB에 영구 저장 확정
커밋이 수행되었다 = 하나의 트랜잭션이 성공적으로 수행되었다.

롤백(rollback): 문제 발생 시 트랜잭션 이전 상태로 취소/복원
커밋·롤백 덕분에 데이터 무결성 보장

트랜잭션 전파

트랜잭션을 수행할 때 커넥션 단위로 수행하기 때문에 커넥션 객체를 넘겨야 함 -> 매번 하기 어렵고 귀찮음

커넥션 객체를 매번 넘기지 않고, 여러 메서드를 하나의 트랜잭션으로 묶는 것

ACID 특징

A — 원자성 (Atomicity) : "All or Nothing"

트랜잭션 내의 모든 작업은 전부 성공하거나 전부 실패해야 합니다.

[이체 예시]
1. 홍철 잔고 조회 (1000만원)
2. 홍철 잔고에서 500만원 차감
3. 규영 잔고에 500만원 추가

→ 2번에서 오류 발생 시? 1, 2번 모두 롤백 → 처음 상태로 완전 복구
→ 홍철 500만원 / 규영 0원 같은 "중간 상태"는 절대 허용 안 됨

커밋: 모두 성공 → 영구 저장
롤백: 하나라도 실패 → 전체 취소
트랜잭션 내에 외부 API 호출이 있다면, 롤백 시 처리 방법을 반드시 고려해야 함

C — 일관성 (Consistency) : "규칙을 항상 준수"

트랜잭션이 완료된 후에도 데이터베이스는 미리 정의된 규칙·제약 조건을 항상 만족해야 합니다.

[예시]
범석 잔고: 0원
범석이 500만원 이체 시도 → ❌ 불가

0원에서 500만원이 나오는 것은 "잔고 >= 0" 규칙 위반
→ DB가 이 트랜잭션을 거부하여 일관성 유지

트랜잭션 실행 전후 모두 유효한 상태를 유지해야 함
제약 조건(기본키, 외래키, 도메인 규칙 등)을 위반하는 데이터 변경은 허용되지 않음

I — 격리성 (Isolation) : "트랜잭션끼리 서로 간섭 금지"

여러 트랜잭션이 동시에 실행될 때, 각 트랜잭션은 다른 트랜잭션의 중간 상태를 볼 수 없어야 합니다.

[예시]
사용자 A: 잔고 조회 중 (트랜잭션 진행 중)
사용자 B: 동시에 같은 잔고를 수정 중

→ A는 B가 수정 중인 "확정되지 않은" 값을 보면 안 됨
→ 마치 순차적으로 실행된 것처럼 동작해야 함

격리 수준(SERIALIZABLE, REPEATABLE_READ, READ_COMMITTED, READ_UNCOMMITTED)으로 강도 조절 가능
격리성이 강할수록 동시성(성능)은 낮아짐

D — 지속성 (Durability) : "한 번 커밋되면 영구 보존"

성공적으로 커밋된 트랜잭션은 시스템 장애(정전, 오류)가 발생해도 반드시 유지되어야 합니다.

[예시]
이체 완료 후 커밋 → 서버 갑자기 다운
→ 재시작 후에도 이체된 내용은 그대로 유지되어야 함

체크섬: 데이터 무결성 오류 검출
저널링: 변경 전 로그를 먼저 기록해 복구 가능하게 함
롤백: 장애 시 마지막 커밋 상태로 복구

격리성 — 격리 수준

위로 갈수록 동시성 ↑, 격리성 ↓ / 아래로 갈수록 동시성 ↓, 격리성 ↑

낮은 격리 (빠름)  READ_UNCOMMITTED
                  READ_COMMITTED
                  REPEATABLE_READ
높은 격리 (느림)  SERIALIZABLE

1. READ_UNCOMMITTED (가장 낮은 격리)

커밋되지 않은 데이터도 읽을 수 있는 수준.

발생 현상: 더티 리드, 반복 불가 조회, 팬텀 리드 모두 발생 가능
데이터 무결성에 위험하므로 되도록 사용하지 않는 것이 좋음
단, 거대한 데이터를 "어림잡아" 집계할 때는 유용할 수 있음

[더티 리드 예시]
사용자 A: 보석 개수 100 → 1로 수정 (아직 커밋 안 함)
사용자 B: 조회 → 1로 읽음 ← 커밋 안 된 값을 읽어버림
사용자 A: 롤백 → 실제 값은 100이지만 B는 이미 1을 읽은 상태

2. READ_COMMITTED

커밋이 완료된 데이터만 읽을 수 있는 수준.

발생 현상: 반복 불가 조회, 팬텀 리드 발생 가능
가장 많이 사용되는 격리 수준
기본값: PostgreSQL, SQL Server, Oracle
커밋되지 않은 정보는 읽을 수 없지만, 다른 트랜잭션이 접근한 행을 수정할 수 있음

[반복 불가 조회 예시]
사용자 A: 보석 100 조회
사용자 B: 보석 100 → 1로 수정 후 커밋
사용자 A: 다시 조회 → 1로 읽힘 (같은 트랜잭션인데 값이 달라짐)

3. REPEATABLE_READ

한 트랜잭션 내에서 같은 행을 읽으면 항상 같은 값을 보장하는 수준.

발생 현상: 팬텀 리드 발생 가능
기본값: MySQL InnoDB
수정(UPDATE)은 막지만, 삽입(INSERT)/삭제(DELETE)는 막지 않음

[팬텀 리드 예시]
사용자 A: age >= 12인 회원 조회 → 3건
사용자 B: age = 15인 회원 삽입 후 커밋
사용자 A: 다시 조회 → 4건 (행이 추가되어 결과가 달라짐)

4. SERIALIZABLE (가장 높은 격리)

트랜잭션을 순차적으로 처리하는 수준.

발생 현상: 없음 (가장 안전)
여러 트랜잭션이 동시에 같은 행에 접근 불가
교착 상태 발생 가능성이 높고 성능이 가장 낮음

트랜잭션 A가 행 X를 처리 중
  → 트랜잭션 B가 행 X 접근 시도
    → B는 A가 끝날 때까지 대기

발생 현상 상세

더티 리드 (Dirty Read)

한 트랜잭션이 커밋되지 않은 다른 트랜잭션의 데이터를 읽는 현상
롤백 시 실제로 존재하지 않는 값을 읽은 것이 됨

반복 불가 조회 (Non-repeatable Read)

한 트랜잭션 내에서 같은 행을 두 번 읽었을 때 값이 달라지는 현상
다른 트랜잭션이 그 행을 수정(UPDATE) 하고 커밋했기 때문

팬텀 리드 (Phantom Read)

한 트랜잭션 내에서 같은 쿼리를 두 번 실행했을 때 행 수가 달라지는 현상
다른 트랜잭션이 행을 삽입(INSERT) 또는 삭제(DELETE) 했기 때문
반복 불가 조회와의 차이: 행의 값이 바뀌는 게 아니라 행 자체가 추가/삭제됨

현상	원인	영향 범위
더티 리드	미커밋 데이터 읽기	행의 미확정 값
반복 불가 조회	타 트랜잭션 UPDATE	행의 값 변경
팬텀 리드	타 트랜잭션 INSERT/DELETE	결과 행 수 변경

4.3.2 무결성 (Integrity)

데이터의 정확성·일관성·유효성을 유지하는 것

종류	설명
개체 무결성	기본키는 빈 값(NULL) 허용 안 함
참조 무결성	참조 관계의 두 테이블 데이터는 항상 일관성 유지
고유 무결성	특정 속성은 고유한 값만 가져야 함
NULL 무결성	NULL 불가 조건이 있는 속성은 NULL이 될 수 없음