계층형 사전

9개 분야, 901개의 노트를 분야 → 주제 → 노트 순으로 정리했어요. 가나다·ABC 색인으로도 찾을 수 있어요.

901개 항목

Frontend

330

브라우저와 모바일 화면에서 사용자가 직접 만나는 UI를 만드는 분야의 지식 모음.

기술 스택 고르기: 기술 스택은 혼자가 아니라 함께 쓰는 것이라 커뮤니티가 키운다. 기술 수용 주기·캐즘·하이프 사이클로 유행이 만들어지는 과정을 보고, 범용성·학습 비용·커뮤니티·인력·지속 가능성 다섯 기준, 큰 팀이 유지 보수성과 안정성을 위해 보는 결정 축(도구 강제·경계·재현성), 언어부터 배포·모니터링까지 계층별 2026년 기본 선택과 고르는 이유, 레거시를 대하는 자세를 정리했다.
프론트엔드 개발자의 업무 범위와 역량: 프론트엔드의 일을 데이터 흐름 기준 여섯 영역(보여 주기·조작·보내기·받기·환경 관리·도구 만들기)으로 나누고, 퍼블리셔·백엔드·풀스택과의 경계, 회사와 동료가 보는 잘하는 프론트엔드 개발자의 조건을 정리했다.
프론트엔드 엔지니어의 세 가지 성장 트랙: 주니어 이후 프론트엔드 엔지니어가 깊어질 방향을 웹 특화(소프트웨어 엔지니어)·제품 특화(프로덕트 엔지니어)·운영 특화(풀스택 엔지니어) 세 트랙으로 나누고, 트랙별 지식·성장법·함정·시니어 이후 진로, 모든 트랙의 바탕인 탁월한 엔지니어의 다섯 역량과 시니어다운 일하기를 정리한다.
프론트엔드 학습 로드맵: 웹 표준(HTML·CSS·JavaScript·DOM)에서 TypeScript, React와 메타 프레임워크, 데이터 가져오기, 테스트·배포로 이어지는 프론트엔드 학습 순서, 필수와 관심·직무에 따른 선택 기술, 함께 쌓을 CS 기초, 공부하는 방법.
Electron: 웹 기술로 데스크톱 앱 만들기: Electron은 Chromium과 Node.js를 한 앱에 묶어 HTML·CSS·JavaScript로 macOS·Windows·Linux 데스크톱 앱을 만든다. 앱 수명과 OS 기능을 맡는 메인 프로세스, 창마다 뜨는 렌더러 프로세스, 둘을 잇는 preload·contextBridge·IPC 구조와, 기본으로 켜진 컨텍스트 격리·샌드박스 같은 보안 기본값, 패키징과 릴리스 주기, OS 웹뷰를 쓰는 Tauri와의 차이를 정리한다.
Quasar 프레임워크 기초: Vue 3 기반 UI 프레임워크 Quasar의 q- 컴포넌트와 유틸리티 클래스, 레이아웃·페이지 구조와 중첩 라우팅, 플러그인으로 쓰는 기능(Dialog), 폼 검증 라이브러리 연동을 정리한다.
React와 Vue 말고: Svelte, Angular, Preact, Alpine.js, HTMX: React·Vue 다음으로 많이 쓰이는 프레임워크들의 특징을 비교한다. 컴파일러, 풀스택 프레임워크, 경량 대체재, HTML 속성 기반 도구로 성격이 갈린다. Knockout부터 Svelte까지 프레임워크의 계보와 컴파일러 방식이 빠른 이유도 다룬다.
React와 Vue 비교: 같은 범주(컴포넌트 기반 선언형 UI, 가상 DOM)에 속하는 React와 Vue의 차이를 정리한다. JSX와 템플릿, 불변 상태와 반응형 상태, 단방향 흐름과 v-model, 라이브러리와 공식 생태계의 범위를 비교하고, 흔한 오해와 고르는 기준을 다룬다.
UI 엔지니어링의 열두 가지 문제: UI 엔지니어링의 실력은 라이브러리가 아니라 문제를 아는 데서 나온다. 일관성·반응성·지연·내비게이션·낡은 캐시·엔트로피·우선순위·접근성·국제화·전달·복원력·추상화라는 열두 문제는 툴팁부터 대형 SNS까지 어느 규모에서나 나타나며, 각 문제에 오늘날 쓰는 도구와 함께 정리한다.
Vue 상태 관리: Pinia(옛 Vuex): 여러 컴포넌트가 함께 쓰는 데이터를 스토어 한 곳에 모으는 Vue의 상태 관리. 지금 공식 라이브러리는 Pinia이고, defineStore로 state·getters·actions를 정의한다. Vuex의 mutations/actions 구분은 사라졌다.

장애가 있는 사람도 웹을 인지하고 조작하고 이해할 수 있게 만드는 일. 장애는 능력과 환경의 불일치이고, 브라우저는 시맨틱 HTML로 접근성 트리를 만들어 보조 기술에 넘기며, WCAG가 최소선을 정한다. 표준을 지켜도 쓰기 어려울 수 있어 장애인과의 사용성 테스트와 조직 차원의 우선순위가 필요하다. 사용자 관점과 WCAG, 시맨틱 구조·대체 텍스트·폼·ARIA·키보드·위젯·CSS 기법, 자동·수동 평가와 스크린 리더 테스트를 하위 노트로 잇는다.

대체 텍스트, 링크, 쉬운 글: 대체 텍스트는 이미지가 그 자리에서 하는 일을 글로 바꾼 것이라 같은 사진도 맥락에 따라 alt가 달라진다. 링크는 맥락 없이 목록으로만 들어도 뜻이 통해야 하고, 본문 글은 짧은 문장·익숙한 낱말·논리적 구성으로 인지 부담을 줄인다.
디자인 단계의 접근성: 접근성 문제는 상당수가 디자인 단계에서 막힌다. 포용적 디자인 일곱 원칙, 장애를 담은 페르소나와 시뮬레이터의 한계, 접근성 휴리스틱 리뷰, 핸드오프 전 접근성 주석, 그리고 컴포넌트·패턴·디자인 시스템을 고르는 기준을 정리한다.
복합 위젯의 ARIA 패턴: 콤보박스·날짜 선택기·메뉴·상태 알림: 네이티브 요소가 없는 복합 위젯을 스크린 리더가 이해하고 조작할 수 있게 만드는 패턴. 자동완성 콤보박스, 날짜 선택기(grid)와 날짜 직접 입력, 사이트 메뉴와 menubar의 구분, 수량 조절 버튼, 정렬 표, 페이지 번호, 툴팁, 좌석 배치 같은 2차원 선택, 그리고 로딩·토스트·글자 수·실시간 검증 같은 상태 알림을 정리한다.
색과 움직임의 접근성: 저시력·색각 결핍 사용자는 스크린 리더가 아니라 화면을 본다. 색만으로 정보를 전하지 않고, 텍스트와 필수 그래픽의 대비를 지키고, prefers-color-scheme·prefers-contrast·prefers-reduced-motion으로 사용자 설정을 존중하고, 움직임은 기본을 줄인 상태로 두고 5초 넘는 자동 애니메이션은 멈출 수 있게 한다.
스크린 리더로 테스트하기: 스크린 리더 테스트는 읽는 순서, 대체 텍스트, 제목·랜드마크·폼·표의 의미가 실제로 어떻게 들리는지 확인한다. 데스크톱은 NVDA나 JAWS 하나에 VoiceOver를, 모바일은 iOS VoiceOver와 Android TalkBack을 쓰고, 각 스크린 리더의 최소 단축키(읽기 시작·중지, 제목·랜드마크·폼 이동, 요소 목록)만 익히면 기본 점검이 된다.
자막, 대본, 음성 해설: 동영상과 오디오에는 소리를 글로 바꾼 자막, 소리와 화면을 모두 글로 담은 대본, 화면 정보를 말로 전하는 음성 해설이 필요하다. 자막은 동기화·동등·접근 가능해야 하고, 실시간 콘텐츠는 속기나 사람이 검수한 음성 인식으로 자막을 단다. 웹에서는 <track>과 WebVTT로 붙인다.
장애 유형별 웹 사용: 시각·청각·운동·인지·발작과 전정·말하기 장애 사용자가 어떤 보조 기술로 웹을 쓰고 어디서 막히는지 정리한다. 진단명보다 기능적 어려움으로 보고, 하나의 설계가 사용자의 조정과 보조 기술을 받아들이게 만드는 것이 핵심이다.
접근 가능한 위젯: 펼침·탭·캐러셀: 펼침(디스클로저)·아코디언은 <details>/<summary>와 name 속성으로 먼저 만들고, 직접 만들면 button + aria-expanded + hidden을 쓴다. 탭은 APG 패턴대로 tablist·tab·tabpanel과 로빙 tabindex, 방향키를 갖추고, 캐러셀은 정지 버튼·포커스 시 정지·숨은 슬라이드 차단·라이브 영역을 갖춘다.
접근 가능한 페이지 구조: 스크린 리더·키보드 사용자는 페이지를 위에서부터 읽지 않고 제목·랜드마크·링크 목록으로 건너뛰며 탐색한다. 페이지 제목, 문서 언어, 제목 계층, 영역, 목록, 건너뛰기 링크, 사이트 검색, iframe 제목, 데이터 표의 머리글 연결이 그 탐색 경로를 만든다.
접근 가능한 폼과 오류 처리: 모든 입력 칸에는 코드로 연결된 이름이 있어야 한다. label을 기본으로, 표처럼 일대일이 안 되는 곳은 aria-labelledby, 보조 설명은 aria-describedby로 잇고, 묶음은 fieldset·legend로 준다. 검증은 서버와 클라이언트를 함께 두고, 오류는 알리고·데려가고·다시 제출하게 하는 세 단계로 복구시킨다. WCAG 2.2의 중복 입력 금지와 인지 테스트 없는 인증까지 다룬다.
접근성 평가 방법과 도구: 접근성 감사는 기준선을 잡고 개발 주기 내내 반복하는 자동·수동·보조 기술 테스트의 조합이다. 자동 검사 도구는 명백한 오류와 사람이 볼 곳을 짚어 줄 뿐 접근 가능한지는 판정하지 못하므로, DevTools로 이름을 확인하고 키보드·시각·콘텐츠·확대·스크린 리더 순으로 수동 점검한다. 결과는 ACR(VPAT)로 보고하고, 오버레이 제품은 이 과정을 대신하지 못한다.
접근성을 위한 CSS와 타이포그래피: CSS는 표현만 맡고 의미는 HTML이 진다. 소스 순서와 화면 순서를 맞추고, 숨김은 모두에게 숨길지(display:none·hidden) 화면에서만 숨길지(visually-hidden) 구분한다. 400% 확대에서도 가로 스크롤 없이 읽히게(1.4.10 Reflow), 사용자가 줄·글자 간격을 넓혀도 깨지지 않게(1.4.12 Text Spacing) 만들고, 글꼴·정렬·글줄 길이로 읽기 부담을 줄인다.
키보드 접근성과 포커스 관리: 모든 기능은 키보드만으로 쓸 수 있어야 한다. 표준 키 조작, :focus-visible로 지키는 포커스 표시와 WCAG 2.2의 Focus Not Obscured, 소스 순서와 tabindex, inert와 <dialog>로 만드는 안전한 모달, 장치 독립 이벤트와 동적 콘텐츠의 포커스 처리를 정리한다.
ARIA와 접근 가능한 이름: ARIA는 HTML로 표현할 수 없는 role·state·property를 접근성 트리에 더하지만 동작은 더하지 않는다. 다섯 가지 사용 규칙, 접근 가능한 이름과 설명이 계산되는 순서(aria-labelledby > aria-label > 네이티브 label·alt > 내용 > title > placeholder), Label in Name, 라이브 영역을 정리한다.
WCAG와 POUR 원칙: WCAG는 인지·운용·이해·견고(POUR) 네 원칙 아래 13개 지침과 성공 기준으로 웹 콘텐츠 접근성의 최소선을 정한다. 2026년 기준 권고안은 WCAG 2.2(86개 기준, 4.1.1 삭제)이고 따로 요구되는 기준이 없으면 AA를 목표로 한다. 형제 지침(ATAG·UAAG)과 각국 법, 원칙별 점검 질문, 모든 성공 기준의 체크리스트를 정리했다.

Architecture16

폴더 구조, 의존성, SOLID, Feature-Sliced Design처럼 프론트엔드 코드를 어떻게 나누고 어디에 두는지에 관한 설계 원칙 모음.

가독성을 높이는 전략: 읽기 좋은 코드는 한 번에 고려할 맥락이 적고, 위에서 아래로 읽히고, 시각적 배치와 의미적 묶음이 일치한다. 같이 실행되지 않는 코드 분리, 구현 상세 추상화, 로직 종류별 함수 쪼개기로 맥락을 줄이고, 복잡한 조건·매직 넘버에 이름을 붙이고, 시점 이동과 중첩 삼항을 줄이고, 게슈탈트 법칙(근접성·공통 영역·유사성·연속성·폐쇄성)으로 빈 줄·주석·배치·이름을 점검한다.
결합도를 낮추는 전략: 결합도는 코드를 고쳤을 때 영향이 미치는 범위다. 모듈 결합도의 고전적 6단계 분류(자료~내용)와 높은 결합의 신호를 정리하고, 페이지 전체 쿼리 파라미터를 한 훅에 몰지 않고 책임별로 쪼개고, 앞으로 갈라질 수 있는 코드는 중복을 허용하고, Props Drilling은 조합(children) 패턴으로 먼저 풀고 마지막에 Context를 쓴다. 앱 규모에서는 기능 모듈이 서로를 부르지 않고 퍼사드(샌드박스)와 중재자(앱 코어)를 거치게 한다.
변경하기 쉬운 코드의 네 가지 기준: 좋은 프론트엔드 코드는 변경하기 쉬운 코드다. 가독성·예측 가능성·응집도·결합도 네 기준으로 판단하고, 네 기준은 서로 부딪히므로 상황에 따라 무엇을 우선할지 고른다. 기준별 개선 전략과 자주 논쟁되는 컨벤션, 코드 품질을 챙기는 이유·타이밍·감각 기르는 법을 함께 정리한다.
예측 가능성을 높이는 전략: 예측 가능한 코드는 이름·파라미터·반환 값만 보고 동작을 알 수 있다. 라이브러리와 같은 이름으로 다른 동작을 하지 않고, 같은 종류의 함수는 반환 타입을 통일하고(Discriminated Union), 이름에 드러나지 않는 로깅 같은 숨은 로직은 호출부로 꺼낸다.
응집도를 높이는 전략: 응집도는 함께 수정돼야 할 코드가 항상 함께 수정되는지다. 모듈 응집도의 고전적 7단계 분류(기능적~우연적)와 낮은 응집의 신호를 정리하고, 함께 바뀌는 파일을 도메인 디렉토리에 모으고, 매직 넘버를 상수로 묶어 한쪽만 바뀌는 일을 막고, 폼은 변경 단위에 따라 필드 단위 검증과 스키마 기반 폼 전체 검증 중 하나를 고른다.
추상화 계층과 데이터 흐름: 요구사항을 데이터로 표현하면 구현이 되고, 구현에 알맞은 수준의 이름을 붙이면 추상화가 된다. 잘 변하지 않는 추상화가 쌓여 계층이 되고, 계층 사이를 사용자 중심으로 순환하는 데이터 흐름이 코드의 자리를 정한다. 요구사항을 이 계층과 흐름의 구간으로 쪼개 채우는 사고법(그라데이션 사고)을 정리한다.
컴포넌트를 분리하는 기준과 방법: 컴포넌트를 나누는 이유는 재사용, 복잡성, 렌더링 범위 세 가지다. 재사용할 컴포넌트는 주변 HTML 문맥에 기대지 않을 만큼 일반적이어야 하고, 쓰는 곳마다 조건문이 붙는다면 중복이 아니므로 고유한 부분은 props로 넘긴다. 복잡한 컴포넌트는 책임과 변경 빈도(UI vs 비즈니스 로직)를 기준으로 나누고, 서로 무관한 상태는 각자의 컴포넌트로 내린다.
프론트엔드 폴더 구조의 진화: 역할 기반 폴더(components·hooks·services)에서 출발해 순수 UI와 도메인 컴포넌트를 나누고, 페이지를 독립시키고, 다시 엔티티(데이터)·위젯(화면)·기능(행동) 중심으로 응집해 가는 과정을 따라가며, 좋은 폴더 구조는 팀의 멘탈 모델과 일치하는 구조라는 결론을 정리한다. FSD를 규칙이 아니라 렌즈로 쓰는 법.
프론트엔드 MV* 아키텍처의 흐름: MVC에서 MVI까지: MVC·MVP·MVVM의 구조와 차이, 수동적 뷰·감독 컨트롤러·프레젠테이션 모델·Model 2 같은 변형, 웹 프론트엔드의 아키텍처가 MVC → MVVM → Container-Presenter → Flux → 가벼운 전역 스토어·서버 상태 관리로 바뀌어 온 흐름과, Flux가 reducer와 단일 스토어의 Redux로 줄어든 과정, 그 흐름을 정리한 MVI(Model-View-Intent) 아키텍처. 뷰와 비즈니스 로직을 분리하고, 뷰는 의도만 전하고, 데이터는 한 방향으로 돈다.
프론트엔드에서 관심사의 분리: 관심사의 분리는 한 단위가 하나의 선명한 기준으로 구분되게 해 인지 부하를 줄이는 일이다. 프론트엔드는 역할(HTML·CSS·JS) → 기능(컴포넌트) → 컴포넌트 안의 다시 계층으로 분리 축을 바꿔 왔고, 관심사는 모듈·레이어·데이터 흐름 여러 방향이 있어 프로젝트 시기마다 우선순위가 달라진다.
프론트엔드에서 의존성 관리하기: 의존성은 곧 변경에 노출되는 관계다. 변수는 스코프를 좁히고 값을 바꾸는 길을 하나로 만들고, 여러 곳이 쓰는 함수는 의존성 역전으로 계약에 기대게 하고, 타입은 API 응답이 아니라 잘 바뀌지 않는 도메인 타입에 기대게 한다.
프론트엔드와 SOLID 원칙: 객체 지향 설계 원칙 SOLID(SRP·OCP·LSP·ISP·DIP)를 React 컴포넌트와 함수 위주 JS·TS 코드에 옮겨 본다. 책임은 요구 사항 단위로 나누고, 분기 대신 확장으로 기능을 늘리고, props는 필요한 만큼만 받고, 데이터 소스는 추상화 뒤에 숨긴다.
Atomic Design과 컴포넌트 폴더 구조: Brad Frost의 Atomic Design(원자 → 분자 → 유기체 → 템플릿 → 페이지)은 디자인 시스템을 이해하기 위한 멘탈 모델이지 폴더 구조 규칙이 아니다. 그대로 폴더로 쓰면 분자·유기체 경계가 흐려지고 계층 하나로는 분류가 안 된다. 기획·디자인이 부르는 이름으로 먼저 나누고, 이름이 더 없는 곳부터 계층 구조를 쓰는 절충안을 정리한다.
Feature-Sliced Design: 프론트엔드 코드를 레이어 → 슬라이스 → 세그먼트 3단계로 나누고, 위 레이어만 아래 레이어를 쓰게 하며, 슬라이스는 Public API로만 드나들게 하는 아키텍처 방법론. 구조, 규칙, 다른 구조와의 비교, Next.js와 함께 쓸 때의 충돌, 그리고 레이어 경계를 정하고 점진적으로 도입하는 법을 정리한다.
UI 변경 감지: 상태가 바뀌면 화면은 어떻게 따라 바뀌나: UI 프레임워크의 핵심 문제는 상태를 화면으로 투영하고, 상태가 바뀌었을 때 최소한의 DOM만 고치는 것이다. 전부 새로 그리기, 수동 재렌더, 데이터 바인딩(관찰 가능한 모델·Proxy), 더티 체킹(AngularJS digest·zone.js), 가상 DOM 비교, 불변 데이터로 비교 건너뛰기, 시그널, 컴파일러까지 변경을 '언제·어떻게 아는가'로 나눠 비교하고, React Fiber가 렌더링을 쪼개 우선순위를 매기는 방식을 정리한다.

CSS38

HTML 요소의 모양과 배치를 지정하는 스타일 언어.

객체 지향 CSS(OOCSS): 구조와 겉모양을 분리하고, 컨테이너와 콘텐츠를 분리해 재사용 가능한 클래스 '객체'로 CSS를 짜는 방법론. 미디어 객체 같은 대표 패턴, 특정도 전쟁을 피하는 규칙, 시맨틱 클래스와의 긴장, 캐스케이드 기본값·타이포그래피 전략·객체 범위 같은 실무 전략과 흔한 오용, BEM·유틸리티 CSS로 이어진 흐름까지.
노치와 폴더블 화면 대응: env()와 뷰포트 세그먼트: 노치·둥근 모서리·홈 표시줄처럼 화면을 가리는 하드웨어는 viewport-fit=cover와 env(safe-area-inset-*)로 비켜 간다. 두 화면에 걸친 폴더블은 horizontal·vertical-viewport-segments 미디어 기능으로 감지하고 env(viewport-segment-*)로 경첩을 피해 칸을 나눈다. 세그먼트 기능은 아직 실험 단계라 점진적 향상으로만 쓴다.
무한 캐러셀과 자동 슬라이드 구현: 끝에서 처음으로 자연스럽게 이어지는 캐러셀을 만드는 기법. 양끝에 복제 슬라이드를 붙이고 transitionend에서 전환 없이 제자리로 점프하는 버튼형 캐러셀, 애니메이션 중 연속 클릭 잠금, 페이지 단위 이동, 목록을 두 번 이어 붙여 translateX(-50%)로 흘리는 CSS 마키, @keyframes 퍼센트로 멈춤 구간을 만드는 자동 슬라이드, 가장자리 페이드와 움직임 줄이기까지.
미디어 쿼리 문법과 미디어 기능: 미디어 쿼리는 미디어 타입(all·screen·print)과 미디어 기능으로 이루어진다. and·or·not과 범위 문법으로 조건을 묶고, 뷰포트 크기·화면 비율·해상도·갱신 속도·표시 모드·색 표현력·입력 장치·사용자 설정·스크립트 여부까지 묻는다. 입력 방식은 화면 크기로 짐작하지 않고 pointer·hover로 직접 묻는다.
박스 모델과 display: 모든 요소를 content·padding·border·margin의 네모로 다루는 박스 모델, 내용이 크기를 정하는 내재적 크기와 바깥이 정하는 외재적 크기, margin·padding·gap으로 간격을 주는 방법과 margin 병합, 병합과 float를 안에 가두는 블록 서식 맥락(BFC), 배치 방식을 결정하는 display.
반응형 디자인과 다국어 타이포그래피: 유동 그리드·유동 미디어·미디어 쿼리라는 세 요소에서 출발해 뷰포트 메타 태그, 미디어 쿼리와 브레이크포인트, 부모 크기에 반응하는 컨테이너 쿼리와 미디어 쿼리 없는 레이아웃, 모바일 퍼스트, 해상도와 기기 픽셀 비율, 상대 단위로 화면 크기에 맞추는 법. rem과 :lang()으로 언어마다 글자 크기를 바꾸는 다국어 반응형 타이포그래피까지 다룬다.
쓰기 모드와 논리적 속성: writing-mode가 정하는 블록·인라인 축, 그리고 top·left·width 같은 물리 속성 대신 block-start·inline-end·inline-size처럼 글의 흐름을 기준으로 쓰는 논리적 속성. 그리드와 플렉스박스가 왜 start·end로 생각하는지도 여기서 풀린다.
웹 타이포그래피: 가독성, 글줄 길이, 웹폰트: 사람이 화면의 글을 읽는 방식에서 출발해 글줄 길이(45~85자, ch 단위), 글자 크기와 줄 간격의 균형, x-height를 맞추는 font-size-adjust, 자간·단어 간격과 가변 폰트, 양쪽 정렬과 하이픈, 대비와 다크 모드, 그리고 @font-face로 웹폰트를 선언하는 법까지.
유틸리티 우선 CSS: 속성 하나짜리 클래스를 조합해 화면을 만들고, 반복이 보일 때만 컴포넌트로 뽑는 CSS 작성 방식. '관심사의 분리'를 의존 방향의 선택으로 다시 보는 관점, 시맨틱 클래스에서 유틸리티까지 넘어가는 단계, 정해진 값만 고르게 해 생기는 일관성, 인라인 스타일과의 차이, 장단점과 Tailwind CSS v4 기준의 현재 사용법을 정리한다.
커서와 포인터 입력: 입력 장치에 맞춰 상호작용을 알리는 CSS. 상태를 알리는 cursor와 caret-color, 마우스·터치를 구분하는 pointer·any-pointer·hover 미디어 쿼리, 브라우저 기본 제스처를 고르는 touch-action, 상호작용을 끄는 pointer-events를 정리한다.
테마와 다크 모드 구현: theme-color, color-scheme, accent-color: 테마는 페이지 색만이 아니라 브라우저 UI(theme-color), 브라우저가 그리는 폼·스크롤바(color-scheme), 체크박스·라디오 강조색(accent-color), 아이콘과 사진까지 함께 바꿔야 완성된다. 색 값은 커스텀 속성에 모아 한 번만 재정의하고, 사진은 밝기를 낮추거나 picture로 바꿔 끼운다.
팝오버와 앵커 위치 지정: 툴팁·드롭다운·토스트를 JS 위치 계산 없이 만드는 두 기능. popover 속성은 auto·manual·hint 세 종류의 열고 닫기 규칙과 최상위 레이어를 주고, CSS 앵커 위치 지정은 anchor-name·position-anchor·position-area·anchor()로 요소를 다른 요소 옆에 붙이며 position-try-fallbacks로 화면 밖으로 나갈 때의 대안 위치를 정한다.
CSS 그리드 레이아웃: 행과 열을 동시에 다루는 2차원 레이아웃 CSS 그리드의 용어, 핵심 속성, fr·minmax·auto-fill 같은 크기 도구와 명시적·묵시적 그리드, 서브그리드, 그리고 접근성과 플렉스박스와의 역할 분담 같은 실무 원칙.
CSS 기초: 문법, 적용 방법, 단위: 선택자와 선언으로 이루어진 CSS 문법, 스타일 적용 방법 3가지, 수·퍼센트·절대·상대 길이와 각도·해상도 단위, 그리고 hex·rgb·hsl부터 oklch·display-p3·color()·상대 색상 문법까지의 색 표현, 브라우저 기본 스타일을 맞추는 리셋과 노멀라이즈.
CSS 목록과 카운터: 목록 항목은 display: list-item이라 ::marker를 가진다. list-style로 기호 종류·위치·이미지를 바꾸고, ::marker로 기호를 직접 꾸미고, @counter-style로 새 번호 체계를 만든다. counter-reset·counter-increment·counter()·counters()로 각주·절 번호·중첩 번호를 매기는 법과 reversed 목록까지 정리한다.
CSS 배경과 그라디언트: 모든 박스 뒤에는 배경 레이어가 있다. background-color 위에 이미지·그라디언트를 여러 겹 쌓고, repeat·position·size·attachment·origin·clip으로 각 겹을 조절한다. linear·radial·conic 그라디언트와 반복형, 색 공간을 고르는 보간(in oklch)까지 정리한다.
CSS 선택자와 우선순위: 스타일을 적용할 요소를 고르는 선택자(속성 연산자, 결합자, 상태·위치·폼 가상 클래스, 가상 요소)와 네이티브 CSS 중첩, 스타일이 겹칠 때 무엇이 적용되는지 정하는 캐스케이딩·특정성, 그리고 상속과 inherit·initial·unset·revert·revert-layer 키워드.
CSS 설계 방법론: BEM과 ITCSS: 전역 범위와 명시도 문제를 규칙으로 다스리는 CSS 방법론. 이름으로 관계를 드러내는 BEM(.block__element--modifier), 파일을 일반→구체 순서의 일곱 층으로 쌓는 ITCSS와 BEMIT 접두사, OOCSS·SMACSS와의 차이를 비교하고, 지금은 @layer·@scope·CSS Modules가 같은 일을 어떻게 나눠 맡는지 정리한다.
CSS 시각 효과: 필터, 블렌드 모드, 클리핑, 마스킹: 그래픽 도구에서 하던 효과를 CSS로 실시간 적용한다. 요소 픽셀을 바꾸는 filter와 뒤 배경만 바꾸는 backdrop-filter, 겹친 층의 색을 섞는 블렌드 모드와 isolation, 도형으로 보이는 영역을 자르는 clip-path, 이미지 픽셀로 투명도를 정하는 mask, 글이 도형을 따라 흐르게 하는 shape-outside까지 정리한다. 같은 이미지 효과를 필터·블렌드·SVG·캔버스로 걸 때의 비용 차이와, 비표준 반사(-webkit-box-reflect)를 마스크로 대신하는 법도 다룬다.
CSS 실전 팁: 리셋과 작은 패턴: 프로젝트마다 반복해 쓰는 짧은 CSS 패턴 모음. 새 프로젝트의 출발점이 되는 최소 리셋(box-sizing·margin·line-height·미디어·폼 글꼴)과 all: unset으로 버튼 초기화하기, 쉼표 목록·빈 링크 주소 표시·깨진 이미지 꾸미기·연속 <br> 숨기기 같은 생성 콘텐츠·선택자 패턴, table-layout: fixed와 높이 펼치기 애니메이션, 그리고 다른 노트에 집이 있는 팁의 위치와 이제 쓰지 않는 옛 팁.
CSS 애니메이션: transition과 @keyframes: 상태 변화를 부드럽게 잇는 transition과, 여러 단계를 스스로 재생하는 @keyframes 애니메이션의 차이와 속성. 부드러운 애니메이션을 위한 transform·opacity 원칙, 움직임 줄이기 설정 존중, Animate.css·Hover.css·Animista 같은 CSS 애니메이션 라이브러리와 JS 라이브러리로 넘어갈 시점을 정리한다.
CSS 오버플로와 스크롤: 넘침 처리와 스크롤 스냅: 내용이 박스보다 클 때 보일지·자를지·스크롤할지를 정하는 overflow, 한 줄 말줄임을 만드는 text-overflow, 스크롤 영역의 키보드 접근성, 스크롤바 스타일, scroll-behavior와 overscroll-behavior, 갤러리처럼 칸마다 멈추는 스크롤 스냅까지 정리한다.
CSS 점진적 향상: 폴백과 피처 쿼리: 새 CSS 기능을 지원하지 않는 브라우저를 '똑같이 보이게'가 아니라 '쓸 만하게' 지원하는 방식. 모르는 CSS는 무시된다는 규칙, 새 레이아웃이 옛 레이아웃을 덮어쓰는 규칙, @supports 피처 쿼리로 폴백을 정리하는 패턴, 브라우저 대신 컴포넌트에 매기는 지원 등급, 무거운 폴리필을 피하는 이유, 실제 브라우저 테스트까지.
CSS 커스텀 속성으로 색상 체계 짜기: 색상 변수를 팔레트·기능 색상·컴포넌트 색상의 세 단계로 나누고 CSS 커스텀 속성으로 연결하면 테마, 다크 모드, 화이트 라벨, 대비 조정이 변수 몇 개만 바꾸는 일이 된다. 전처리기 변수와의 차이, 모든 변수를 :root에 두면 안 되는 이유까지.
CSS 테두리와 그림자: 테두리는 style을 정해야 보이고, 색은 기본으로 currentColor를 따른다. border-radius의 타원 모서리와 아홉 조각으로 자르는 border-image, 그리고 상자에 붙는 box-shadow, 글자에 붙는 text-shadow, 투명 영역의 윤곽을 따르는 drop-shadow() 필터를 용도별로 비교한다.
CSS 함수: calc()·clamp()와 수학 함수: CSS 함수는 인자를 받아 값을 돌려주는 내장 기능이다. 중첩해 쓸 수 있고, `@function`으로 직접 정의하는 기능은 아직 Chromium 계열만 지원한다. 값을 꺼내는 var()·attr()·url(), 단위를 섞어 계산하는 calc()·min()·max()·clamp(), 삼각·지수·부호 함수, 도형 함수, 변형 함수를 용도별로 묶고 브라우저 지원 범위를 정리한다.
CSS Houdini: 렌더링 엔진에 끼어드는 API: 브라우저 CSS 엔진의 파싱·스타일·레이아웃·페인트·합성 단계에 개발자 코드를 걸 수 있게 하려는 저수준 API 묶음. CSS 폴리필이 왜 어려운지에서 출발해 워크릿, Properties and Values(@property), Typed OM, Paint·Layout·Animation Worklet의 역할과 2026년 기준 지원 상태를 정리한다. 모든 브라우저에 들어간 것은 @property와 일부 Typed OM뿐이다.
CSS position과 z-index: 요소를 문서 흐름 안팎에서 원하는 위치로 옮기는 position 속성, 쌓임 순서를 정하는 z-index와 쌓임 맥락, 다른 요소에 붙여 배치하는 앵커 위치 지정.
CSS-in-JS와 CSS Modules: 대규모 CSS의 일곱 가지 문제(전역 이름 공간, 의존성, 죽은 코드, 압축, 상수 공유, 비결정적 우선순위, 격리 깨짐)와 이를 빌드 도구로 푼 CSS Modules, JS로 푼 CSS-in-JS를 비교한다. 런타임 방식에서 빌드 타임(zero-runtime) 방식으로 옮겨 간 이유와 서버 컴포넌트 시대의 선택지까지 정리한다.
CSS가 동작하는 방식: 핵심 개념과 픽셀이 되기까지: 속성 암기보다 먼저 익혀야 할 CSS의 핵심 개념(캐스케이드·상속·특정도, 박스 모델, 일반 흐름, 서식 맥락, 흐름 안팎, 정렬, 크기 결정)과, 브라우저가 CSS를 해석·캐스케이드·계산해 레이아웃으로 넘기는 과정.
CSS의 역사로 본 CSS가 어려워진 이유: 문서를 꾸미려고 만든 CSS가 웹 애플리케이션을 만들게 되면서 생긴 두 구조적 문제(전역 범위와 명시도)와, 이를 풀려고 등장한 시맨틱·Sass·BEM·Flexbox·CSS Modules·CSS-in-JS·유틸리티 CSS, 그리고 @layer·@scope·네이티브 중첩처럼 문제를 CSS 스스로 푸는 최근 스펙까지의 흐름을 정리했다.
Float와 Flexbox 레이아웃: Normal Flow를 벗어나 요소를 배치하는 float와 flow-root로 float 담기, 축을 기준으로 아이템을 정렬하는 1차원 레이아웃 모델 Flexbox. 속성의 초깃값과 flex 키워드, 내용 기반 공간 분배, auto margin으로 그룹 나누기, 쓰기 모드에 따라 바뀌는 축, min-width: auto 함정, 그리고 글을 여러 단으로 흘리는 다단 레이아웃까지.
line-height와 vertical-align: 글꼴 지표와 인라인 서식 맥락: 같은 font-size라도 글꼴마다 높이가 다른 이유(em 사각형과 ascent·descent 지표), 인라인 요소의 두 높이(content-area와 line-height가 만드는 가상 영역), 줄 상자(line box)의 높이가 정해지는 방식, line-height: normal의 실제 값, vertical-align이 줄 상자를 키우는 원리와 이미지 아래 틈 같은 증상의 원인.
PostCSS와 CSS 변환 도구: CSS를 AST로 파싱해 플러그인으로 변환하는 도구 PostCSS. 기능을 한 덩어리로 묶은 Sass와 달리 필요한 기능만 플러그인으로 고르는 구조, Autoprefixer·postcss-preset-env·browserslist로 브라우저 대상에 맞춰 변환하는 흐름, 미래 문법을 미리 쓸 때의 위험, 그리고 Lightning CSS·Vite·Tailwind v4가 맡은 지금의 역할 분담을 정리한다.
Sass: 파일 구조, 믹스인과 @extend: CSS 전처리기 Sass의 쓰임새와 설치, 파셜 파일을 폴더별로 나누는 아키텍처(7-1 패턴), 중첩·파일 크기 규칙, 믹스인과 @extend의 차이와 둘을 합친 DRY 믹스인, @extend로 프레임워크 클래스를 시맨틱한 이름 뒤에 숨기는 법.
transform: 이동·회전·확대·기울이기: 요소를 문서 흐름에 영향 없이 이동·확대·회전·기울이는 transform 함수들과, top·left 50%에 translate(-50%, -50%)를 더하는 가운데 정렬 패턴.
View Transitions: 화면 전환 애니메이션: SPA에서 DOM을 바꾸는 코드를 document.startViewTransition()으로 감싸면 브라우저가 옛 화면을 스냅숏으로 찍고 새 화면과 교차 페이드한다. ::view-transition-old·new·group 가상 요소로 애니메이션을 바꾸고, view-transition-name으로 특정 요소를 이어 움직이고, 전환 유형으로 방향을 나누고, 움직임 줄이기 설정을 존중하는 법을 정리한다.

Graphics6

브라우저가 GPU로 그리는 원리(WebGL·WebGPU·셰이더), Three.js로 그리는 웹 3D, 영상을 투명 배경 애니메이션 아이콘으로 쓰는 방법을 다루는 노트 모음.

Animated Icon: 영상을 투명 배경 아이콘으로 쓰기: Airbnb 스타일 3D 아이콘을 영상으로 만든 뒤, Lava 같은 투명 배경(알파 채널) 애니메이션 포맷으로 바꾸면 앱·웹에서 움직이는 아이콘으로 쓸 수 있다. 포맷별 선택지와 제작 흐름을 정리했다.
Canvas 2D API: <canvas>에 JavaScript로 픽셀을 그리는 즉시 모드 그래픽 API. SVG와의 차이(비트맵 vs DOM), getContext의 종류, 상태 스택과 Path2D, 고해상도 화면에서 흐려지지 않게 devicePixelRatio로 키우는 법, 레이어 분리·오프스크린 미리 그리기·정수 좌표·alpha: false 같은 성능 요령, OffscreenCanvas로 워커에서 그리기, 접근성 한계를 정리한다.
Three.js로 웹에서 3D 그리기: WebGL을 쉽게 쓰도록 감싼 JavaScript 3D 라이브러리 Three.js의 구성 요소(Scene·Camera·Mesh·Renderer)와 활용 사례, 장단점.
WebGL과 셰이더: 브라우저가 GPU로 그리는 방식: 브라우저가 GPU에 그림을 그리게 하는 API인 WebGL·WebGPU와, GPU에서 도는 작은 프로그램인 정점 셰이더·프래그먼트 셰이더, 셰이더 언어 GLSL ES·WGSL의 관계를 정리했다. 프론트엔드 개발자는 대개 Three.js 같은 라이브러리로 충분하고, 셰이더는 특수 효과가 필요할 때 배운다.
WebXR: 브라우저의 VR·AR: 브라우저에서 VR 헤드셋과 AR 기기에 3D 장면을 보여 주는 WebXR Device API. 세션 종류(inline·immersive-vr·immersive-ar), 기준 공간과 3DoF·6DoF, XR 전용 프레임 루프와 눈마다의 뷰, 입력 소스, AR 모듈(히트 테스트·앵커·DOM 오버레이)을 정리하고, 평면 화면·휴대폰 AR·헤드셋을 한 페이지로 지원하는 점진적 향상과 브라우저 지원 범위, 전신인 WebVR을 다룬다.

JavaScript71

브라우저를 조작할 수 있는 유일한 언어이자, ECMAScript 표준을 따르는 동적 타입 언어.

가비지 컬렉션과 메모리 누수: JavaScript 엔진은 루트에서 참조를 따라 닿을 수 있는(reachable) 값만 남기고 나머지를 자동으로 회수한다. 루트와 도달 가능성, 서로 참조해도 닿을 수 없으면 지워지는 '섬', 기본 알고리즘 mark-and-sweep과 순환 참조에 약했던 참조 카운팅, 세대별·점진적·병렬·유휴 시간 수집 같은 최적화(V8의 스캐빈지·mark-compact·쓰기 장벽), 그리고 GC가 막지 못하는 누수 패턴(전역, 잊힌 타이머·리스너, 클로저, 떨어져 나간 DOM, 끝없는 캐시)과 WeakMap·WeakRef·FinalizationRegistry를 정리한다.
객체 지향 프로그래밍과 JavaScript: goto → 절차적 프로그래밍 → 구조체 → 클래스로 이어지는 흐름에서 객체 지향이 왜 나왔는지, 캡슐화·상속·추상화·다형성이 무엇을 풀었는지 정리하고, 클래스 없이 프로토타입과 일급 함수로 OOP를 흉내 낸 JavaScript에서는 객체 지향과 함수형의 균형을 잡는 것이 핵심이라는 결론을 다룬다.
객체의 원시형 변환: 객체가 연산자나 문자열 자리에 오면 엔진은 먼저 원시값으로 바꾼 뒤 계산한다. 불리언 변환은 늘 true이고, 숫자·문자열 변환은 hint(string·number·default)에 따라 Symbol.toPrimitive → toString/valueOf 순서로 메서드를 찾는다. 연산자별 hint, 기본 객체·배열·Date의 동작, [] + {}와 [] == false 같은 결과의 이유, 직접 구현할 때의 규칙을 정리한다.
구조 분해 할당: 배열·이터러블은 순서로, 객체는 이름으로 값을 꺼내 변수에 담는 문법. 건너뛰기와 나머지(rest), undefined일 때만 쓰이고 필요할 때만 평가되는 기본값, 이름 바꾸기, 중첩 패턴, 이미 선언한 변수에 할당할 때의 괄호, 두 변수 교환, entries와 함께 도는 반복, 그리고 매개변수 객체를 분해하는 '똑똑한 함수 매개변수'와 = {} 기본값을 정리한다.
날짜 라이브러리: date-fns와 Day.js: 기본 Date 다루기(타임스탬프, 생성자 네 형태, 날짜만 쓴 ISO 문자열은 UTC라는 함정, get·set과 범위를 넘으면 넘겨 주는 자동 고침, 빼기로 재는 시간 차, Date.now와 performance.now), 0부터 시작하는 월과 그 유래, 유지보수 모드에 들어간 Moment.js 대신 많이 쓰는 date-fns(함수형·트리 셰이킹)와 Day.js(초경량·Moment 호환 API)의 사용법 비교, 그리고 Date를 대체할 표준 API Temporal의 지원 현황.
데코레이터와 콜 포워딩: 함수를 고치지 않고 감싸서 동작을 더하는 데코레이터 함수. 캐싱 래퍼로 보는 기본 모양, 감싼 메서드가 this를 잃는 문제와 func.call(this, ...args)로 넘기는 콜 포워딩, call과 apply의 차이, 여러 인자를 키 하나로 바꾸는 해시, 유사 배열에 배열 메서드를 빌려 쓰는 메서드 빌리기, 래퍼가 원래 함수의 속성을 잃는 한계를 정리한다. 부분 적용은 함수형 프로그래밍 노트에 있다.
마우스·포인터·키보드 이벤트: 사용자 입력 장치가 만드는 DOM 이벤트. 클릭 한 번이 만드는 mousedown·mouseup·click 순서, button과 보조키(Ctrl·Cmd), mouseover·mouseout과 mouseenter·mouseleave의 차이와 relatedTarget, 마우스·터치·펜을 한 코드로 받는 포인터 이벤트(pointerId·pointercancel·touch-action·포인터 캡처·포인터 락), HTML 드래그 앤 드롭 API와 직접 만드는 드래그, key와 code·자동 반복·IME 조합을 다루는 키보드 이벤트를 정리한다.
모듈: export와 import, export default: ES 모듈의 named·default export와 여러 import·다시 내보내기 형태, 모듈 스코프·한 번만 평가·라이브 바인딩·import.meta 같은 성질, 브라우저에서 모듈 스크립트로 쓰는 법(defer, async, CORS)과 동적 import(), import attributes로 JSON 가져오기, CommonJS와의 관계(exports와 module.exports, AMD·UMD 비교), default와 named 중 무엇을 쓸지에 대한 논쟁. 로드 3단계(구성·연결·평가), CommonJS 래퍼 함수와 Node.js의 형식 판별·상호 운용 규칙까지.
문(Statement)과 식(Expression): 식은 값을 만들어 내는 코드이고, 문은 무언가를 하라는 명령이다. 문에는 식을 끼우는 자리가 있고, 식은 늘 어떤 문 안에 있다. 블록 문과 그룹 연산자, 세미콜론과 자동 세미콜론 삽입(ASI) 규칙과 함정. 함수 인자, 화살표 함수의 간결한 본문, JSX의 중괄호는 식만 받는 자리라서 if·for 대신 삼항 연산자·map을 쓴다.
문자열 다루기: JavaScript 문자열은 UTF-16 코드 단위의 나열이고 바꿀 수 없는 원시값이다. 따옴표와 이스케이프, 백틱 템플릿 리터럴(여러 줄·표현식 삽입·중첩)과 styled-components의 바탕인 태그드 템플릿, 글자 접근(at·charAt), 검색(includes·indexOf와 0의 함정), 부분 문자열(slice·substring·substr의 차이), 대소문자·공백·패딩, 유니코드 순 비교와 localeCompare·Intl.Collator, 서로게이트 쌍과 코드 포인트, normalize로 맞추는 유니코드 정규화, 짝 잃은 서로게이트를 찾는 isWellFormed까지 정리한다.
바이너리 데이터와 파일: ArrayBuffer, Blob, File: JavaScript가 바이트를 다루는 층위를 정리한다. 메모리 덩어리 ArrayBuffer와 그것을 읽는 뷰(TypedArray·DataView), 문자열과 바이트를 잇는 TextEncoder·TextDecoder, 타입이 붙은 불변 바이너리 Blob과 그 하위 File, 그리고 Blob을 화면·다운로드·업로드에 쓰는 object URL·data URL·FileReader·Promise 메서드까지.
반응형 프로그래밍과 RxJS: 반응형 프로그래밍은 데이터 흐름과 변경 전파에 초점을 둔 선언적 패러다임이다. 스프레드시트와 웹 프레임워크로 개념을 잡고, Pull에서 Push로, 제어의 역전으로 비동기를 단순하게 보는 법, 이벤트를 배열처럼 다루는 RxJS의 Observable과 연산자, 실무에서 막히는 소스 만들기와 Hot·Cold, Vue·MobX·시그널이 쓰는 의존성 추적(읽을 때 구독, 쓸 때 통지)의 원리를 정리한다.
배열·객체 다루기: 배열의 주요 메서드, length가 가장 큰 인덱스 + 1인 이유와 shift가 느린 이유, 배열 리터럴과 new Array(n)의 빈 슬롯(희소 배열), Array.from 같은 정적 메서드, 원본을 바꾸는 메서드와 바꾸지 않는 메서드(slice·toSorted·with), sort 비교 함수, 콜백을 받는 헬퍼 메서드와 콜백을 만드는 함수, reduce로 세기·묶기, 객체 리터럴과 키가 문자열로 바뀌는 규칙, 속성 접근과 Object.keys·entries, in·Object.hasOwn으로 속성 확인, spread의 얕은 복사가 빠뜨리는 것, rest, 형식화 배열. 문자열·구조 분해·JSON은 각자의 노트로 나눴다.
번들러의 역사와 Vite: 모듈 없이 태어난 JavaScript가 CommonJS·AMD·ES 모듈을 거쳐 번들러를 필요로 하게 된 이유, 번들러의 느린 빌드를 네이티브 언어 도구와 '개발은 쪼개서, 배포는 합쳐서' 방식이 풀고, Vite가 그 개념을 모아 Rust 번들러 Rolldown 기반의 표준 빌드 도구가 되기까지를 정리했다.
변수와 데이터 타입: 식별자 규칙과 이름 짓기, let·const·var의 차이와 호이스팅, 원시 타입과 참조 타입, 원시값의 래퍼 객체(new String을 쓰지 않는 이유), typeof, null과 undefined의 구분, 값 복사와 참조 공유(비교·얕은 복사·structuredClone·함수 인자·const와 Object.freeze), 스택·힙과 가비지 컬렉션, 동적 타입과 여덟 가지 타입, 대문자 상수를 쓰는 때와 변수를 재사용하지 않는 이유.
브라우저에서 JavaScript가 동작하는 원리: 이벤트 루프: 싱글 스레드인 JavaScript가 렌더링과 나눠 쓰는 메인 스레드, 실행 컨텍스트가 쌓이는 콜 스택, Web API, 태스크·마이크로태스크 큐, 이벤트 루프의 협업으로 화면을 멈추지 않고 비동기 작업을 처리하는 방식. 태스크 하나 → 마이크로태스크 전부 → 렌더링 순서의 한 바퀴, queueMicrotask, 긴 작업 쪼개기·진행률 표시·이벤트 처리 뒤로 미루기, 무거운 일을 메인 스레드 밖으로 빼는 Web Worker.
비동기 처리: 콜백과 Promise: 언제 끝날지 모르는 비동기 작업의 결과를 다루는 콜백 함수(오류 우선 콜백)와 Promise. 상태와 핸들러 규칙, 체이닝과 에러 전파(암시적 try...catch, 다시 던지기, thenable), 처리되지 않은 거부, 콜백 API를 Promise로 감싸는 프로미스화(wait, promisify), all·allSettled·race·any·resolve·try로 여러 Promise를 조합하는 법.
속성 설명자(Property Descriptor): 객체의 모든 속성에는 값 말고도 writable·enumerable·configurable 같은 숨은 설정이 붙어 있다. 데이터 속성과 접근자(getter·setter) 속성의 차이, Object.defineProperty의 기본값이 리터럴과 정반대라는 점, enumerable이 for...in·Object.keys·spread·JSON에 미치는 영향, Object.create의 두 번째 인자, preventExtensions·seal·freeze의 차이를 정리한다.
숫자와 Math: JavaScript의 숫자 타입 하나(double)로 생기는 일: 지수·진법 리터럴과 toString(base), 산술·나머지·거듭제곱 연산자, Math의 반올림·무작위 수, 문자열을 숫자로 바꾸는 방법의 차이, NaN이 생기는 경우와 Infinity 판별, 0과 -0을 가르는 Object.is, 0.1 + 0.2 오차와 돈은 정수 최소 단위로 다루는 원칙, 안전한 정수 범위를 넘는 BigInt, Intl.NumberFormat으로 표시하기.
스코프와 클로저: 변수를 어디서 쓸 수 있는지 정하는 스코프(전역·모듈·함수·블록)와 globalThis, 안쪽에서 바깥으로 찾아가는 스코프 체인과 섀도잉, 정의된 위치로 정해지는 렉시컬 스코프, 선언이 끌어올려지는 호이스팅과 TDZ, var가 블록을 무시하는 동작, 렉시컬 환경과 함수가 기억하는 태어난 환경으로 설명하는 클로저의 원리, 클로저의 쓰임새(함수 공장, private 상태)와 메모리·디버깅 주의점을 정리했다.
실행 컨텍스트: 엔진이 코드를 실행할 때 만드는 실행 단위인 실행 컨텍스트를 정리한다. 전역·함수·eval·모듈 컨텍스트와 실행 컨텍스트 스택(콜 스택), LexicalEnvironment·VariableEnvironment·PrivateEnvironment와 this가 담기는 자리, 선언을 먼저 등록하는 생성 단계와 값을 채우는 실행 단계, 그 결과로 생기는 호이스팅·TDZ·스코프 체인·var의 블록 무시를 한 흐름으로 묶는다. 선언적·객체 환경 레코드와 with·eval이 최적화를 깨는 이유, 매개변수 기본값이 만드는 별도 스코프, 클로저가 푸는 funarg 문제, ES3의 변수 객체(VO)·활성 객체(AO) 용어와의 대응까지 다룬다.
에러 처리: try...catch와 커스텀 에러: JavaScript 언어 차원의 에러 처리. try...catch...finally가 잡는 것과 못 잡는 것(문법 에러, 예약된 콜백), 에러 객체의 name·message·stack·cause, 내장 에러 종류, throw와 다시 던지기, finally와 return의 우선순위, Error를 상속한 커스텀 에러와 계층, cause로 예외 감싸기, 전역 에러 이벤트, 에러를 삼키지 않고 클라이언트에서 수집해 보내는 법까지.
연산자와 제어문: 연산자 우선순위와 그룹 연산자, 단항 +·전위/후위 증감·할당의 반환값·쉼표 연산자, 형변환(coercion)과 truthy·falsy, == vs ===(그리고 == true가 불리언 비교가 아닌 이유), 단축 평가와 ?.·??, 논리 할당 &&=·||=·??=, 삼항 연산자, if의 평가 순서와 early return, switch의 fall through와 case 스코프, for·for...in·for...of·while·do...while·forEach 반복문.
요소 크기·스크롤·좌표: JavaScript로 요소와 창의 크기·스크롤·위치를 읽고 바꾸는 법. offset·client·scroll 계열 기하 속성이 각각 무엇을 재는지, CSS width 대신 기하 속성을 읽는 이유, 창 크기와 문서 높이, scrollTo·scrollIntoView와 스크롤 막기, 창 기준(clientX·getBoundingClientRect)과 문서 기준(pageX) 좌표, elementFromPoint를 정리한다.
이터레이터와 제너레이터: for...of·spread·구조 분해가 공통으로 쓰는 약속인 이터러블·이터레이터 프로토콜(Symbol.iterator와 next()의 { value, done }), 직접 iterable 만들기, 실행을 멈췄다 이어 가는 제너레이터 함수(function*, yield, next(값)으로 값 돌려보내기, return, yield*), 게으른 무한 수열, ES2025 이터레이터 헬퍼와 비동기 이터레이션을 정리한다.
자바스크립트 패키지 매니저: npm, yarn, pnpm: 패키지 설치·업데이트·의존성 관리를 맡는 패키지 매니저의 기본(dependencies와 devDependencies, npm 스크립트, 패키지 고르는 법), npm·yarn·pnpm(그리고 Bun)의 차이와 고르는 기준, packageManager 필드와 Corepack, 설치 스크립트 차단 같은 공급망 보안 기본값, npm EINTEGRITY 오류의 원인과 해결.
자바스크립트에서 타임존 다루기: 타임존은 오프셋이 아니라 한 지역의 표준시·서머타임 변경 이력 전체이고, 표준은 IANA tz database다. JS의 Date는 OS의 로컬 타임존에 묶여 있어 오프셋을 더하고 빼는 방식으로는 다른 타임존의 날짜 연산을 정확히 할 수 없다.
작은 모듈 철학과 npm 의존성의 비용: 한 가지 일만 하는 작은 모듈을 조합한다는 Node.js·npm의 유닉스 철학과, 한 줄짜리 패키지까지 의존성으로 들이는 하이퍼 모듈화를 둘러싼 찬반을 정리한다. left-pad 삭제(2016)가 바꾼 npm 정책, 의존성 트리가 깊어질수록 커지는 공급망 위험, 표준 API가 작은 패키지를 대체해 온 흐름, 지금 의존성을 들일 때의 판단 기준까지.
정규 표현식: 문법·플래그·메서드: JavaScript 정규 표현식을 사전처럼 찾아보는 표 모음. 문자 클래스·세트·앵커·수량자·그룹·역참조·대안·전후방탐색 문법, g·i·m·s·u·v·y·d 플래그, match·matchAll·replace·split·exec·test의 반환값과 lastIndex 함정, 명명된 그룹과 중복 이름, v 플래그의 집합 연산, d 플래그의 indices, 인라인 플래그 수정자, 사용자 입력을 안전하게 넣는 RegExp.escape까지.
정규식 엔진: 탐욕·게으름·전후방탐색·백트래킹: JavaScript 정규식 엔진은 백트래킹 방식이다. 탐욕 수량자는 최대한 먹고 한 글자씩 돌려주며, 게으른 수량자는 최소한으로 먹고 하나씩 늘린다. 둘보다 제외 세트가 정확할 때가 많다. 전후방탐색은 결과에 넣지 않고 조건만 건다. 겹치는 중첩 수량자는 실패할 때 경우의 수가 지수적으로 늘어 페이지를 멈추게 하며(재앙적 백트래킹·ReDoS), 경우의 수를 줄이거나 전방탐색으로 원자 그룹을 흉내 내 막는다.
책임감 있는 자바스크립트: JS는 압축해도 파싱·실행 비용이 그대로 남아 저사양 기기에서 가장 비싼 자원이다. 웹 플랫폼(HTML·CSS)을 먼저 쓰고, 트리 셰이킹·코드 분할·최신 문법 빌드·작은 대체재로 줄이고, 서드파티 스크립트는 담당자를 두고 관리한다. 성능은 저사양 Android와 느린 4G, 표준 지원은 Baseline으로 기준을 잡는다.
타이머: setTimeout과 setInterval: setTimeout은 한 번, setInterval은 반복해서 콜백을 예약한다. 예약은 비동기라 다음 줄이 먼저 돈다. 반환된 ID를 저장해야 clearTimeout·clearInterval로 취소할 수 있고, 지연 시간은 최소 대기일 뿐이다. 즉시 시작하는 interval, 재귀 setTimeout, Promise로 감싼 sleep, 애니메이션용 requestAnimationFrame, React에서의 정리까지.
페이지 생명주기와 리소스 로딩 이벤트: 문서가 열리고 닫히는 동안 일어나는 이벤트. DOMContentLoaded가 기다리는 것과 기다리지 않는 것, load와 readyState, 떠날 때의 beforeunload·pagehide·visibilitychange와 숨은 탭의 rAF 정지·타이머 제한, 피해야 할 unload, sendBeacon·keepalive로 마지막 데이터 보내기, 스크립트·이미지의 load·error 이벤트와 crossorigin 속성으로 다른 출처 스크립트의 오류 정보 얻기를 정리한다.
폼 컨트롤과 포커스 이벤트: JavaScript로 폼을 다루는 DOM API. document.forms와 form.elements로 컨트롤 찾기(라디오 묶음, fieldset, form.name 단축 표기의 함정), value·checked·select의 옵션 다루기, focus·blur와 버블링하는 focusin·focusout, change·input·beforeinput·클립보드 이벤트의 차이, 폼 submit 이벤트를 듣는 이유를 정리한다. 제출 동작 자체는 폼 제출 노트에 있다.
프로토타입과 상속: JavaScript 객체는 프로토타입 객체에 연결되어, 자기에게 없는 속성을 그 체인을 따라 찾는다. 클래스와 다른 철학적 뿌리(분류 대 가족 유사성·원형), 생성자 함수와 new가 하는 일, F.prototype과 constructor, 인스턴스 속성과 프로토타입 메서드의 구분, 프로토타입 체인과 섀도잉, 읽기만 체인을 타는 규칙, 내장 객체의 프로토타입, Object.create와 getPrototypeOf, __proto__의 역사와 프로토타입 오염, instanceof와 타입 확인, class 문법이 프로토타입 코드로 어떻게 풀리는지, 내장 프로토타입을 고치면 안 되는 이유와 폴리필을 정리했다.
함수와 this: 함수 선언식·표현식(이름 있는 함수 표현식)·화살표 함수·IIFE(식 자리에 문장 쓰기)·메서드·new Function, 블록 안 함수 선언의 스코프, 함수도 객체라는 점(name·length·커스텀 속성), 매개변수와 인자(호출마다 평가되는 기본값·arguments·rest·spread), return과 early return, 이름 짓기, 생성자 함수(new.target·return 규칙)와 팩토리 함수, 호출 방식에 따라 달라지는 this(전역·암묵적·명시적·new·이벤트 핸들러), 화살표 함수에 없는 것들, bind·call·apply와 이벤트 리스너에 메서드를 넘길 때의 함정, 재귀와 콜 스택 깊이.
함수형 프로그래밍: 함수형 프로그래밍을 순수 함수·불변성·선언적 패턴이라는 학술 용어 대신 액션·계산·데이터 구분, 카피 온 라이트와 방어적 복사, 계층형 설계와 추상화 벽으로 다시 읽고, 인자를 미리 채워 함수를 특수화하는 커링과 부분 적용을 다룬다. 액션에서 계산을 빼내 테스트하기 쉬운 코드를 늘리고, 상태·변경·효과를 줄이고 모으고 미루는 리팩터링, 효과를 데이터로 반환하는 기법, 로직을 데이터로 적는 데이터 주도 프로그래밍, 프론트엔드의 요구사항을 입력에서 화면까지의 파이프라인으로 보는 법을 정리한다. 구조적 공유(영속 자료구조), data-last·자동 커링 라이브러리 규칙, 어플리커티브와 지연 Future, 대수적 데이터 타입까지.
AJAX와 HTTP 요청: 페이지를 새로고침하지 않고 서버와 비동기로 데이터를 주고받는 AJAX. fetch의 Response·본문 형식·FormData, URL·URLSearchParams, 스트림으로 읽는 다운로드 진행률과 업로드 진행률, AbortController 취소·타임아웃, 나머지 fetch 옵션(credentials·cache·keepalive 등), 업로드 재개, axios, 자주 만나는 오류, 클라이언트에서 보이는 CORS와 프록시, 브라우저 코드가 공개된다는 전제의 API 키 관리.
async/await와 비동기 에러 처리: Promise를 동기 코드처럼 읽히게 해 주는 async/await 문법, 순차·동시 실행과 반복문 안의 await, try/catch·호출 시점 catch·고차 함수로 나누는 에러 처리, 실무에서 주의할 점.
Babel과 AST 변환: Babel은 JavaScript를 파싱(parse)해 AST로 바꾸고, 플러그인이 AST를 고친 뒤(transform), 다시 코드로 찍어 내는(generate) 소스 대 소스 컴파일러다. 설정의 플러그인·프리셋 순서, preset-env와 browserslist·core-js 폴리필, 방문자(visitor) 패턴으로 플러그인 쓰는 법, 같은 AST 원리로 대규모 코드를 고치는 codemod(jscodeshift)까지, Babel 8 기준으로 정리한다.
class 문법: ES6 class로 객체의 틀을 정의하는 방법: 선언과 표현식(익명 클래스, TDZ), constructor, 계산된 메서드 이름, 인스턴스·정적 멤버, 클래스 필드와 #private 필드·메서드, _ 관례로 흉내 내는 protected, 정적 초기화 블록, new this를 쓰는 정적 팩토리 메서드, extends와 super(파생 constructor가 super()를 먼저 불러야 하는 이유, 필드 오버라이딩의 함정, HomeObject), 내장 클래스 확장과 Symbol.species, getter·setter, 프론트엔드에서 클래스를 꺼낼 때(관련 함수·데이터 묶기, 값 객체). class가 단순한 문법적 설탕이 아닌 지점(strict mode, new 강제, 열거 불가 메서드)까지.
Debounce와 Throttle: 연속으로 일어나는 이벤트의 실행 횟수를 줄이는 두 기법. 디바운스는 마지막 호출만, 쓰로틀은 일정 간격마다 한 번만 실행한다.
DOM 이벤트: 전파, 위임, 커스텀 이벤트: DOM 이벤트는 캡처 → 타깃 → 버블 순서로 트리를 오간다. 핸들러를 붙이는 세 방법(HTML 속성·on 속성·addEventListener)과 handleEvent 객체, target과 currentTarget의 차이, 전파·기본 동작 제어와 stopPropagation 대신 defaultPrevented로 알리기, 부모 하나로 자식 이벤트를 받는 이벤트 위임과 data 속성 행동 패턴, once·passive·signal 옵션, Event·CustomEvent 생성과 dispatchEvent의 동기 실행, 바깥 클릭 감지 패턴을 정리한다.
DOM 조작: JavaScript로 DOM 요소를 선택·탐색하고(live·static 컬렉션, 표 탐색 속성), 노드의 내용(innerHTML+=의 함정, outerHTML 대입, textContent)을 다루고, 속성(property)과 어트리뷰트(attribute)의 동기화 규칙, 클래스와 인라인 스타일·계산된 스타일을 읽고 쓰고, 요소를 만들어 원하는 위치에 넣고 지우는 방법. 문자열 HTML을 넣는 법과 위험, 리플로우를 줄이는 일괄 삽입까지 다룬다.
ECMAScript 표준과 TC39 프로세스: JavaScript의 표준 ECMA-262를 누가 어떻게 정하는지 정리한다. ECMA International과 TC39, 제안이 Stage 0부터 4까지 올라가 매년 새 판(ES2015, ES2016 …)에 실리는 과정, ES6와 ES2015 같은 이름 규칙, ES2015~ES2021 판별 주요 기능, ES2022의 클래스 필드·top-level await·at()·Object.hasOwn부터 ES2026까지의 주요 추가 기능, Java와 무관한 이름과 실행 환경별 제약, 표준 내장 객체와 호스트 객체, 명세·MDN 같은 참고 자료, 새 기능을 옛 환경에서 쓰는 트랜스파일러와 폴리필을 다룬다.
ESLint와 Prettier 설정: 코드 품질은 ESLint가, 모양은 Prettier가 맡도록 역할을 나누고 둘이 충돌하지 않게 연결하는 방법. VS Code 저장 시 자동 수정, flat config(eslint.config.js) 읽는 법과 ESLint 10에서 제거된 .eslintrc와의 대응, husky + lint-staged로 커밋 직전에 스테이징된 파일만 검사하는 법까지. React·Vue·React Native 어디서나 절차는 같다.
JavaScript 디자인 패턴: 생성 패턴: 객체를 만드는 방식을 다루는 생성 패턴 중 생성자·모듈·싱글톤·프로토타입 패턴을 JavaScript 코드로 정리하고, 프로토타입 기반 언어라서 달라지는 점을 짚는다. 단일 상속을 보완해 여러 클래스에 동작을 섞어 넣는 믹스인(Object.assign 방식, 클래스 팩토리 방식, 이벤트 믹스인)과 관찰자 패턴을 독립 클래스로 만든 이벤트 이미터 구현도 함께 다룬다.
JavaScript 애니메이션: requestAnimationFrame과 Web Animations API: CSS로 부족한 애니메이션을 JavaScript로 만드는 두 방법. requestAnimationFrame 위에 duration·timing·draw로 나눈 범용 animate 함수를 짜고, 타이밍 함수(power·back·bounce·elastic)와 easeOut·easeInOut 변환을 직접 만든다. 브라우저 엔진을 그대로 쓰는 element.animate()는 재생 제어, finished 프로미스, commitStyles, 스크롤 타임라인을 준다.
JavaScript 주석: 쓰는 법과 네 가지 문법: 무엇을 주석으로 쓰고 무엇을 코드로 말할지(무엇·어떻게 대신 왜, 함수 추출, JSDoc), 그리고 ECMAScript 명세에 정의된 주석 네 가지(//, /* */, #! 해시뱅,  HTML 유사 주석)의 문법과 동작, 유래를 정리한다. 주석은 공백처럼 취급되지만 줄바꿈을 품은 여러 줄 주석은 줄바꿈으로 취급되고, 나머지 두 형식은 인터프리터 지정과 옛 브라우저 호환을 위해 생겼다.
JavaScript는 인터프리터 언어일까, 컴파일 언어일까: 현대 JS 엔진(V8)은 파싱 → 바이트코드 실행 → 자주 쓰는 코드만 단계적으로 JIT 컴파일하는 혼합 방식이라 둘 중 하나로 딱 자르기 어렵다. V8의 Ignition·Sparkplug·Maglev·TurboFan 파이프라인과 TypeScript 컴파일러·Babel의 단계를 비교하고, 최적화가 기대는 히든 클래스·인라인 캐시·배열 요소 종류를 정리한다. JavaScriptCore·SpiderMonkey의 대응 단계와 OSR, 측정·명시적 코드·벤치마크의 한계 같은 최적화를 대하는 법, Full-codegen·Crankshaft에서 Ignition·TurboFan으로 바뀐 역사도 담았다.
JSON: stringify와 parse: JSON은 언어와 무관한 데이터 교환용 텍스트 형식이다. 문법 규칙(큰따옴표, 주석 없음), JSON.stringify가 빠뜨리거나 바꾸는 값(undefined·함수·Symbol·NaN·Date·Map)과 순환 참조·BigInt 오류, replacer·space·toJSON으로 직렬화를 조절하는 법, JSON.parse의 reviver로 Date를 되살리는 법, 큰 정수를 지키는 source 접근과 JSON.rawJSON, 깊은 복사용으로는 structuredClone을 쓰는 이유까지 정리한다.
Map과 Set: Map은 어떤 값이든 키로 쓰고 넣은 순서를 지키는 키-값 컬렉션, Set은 중복 없는 값의 모음이다. 일반 객체와 비교해 언제 무엇을 쓸지, 주요 메서드와 순회, 객체와 서로 바꾸기, JSON으로 보낼 때의 제약, WeakMap·WeakSet, ES2025의 Set 집합 연산까지.
MutationObserver: DOM 트리의 변화(자식 추가·삭제, 속성, 텍스트)를 지켜보다 모아서 알려 주는 MutationObserver. observe 옵션(childList·subtree·attributes·characterData·attributeFilter·oldValue), MutationRecord의 내용, 서드파티 스크립트가 넣는 DOM에 반응하기와 동적으로 들어온 콘텐츠를 한곳에서 처리하는 쓰임, takeRecords·disconnect, 마이크로태스크로 전달되는 특성과 무한 루프 주의, 폐기된 뮤테이션 이벤트를 정리한다.
npm 스크립트로 작업 자동화하기: package.json의 scripts는 node_modules/.bin이 PATH에 들어간 셸에서 명령을 실행하는 가장 얇은 작업 실행기(task runner)다. pre/post 훅, -- 뒤 인자 전달, npm_ 환경 변수, 수명 주기 스크립트, 직렬·병렬 조합과 크로스 플랫폼 처리, 매니저별 차이(node --run 포함), 그리고 Grunt·Gulp 같은 태스크 러너가 밀려난 이유를 정리한다.
npm install이 하는 일: 내 컴퓨터와 앱에 생기는 변화: npm으로 패키지를 설치하면 레지스트리에서 코드를 받아 캐시·node_modules·lock 파일에 쓰고, 설치 스크립트를 내 권한으로 실행하고, 명령을 PATH에 연결한다. 로컬·전역 설치가 컴퓨터의 어디를 바꾸는지, 앱의 코드·번들·배포에 무엇이 들어가는지, 되돌리는 법을 정리한다.
Proxy와 Reflect: 객체에 가해지는 읽기·쓰기·in·delete·호출·new 같은 기본 동작을 트랩으로 가로채는 Proxy와, 그 동작을 원래 객체에 그대로 넘기는 Reflect. 기본값·검증·가상 속성·함수 래퍼 같은 쓰임, getter 상속에서 receiver가 필요한 이유, 내부 슬롯·private 필드·동일성 비교에서 생기는 한계, Vue·Immer 같은 라이브러리가 Proxy를 쓰는 방식을 정리한다.
Selection과 Range: 문서의 일부를 가리키는 Range(시작·끝 경계점)와 사용자의 현재 선택을 나타내는 Selection(anchor·focus). Range를 만들고 내용 지우기·복제·감싸기, 선택 읽기와 바꾸기, selectionchange 이벤트, input·textarea 전용 선택 API(selectionStart·setSelectionRange·setRangeText)로 커서 위치 다루기, 선택 막기, DOM을 바꾸지 않고 칠하는 CSS Custom Highlight API를 정리한다.
SharedArrayBuffer와 Atomics: JavaScript의 공유 메모리 병렬 처리: 워커끼리 메시지 복사 없이 같은 메모리를 읽고 쓰게 하는 SharedArrayBuffer와, 그 메모리를 경쟁 상태 없이 다루는 Atomics(load·store·add·compareExchange·wait·notify)를 정리한다. 메시지 전달·소유권 이전·공유 메모리의 차이, Spectre 이후 교차 출처 격리(COOP·COEP)가 필수가 된 이유, 메인 스레드에서 wait 대신 waitAsync를 쓰는 규칙, 언제 병렬화가 값을 하는지까지.
strict mode(엄격 모드): ES5가 하위 호환을 깨지 않고 언어의 오래된 함정을 막으려고 만든 선택적 규칙 집합. 파일·함수 맨 앞의 "use strict"로 켜고, ES 모듈과 class 본문은 자동으로 켜진다. 암묵적 전역, 조용한 실패, this의 전역 객체 대체, 블록 밖으로 새는 함수 선언 같은 동작이 에러나 더 엄격한 규칙으로 바뀐다.
Symbol: Symbol은 만들 때마다 세상에 하나뿐인 값이 되는 원시 타입이다. 다른 코드와 겹치지 않는 속성 키로 쓰고, 일반 순회와 JSON에서는 숨겨진다. 설명(description)과 고유성, 전역 레지스트리의 Symbol.for·keyFor, 언어의 내장 동작을 여는 well-known symbol(Symbol.iterator·toPrimitive·toStringTag 등)을 정리한다.
TypeScript 실용 패턴: 구조적 타입 위에서 자주 쓰는 TypeScript 패턴을 모았다. 브랜드 타입으로 명목 타이핑 흉내 내기, enum 대신 as const 객체, 예외 대신 Result 유니언 반환, 클래스를 합성하는 믹스인, 이벤트 맵으로 만드는 타입 안전 이벤트 이미터, 인스턴스화 표현식으로 제네릭 특수화, 배열 만들기·커링·정적 초기화 블록 같은 작은 관용구까지 코드와 함께 정리한다.
TypeScript 오류 메시지 읽기와 흔한 오류: TypeScript 오류는 한 줄 요약과 「왜?」를 따라 내려가는 상세 사슬로 되어 있다. 사슬을 맨 아래부터 읽는 법, TS 코드로 검색하는 법, 자주 만나는 오류 코드(TS2322·2345·2339·2304·2307·7006·18048·2353·2741·2352·1196 등)의 원인과 해결, 리터럴 넓히기·빈 객체 초기화 같은 흔한 함정, 오류를 덮는 방법의 우선순위와 진단용 컴파일러 플래그를 정리한다.
TypeScript 컴파일러 내부 구조: TypeScript 컴파일러는 스캐너(토큰) → 파서(AST) → 바인더(심볼) → 체커(타입 검사) → 이미터(JS·.d.ts·소스맵) 순으로 일한다. 문법과 의미의 차이, Program·SourceFile·Node·SyntaxKind, 주석을 담는 트리비아, 심볼과 심볼 테이블·컨테이너, 지연 검사와 진단의 종류, 소스맵, Go로 옮긴 TypeScript 7에서 달라진 점을 정리한다.
TypeScript 코딩 컨벤션: TypeScript 팀 컨벤션 문서의 규칙을 주제별로 묶었다. 이름 짓기, 타입, 선언, 클래스, 표현식, 제어문, 함수, 에러 처리, 내장 객체, 모듈 규칙을 필수·권장과 이유까지 함께 정리하고, 중괄호·줄 길이·빈 줄·중첩 줄이기·헬퍼 함수 위치 같은 코드 모양과 유지보수를 괴롭히는 패턴(닌자 코드) 목록을 더했다. Airbnb JavaScript 스타일 가이드의 객체·함수·형 변환 규칙과, 공개 스타일 가이드끼리 갈리는 지점(export default, for...of, ++, getter, 약어 표기)도 비교했다.
TypeScript 타입 연산: 타입으로 타입 만들기: 기존 타입에서 새 타입을 계산하는 TypeScript의 연산을 정리한다. keyof·typeof·인덱스 접근으로 타입을 꺼내고, 매핑 타입으로 속성을 순회하며 수식어를 붙이거나 떼고 키를 바꾸고, 조건부 타입과 infer로 분기·추출하며, 유니언을 만나면 분배된다는 규칙과 [T]로 막는 법, 템플릿 리터럴 타입의 조합, 유틸리티 타입을 직접 구현하는 법까지.
TypeScript 타입 호환성: 어떤 값을 어디에 대입할 수 있나: TypeScript의 타입은 값의 집합이고, 대입은 좁은 집합을 넓은 집합에 넣는 일이다. 구조적 타이핑과 잉여 속성 검사, 유니언·인터섹션의 넓이, 객체 인터섹션과 원시 인터섹션의 차이, 튜플·readonly 배열, 함수 대입의 공변·반공변·이변성, interface extends와 &의 충돌 처리, 유니언 객체가 섞이는 문제와 구분자를 정리한다.
TypeScript 프로젝트 설정: tsconfig·모듈 해석·선언 파일: tsconfig.json이 정하는 컴파일 컨텍스트와 TypeScript 6·7의 새 기본값(strict, esnext, types: []), strict 계열 옵션, 파일 모듈과 전역 스크립트, moduleResolution bundler·nodenext, verbatimModuleSyntax와 타입 전용 import, 타입·값 선언 공간, declare·.d.ts·declare global·lib·@types로 바깥 코드를 설명하는 법, JS에서 옮겨 오는 순서를 정리한다.
TypeScript: 개념과 문법 한눈에 보기: TypeScript는 JavaScript에 타입 검사와 자동완성을 더한 슈퍼셋이다. JavaScript가 정적 타입을 얻기까지의 역사와 흔한 오해, 실행 환경(tsc·Go로 다시 쓴 TypeScript 7·Vite·Node.js 타입 제거), 기본 타입과 any·unknown·never, 추론·단언·가드·satisfies, type과 interface, 제네릭, 함수 오버로드와 클래스 수식어, 모듈과 @types, 구분된 유니언, 표준 데코레이터(예전 방식과의 차이, 적용 순서), 유틸리티 타입을 표 중심으로 정리하고, 추론 → API 스키마 → 좁히기 → strict 순으로 익히는 순서를 덧붙인다.
TypeScript로 동적인 코드에 정적 타입 입히기: Express식 라우터를 예로, 리터럴 유니온·never 완전성 검사·제네릭·제네릭 기본값·템플릿 리터럴 타입·infer를 쓴 재귀 조건부 타입으로 '경로 문자열에서 매개변수 이름을 뽑아 req.params 타입을 만드는' 과정을 정리한다. 동적인 JS의 동작을 실행 전에 검사하는 것이 TypeScript의 목적이다.
webpack 동작 원리: webpack은 진입점에서 import를 정적으로 따라가 의존성 그래프를 만들고, 로더로 파일을 모듈로 바꾸고, 플러그인으로 빌드에 개입해 번들을 만든다. 로더 적용 순서, 빌드 시 코드 주입 플러그인(Define·Environment·Provide·Ignore), 모듈이 아닌 옛 코드를 다루는 shimming, 스코프 호이스팅, HMR의 동작, Rollup과의 차이를 정리한다.

Mobile13

웹 프론트엔드 지식을 모바일 앱 개발로 확장하는 방법과 프레임워크 선택.

모바일 앱 출시 과정: 모바일 앱은 스토어 심사를 거쳐야 사용자에게 닿기 때문에 웹 배포와 절차가 다르다. 개발자 등록, 빌드와 테스트, 내부·외부 베타와 회귀 테스트, 내부 승인과 정책 준수, 스토어 최적화(ASO), App Store Connect·Google Play Console 제출, 단계적 출시까지의 흐름을 정리한다.
모바일 앱 프레임워크 비교: 네이티브·하이브리드·크로스 플랫폼: 네이티브, 웹뷰 기반 하이브리드, 네이티브로 컴파일되는 크로스 플랫폼 앱의 원리와 장단점. PhoneGap·Cordova에서 Capacitor로 이어진 하이브리드 계보와 흔한 실수(deviceready, CDN 자산, 버전 고정, CSP, 웹사이트 감싸기)도 정리한다. 코딩 에이전트가 이중 구현 비용을 낮추며 네이티브로 돌아가는 판단 기준과 대규모 이전 원칙도 다룬다.
Android 핵심 개념: 앱 구성 요소, 생명 주기, 관찰 가능한 상태, Context, SDK 버전: Android 앱의 네 가지 구성 요소와 인텐트, Activity 생명 주기와 구성 변경, 메인 스레드의 Looper·Handler와 ANR, 그리고 자주 헷갈리는 세 가지. UI 상태를 담는 LiveData와 이를 대체해 가는 Kotlin StateFlow, 스트림 처리의 RxJava·Flow, LiveData의 setValue와 postValue 차이, Application Context와 Activity Context의 수명과 쓰임, minSdk·targetSdk·compileSdk의 의미를 정리한다.
Dart 핵심 문법: final과 const, 널 안전성, Future와 Stream: Flutter의 언어 Dart에서 처음 헷갈리는 세 가지. 런타임 상수 final과 컴파일 타임 상수 const, 타입에 ?를 붙여야만 null을 허용하는 건전한 널 안전성, 값 하나를 기다리는 Future와 여러 값을 흘려보내는 Stream·제너레이터(async*, sync*, yield)를 정리한다.
Flutter UI 실전 기법: 중첩 내비게이션, CustomPaint, 리치 텍스트, 네이티브 스플래시: Flutter 앱을 만들다 자주 부딪히는 네 가지 화면 문제의 해법. 화면 일부만 전환하는 중첩 Navigator, 기본 위젯으로 안 되는 모양을 그리는 CustomPaint와 Path, 한 문장 안에 여러 스타일을 섞는 Text.rich, 앱 시작 때의 흰 화면을 없애는 네이티브 스플래시를 정리한다.
Flutter의 구조와 위젯 트리: Flutter는 Dart 프레임워크·C++ 엔진·플랫폼 임베더의 세 층으로 이루어져, OS의 UI 컴포넌트를 빌리지 않고 화면을 직접 그린다. 프레임워크 라이브러리(Material, Cupertino, Widgets, Rendering 등)의 역할, Widget·Element·RenderObject 세 트리, StatefulWidget 순서를 바꿀 때 Key가 필요한 이유, 패키지·플러그인을 만들어 pub.dev에 배포하는 법을 정리한다.
iOS 앱 기본 개념: 생명 주기, 이벤트 전달, ARC: iOS 앱의 실행 상태와 씬 기반 생명 주기, UIViewController의 뷰 생명 주기 메서드, 객체 사이에 이벤트를 전하는 델리게이트·클로저·NotificationCenter의 선택 기준, ARC와 강한 순환 참조를 weak·unowned로 끊는 법, frame과 bounds, 데이터 저장 방법을 정리한다.
React Native 기초와 스타일링: React 코드를 네이티브 UI로 바꿔 주는 React Native의 동작 원리(브리지에서 New Architecture로), Expo로 시작하기, 코어 컴포넌트, StyleSheet와 Flexbox 레이아웃, onPress·onChangeText 이벤트와 ScrollView·FlatList 목록.
React Native 실무 팁: 키보드, 로컬 저장소, 실기기 디버깅: 입력창이 키보드에 가려질 때 KeyboardAvoidingView와 ScrollView를 함께 쓰는 법, AsyncStorage로 키-값 저장하기, ADB로 안드로이드 실기기 연결하기, Snackbar·전역 폰트 같은 자잘한 도구.
React Native OTA 업데이트와 CodePush: 스토어 심사 없이 React Native 앱의 JavaScript 번들만 교체하는 OTA 업데이트의 원리, 채널 배포 → 확인 → 승격 흐름, 도구 선택(EAS Update, 자체 호스팅 CodePush 서버). App Center CodePush는 2025년 3월 종료됐다.
Swift Codable: JSON 인코딩과 디코딩: Swift에서 타입을 JSON 같은 외부 표현으로 바꾸고 되돌리는 Codable. Encodable과 Decodable을 합친 타입 별칭이라는 정체, 자동 합성 조건, JSONEncoder·JSONDecoder 사용법, CodingKeys로 키 이름 맞추기와 snake_case 변환 전략을 정리한다.
UICollectionView 커스텀 레이아웃: 채팅방처럼 셀 밖 요소(날짜 구분선, 읽음 표시)가 많은 iOS 목록을 UICollectionView와 커스텀 레이아웃으로 만드는 방법. 레이아웃 객체가 위치를 계산하는 구조, prepare()에서 속성을 미리 계산·캐시하는 법, 화면 영역 질의를 이진 탐색으로 빠르게 답하는 법, 보조 뷰와 증분 오토 레이아웃을 정리했다.

Next.js6

React 위에 라우팅·렌더링 전략·캐싱을 얹은 프레임워크. 왜 쓰는지, App Router가 데이터를 어떻게 가져오는지, 서버·클라이언트 컴포넌트를 어떻게 섞는지 정리한 노트 모음.

서버 컴포넌트와 클라이언트 컴포넌트 조합 규칙: React Server Components에서 서버·클라이언트 컴포넌트를 어떻게 섞을 수 있는지 한 장으로 정리한다. 클라이언트는 서버 안에 넣을 수 있지만 서버를 클라이언트에서 import할 수는 없고, 대신 children·props로 넘길 수 있다. 클라이언트에서 서버 코드를 부르는 Server Function과 그 주의점까지 Next.js 16 문서 기준으로 확인했다.
Next.js App Router의 내비게이션과 데이터 가져오기: App Router는 서버가 라우팅하고 클라이언트가 내비게이션한다. Link·useRouter, prefetch와 클라이언트 캐시, 서버 컴포넌트의 병렬·순차 fetch, 요청 중복 제거, React cache()와 preload 패턴을 정리한다.
Next.js App Router의 파일 규칙과 라우팅: App Router는 폴더가 URL 세그먼트, 특수 파일이 그 세그먼트의 역할이 된다. page·layout·template·loading·error·not-found·route·default의 렌더링 계층, 동적 세그먼트([id]·[...slug]·[[...slug]])와 Promise인 params, URL에 안 나오는 라우트 그룹과 프라이빗 폴더, 병렬 라우트(@slot)와 가로채는 라우트((.)·(..))로 만드는 URL 있는 모달, Route Handler, Metadata 병합과 title 템플릿까지 Next.js 16 기준으로 정리한다.
Next.js를 쓰는 이유: SSR·SSG·파일 기반 라우팅·자동 코드 스플리팅을 제공해 React 앱의 초기 로딩과 SEO를 개선하는 프레임워크. App Router의 fetch 캐싱과 재검증, Next.js 16의 'use cache'까지.
React Server Components의 동작 원리: 서버가 컴포넌트 트리를 렌더링해 HTML이 아니라 직렬화된 React 트리(RSC Payload)를 스트리밍하고, 브라우저가 클라이언트 컴포넌트 참조를 실제 코드로 바꿔 트리를 재구성하는 과정을 정리한다. SSR과의 차이, 요청 왕복을 줄이려고 나온 배경과 서버 컴포넌트 모델(XHP)에서 출발한 역사, 다시 렌더링되지 않는다는 성질과 클라이언트 경계, 갱신 방식, 제약까지.

React35

상태가 바뀌면 필요한 부분만 다시 그리는, 컴포넌트 기반 UI 라이브러리.

동시성 렌더링: useTransition과 useDeferredValue: React는 업데이트를 급한 것(입력)과 급하지 않은 것(전환)으로 나눠, 급하지 않은 렌더링은 중간에 끊고 급한 것을 먼저 처리한다. useTransition·startTransition은 상태 업데이트를 전환으로 표시하고(React 19부터 async 함수도 받아 Actions의 바탕이 된다), useDeferredValue는 값의 반영을 늦춘다. Suspense와 use는 기다리는 동안의 화면을 맡는다.
로직 재사용 패턴: HOC, Render Props, 커스텀 훅: 여러 컴포넌트가 같은 상태 로직(구독, 마우스 위치, 마운트 여부)을 나눠 쓰는 세 가지 방법. 컴포넌트를 받아 감싼 컴포넌트를 돌려주는 고차 컴포넌트(HOC), 무엇을 그릴지 함수로 받는 render props, 훅 안에 로직만 담는 커스텀 훅을 비교하고, 컨테이너 컴포넌트와 커스텀 훅 중 무엇을 재사용할지 고르는 기준을 정리한다.
리렌더링 원인과 추적: 리렌더링을 일으키는 원인, React.memo가 효과 없는 경우, useQuery가 최소 두 번 렌더링하는 이유, DevTools로 추적하고 줄이는 순서.
리스트 가상화(Windowing): 항목이 수천 개인 목록에서 화면에 보이는 항목만 DOM에 그리고 나머지는 높이만 차지하게 하는 기법. 원리(전체 높이 + 보이는 구간 계산 + 절대 위치), TanStack Virtual·react-window 사용법, 가변 높이·접근성·찾기 기능 같은 한계와 content-visibility 대안을 정리한다.
리스트와 Key: 배열을 map으로 엘리먼트 목록으로 바꿔 렌더링하는 방법과, 각 항목을 식별하는 key의 역할. key 값(없음·랜덤·인덱스·id)에 따라 리렌더링과 리마운트가 어떻게 달라지는지, 인덱스 key가 오히려 빠른 경우까지 다룬다.
리액트 상태 관리의 흐름과 고르는 기준: 상태를 종류(로컬·서버·URL·폼·전역 클라이언트)로 먼저 나누고, 전역 상태 라이브러리는 읽기·쓰기·리렌더링 최적화·메모리 네 가지 문제를 어떻게 푸는지로 비교한다. Flux·Redux에서 Context, 서버 상태 라이브러리, atom·proxy 기반 라이브러리로 이어진 흐름까지.
실시간 채팅 앱의 데이터 흐름: REST와 WebSocket 역할 나누기: 채팅 앱은 상태 조회·변경은 REST로, 새로 생기는 이벤트 전달은 WebSocket으로 나눈다. 리소스 계층이 드러나는 URL 설계, 소켓 연결의 수명 관리, optimistic UI와 중복 방지, 긴 메시지 목록의 렌더링 최적화 포인트를 정리한다.
재사용 컴포넌트를 위한 리액트 패턴 5가지: Compound Components, Control Props, Custom Hook, Props Getters, State Reducer를 제어 역전(IoC) 정도와 구현 복잡도로 비교한다. 제어권을 많이 넘길수록 유연해지지만 쓰기 어려워지므로, 필요한 만큼만 고르는 것이 핵심이다.
재조정(Reconciliation)과 state 보존: React가 리렌더링 때 이전 엘리먼트 트리와 새 트리를 비교해 DOM 변경을 최소로 계산하는 과정. render 단계와 commit 단계, 타입이 다르면 하위 트리를 통째로 리마운트하고 같으면 속성만 고치는 비교 규칙, state가 트리의 '위치'에 묶여 보존·초기화되는 원리와 key로 초기화하는 법을 정리한다.
조건부 렌더링: 조건에 따라 서로 다른 컴포넌트를 그리거나 아예 그리지 않는 React의 렌더링 패턴.
컴포넌트 생명주기: 컴포넌트가 화면에 나타나고(마운트) 바뀌고(업데이트) 사라지는(언마운트) 흐름. 함수 컴포넌트에서는 useEffect의 의존성 배열과 cleanup으로 다루고, 클래스 생명주기 메서드는 기존 코드를 읽기 위한 대응표로 정리한다.
컴포넌트와 Props: UI를 재사용 가능한 조각으로 나누는 컴포넌트와, 부모가 자식에게 값을 넘기는 읽기 전용 입력값 props. 타입은 TypeScript로 정하고, React 19부터 ref도 일반 prop으로 받는다.
포털: createPortal로 다른 DOM에 그리기: createPortal(children, domNode)은 컴포넌트 트리의 위치는 그대로 두고 DOM만 다른 곳(보통 document.body)에 그린다. 모달·툴팁·토스트가 부모의 overflow·z-index에 갇히지 않게 할 때 쓰며, 이벤트 버블링과 Context는 DOM이 아니라 React 트리를 따른다.
폼과 제어 컴포넌트: 입력값을 React state로 관리하는 제어 컴포넌트, 여러 입력 다루기, 파생 값 계산, 그리고 React 19의 폼 액션(useActionState·useFormStatus).
프런트엔드 에러 핸들링: 분류와 선언적 처리: 에러를 '예상 가능한가'와 '사용자가 해결할 수 있는가'로 나눠 대응(가이드·격리·모니터링)을 정하고, React에서는 Suspense·ErrorBoundary로 로딩·에러를 선언적으로 처리한다. 이벤트 핸들러 에러를 경계로 넘기는 법과 예상치 못한 에러의 전역 처리까지.
합성: 상속 대신 Composition: children과 props로 컴포넌트를 조합해 재사용하는 React의 방식. children, 이름 있는 슬롯 props, 특수화, as prop, 합성으로 props drilling 줄이기를 언제 쓰는지 정리하고, 상속을 권장하지 않는 이유를 덧붙인다.
Context와 전역 상태: props를 일일이 내려주지 않고 컴포넌트 트리 전체에 값을 공유하는 Context API와, Context로 부족할 때 고르는 전역 상태 라이브러리(Redux Toolkit, Zustand, Jotai).
JSX와 엘리먼트 렌더링: JavaScript 안에서 HTML처럼 UI를 선언하는 JSX 문법과, 그 결과물인 불변 React 엘리먼트의 렌더링.
MUI Dialog로 삭제 확인 창 만들기: 되돌릴 수 없는 동작 전에 한 번 더 묻는 확인 다이얼로그를 MUI Dialog로 재사용 가능하게 만들고, 위험한 버튼을 덜 눈에 띄게 디자인하는 방법.
React 버전 변천사: 16부터 19.3까지: React가 메이저 버전마다 무엇을 바꿨는지 한 장으로 본다. 16의 Fiber와 Hooks, 17의 새 JSX 변환과 루트 이벤트 위임, 18의 createRoot·자동 배칭·동시성 기능·스트리밍 SSR, 19의 Actions·use·ref as prop·서버 컴포넌트와 제거된 레거시 API, 19.2의 Activity·useEffectEvent, 19.3의 ViewTransition·Fragment ref, 그리고 React Compiler까지 버전별 변경점과 개념 노트를 잇는다.
React 빌드 환경 직접 구성하기: webpack·Babel·TypeScript: React 코드가 브라우저에서 돌기까지 Babel(문법 변환)과 webpack(번들링)이 무엇을 하는지, CDN 한 줄 실습부터 webpack+Babel+TypeScript 직접 구성, 라우팅·코드 스플리팅, 도구별 클라이언트 환경 변수 규칙까지 정리한다. CRA는 지원이 끝났다.
React 스타일링: Sass, CSS Modules, styled-components: React 컴포넌트에 스타일을 입히는 방법들. Sass와 clsx로 옵션이 많은 재사용 컴포넌트 만들기, CSS Modules의 고유 클래스 이름과 :global, CSS-in-JS 라이브러리 styled-components·emotion의 css 헬퍼·테마·transient props·퇴장 애니메이션까지.
React 이벤트 처리: JSX 속성으로 핸들러 함수를 넘기는 React의 이벤트 처리 방식과 DOM 이벤트와의 차이.
React Hooks: 함수 컴포넌트에서 state·생명주기·메모이제이션을 쓰게 해 주는 API와 그 규칙, 커스텀 훅. useEffect를 생명주기가 아니라 동기화로 보는 관점, deps를 줄이는 법, 요청 경쟁 상태 처리까지.
React Router: 라우팅 기초와 레이아웃·Breadcrumbs: SPA에서 URL마다 다른 컴포넌트를 그리는 React Router의 기초(Routes·Route·Outlet, Link·NavLink, useParams·useSearchParams, useNavigate, 중첩 라우트)와, 일관된 URL 규칙 위에서 레이아웃이 경로별 버튼과 Breadcrumbs를 그리는 패턴. v5 시절 API(Switch, exact, withRouter, history)와의 대응표 포함.
react-hook-form과 MUI Select: react-hook-form의 Controller로 MUI Select 같은 외부 UI 컴포넌트를 연결하고, 빈 값·placeholder·수정 폼 초기값을 다루는 방법.
React에서 음성 녹음하고 파일로 보내기: getUserMedia로 마이크 권한을 얻고 MediaRecorder로 녹음해 Blob을 만든 뒤, 다운로드 링크로 저장하거나 FormData(multipart/form-data)로 서버에 보내는 흐름. react-media-recorder로 간단히 쓰는 방법까지.
React와 TypeScript: React 코드에 타입을 붙이는 자리별 방법. 컴포넌트는 props 타입을 매개변수에 붙인 평범한 함수로 쓰고, children은 ReactNode, HTML 요소 감싸기는 ComponentProps<'button'>, ref는 React 19부터 Ref<T> prop으로 받는다. props 조합은 판별 유니언·never·오버로드로 제한하고, 제네릭 컴포넌트로 목록 항목 타입을 이어 준다. 이벤트·훅(useState·useRef·useReducer·useActionState·useOptimistic)·Context·클래스·Redux의 타입까지.
Redux 미들웨어와 비동기 처리: 미들웨어는 dispatch와 reducer 사이에 끼어 액션을 기록·변형·무시하거나 다른 액션을 일으키는 함수 체인(store => next => action)이다. 비동기 처리는 thunk가 기본이고, 지금은 데이터 요청에 RTK Query나 createAsyncThunk, 액션에 반응하는 흐름에 listener middleware를 쓴다. redux-saga는 취소·디바운스가 얽힌 복잡한 흐름에만 남았다.
Redux와 react-redux: 앱 전체가 공유하는 state를 store 한 곳에 두고, reducer에 정의한 방식대로 dispatch로만 바꾸게 하는 상태 관리 라이브러리. 지금은 Redux Toolkit의 createSlice·configureStore로 쓰고, react-redux의 Provider·useSelector·useDispatch로 컴포넌트와 연결한다.
State와 useState: 컴포넌트가 스스로 관리하는 변하는 데이터인 state, useState와 함수형 업데이트, 배열·객체를 불변으로 바꾸는 방법(ES2023 복사 메서드, Immer), 공통 부모로 state 끌어올리기.
SWR로 서버 데이터 가져오기: 캐시를 먼저 보여 주고 백그라운드에서 재검증하는 데이터 패칭 훅 SWR의 사용 패턴. mutate 옵션 객체와 optimisticData로 캐시를 갱신하고, SWR 캐시로 로그인 상태를 판단해 보호된 페이지를 만든다.
TanStack Query(React Query): 서버에서 가져온 데이터의 캐싱·재요청·로딩/에러 상태를 훅 하나로 다루게 해 주는 서버 상태 라이브러리. QueryClientProvider 설정, query key 설계, 캐시의 fresh·stale·inactive 생명 주기와 isPending·isFetching, 다시 가져오는 시점(mount·focus·reconnect·interval), select·enabled·의존 쿼리·useQueries, 페이지네이션과 useInfiniteQuery, useMutation 뒤 무효화·setQueryData·낙관적 업데이트, SSR(dehydrate·HydrationBoundary)까지.
use 훅과 리액트 비동기 처리: use는 컴포넌트가 Promise나 Context의 값을 직접 읽게 해 주는 React 19 API다. 조건문·반복문 안에서도 부를 수 있지만 컴포넌트·훅 밖과 try-catch 안에서는 안 되고, 클라이언트에서는 캐시된 Promise만 넘겨야 한다. 서버 컴포넌트에서 만든 Promise를 내려받아 읽는 것이 기본 패턴이다.

Testing13

프론트엔드 코드의 동작을 테스트로 보장하고, 테스트로 설계를 이끄는 방법.

의존성이 있는 컴포넌트 테스트하기: fetch로 데이터를 받고, 자식 컴포넌트를 가져오고, Context에서 콜백을 받는 컴포넌트를 Vitest와 Testing Library로 테스트하는 세 가지 기법: 전역 fetch 바꿔 끼우기(vi.stubGlobal), 모듈 목(vi.mock), Provider로 테스트용 값 주입. 각 기법의 정리 방법과 한계, 그리고 MSW와 테스트하기 쉬운 설계로 넘어갈 시점을 정리한다.
접근성 기반 UI 테스트 자동화: UI 테스트가 xpath·CSS 선택자 때문에 쉽게 깨지던 문제를 WAI-ARIA의 role과 접근 가능한 이름(accessible name)으로 요소를 찾는 방식으로 푸는 법. getByRole 쿼리, aria-label·aria-labelledby·aria-current·aria-expanded 활용, 헤드리스 컴포넌트, 인수·회귀 테스트로서의 효과, 접근성 트리를 LLM·AI 에이전트의 입력으로 쓰는 법을 정리한다.
정적 분석: 실행하지 않고 검사하기: 코드를 실행하지도, 테스트를 쓰지도 않고 자동으로 검사하는 정적 분석을 테스트의 맨 아래 층으로 본다. ESLint 규칙(no-unsafe-finally 같은 올바르지만 틀린 코드, eslint-plugin-compat 같은 브라우저 지원 검사)과 TypeScript 타입 검사(noImplicitAny, 검사 대상 포함 확인)가 무엇을 잡고, 무엇은 여전히 테스트로 확인해야 하는지 정리한다.
테스트 실행 환경: Node, DOM 에뮬레이션, 실제 브라우저: 테스트가 도는 런타임(Node·Deno·Bun 또는 브라우저)과 그 안에서 쓸 수 있는 API가 테스트 환경이다. 순수 로직은 어디서든, 작은 컴포넌트는 jsdom·happy-dom 같은 DOM 에뮬레이션에서, 레이아웃·제스처·사용자 흐름은 실제 브라우저(CI에서는 헤드리스, 필요하면 Xvfb)에서 테스트한다. 환경에 기대지 않는 로직을 떼어 낼수록 테스트가 쉬워진다.
테스트를 돌리는 시점: 로컬, PR, CI: 테스트는 개발 중 watch 모드로, 병합 전 PR 상태 검사로, 병합 뒤 main 브랜치의 CI로 세 번 돈다. 기본 test 스크립트는 몇 초 안에 끝나게 두고, PR에서 통과했는데 CI에서 깨지는 이유(변경 간 경합, 플레이키 테스트, 매번 돌리지 않는 비싼 테스트)와 빨간 빌드에 되돌리기·앞으로 고치기로 대응하는 법, 경보 피로를 줄이는 법, 한 파일 커버리지·테스트 파일 제외·타임존 고정 같은 실행 옵션을 정리한다.
테스트의 기본 요소: 테스트 케이스, 단언, 스위트, 수명 주기 훅: 거의 모든 테스트 프레임워크가 주는 공통 부품을 정리한다. 실패하면 던지는 단언(참·동등·깊은 동등), assert 스타일과 expect(BDD) 스타일, 스냅숏 단언, 테스트 케이스와 스위트(test·suite / it·describe), beforeEach·afterEach·beforeAll·afterAll, 비동기 코드를 기다리는 법(async·resolves/rejects·expect.assertions)과 가짜 타이머, 테스트 파일을 두는 위치. 이름은 도구마다 달라도 개념은 같다.
프론트엔드 테스트의 종류와 도구: 정적·단위·통합·E2E 테스트가 각각 무엇을 확인하는지, 무엇부터 테스트할지, 피라미드·트로피 같은 전략의 모양과 스모크·회귀·시각 같은 목적별 테스트, 폴더 역할(apis·components·hooks·context·pages)별로 무엇을 검증할지, 테스트 대역(더미·스텁·스파이·페이크·목)의 차이, 구현이 아니라 사용자 행위를 검증하는 원칙과 테스트 작성 원칙(AAA, 블랙박스, 현실적인 데이터), 그리고 층마다 쓰는 도구(TypeScript·ESLint, Vitest·Jest, Testing Library, MSW, Playwright).
프론트엔드에서의 TDD: 실패하는 테스트를 먼저 쓰고 통과시킨 뒤 리팩터링하는 TDD를 프론트엔드에 적용하는 방법. 목표와 사이클, 이점과 오해, BDD와의 차이(Given-When-Then, 이중 루프), 테스트하기 좋은 코드, Testing Library 예제, 현실적인 도입 순서.
험블 객체 패턴: 테스트하기 쉬운 코드가 좋은 코드인 이유: 목은 비용에 따라 네트워크 목·전역 목·스파이·더미/스텁 네 단계로 나뉘고, 비싼 목이 많다는 것은 설계 문제의 신호다. 전역 객체·네트워크처럼 테스트하기 어려운 코드를 얇은 험블 객체로 떼어 내 인터페이스 뒤에 두면 나머지는 더미와 스텁만으로 테스트되고, 코드는 자연스럽게 SOLID에 가까워진다.
API 모킹: MSW와 json-server: 백엔드 API가 없거나 불안정할 때 프론트엔드가 가짜 응답으로 개발·테스트하는 방법. 코드 속 가짜 데이터, json-server 같은 가짜 REST 서버, 네트워크 단에서 요청을 가로채는 MSW를 비교하고, MSW 2의 핸들러(http·HttpResponse)와 브라우저(Service Worker)·Node(setupServer) 설정, 테스트에서 핸들러를 바꿔 끼우는 법을 정리한다.
JavaScript 테스트 모범 사례: '테스트는 보자마자 이해되게 단순하게'라는 황금률에서 나오는 원칙들을 한곳에 모았다. 테스트 이름·AAA·블랙박스·테스트 대역 고르기, 현실적인 데이터와 필요한 것만 드러내기, 프런트엔드와 E2E, 백엔드 컴포넌트 테스트와 HTTP 가로채기·장애 시나리오·검증할 결과 다섯 가지·DB 정리 전략, 커버리지와 뮤테이션 테스트, CI에서 지킬 것까지.
Storybook: 컴포넌트를 상태별로 떼어 보는 도구: 컴포넌트를 앱에서 떼어 내 상태별 '스토리'로 등록하고 보고·조작·테스트하는 UI 작업장. CSF3 스토리 객체와 args·argTypes, meta·스토리·전역 3단계 설정, decorators, 사이드바 계층, Storybook 9부터 코어에 들어간 Controls·Actions·Viewport 같은 도구, TypeScript의 Meta·StoryObj와 satisfies, 스토리를 그대로 테스트로 쓰는 흐름까지 정리한다.

UI Design22

디자인 시스템과 핸드오프, 레이아웃, 전자상거래·제스처 UI 패턴, UX 라이팅까지 화면의 생김새와 쓰임새를 다루는 노트 모음.

개발자를 위한 시각 디자인 요령: 위계, 대비, 그림자, 구분선: 디자이너 없이 UI를 다듬을 때 쓰는 요령. 위계는 크기보다 색과 굵기로, 색 배경 위 글자는 회색 대신 배경색 계열로, 그림자는 퍼짐보다 세로 오프셋으로, 구분은 테두리 대신 그림자·배경색·여백으로, 버튼은 의미보다 중요도로 스타일을 정한다. 뉴모피즘 같은 스타일 유행의 원리와 한계도 함께 본다.
나쁜 아이콘과 좋은 아이콘: 아이콘 사용성: 아이콘은 잘 만들면 텍스트보다 빨리 읽히지만, 의미가 모호하면 퍼즐이 되고 시각적 잡음이 된다. 나쁜 아이콘의 다섯 가지 유형, 아이콘의 비용과 이점, 좋은 아이콘의 조건을 정리했다. 결론은 투자할 여력이 없으면 텍스트 링크가 낫다는 것이다.
디자이너는 어떻게 코드를 배우나: 디자이너가 코드를 배우는 목적은 엔지니어가 되는 것이 아니라 디자인의 재료를 이해하는 것이다. 터미널과 코드 에디터, Git의 포크·커밋·풀 리퀘스트, 시맨틱 HTML과 CSS 기초, 토큰·컴포넌트·DRY 같은 공학 개념을 순서대로 익히고, 공학적 결정은 엔지니어에게 맡긴다.
디자인 도구와 개발자 핸드오프: 디자인 핸드오프는 이미지와 문서를 메일로 넘기던 방식에서 브라우저 기반 공유 파일(Figma)로 옮겨 왔다. 개발자는 스타일·변수 확인, 치수 측정, 애셋 추출, 프로토타입 흐름 읽기, 댓글로 협업한다. Inspect 코드는 그대로 쓰지 않고, absolute 좌표는 흐름으로, Auto Layout은 Flexbox로 옮긴다. 디자인은 실제 데이터와 여러 화면 크기로 검증하고, 도구 이전은 비용을 계산해 한 번에 끝낸다.
디자인 시스템: 구성, 도입, 구축과 배포: 디자인 시스템은 팀이 같은 UI를 같은 규칙으로 만들게 하는 원칙·스타일·컴포넌트·문서의 묶음이다. 무엇으로 이루어지는지, 작은 팀도 필요한 이유와 도입 시점, 감사→기준 합의→파운데이션·컴포넌트 정리→개발 합의→QA로 이어지는 구축 절차, 토큰과 컴포넌트를 중앙 모노레포에서 패키지로 배포하는 구조까지 정리했다. 감사는 인터페이스 인벤토리로, 시각 방향은 스타일 타일·요소 콜라주로 가볍게 합의한다.
레이아웃 그리드와 간격 체계: 12단 그리드, 8pt 그리드, 수직 리듬: 화면에 질서를 주는 세 가지 수치 체계. 단위·거터·칼럼·필드로 이뤄진 칼럼 그리드와 3·4·6단으로 나뉘는 12단 그리드, 모든 크기·간격을 8의 배수로 맞추는 8pt 그리드(하드·소프트 방식, 4pt 기준선), 본문 줄 높이를 기준으로 세로 간격을 맞추는 수직 리듬과 모듈러 스케일을 정리하고, CSS Grid·rlh·text-box-trim·디자인 토큰으로 구현하는 법을 붙였다.
로딩 UI: 스피너, 로딩 애니메이션, 스켈레톤, 프로그레스 바: 기다림을 줄일 수 없을 때 체감을 다루는 로딩 UI 네 가지를 정리했다. 짧고 부분적인 로딩은 스피너, 핵심 액션은 브랜드 로딩 애니메이션, 페이지 전체는 스켈레톤, 10초 넘는 작업과 단계형 흐름은 프로그레스 바를 쓴다. 1초 미만이면 아무것도 띄우지 않는다.
모바일 앱 UI 가이드라인: 한 손 조작, 내비게이션, 버튼, 입력: 모바일 화면 설계의 관례를 주제별로 모은 노트. 화면을 보는 영역과 조작 영역으로 나누고, 내비게이션은 얕고 중복 없이, 버튼은 위계와 행동 중심 레이블로, 입력은 맞는 키보드·실시간 피드백·실수 복구로 설계한다. 대화상자 버튼 배치, 선택 컨트롤 고르기, 터치 크기 기준까지.
반응형 UI 패턴: 내비게이션, 캐러셀, 데이터 표: 작은 화면의 디자인은 큰 화면을 줄인 것이 아니고, 큰 화면은 작은 화면을 늘린 것이 아니다. 좁은 화면에서 공간이 모자라면 먼저 숨기지 않고 보이게 다듬고, 다음은 가로로 넘겨 보는 오버플로 패턴, 마지막이 버튼으로 여닫는 점진적 공개다. 캐러셀은 좁은 화면에서만 가로 스크롤로 두고 넓은 화면에서는 그리드로 펼친다. 데이터 표는 첫 열 고정·카드로 쌓기·열 숨기기 중 사용 목적에 맞춰 고르고, 페이지는 Mostly Fluid·Column Drop 같은 레이아웃 패턴으로 바꾼다.
와이어프레임, 목업, 프로토타입: 충실도에 따른 화면 설계 산출물: 화면 설계는 정보 구조와 유저 플로우에서 시작해, 구조와 우선순위만 담은 와이어프레임, 실제 생김새를 입힌 정적인 목업, 클릭해 볼 수 있는 프로토타입 순으로 충실도를 높여 가며, 단계마다 답하려는 질문과 버려도 되는 비용이 다르다. 와이어프레임은 클릭되게 만들고, 도구는 공통 요소 관리·화면 전환·리뷰·산출물 기준으로 고른다.
웹 레이아웃 디자인: 인쇄와 다른 매체: 웹은 크기가 고정되지 않은 매체다. 화면 폭 대응은 고정폭·리퀴드·적응형을 거쳐 반응형으로 왔고, 지금은 플렉스박스·그리드·컨테이너 쿼리로 콘텐츠에 맞게 늘고 줄어드는 본질의 웹 디자인(Intrinsic Web Design)이 기본이다. 페이지(매크로)와 컴포넌트(마이크로) 레이아웃을 나눠 설계하고, 인쇄의 단락·문자 스타일은 CSS의 블록·인라인 규칙으로, 칼럼 그리드와 8pt 간격 체계는 CSS 그리드와 디자인 토큰으로 이어지며, 이미지 위 텍스트는 대비·위치·심도로 읽히게 한다.
인터페이스 심리학: 지각·인지·감정·사회적 반응: 사용성은 사람의 지각·인지 특성에 맞출 때 생긴다. 순서 있는 값은 밝기로·범주는 색상으로 보여 주는 지각 원리, 청킹, 어포던스, 재인과 회상, 초보자와 숙련자를 위한 여러 경로, 감성 컴퓨팅, 컴퓨터 매개 소통과 시선, 의인화와 불쾌한 골짜기, 그리고 설계가 사람에게 미치는 영향의 윤리를 정리한다.
전자상거래 UI 디자인: 쇼핑몰 UI의 목표는 구매 여정(진입 → 탐색 → 상품 검토 → 옵션 선택 → 결제)에서 마찰을 없애는 것이다. 얕은 메뉴·필터·정렬·검색으로 찾게 하고, 상품 페이지 첫 화면에 가격·옵션·배송·반품을 담고, 옵션 종류에 맞는 선택 UI와 품절 표시를 쓰고, 가격 필터 슬라이더는 실제 범위와 재고 분포를 보여 줘 결과 0건을 막는다.
제스처 기반 인터페이스: 터치 기기에서는 스와이프·당기기·드래그 같은 제스처가 버튼과 바를 줄이고 화면을 콘텐츠에 내준다. 대신 제스처는 보이지 않아서 학습 곡선이 생기고, 운영체제 제스처와 충돌하며, 일부 사용자는 쓸 수 없다. 점진적 힌트로 가르치고, 같은 기능을 버튼으로도 제공하고, 시간과 애니메이션까지 프로토타입으로 검증한다.
제품 언어로서의 디자인 시스템: 토큰, 기능과 형태, 컴포넌트 API: 디자인 시스템을 범용 UI 라이브러리가 아니라 회사의 디자인 결정을 관리하는 제품 언어로 보는 관점을 정리한다. 결정을 값·의도·맥락으로 인코딩하는 디자인 토큰과 섣부른 시맨틱 토큰의 함정, 아토믹 단위가 하나로 정해지지 않는 이유와 컴포넌트를 기능(구조·상태·상호작용·맥락)과 형태(구조·시각 옵션·상태 옵션·디자인 결정)로 해부하기, 상태 압축, 공통 인터페이스로 디자인-개발의 순환 참조 끊기, 사전 조합 컴포넌트와 조합 가능한 패키지를 나눠 일관성과 유연성을 함께 주는 API를 다룬다.
Apple Human Interface Guidelines 요약: 원칙, 레이아웃, 바, 버튼, 알림: Apple의 Human Interface Guidelines(HIG)에서 앱·모바일 UI 전반에 쓸 수 있는 지침을 모은 노트. 설계 원칙 여섯 가지, 적응형 레이아웃과 안전 영역·44pt 터치 영역, 내비게이션 구조, 계정 생성·삭제, 알림·배지, 평가 요청, 애니메이션·브랜딩·색·시작 화면·용어·타이포그래피·이미지 해상도·앱 아이콘, 내비게이션 바·검색 바·상태 바·탭 바·툴바, 경고창, 버튼(스타일·역할·토글·팝업·닫기), 진행 표시, 텍스트 필드까지 다룬다.
SVG 아이콘: 형식, 넣는 방법, 이름 붙이기, 스타일: 아이콘은 콘텐츠가 아니라 인터페이스의 일부라 글자처럼 커지고 색이 바뀌어야 한다. 그래서 크기마다 파일이 필요한 PNG보다 한 파일로 모든 크기를 그리는 SVG가 맞다. 글과 함께 있는 아이콘은 장식이니 숨기고, 아이콘만 있는 버튼은 뜻을 이름으로 준다. 인라인 SVG는 currentColor로 글자색과 테마를 따라가게 한다. 프레젠테이션 속성의 낮은 우선순위, transform-box: fill-box, 선 그리기 효과, 넣는 방법별로 되는 CSS도 다룬다.
UI 모션 디자인: 애니메이션 원칙, 모션 커브, 안무: UI 애니메이션을 자연스럽게 만드는 원리. 디즈니의 애니메이션 12원칙을 웹에 옮기는 법, 속도는 모션 커브의 기울기라는 이해와 cubic-bezier 읽기, 축마다 다른 타이밍으로 곡선 경로를 만드는 겹친 애니메이션과 offset-path, 여러 요소를 시차로 움직이는 안무, 60fps를 지키는 구현 규칙을 정리한다.
UI 밀도: 시각·정보·디자인·시간·가치: UI 밀도는 화면에 많이 담는 것이 아니라, 인터페이스가 차지하는 시간과 공간 대비 사용자가 얻는 가치다. 첫인상의 시각 밀도는 믿을 수 없고, 터프티의 데이터-잉크 비율(정보 밀도)과 게슈탈트 원리로 센 디자인 결정의 비율(디자인 밀도)이 더 쓸모 있다. 시간 밀도는 로딩과 대기의 체감(100ms·1초·10초·1분 구간)으로 다루고, 결국 가치 밀도를 최대화하는 것이 목표다.
UI 요소 용어집: 입력·내비게이션·정보·컨테이너: 디자이너와 같은 말을 쓰기 위한 UI 요소 32가지를 입력 컨트롤·내비게이션·정보·컨테이너 네 범주로 묶고, 각각 언제 쓰는지와 구현할 때 기댈 HTML 요소·ARIA 패턴을 함께 정리한다. 햄버거·케밥·미트볼·벤토·도너 메뉴처럼 헷갈리는 아이콘 메뉴 이름도 구분한다.
UX 라이팅: 원칙, 가이드라인, 체크리스트: 제품 화면의 문구를 사용자의 목표에 맞춰 쓰는 UX 라이팅. 원칙 → 가이드라인 → 체크리스트로 이어지는 문서 구조와, 문구를 검토하는 8가지 기준(목표 적합성, 모바일, 훑어보기, 이유 먼저, 전문 용어, 다크 패턴, 일관성, 보이스 톤)을 정리했다.

Web83

브라우저가 문서를 해석하고 서버와 상태를 주고받는 웹의 기본 구조.

결제·주소 폼: 결제 흐름은 비회원 결제를 기본으로, 단계와 다음 행동을 드러내고, 방해 요소를 걷어 낸다. 카드 칸은 한 칸·inputmode="numeric"·cc-* 토큰·카드 종류 선택 없음, 이름은 한 칸과 유니코드 허용, 주소는 street-address 한 칸이나 address-line1/2, 우편번호는 선택 항목으로 둔다. 나라마다 다른 이름·주소·용어를 받아들이는 국제화 원칙과 enterkeyhint로 단계를 안내하는 법까지 정리한다.
구조화된 콘텐츠와 기계가 읽는 웹: 음성 비서·검색 엔진·AI 답변 엔진은 웹 페이지를 그대로 보여 주지 않고 내용을 뽑아 합치고 추론한다. 화면에만 맞춘 마크업은 기계가 오해한다. 시맨틱 HTML로 관계를 드러내고, schema.org 어휘의 링크드 데이터(JSON-LD)로 개념의 의미를 붙이고, CMS가 구조를 강제하게 만들면 어떤 인터페이스에서도 정확한 답이 나간다.
권한 모델과 기기 API: 브라우저가 기기 기능을 여는 방식. 보안 컨텍스트·Permissions-Policy·사용자 동작·권한 프롬프트를 묶어 보여 주는 Permissions API의 query()와 granted·denied·prompt 상태, 그리고 권한이 걸린 기기 API인 위치, 기기 방향·움직임(iOS의 requestPermission), 게임패드(폴링), 음성 합성·인식, 진동의 쓰임과 지원 범위를 정리한다.
다국어 페이지: lang·hreflang과 국제화: 여러 언어로 페이지를 제공할 때 언어마다 URL을 나누고 lang·dir·hreflang으로 표시하는 법, Accept-Language를 쓰되 강제로 넘기지 않는 언어 선택, 문자열 연결 금지·Intl API·텍스트 길이·방향·이미지 속 글자 같은 국제화 설계 주의점을 정리했다.
더 나은 폼을 만드는 팁: 폼 사용성은 사용자의 통제권을 지키고 노력을 줄이는 데서 나온다. 묻는 칸 줄이기, 짧은 라벨과 한 열 배치, 브라우저 기본 동작 존중, 모바일 키보드(inputmode), 보이는 검증 메시지, 커서·포커스를 빼앗지 않는 입력 처리, 그리고 기기·사람·데이터로 폼을 시험하고 측정하는 법을 정리한다.
데이터 최소화와 프라이버시 실천: 개인정보는 모으지 않는 것이 가장 안전하다. 수집하지 않기 → 뭉개서 모으기(구간화·무작위 응답·차등 프라이버시) → 쓰고 지우기(Clear-Site-Data) → 왜 필요한지 설명하기 순으로 효과가 크고, 조직에서는 데이터 목록 문서화·정기 감사·목적 외 사용 차단으로 유지한다.
동영상 성능: 형식·poster·자동 재생·임베드: 동영상은 컨테이너와 코덱을 고르고 FFmpeg로 줄여 여러 source로 준다. 움직이는 GIF는 muted·loop·playsinline 자동 재생 video로 바꾼다. 사용자가 누를 동영상은 preload='none'과 poster, 화면 밖은 지연 로딩, 무거운 서드파티 플레이어는 퍼사드로 늦춘다. poster와 첫 프레임은 LCP 후보다.
로그인·가입 폼과 인증 입력: 가장 좋은 가입 폼은 없는 가입 폼이다. 필요할 때만 계정을 요구하고, 로그인·가입 폼은 비밀번호 관리자가 알아보게 만든다(new/current-password, 다른 name·id, 성공 감지, 붙여넣기 허용). 비밀번호 보기 버튼, 두 단계 로그인, 모바일 키보드 가림, 패스키 자동 완성(username webauthn), 일회용 코드(one-time-code·WebOTP), NIST SP 800-63B-4의 비밀번호 규칙, 계정 설정과 /.well-known/change-password까지 정리한다.
리소스 힌트와 미리 불러오기: preconnect·preload·fetchpriority·Speculation Rules: 브라우저가 스스로 늦게 발견하는 자원을 앞당기는 힌트. 다른 출처 연결은 preconnect·dns-prefetch, 늦게 발견되는 중요한 자원은 preload, 우선순위는 fetchpriority로 조정한다. 다음 이동을 위해서는 prefetch, Speculation Rules의 prefetch·prerender, 서비스 워커 프리캐싱을 쓰되 확신이 있을 때만 쓴다.
링크와 내비게이션 마크업: <a href>가 가리킬 수 있는 곳(절대·상대 URL, 프래그먼트, mailto·tel, blob·data), download로 내려받기, target과 rel=noopener·noreferrer, 이름 붙은 브라우징 맥락으로 탭 폭증 막기, rel·hreflang·type·ping, 그리고 링크 목록을 <nav>로 묶는 건너뛰기 링크·목차·브레드크럼·로컬·전역 내비게이션 패턴을 정리한다.
목록과 표 마크업: ul·ol·dl의 허용 자식과 중첩 규칙, ol·li의 번호 속성, dl을 div로 묶는 법, 그리고 표의 자식 순서(caption → colgroup → thead → tbody → tfoot), th·scope·headers, colspan·rowspan, colgroup·col로 열 꾸미기, 표 CSS를 정리한다. 목록인지·용어 쌍인지·표인지 고르는 기준도 함께 둔다.
문서 head와 메타데이터: <head>는 화면에 보이지 않지만 인코딩·제목·뷰포트·스타일·스크립트·아이콘·대체 버전·대표 URL·검색과 SNS 미리보기 정보를 모두 담는다. 모든 페이지에 넣을 다섯 줄, 성능을 위한 요소 순서, link의 rel 종류, meta의 세 갈래(charset·http-equiv·name)와 이제 쓰지 않는 태그, Open Graph와 SEO의 관계, 미리보기가 안 나오는 이유, base의 함정, 웹 앱 매니페스트로 정리한다.
미디어 캡처와 Web Audio API: 브라우저에서 카메라·마이크·화면을 받아 다루는 Media Capture and Streams(MediaStream·MediaStreamTrack의 소스와 소비자, getUserMedia·getDisplayMedia, enumerateDevices)와, 소리를 노드 그래프로 만들고 가공하는 Web Audio API(AudioContext, 소스·효과·분석·출력 노드, 정밀한 예약 재생, 자동 재생 정책과 resume, AudioWorklet)를 정리한다.
반응형 이미지: srcset·sizes와 picture: 같은 이미지를 크기만 바꿔 줄 때는 srcset·sizes로 브라우저에 선택을 맡기고(서술형), 자르기·형식 대체처럼 규칙을 강제할 때는 picture를 쓴다(지시형). 크기만 맞춰도 작은 화면의 이미지 용량이 70% 넘게 준다. sizes는 레이아웃에서의 폭이라 도구가 알 수 없으니 근삿값을 주거나, 지연 로딩 이미지는 sizes="auto"에 맡긴다.
브라우저 기본 동작을 존중하기: 스크롤바·스크롤·선택 강조색·글자 크기·고대비·키보드 포커스·클립보드·방문 기록은 OS와 브라우저가 모든 앱에 같은 방식으로 제공하는 기능이다. 사이트가 이를 바꾸면 외부 일관성이 깨져 일부 사용자가 밀려난다. 덮어쓰지 말고, 필요하면 기본 위에 선택지를 더한다.
브라우저 렌더링 과정: 브라우저의 구성 요소와, HTML을 DOM으로·CSS를 CSSOM으로 파싱해 렌더 트리로 레이아웃(리플로우)·페인팅·합성을 거쳐 화면을 그리는 과정. HTML 파서의 특성, 스크립트·스타일 시트의 차단, 더티 비트와 강제 동기 레이아웃, 변경마다 다시 도는 단계까지.
브라우저 실시간 통신: 롱 폴링, SSE, WebSocket 클라이언트: 서버가 먼저 보내는 데이터를 브라우저에서 받는 세 가지 방법의 클라이언트 쪽 구현을 정리한다. 재요청 루프로 만드는 롱 폴링, HTTP 위의 텍스트 스트림인 SSE(EventSource의 메시지 형식·자동 재연결·Last-Event-ID와 fetch로 직접 읽는 방법), 그리고 WebSocket API의 바이너리·버퍼·종료 코드·재연결까지.
브라우저 아키텍처: 다중 프로세스, 내비게이션, 렌더러 스레드, 입력 처리: Chrome을 예로 브라우저가 프로세스를 어떻게 나누는지(브라우저·렌더러·GPU·네트워크 등, 사이트 격리), 주소를 입력한 뒤 어느 프로세스가 무엇을 하며 페이지를 커밋하는지, 렌더러 안의 메인·컴포지터·래스터 스레드가 프레임을 만드는 방식, 입력 이벤트가 컴포지터를 거쳐 메인 스레드로 가는 길과 passive 리스너·이벤트 병합까지.
브라우저 안 빌드·프리뷰 환경: AI가 만든 화면을 바로 띄우기: AI가 생성한 React 코드를 사용자 브라우저에서 바로 빌드해 보여 주는 프리뷰 런타임. 데이터 정책은 API 프록시 플랫폼이 맡고 화면만 AI가 만드는 분리, 서버 dev 서버·Sandpack·WebContainers·직접 구성의 비교, 가상 파일 시스템 + esbuild-wasm + 패키지 조합 해시로 미리 번들한 의존성 + import map 구조를 다룬다.
브라우저 지문 채취와 User-Agent 축소: 지문 채취는 UA·글꼴·화면·캔버스 렌더링처럼 오래 변하지 않는 특성을 모아 쿠키 없이 사용자를 식별한다. 수동·능동 방식과 엔트로피로 이해하고, 브라우저는 API 미구현·권한 요청·값 뭉개기·UA 동결로 대응한다. 사이트는 UA 스니핑을 기능 감지와 Client Hints로 바꾸고 넓은 환경에서 시험한다.
서드파티 쿠키와 브라우저 추적 방지: 사파리 ITP와 파이어폭스 Total Cookie Protection은 서드파티 쿠키를 막거나 사이트별로 분할하고, 크롬은 단계적 폐지를 철회해 일반 창에서는 사용자 설정에 맡긴 뒤 Privacy Sandbox API 대부분을 정리했다. 브라우저를 가리지 않고 동작하려면 임베드 상태는 CHIPS(Partitioned)로, 꼭 필요한 교차 사이트 접근은 Storage Access API로 처리한다.
서드파티와 프라이버시: 감사와 Referrer·Permissions 정책: 광고·임베드·분석·스크립트·패키지 같은 서드파티는 IP·Referer·쿠키를 받고, 스크립트는 페이지 전체 권한을 가진다. 기술·비기술 감사로 실제 요청을 파악하고, 정적 공유 링크·퍼사드·nocookie 임베드로 줄이며, Referrer-Policy·Permissions-Policy·CSP Report-Only로 범위를 묶는다.
서비스 워커 등록·스코프·생명주기와 업데이트: 서비스 워커는 페이지와 서버 사이에서 스코프 안의 요청을 가로채는 별도 스레드의 스크립트다. 등록 → 설치 → 활성화 순서로 생명주기를 밟고, 파일이 한 바이트라도 바뀌면 새 버전이 설치되지만 옛 버전이 모든 창에서 물러날 때까지 대기한다. skipWaiting·clients.claim의 위험, 메모리 상태가 사라지는 수명, 브라우저별 디버깅 도구를 정리한다.
서비스 워커 캐싱과 응답 전략: Cache Storage API로 요청·응답 쌍을 저장하고, fetch 이벤트의 respondWith()로 캐시 우선·네트워크 우선·stale-while-revalidate·네트워크 전용·캐시 전용 중 하나를 URL별로 골라 응답한다. 무엇을 언제 프리캐시할지, 불투명 응답과 addAll의 원자성 함정, 오프라인 대체 페이지, Workbox로 줄이는 코드, 페이지를 조각별로 캐시하는 서비스 워커 인클루드와 스트리밍까지 정리한다.
성능 측정 API: Navigation·Resource·User Timing과 PerformanceObserver: 브라우저가 실제 사용자 환경에서 기록하는 성능 항목(performance entry)을 읽는 API들. 문서 요청은 Navigation Timing, 하위 자원은 Resource Timing, 앱이 직접 찍는 구간은 User Timing의 mark·measure로 재고, 모두 PerformanceObserver에 buffered로 구독해 모은다. 교차 출처 자원은 Timing-Allow-Origin 헤더가 있어야 세부 시간이 보인다.
스크립트·스타일 로딩 순서와 점진적 렌더링: <script>, async, defer, type=module이 HTML 파싱과 실행 순서에 주는 차이, 프리로드 스캐너가 못 보는 늦게 발견되는 자원, CSS는 <head>에 두고 스크립트는 defer로 미루는 이유와 예외, @import를 피하고 중요 CSS만 인라인하는 CSS 경량화, 콘텐츠를 받는 대로 먼저 보여 주는 점진적 렌더링 기법을 정리했다.
스트리밍 SSR: HTML을 한 번에 다 만들어 보내지 않고 Suspense 경계 단위로 나눠 흘려보내는 SSR. React 18에서 도입됐고, 지금은 React 19의 부분 사전 렌더링과 Next.js Cache Components의 기반이 되어 기본 동작으로 자리 잡았다.
시맨틱 HTML과 문서 구조: 태그로 모양이 아니라 의미를 표시하는 시맨틱 HTML. 랜드마크 태그, 제목 계층(h1~h6), <article>과 <section>을 언제 쓰는지, 요소의 암묵적 역할과 role 속성의 한계를 접근성 관점에서 정리했다. 아웃라인 알고리즘은 구현되지 않았으니 제목 수준은 직접 매긴다.
웹 개발에 대한 이상한 믿음들: 브라우저 엔지니어·표준 제정자·웹 개발자가 웹 개발을 잘 안다는 믿음, 브라우저는 SPA에 맞지 않는다, MPA가 SPA를 대체한다, 모든 사이트는 JS 없이 동작해야 한다, 빌드 단계는 필요 없다는 주장을 하나씩 따져 본다. 공통된 오류는 내가 겪는 웹이 웹 개발 전체를 대표한다고 여기는 것이다.
웹 보안: CSRF와 XSS: 사용자의 권한을 도용하는 CSRF와 악성 스크립트를 주입하는 XSS의 원리와 방어법. 문자열 HTML을 innerHTML에 넣을 때의 위험과 setHTML·DOMPurify·Trusted Types도 다룬다.
웹 성능 지표와 Lighthouse: FCP·LCP·INP·CLS·TTFB 같은 웹 성능 지표의 뜻과 기준값, Core Web Vitals 세 지표가 무엇을 어떻게 재는지(LCP 후보 요소, INP의 세 구간, CLS의 세션 창), 실험실·필드 데이터와 web-vitals 라이브러리로 재는 법, Lighthouse를 정리했다. 지표별 개선법은 따로 나눈 최적화 노트로 연결한다.
웹 아키텍처의 다음 전환: MPA에서 PESPA까지: MPA → PEMPA → SPA를 거쳐 온 웹 앱 아키텍처가 '점진적으로 향상된 SPA(PESPA)'로 옮겨 가고 있다. 코드가 어디에 사는지, 각 단계가 무엇을 풀고 무엇을 남겼는지 비교한다.
웹 앱 매니페스트: 웹 앱 매니페스트는 설치된 PWA의 이름·아이콘·시작 URL·표시 방식·색·바로 가기를 정하는 JSON이다. 앱을 식별하는 id, 내비게이션 범위 scope, 마스크 가능 아이콘, display와 display_override의 대체 순서, 설치 화면을 키우는 description·screenshots, iOS가 따로 쓰는 link·meta, 그리고 바뀐 메타데이터가 플랫폼마다 언제 반영되는지 정리한다.
웹 워커로 메인 스레드 비우기: 웹 워커는 JS를 메인 스레드가 아닌 별도 스레드에서 돌린다. DOM과 window에는 접근할 수 없고 postMessage로만 메인 스레드와 대화한다. 가져오기·파싱·대용량 계산처럼 DOM이 필요 없는 무거운 일을 옮기면 긴 작업이 줄어 INP가 좋아지고, 그 일에 쓰는 라이브러리의 다운로드·컴파일 비용도 함께 빠진다.
웹 이미지 형식: 벡터·래스터와 GIF·PNG·JPEG·WebP·AVIF·JPEG XL: 도형으로 된 그림은 SVG, 사진처럼 실제 세계의 디테일이 있는 그림은 래스터다. 래스터는 손실 압축이 가능한 형식을 고르되, 사진은 AVIF·WebP를 먼저 주고 JPEG로 받친다. PNG는 반투명이 필요한 단순 그림과 원본 보관용, GIF는 거의 쓸 곳이 없다. JPEG XL은 크롬·파이어폭스·사파리가 지원하지만 엣지가 빠져 있어 picture로 대체를 둔다.
웹 컴포넌트: template·slot·Shadow DOM: 라이브러리 없이 재사용 가능한 요소를 만드는 웹 표준. <template>은 렌더링되지 않는 HTML 조각, 커스텀 요소는 HTMLElement를 상속한 클래스와 라이프사이클 콜백, Shadow DOM은 마크업과 스타일을 캡슐화하는 별도 트리, <slot>은 바깥 내용을 끼울 자리다. :host·::slotted()·::part()·커스텀 속성으로 경계를 넘어 꾸미고, 이벤트는 리타게팅되며 composed 이벤트만 밖으로 나간다. 선언적 Shadow DOM으로 서버에서 그린다.
웹 폰트 성능 최적화: 발견·내려받기·렌더링: 웹 폰트는 레이아웃이 필요로 할 때에야 요청되는 늦게 발견되는 자원이다. preload나 인라인 @font-face로 일찍 발견되게 하고, 자체 호스팅·WOFF2·서브셋으로 빨리 받고, font-display로 글자가 숨거나 밀리는 방식을 고른다.
웹 표준은 어떻게 만들어지나: W3C·WHATWG·WICG: 웹 플랫폼의 표준은 W3C 권고안 트랙(WD → CR → REC), WHATWG의 리빙 스탠더드, WICG의 인큐베이션, TC39의 단계별 제안이라는 서로 다른 절차로 만들어진다. 권고안의 성숙 단계와 '독립적인 구현 둘' 같은 진입 조건, CSS가 레벨 단위 모듈로 쪼개진 이유, WHATWG가 HTML·DOM을 맡게 된 경위, 표준 상태와 브라우저 구현 상태를 확인하는 곳을 정리한다.
이미지 압축과 인코딩 자동화: JPEG는 밝기보다 색을 더 버리고(크로마 서브샘플링) 고주파 디테일을 양자화해 줄인다. WebP는 블록 예측과 영역별 양자화로 같은 품질에서 더 작다. 품질 값은 0~100 하나로 조절하되 도구마다 뜻이 달라 눈으로 확인한다. 실제 서비스에서는 사람이 아니라 빌드 도구·정적 사이트 생성기·CMS가 원본에서 여러 형식과 크기를 만든다.
이미지 CDN과 Accept 헤더 협상: 이미지 CDN은 원본 한 장을 올려 두면 URL 매개변수로 크기·자르기·품질·형식을 바꾼 변형을 만들어 캐시한다. 브라우저의 Accept 헤더를 보고 AVIF·WebP 중 지원하는 가장 효율적인 형식을 주므로 picture·type 없이 srcset·sizes만으로 형식 대체가 된다. 같은 URL이 형식마다 다른 응답이 되므로 Vary: Accept로 캐시를 나눠야 하고, 비용이 주된 단점이다.
이미지·오디오·비디오 임베드: 내용인 이미지는 HTML, 장식은 CSS다. <img>의 필수 src·alt, 레이아웃 이동을 막는 width·height, loading·fetchpriority, figure·figcaption, SVG의 role="img"를 정리하고, <video>·<audio>의 source·type·codecs, poster, controls, autoplay와 muted, track의 다섯 kind, 배경 영상과 사용자 정의 컨트롤의 원칙을 다룬다.
이전 페이지 URL 알아내기: 사용자가 어느 페이지에서 왔는지 알아내는 세 가지 방법(document.referrer, 직접 기록, 쿠키·sessionStorage)과 각각의 한계.
자동 완성과 autocomplete 토큰: 브라우저는 name·id·type과 autocomplete 값으로 칸의 정체를 짐작해 저장된 주소·카드·비밀번호를 채운다. 짐작에 맡기지 말고 autocomplete 토큰을 명시하고, section-·shipping/billing·home/work·webauthn 순서 문법, 이름·주소·전화·카드·비밀번호 토큰표, autocomplete="off"가 듣지 않는 경우, :autofill 스타일링, 자동 완성을 깨는 흔한 실수를 정리한다.
자바스크립트 코드 분할: 시작할 때 받는 JS가 크면 파싱·컴파일·실행 동안 메인 스레드가 막혀 TBT와 INP가 나빠진다. 커버리지로 시작 때 안 쓰는 코드를 찾고, 동적 import()로 나중에 필요한 코드를 별도 청크로 떼어 상호작용할 때 불러온다. 청크 크기는 캐시·압축·평가 시간의 균형으로 정한다. 로딩 전략 전체는 PRPL(Preload·Render·Pre-cache·Lazy load)로 묶는다.
정적 사이트 생성기와 Jamstack: 정적 사이트 생성기(SSG)는 마크다운 콘텐츠와 템플릿을 빌드 때 HTML로 합쳐 CDN에 올린다. 서버·DB가 없어 빠르고 안전하며, Git push가 곧 배포다. 콘텐츠 사이트는 JS를 거의 보내지 않는 Eleventy·Hugo·Astro가 맞고, 상호작용이 많으면 Next.js 같은 프레임워크를 쓴다. WordPress에서 옮기는 흐름도 정리한다.
제약 검증: required·pattern·ValidityState: 브라우저 내장 검증은 HTML 속성(required·type·minlength·pattern·min·max·step)으로 켜고, CSS 의사 클래스(:invalid·:user-invalid)로 보여 주고, Constraint Validation API(ValidityState·setCustomValidity·checkValidity·reportValidity)로 넓힌다. pattern이 v 플래그로 컴파일되는 점, 빈 값은 pattern 검사를 하지 않는 점, 언제 오류를 띄울지, 서버 검증이 왜 따로 필요한지를 정리한다.
지속 가능한 웹 디자인: 웹사이트의 에너지 사용은 전송 데이터·CPU·서버 자원으로 어림할 수 있고, 이를 줄이는 일은 곧 성능·접근성·SEO 개선이다. 필요 없는 요청과 기능을 빼고, 이미지·폰트·영상·분석 도구를 의심하고, 서버 캐시와 재생 에너지 호스팅을 쓴다.
지연 로딩: 이미지·iframe·퍼사드: 화면 밖 이미지·iframe은 loading='lazy'로 미뤄 첫 화면 자원에 대역폭을 몰아 준다. 첫 화면 이미지와 LCP 후보에는 절대 쓰지 않는다. 무거운 서드파티 임베드는 가짜 UI(퍼사드)를 보여 주다 상호작용할 때 바꾸고, 네이티브로 미룰 수 없는 video·배경 이미지는 IntersectionObserver 기반 라이브러리로 미룬다.
창과 프레임: 팝업, iframe, postMessage: 다른 창(팝업)과 프레임(iframe)을 열고 서로 참조하는 법, 동일 출처 정책이 창 사이에서 허용하는 것과 막는 것, sandbox 속성, 출처가 달라도 안전하게 대화하는 postMessage와 같은 출처 탭끼리의 BroadcastChannel, 그리고 내 페이지가 남의 iframe에 갇혀 클릭을 빼앗기는 클릭재킹과 그 방어 헤더까지 정리한다.
쿠키와 세션: 상태가 없는 HTTP에서 브라우저와 서버가 사용자를 기억하기 위해 쓰는 쿠키와 세션.
클라이언트 사이드 라우팅: 해시, History API, Navigation API: SPA가 새로고침 없이 화면을 바꾸면서도 페이지마다 고유한 URL과 뒤로 가기를 유지하는 방법. 링크·AJAX·해시(hashchange)·History API(pushState·popstate) 방식의 차이, 새로고침 때 서버가 해야 할 일(index.html 폴백, Accept 헤더로 HTML·JSON 나눠 응답), 모든 이동을 한 이벤트로 받는 Navigation API를 정리한다.
텍스트 의미 요소와 문자 참조: 문단·인용·강조·기술 문서·정의·수정 이력·줄 바꿈을 표현하는 HTML 텍스트 요소를 용도별로 고르는 법. blockquote·q·cite의 구분, em·strong·mark·i·b·u·s의 의미 차이, code·kbd·samp·var·data·time, abbr·dfn, br·hr·wbr, 그리고 꼭 이스케이프해야 하는 문자 참조를 정리한다.
포커스 속성과 details·dialog: HTML만으로 포커스를 다루는 속성(tabindex·contenteditable·autofocus·disabled·inert)과 JavaScript 없이 동작하는 두 인터랙티브 요소를 요소 사전처럼 정리한다. 포커스를 빼는 세 방법의 차이, <details>/<summary>의 open·name·마커·오류 처리, <dialog>의 show·showModal·close, method="dialog"와 returnValue, ::backdrop, 열고 닫을 때의 포커스, commandfor로 스크립트 없이 여는 법까지 다룬다.
폼 스타일링: 폼 컨트롤은 기본 크기가 작고 브라우저마다 모양이 다르다. 글자 1rem 이상(iOS 확대 방지), 보이는 테두리, 48px 탭 영역, 한 열 배치로 기본을 잡고, appearance: none과 배경 화살표로 select를, 접근성 트리를 지키는 숨김 기법으로 체크박스·라디오를 꾸민다. accent-color, field-sizing: content, 실험 단계의 customizable select(appearance: base-select), pointer 미디어 쿼리와 env()까지 정리한다.
폼 제출과 데이터 전송: <form>은 Enter 제출·검증·자동 완성·보조 기술 지원을 공짜로 주므로 데이터를 보내는 곳에는 항상 쓴다. GET과 POST 고르기, 제출 버튼의 종류와 type="button" 함정, 제출 버튼을 언제 막는가, FormData와 fetch로 새로 고침 없이 보내는 점진적 향상, 같은 엔드포인트에서 HTML·JSON 응답 나누기, HTTPS·데이터 최소화·허니팟 같은 보안·개인정보 원칙을 정리한다.
프라이버시를 위한 암호화: 전송·저장·종단 간: 사용자 데이터를 남이 읽지 못하게 하는 세 겹의 암호화. 전송 중은 HTTPS·리다이렉트·HSTS로, 저장 중은 클라우드 기본 암호화와 직접 관리 키로, 운영자조차 못 읽게 하려면 Web Crypto로 클라이언트에서 암호화하는 종단 간 암호화로 지킨다. 각 층이 막는 위협과 한계를 정리한다.
프론트엔드 개발자가 알아야 할 지연 시간 숫자: 네트워크 왕복, 파싱, 프레임 예산, 사람의 체감 한계를 밀리초 단위로 정리한 표. 지연은 워터폴로 곱해지므로 요청 체인을 서버로 옮기고, JS를 줄이고, 사용자 가까이 배포한다.
프론트엔드 성능 최적화: 언제, 무엇을: 최적화는 측정한 뒤에, 최악의 사용자(p95·p99)를 기준으로, 무엇을 희생하는지 알고 한다. 느림은 초기 로딩(대역폭·지연 시간·JS 실행)과 런타임(실제 성능과 체감 성능)으로 나눠 본다. 캐싱·프리패치·코드 분할, 긴 작업 줄이기와 쪼개기, 파생 상태와 리렌더링 범위 좁히기를 각 원인에 맞춰 고른다.
프론트엔드 웹 개발 용어집: API부터 Yarn까지 프론트엔드 개발에서 자주 듣는 용어 70여 개를 주제별로 묶어 한두 줄로 설명하고, 자세한 노트가 있는 용어는 그 노트로 연결했다.
프론트엔드 출시 전 체크리스트: 웹 페이지를 배포하기 전에 확인할 항목을 head·HTML·CSS·이미지·폰트·JavaScript·보안·성능·접근성·SEO 열 가지로 나눠, 우선순위와 자세한 설명이 있는 노트로 잇는 점검표. 항목은 사람이 외우지 않고 린터·Lighthouse·CI로 자동화하는 것이 기본이다.
프론트엔드의 등장 배경: 초기 웹에는 프론트엔드라는 개념이 없었다. 이미지·CSS·JavaScript·AJAX가 차례로 등장하고 Flash가 물러나고, 구글·페이스북이 웹을 앱 플랫폼으로 밀어붙이면서 화면을 만드는 일이 전문 영역이 되었고, 트래픽이 커지자 프론트엔드와 백엔드가 나뉘었다. React 이후에는 프레임워크·상태 관리·타입·스타일링·빌드 도구·렌더링 방식이 해마다 바뀌었지만, 갈래별로 보면 방향은 일정했다.
AMP: 규칙으로 빠르게 만드는 모바일 페이지: AMP(Accelerated Mobile Pages)는 HTML에 제약을 걸고(외부 JS 금지, 인라인 CSS 상한, 자원 크기 명시) 전용 런타임과 캐시 CDN으로 페이지를 빠르게 만드는 프레임워크다. 성능 원리는 일반 페이지에도 그대로 쓰이지만, URL 이원화와 플랫폼 종속 때문에 비판을 받았고 검색 우대가 사라진 뒤로는 Core Web Vitals를 직접 맞추는 쪽이 일반적이다.
CLS 최적화: 자리를 먼저 잡기: 레이아웃 이동은 늦게 도착한 것이 자리를 비집고 들어올 때 생긴다. 이미지·동영상에는 width·height나 aspect-ratio, 광고·임베드에는 min-height, 늦게 뜨는 배너는 자리 확보나 오버레이, 애니메이션은 transform, 웹 폰트는 font-display와 대체 폰트 지표 보정으로 막는다. 필드와 실험실 값의 차이로 로딩 중 이동인지 이후 이동인지 가른다.
DOM과 BOM: 브라우저가 HTML 문서를 파싱해 메모리에 올린 객체 트리와, 이를 다루는 API. window의 두 역할과 DOM·CSSOM·HTML 명세의 구분, 공백·주석까지 노드가 되는 규칙과 파서의 자동 교정, 노드 클래스 계층과 확인 방법, 문자열 HTML 대신 DOM이 필요해진 이유와 프레임워크 시대에 DOM API를 익히는 법도 다룬다.
HTML 기초와 HTML5: 웹 문서의 구조와 의미를 태그로 표현하는 마크업 언어와 그 핵심 문법. 요소와 태그, 대체·빈 요소, 생략 가능한 태그, 불리언·열거형·전역 속성, data-* 속성, 속성 하나로 끝나는 기능(enterkeyhint·form·download·loading·fetchpriority·integrity·popover 등), DOCTYPE, form 데이터 규칙, HTML5까지 다룬다.
HTML 입력 요소 치트시트: input의 22가지 type과 label·select·textarea·fieldset·datalist까지, 폼에서 쓰는 입력 요소를 용도별로 정리하고, 값의 성격에 맞는 type·선택 컨트롤 고르기와 inputmode 8가지 값까지 다룬다.
HTTPS 전환: 인증서 고르기부터 리다이렉트까지: 사이트를 HTTPS로 옮기는 실무 흐름. 인증서는 검증 수준(DV·OV·EV)과 도메인 범위(단일·다중·와일드카드)로 고르는데, 웹사이트에는 ACME로 자동 발급·갱신하는 DV가 표준이다. 설치 뒤 301 리다이렉트·혼합 콘텐츠 제거·HSTS·서버 설정 점검까지 해야 전환이 끝난다.
IndexedDB: 브라우저에 내장된 출처별 트랜잭션 키-값 데이터베이스의 API. 버전으로 스키마를 바꾸는 upgradeneeded, 객체 저장소·키·인덱스·키 범위·커서로 저장하고 찾는 법, 자동 커밋되는 트랜잭션의 함정과 오류 처리, 다른 탭과의 버전 충돌, 그리고 네이티브 개념이 idb 래퍼에서 어떻게 보이는지 정리한다.
INP 최적화: 긴 작업 쪼개기와 양보: INP는 입력 지연, 처리 시간, 표시 지연의 합이다. 필드 데이터로 느린 상호작용을 찾고, 시작할 때의 스크립트 평가를 줄여 입력 지연을, 핸들러를 가볍게 하고 메인 스레드에 양보해 처리 시간을, DOM 크기·content-visibility·클라이언트 HTML 렌더링을 손봐 표시 지연을 줄인다.
Intersection Observer와 관찰자 API: 스크롤 이벤트로 위치를 계산하는 대신, 요소가 화면(또는 스크롤 영역)에 얼마나 보이는지 브라우저가 알려 주는 IntersectionObserver. root·rootMargin·threshold 옵션, 무한 스크롤·지연 로딩·끝까지 읽음 감지 패턴, 크기 변화를 보는 ResizeObserver와 DOM 변화를 보는 MutationObserver를 정리한다.
LCP 최적화: 네 구간으로 나눠 줄이기: LCP는 TTFB, 자원 로드 지연, 자원 로드 시간, 요소 렌더 지연의 합이다. 두 「지연」 구간은 0에 가깝게, 나머지 둘은 40%씩이 목표다. LCP 자원을 HTML에서 바로 발견되게 하고, fetchpriority로 앞당기고, 지연 로딩하지 않고, 작게 만들고, 막는 CSS·JS와 긴 작업을 걷어 낸다.
OAuth 2.0: 비밀번호를 넘기지 않고 다른 서비스의 자원 접근 권한을 위임하는 OAuth 2.0. 네 역할, Authorization Code + PKCE 흐름, 토큰 종류, OIDC와의 차이, 프론트엔드 보안 주의점, OIDC로 구현하는 SSO를 정리한다.
PWA 기능과 OS 통합: PWA가 운영 체제와 이어지는 기능을 지원 범위별로 정리한다. 웹 푸시와 알림(iOS는 16.4부터 홈 화면 웹 앱에서만, 18.4부터 선언적 웹 푸시), 앱 배지, 공유하기와 공유 대상, 파일 시스템 접근과 파일 핸들러, 프로토콜 핸들러, 링크 캡처, 연락처 선택기, 하드웨어 API, 그리고 Project Fugu·오리진 트라이얼로 새 기능을 시험하는 법과 기능 감지·권한 요청 원칙을 다룬다.
PWA 설치와 설치 유도: 설치 기준은 브라우저마다 다르다. Chrome은 HTTPS, name·아이콘(192·512px)·start_url·display를 갖춘 매니페스트와 최소한의 사용자 참여를 본다. 데스크톱 Chromium·Android(WebAPK와 바로 가기)·iOS 홈 화면·macOS Safari의 Dock 추가·Firefox의 Windows 작업 표시줄 웹 앱까지 플랫폼별 설치 방식, beforeinstallprompt로 직접 띄우는 설치 버튼, display-mode로 실행 방식을 알아내는 법, 앱 스토어 배포를 정리한다.
PWA 앱 경험 설계와 창 관리: 설치된 PWA는 브라우저 탭이 아니라 자기 창을 가진다. 200×100px 미니 모드까지 견디는 반응형·점진적 향상의 기초와 오프라인을 기본 상태로 보는 오프라인 우선 원칙(마지막 상태 지키기, 동작 큐, 충돌 해결) 위에, display-mode 미디어 쿼리, 창 제목, 선택·당겨서 새로고침·safe area 같은 앱다운 CSS를 더한다. 스코프 밖 링크가 여는 앱 안 브라우저와 OAuth 흐름, 창 이동·크기·새 창, 제목 표시줄 오버레이, 여러 화면 배치, 화면 꺼짐 방지, 가상 키보드 API까지 정리한다.
PWA 오프라인 데이터와 저장소 관리: URL로 요청하는 자산은 Cache Storage에, 검색·조합할 구조화 데이터는 IndexedDB에 둔다. 저장소 할당량은 출처 단위로 묶이고 StorageManager.estimate()로 확인한다. 브라우저는 압박이 생기거나 오래 쓰지 않으면 데이터를 지우므로 persist()로 영속 저장을 요청하고, 지워진 뒤에도 앱이 온라인에서 다시 뜨게 만든다. 데이터를 뒤에서 최신으로 유지하는 백그라운드 동기화 계열 API도 정리한다.
PWA와 서비스 워커 캐시 전략: PWA는 HTTPS·웹 앱 매니페스트·서비스 워커 세 가지를 갖춘 웹사이트일 뿐이고, 사이트 종류와 상관없이 득이 된다. 서비스 워커로 캐시를 직접 다룰 수 있게 된 만큼, 필요한 것만 작게 요청하고 미디어를 중요도별로 나눠 캐시하고, 캐시 크기를 제한해 사용자의 데이터와 디스크를 아낀다.
SEO 기초: 크롤링부터 메타 태그까지: 검색 엔진이 페이지를 크롤링·색인·순위 매기는 흐름과, 프론트엔드가 챙길 robots.txt·사이트맵·메타 태그·canonical·리다이렉트·렌더링 방식, 링크와 버튼의 구분을 정리했다.
SPA와 CSR·SSR: 한 페이지에서 필요한 부분만 다시 그리는 SPA와, 렌더링 주체·시점에 따른 CSR·SSR·SSG·ISR의 차이.
TTFB 줄이기: 리디렉션·HTML 캐시·압축·CDN: 페이지의 첫 요청인 HTML이 빨리 와야 FCP·LCP가 기준을 넘는다. 리디렉션 체인을 없애고, HTML은 짧게 캐시하거나 ETag로 재검증하고, Server-Timing으로 서버 시간을 재고, 텍스트 자원은 Brotli로 정적 압축하고, CDN 엣지에서 내려 준다.
Web Storage: localStorage와 sessionStorage: 브라우저에 키-값 문자열을 저장하는 localStorage·sessionStorage의 API, 객체를 JSON으로 직렬화해 저장하고 복원하는 법, 다른 탭과 동기화하는 storage 이벤트, 예외 처리와 보안상 넣지 말아야 할 것을 정리한다.
WebAssembly: 브라우저의 두 번째 언어: C·C++·Rust 같은 언어를 컴파일해 브라우저에서 거의 네이티브 속도로 돌리는 바이트코드 형식 WebAssembly(Wasm)를 정리한다. JavaScript와 비교해 어디서 시간이 줄어드는지(받기·파싱·컴파일·재최적화·실행·GC), Module·Memory·Table·Instance라는 네 개념과 JS API, 툴체인, MVP 이후 Wasm 2.0·3.0에 들어간 기능, 브라우저 밖 실행(WASI)과 쓸 곳·안 쓸 곳까지.

Backend

122

클라이언트의 요청을 받아 비즈니스 로직을 처리하고 데이터를 저장·제공하는 서버 쪽 개발 지식 모음.

백엔드 개발자가 알아야 할 것: 인터넷·DNS·HTTP부터 데이터베이스, 언어와 웹 프레임워크, API 스타일(REST·GraphQL·gRPC), 버전 관리, 인증, 리눅스, CI/CD·도커·클라우드, 보안, 아키텍처까지 백엔드 개발자의 지식 지도. 다 외우는 것이 아니라 필요할 때 찾아 쓸 수 있을 만큼 아는 것이 목표다.
백엔드 테스트: 범위, 대역, 구조, 자동화: 도메인 로직은 프레임워크 없는 단위 테스트로, 경계는 실제 자원이나 에뮬레이터(Testcontainers·LocalStack)로 검증한다. 목은 통제할 수 없는 의존성에만 쓰고, 테스트는 공개 인터페이스만 보며 수를 줄인다. Describe-Context-It으로 구조화하고, CI는 결과를 PR 단계에 보여 준다.

Architecture50

개발자 머피의 법칙: 백엔드 방어 체크리스트: 잘못될 수 있는 것은 결국 잘못된다. 클라이언트 값 불신, 서버 재계산, 인증과 권한 분리, 입력 범위 제한, 운영 권한 통제, 배치·로그·알림 분리, SPOF 제거처럼 감당할 수 없는 사고는 이미 일어난 것으로 보고 먼저 막는다.
결제 시스템 설계: 흐름, 멱등성, 대사, 핫스팟 계정: 구매 버튼 뒤에서 결제 서비스·결제 실행기·PSP·지갑·원장이 어떻게 맞물리는지 정리했다. 이중 결제를 막는 재시도+멱등 키, 정보 흐름과 자금 흐름의 어긋남을 메우는 대사(reconciliation), 한 계좌에 쓰기가 몰리는 핫스팟 계정 대응, 결제 시스템을 장애에 강하게 만드는 운영 원칙까지 다룬다.
고가용성 이중화 구조와 장애 감지: 가용성을 나인(nines)으로 재는 법과 직렬·병렬 구성의 가용성 계산, 주-백업·주-보조·주-주·핫-핫·핫-웜·단일 리더·리더 없는 클러스터 같은 이중화 구조, 결함 허용 설계의 여섯 원칙, 하트비트로 노드 장애를 감지하는 방식, 페일오버 절차와 비동기 복제의 유실, 스플릿 브레인을 막는 정족수·에포크·펜싱·리스를 정리했다.
고전 분산 시스템 설계: GFS, MapReduce, Bigtable, Chubby, Dynamo: 구글의 GFS·MapReduce·Bigtable·Chubby와 아마존의 Dynamo 논문이 남긴 설계 아이디어를 정리했다. 단일 마스터와 큰 청크, 계산을 데이터 쪽으로 보내기, 정렬된 맵과 LSM 저장, 굵은 락과 시퀀서, 일관된 해싱·벡터 시계·느슨한 정족수 같은 기법이 HDFS·Spark·HBase·Cassandra·ZooKeeper 같은 오픈소스로 어떻게 이어졌는지까지 다룬다.
권한 시스템 설계: ACL, RBAC, ABAC: 권한 시스템은 '누가 무엇에 어떤 행동을 할 수 있나'를 정하는 모델을 고르는 일이다. 자원마다 허용 목록을 다는 ACL, 소유자가 정하는 DAC, 등급 라벨로 강제하는 MAC, 역할로 묶는 RBAC, 속성 조건으로 판단하는 ABAC, 관계 그래프로 판단하는 ReBAC가 있다. 대부분 RBAC로 시작하고 예외가 늘면 속성이나 관계를 더한다.
뉴스 피드 설계: 연결, 활동, 팬아웃: 뉴스 피드는 「누구와 연결됐나」와 「누가 무엇을 했나」 두 데이터를 합쳐 사용자마다 다른 목록을 만드는 문제다. 읽을 때 모으는 방식(스캐터·개더)과 쓸 때 받은편지함에 뿌리는 방식(팬아웃)의 차이, 활동 복제와 집계·중복 제거·점수 매기기, 비정규화와 캐시로 타임라인을 빠르게 만드는 법을 정리했다.
대규모 서비스 기술 스택 해부: Netflix·Uber·Reddit·Twitter 같은 대규모 서비스의 기술 스택을 계층별로 겹쳐 보고 반복되는 설계 선택을 정리했다. 데이터 성격별로 DB를 고르는 폴리글랏 저장, 캐시를 조회 가속 이상으로 쓰는 네 가지 방식, 비싼 작업을 큐로 미루고 CDC로 캐시를 맞추는 패턴, 표준화된 이벤트 플랫폼, 카나리 배포 중심의 CI/CD, 자동 버그 수정과 전용 하드웨어까지 다룬다.
대규모 웹 크롤러 설계: 하루 10억 페이지 규모로 웹을 크롤링하는 시스템의 설계 원칙. 예의(robots.txt, 도메인당 지연)를 첫 제약으로 두고, 기능별 머신 풀 대신 도메인 샤드마다 모든 기능을 담은 독립 노드로 나누며, 프런티어·준비 큐·블룸 필터를 인메모리 저장소에 둔다. I/O에 묶인 페처는 비동기로, CPU에 묶인 파서는 프로세스로 늘리고, 요청당 과금되는 객체 스토리지보다 로컬 스토리지를 검토한다. 병목은 네트워크·DNS가 아니라 커진 페이지의 파싱과 TLS 핸드셰이크(CPU)이고, 메모리는 인기 도메인의 프런티어라는 꼬리에서 터진다.
대규모 트래픽에서 서비스를 지키는 설계: 읽기 위주 서비스가 평소의 몇 배로 치솟는 트래픽을 버티는 방법. CDN과 웹 서버로 WAS 앞단에서 부하를 덜고, 미리 만들어 둔 정적 응답으로 빈 화면을 막고, 서킷 브레이커·서비스 디스커버리로 장애 전파를 끊고, 한계치 모니터링과 자동 방어 모드로 사람 없이도 대응하는 구조를 정리했다.
대기열 시스템(가상 대기실) 설계: 순간적으로 몰리는 트래픽을 서버 증설 대신 줄 세우기로 흡수하는 가상 대기실의 구조를 정리했다. Redis Sorted Set에 도착 시각을 점수로 넣어 순번을 매기고, 주기 작업이 정해진 유입량만큼 대기→입장→종료 상태로 옮기는 방식이 핵심이다.
데이터 관리 패턴: CDC, 이벤트 소싱, CQRS, 최종 일관성: 데이터가 여러 서비스·저장소에 흩어질 때 쓰는 패턴을 모았다. DB 변경을 로그에서 읽어 퍼뜨리는 CDC, 상태 대신 이벤트를 저장하는 이벤트 소싱, 읽기·쓰기 모델을 나누는 CQRS, 인덱스 테이블, 최종 일관성을 만드는 네 가지 방법(이벤트·백그라운드 동기화·사가·CQRS), 이벤트와 스키마의 호환성 규칙(Avro, 스키마 레지스트리)까지 다룬다.
도메인 주도 설계(DDD): 비즈니스 도메인을 모델로 표현하고 그 모델이 코드·DB·API 설계를 이끌게 하는 방법론이다. 유비쿼터스 언어와 바운디드 컨텍스트로 모델의 경계를 잡고, 엔티티·값 객체·애그리거트로 모델을 짜며, 리포지토리·팩토리·도메인 서비스·도메인 이벤트로 다룬다.
동영상 스트리밍 서비스 설계: Netflix·YouTube: Netflix·YouTube 같은 주문형 동영상 서비스의 설계다. 요구 사항과 규모 추정(하루 500TB 업로드), 데이터 모델과 API, 업로드 뒤 큐로 도는 처리 파이프라인(장면 단위 청크, 콘텐츠 검사, 트랜스코딩, 화질 변환), CDN과 ISP 안에 서버를 두는 Open Connect, 적응형 비트레이트와 이어 보기, 검색·트렌드·공유, 지역 차단과 추천을 정리했다.
라이브 스트리밍의 구조: 인코딩, 세그먼트, ABR, CDN: 라이브 스트리밍은 캡처한 영상을 압축·인코딩하고, 몇 초 단위 세그먼트로 잘라, 화질별로 여러 벌 만든 뒤(적응형 비트레이트) CDN 엣지로 퍼뜨려 시청자가 가까운 곳에서 받게 한다. 송출은 주로 RTMP·SRT, 시청은 HTTP 기반 HLS·DASH를 쓰고, 1초 미만 지연이 필요하면 WebRTC를 쓴다.
로드 밸런서: 여러 서버 앞에서 트래픽을 나눠 주는 로드 밸런서. 하는 일(분산, 헬스 체크와 장애 우회, TLS 종료, 세션 고정, 수평 확장, 플랫폼·경로별 라우팅, 영역 간 분산), L4와 L7의 차이, 하드웨어·소프트웨어·클라우드·GSLB 같은 형태, 분산 알고리즘을 정리했다.
마이크로서비스 아키텍처: 큰 시스템을 비즈니스 기능 단위의 작은 서비스로 나누고, 서비스마다 데이터와 배포를 따로 갖게 하는 구조다. 운영에는 API 게이트웨이, 서비스 레지스트리, 인증 서버, 비동기 메시징, 메트릭·로그 수집이 따라붙는다. 서비스 협업은 오케스트레이션과 코레오그래피 두 방식이 있고, 지연에 민감하거나 상태를 메모리에 둬야 하는 시스템에는 모놀리스가 낫다.
멀티플레이 게임 서버 설계: 턴제 비동기와 실시간: 온라인 멀티플레이 게임을 두 갈래로 정리했다. 턴제 비동기 게임은 게임 상태를 DB에 저장하고 차례가 오면 푸시로 알리며, 상태를 격자 문자열이나 명령 로그로 표현한다. 실시간 게임은 서버가 상태의 권위를 갖고, 클라이언트는 입력 예측·서버 보정·보간으로 지연을 숨긴다.
메시지 큐와 Kafka: 메시지 큐를 고르는 기준과 IBM MQ → RabbitMQ → Kafka → Pulsar로 이어진 구조 변화, Kafka의 토픽·파티션·컨슈머 그룹 구조와 빠른 이유(순차 I/O, 제로 카피), 전달 보장 수준(at-most/at-least/exactly once)과 메시지가 유실되는 지점별 대책, Kafka와 RabbitMQ의 차이, 처리 실패와 DLQ, Kafka Connect·Streams·스키마 레지스트리 생태계를 정리했다.
백엔드 지연 시간 줄이기: 숫자 감각과 기법: 메모리·SSD·네트워크·DB 커밋·LLM 호출이 대략 몇 나노초~초인지 자릿수 감각(Jeff Dean의 원형 표, 해마다 줄지 않는 왕복 지연, 봉투 뒷면 계산)을 먼저 잡고, API 지연을 줄이는 기법(인덱스, 캐시, 페이지네이션, 비동기 로깅·처리, 압축, 커넥션 풀, 로드 밸런싱, CDN)을 무엇을 줄이는지 기준으로 정리한다. 극단적 저지연 시스템의 원칙은 「크리티컬 패스에서 일을 줄인다」 하나다.
보안 시스템 설계: 원칙과 민감 데이터 관리: 보안 설계는 기밀성·무결성·가용성(CIA)을 지키는 일이고, 인증·인가·암호화·네트워크·컨테이너·API·서드파티·감사·사고 대응·재해 복구를 처음부터 기본값으로 넣는 것이다. 웹 앱의 대표 위험은 OWASP Top 10(2025)으로 점검한다. 민감 데이터는 분류하고, 전송·저장 중 암호화하고, 키를 분리 관리하고, 비식별화하고, 최소 권한과 수명 주기로 접근을 좁힌다.
분산 시스템의 시간과 장애: 8가지 착각부터 논리 시계까지: 분산 시스템이 어려운 이유는 메시지가 늦게 오고(비동기) 부품이 일부만 고장 나기(부분 장애) 때문이다. 분산 컴퓨팅의 8가지 착각, 대규모 클러스터의 실제 장애 빈도, 전역 '지금'이 없다는 사실, Lamport의 happened-before와 논리 시계, 선형화 가능성부터 최종 일관성·세션 보장까지의 일관성 모델, 합의 문제와 비잔티움 장애·BFT, Raft의 리더 선출과 로그 복제, 합의·CRDT로 조율 비용을 다루는 법을 정리한다.
분산 시스템의 통신·데이터 흐름 패턴: 서비스끼리 주고받는 방식(요청-응답, 비동기 요청-응답, 발행-구독, 경쟁 소비자, 우선순위 큐, 클레임 체크), 데이터가 흐르는 방식(ETL, 배치, 스트림 처리, 이벤트 소싱, CQRS), 여러 서비스를 조율하는 방식(오케스트레이션, 사가, 리더 선출, 분산 락, 앰배서더)을 한 지도로 묶고 각 패턴이 푸는 문제와 대가를 정리했다.
분산 트랜잭션: 2PC와 사가: 여러 DB·서비스에 걸친 작업을 하나처럼 끝내는 방법을 정리했다. 2단계 커밋(2PC)의 동작과 블로킹·코디네이터 장애 문제, 그 대안인 사가 패턴의 보상 트랜잭션 설계, 보상이 실패할 때의 처리, 격리가 없어 생기는 중간 상태와 대응책(시맨틱 락 등), 코레오그래피·오케스트레이션 구현 비교를 다룬다.
비동기 서버의 이벤트 루프: 다중 접속 서버에서 Reactor 패턴까지: 연결마다 프로세스·스레드를 붙이던 다중 접속 서버가 I/O 멀티플렉싱, Java NIO Selector, Reactor 패턴을 거쳐 이벤트 루프가 되는 과정을 정리한다. 이벤트 루프 스레드 하나가 수많은 연결을 맡기 때문에, 그 스레드를 블로킹 I/O나 긴 계산으로 막으면 같은 루프의 모든 요청이 멈춘다. 블로킹 작업은 별도 스레드 풀로 보낸다.
빠르고 유지보수하기 좋은 DB 조회 패턴: 서버 코드에서 DB 조회를 빠르게 하면서도 코드는 단순하게 두는 방법. 직렬 조회 → 수동 배치 → 병렬 처리 → 자동 배치 → 값별 독립 함수 → 요청 단위 캐시로 발전시키며, 핵심은 '지역적 추론(local reasoning)'이라는 점을 정리한다. DataLoader의 원리이기도 하다.
사진 공유 서비스 설계: 메타데이터, 저장, 샤딩: Instagram 같은 사진 공유 서비스의 설계다. 요구 사항과 규모 추정(하루 사진 200만 장, 10년 저장량), 미디어 파일과 메타데이터를 나눠 저장하는 구조, 테이블별 크기 계산, 느린 업로드가 읽기를 막지 않게 읽기·쓰기 서버를 나누는 이유, 복제로 파일을 잃지 않는 법, PhotoID 기반 샤딩과 홀짝 티켓 서버로 ID 만들기, CDN 배포를 다룬다.
소프트웨어 아키텍처 패턴: 계층형, 클라이언트-서버, 이벤트 기반, 마이크로서비스, 플러그인(마이크로커널), 헥사고날(포트와 어댑터) 아키텍처를 구조·장점·약점으로 비교하고, 구성 요소·커넥터와 제어·데이터 흐름으로 스타일을 가르는 다섯 계열(데이터 흐름, 호출-반환, 독립 구성 요소, 데이터 중심, 가상 머신)과 문제 모양별 선택 경험칙을 정리한다. 패턴마다 얻는 것과 치르는 것이 다르므로 시스템의 변경 방향과 팀 규모를 보고 고른다.
시스템 설계의 선택지와 흔한 문제의 해법: 수직·수평 확장, SQL·NoSQL, 배치·스트림, 정규화·비정규화, 강한·최종 일관성, REST·GraphQL, 상태 유지·무상태, 동기·비동기처럼 설계에서 반복되는 양자택일을 비교하고, 읽기 폭주·쓰기 폭주·단일 장애 지점·지연·대용량 파일·느린 쿼리 같은 흔한 문제를 해법과 짝지었다.
시스템 설계의 품질 속성과 트레이드오프: 확장성·가용성·신뢰성·성능이라는 네 가지 품질 속성의 뜻과 달성 수단, 설계에서 늘 부딪치는 다섯 가지 트레이드오프, 시스템 설계를 이루는 빌딩 블록, 목표·범위·규모에서 상위 설계·병목까지의 설계 진행 순서와 지연 시간 숫자로 하는 어림셈, 요구 사항에서 이전 계획까지 설계 논의의 체크리스트, 그리고 CAP·BASE·KISS 같은 약어를 한 곳에 정리했다.
실시간 공동 편집: OT와 CRDT: 구글 문서처럼 여럿이 동시에 고치는 편집기는 편집을 문서 전체가 아니라 연산(삽입·삭제) 단위로 WebSocket으로 주고받고, 동시에 일어난 연산을 충돌 없이 합치는 알고리즘이 핵심이다. 중앙 서버가 연산을 변환하는 OT, 연산 자체를 교환·결합 가능하게 만든 CRDT, 차이를 주고받는 차등 동기화가 있다.
실시간 웹소켓 서버 설계: 수만 개의 연결을 붙잡고 메시지를 밀어 주는 웹소켓 서버를 설계·검증하는 방법이다. 연결 하나에 여러 메시지 타입을 싣는 법, 방(그룹) 단위 분할과 Pub/Sub로 서버 간 전파하기, 액터 모델로 상태 관리하기, 팬아웃 폭증을 묶음 전송으로 막기, 파일 디스크립터·포트·로드밸런서 한계, 연결 수명 주기를 검증하는 부하 테스트까지 정리했다.
실시간 트렌딩과 Top-K 집계: 최근 시간 창에서 가장 많이 언급된 상위 K개를 구하는 문제를 정리했다. 슬롯 링 버퍼로 만드는 슬라이딩 창 카운터, 키별 카운트 → 부분 순위 → 전역 순위의 3단 집계, 창이 밀릴 때 다시 계산하지 않는 최소 후보 집합(MinTopk), 키가 너무 많을 때의 근사 Top-K, 과거 패턴과의 거리로 트렌드를 일찍 잡는 비모수 방법까지 다룬다.
아키텍처와 API 계층의 진화: 모놀리스에서 페더레이션까지: 대규모 서비스가 모놀리스 → 서비스 분리(SOA·마이크로서비스) → 매크로서비스로 옮겨 가는 이유와, 그에 맞춰 API 계층이 직접 호출 → 게이트웨이 집계 → BFF → GraphQL 페더레이션으로 바뀌는 흐름을 정리했다. 반대로 모놀리스와 단순한 백엔드로 큰 트래픽을 감당하는 사례와 여러 SaaS API를 묶는 통합 플랫폼도 다룬다.
알림 시스템 설계: 푸시·이메일·SMS와 실시간 메시지 전달: 여러 서비스가 보내는 알림을 게이트웨이 → 분배 서비스 → 메시지 큐 → 채널 서비스로 흘려 인앱·이메일·SMS·모바일 푸시로 전달하는 구조를 정리했다. 템플릿·채널 선호 저장소, 우선순위 큐, APNs·FCM 같은 플랫폼 푸시 서비스, 전달 추적, 그리고 채팅 메시지를 채널 서버와 지역 게이트웨이를 거쳐 웹소켓으로 밀어 주는 실시간 전달 경로까지 다룬다.
웹 확장성의 구성 요소: 한 장으로 보는 웹 아키텍처: 확장 가능한 웹 애플리케이션을 이루는 구성 요소(DNS, 로드 밸런서, CDN, 프론트 웹 서버, 웹 서비스, 캐시, 메시지 큐와 워커, 데이터 저장소, 검색엔진)를 한 장의 지도로 정리했다. 3-Tier와 MSA의 데이터 흐름, 확장의 세 축(복제, 기능 분할, 데이터 분할), HTTP 캐시와 객체 캐시, 비동기 처리와 이벤트 기반 구조, 구간별 보안, 그리고 사람과 팀을 확장하는 법까지 다룬다.
위치 기반 서비스 설계: 지오해시, 쿼드트리, 지도: '내 주변 식당'은 모든 점과의 거리를 계산하면 느리므로 지도를 격자로 나눠 색인한다. 지오해시는 위경도를 접두사가 같으면 가까운 문자열로 바꿔 DB 색인으로 찾고, 쿼드트리는 밀도에 따라 칸을 쪼갠 메모리 트리로 찾는다. 지도 서비스는 위치 수집, 미리 잘라 둔 타일의 CDN 서빙, 지오코딩과 경로 계산으로 나뉜다.
이미지·동영상 처리 서버 설계: 업로드된 이미지·동영상을 여러 크기와 화질로 바꿔 내보내는 서버를 설계하는 방법이다. 미리 만들어 두기와 요청 시 변환(온디맨드 리사이징)의 비교, 캐시·CDN·HTTP 검증자로 변환 비용을 줄이는 법, 엣지 함수 구성, 트랜스코딩 파이프라인을 단계로 나누고 비동기 완료 알림을 보내는 법, 점진적 다운로드와 적응형 스트리밍을 정리했다.
이벤트 기반 아키텍처 설계: 이벤트 기반 아키텍처는 「무슨 일이 일어났다」는 사실을 발행하고, 관심 있는 쪽이 구독해 반응하게 해서 시스템 사이의 논리적 의존을 끊는다. 이벤트와 커맨드의 구분, 이벤트 계층(앱·내부·외부), 페이로드 설계, 발행 시점의 정합성, 큐와 토픽, 멱등 소비, 순서와 재처리, 조회 모델 분리까지 설계할 때 정해야 할 것을 정리했다.
인증·인가 로직은 어디에 두나: 필터, 인터셉터, API 게이트웨이: 인증·인가를 컨트롤러마다 넣으면 중복과 누락이 생긴다. 단일 서버에서는 필터·인터셉터·메서드 보안으로, MSA에서는 API 게이트웨이에서 토큰을 검증하고 각 서비스가 자기 리소스의 인가를 맡는 식으로 층을 나눈다. 게이트웨이 우회 차단과 신원 전달 방식이 핵심 주의점이다.
자금 이동: 청산과 결제: 온라인 결제 뒤에서 돈이 실제로 움직이는 구조를 정리했다. 정보 흐름과 자금 흐름이 분리되는 이유, 청산(clearing)과 결제(settlement)의 차이, 배치 이체망 ACH, 은행 간 메시지망 SWIFT, 외화 결제의 환전 경로, 실시간 이체망 UPI를 다루고, 은행 지갑과 블록체인 지갑·Web 3.0의 차이까지 비교한다.
장애 확산을 막는 복원력 패턴: 작은 오류가 연쇄 장애로 번지지 않게 하는 여덟 가지 패턴(타임아웃, 재시도, 서킷 브레이커, 속도 제한, 부하 차단, 벌크헤드, 배압, 크래시 허용), 속도 제한 알고리즘의 개요, 벌크헤드 격리 방식과 배압 전략, 재시도를 안전하게 만드는 백오프·지터 전략, 4xx·5xx별 재시도 규칙, 재시도의 전제 조건인 멱등성을 적용해야 하는 곳을 정리했다.
채팅 시스템 설계: 연결, 접속 상태, 메시지 전달: 채팅 서버는 클라이언트와 WebSocket을 유지하고, 메시지는 순서를 매겨 저장한 뒤 받는 사람이 붙어 있는 서버로 전달한다. 서버가 여러 대이면 Redis pub/sub·메시지 큐로 서버 간에 메시지를 넘기고, 접속 상태 서비스가 온라인이면 소켓으로, 오프라인이면 푸시 알림으로 보낸다.
카드 결제망과 간편결제: 카드를 긁는 순간부터 가맹점이 돈을 받기까지의 승인·매입·정산 흐름과, 발급사·매입사·카드 네트워크·PG·프로세서가 각각 맡는 일, 수수료가 나뉘는 구조를 정리했다. 카드 번호 대신 토큰을 쓰는 Apple Pay·Google Pay, QR 결제의 네 가지 방식과 「스캔해서 결제」 흐름까지 다룬다.
캐시 전략: 계층, 읽기·쓰기 패턴, 교체 정책, 장애 패턴: 캐시는 요청 경로의 거의 모든 층에 있다. 캐시와 원본을 맞추는 읽기·쓰기 패턴(cache-aside, read-through, write-through, write-around, write-back), 꽉 찼을 때 무엇을 버릴지 정하는 교체 정책(LRU·LFU·FIFO·SLRU·TTL 등), 그리고 캐시가 오히려 DB를 무너뜨리는 네 가지 장애(동시 만료, 관통, 핫 키 만료, 캐시 다운)와 대응을 정리한다.
캐시 클러스터 운영과 장애 대응: 트래픽 대부분을 캐시가 받는 서빙 계층에서는 캐시의 가용성이 곧 서비스의 가용성이다. 일부 노드 장애를 연결 단위로 빨리 감지하고, 동기화 중인 복제본은 트래픽에서 빼고, 응답 속도 기반 라우팅이 만드는 쏠림을 무작위 선택으로 풀고, 핫 키는 짧은 TTL의 로컬 캐시로 흡수하는 방법을 정리했다.
클라우드 설계 패턴: 클라우드 앱이 반복해서 만나는 문제(서버가 파일 전송을 떠안음, 순간 폭주, 설정 재배포, 여러 단계 작업의 실패, 인스턴스 상태 판단, 인증 위임)를 푸는 패턴을 모았다. 발레 키, 정적 콘텐츠 호스팅, 큐 기반 부하 평준화, 파이프와 필터, 계산 자원 통합, 외부 설정 저장소, 스케줄러·에이전트·감독자, 헬스 엔드포인트 모니터링, 연합 ID, 백그라운드 작업을 다루고, 다른 노트에 집이 있는 패턴은 지도로 잇는다.
API 게이트웨이: 클라이언트와 백엔드 서비스 사이의 단일 입구인 API 게이트웨이. 라우팅·인증·레이트 리밋·요청 변환·응답 조합·캐시 같은 기능, 요청 하나가 게이트웨이를 지나는 순서, 생태계·마켓플레이스·다중 플랫폼 같은 쓰임, 그리고 리버스 프록시·로드 밸런서·서비스 메시·공통 라이브러리와의 차이와 함께 쓰는 배치를 정리했다.
BFF (Backend For Frontend): 프론트엔드 하나마다 그 화면에 맞춘 중간 서버를 두는 BFF 패턴. 여러 API를 묶고, 필요한 필드만 가공해 내려 주고, CORS·인증·MSA 엔드포인트 변경을 흡수한다. Next.js를 BFF로 쓰는 법과 GraphQL 정규화 캐시 함정을 정리한다.
Kafka 운영: 복제, 컨슈머 그룹, 튜닝, 모니터링: Kafka 클러스터를 운영할 때 알아야 할 내부 동작을 정리했다. 복제와 ISR·하이 워터마크, acks와 min.insync.replicas의 조합, KRaft 컨트롤러와 장애 조치, 프로듀서 배치·압축·전송 방식, 컨슈머 그룹 리밸런스와 오프셋 커밋, 컨슈머 랙, 보존과 로그 컴팩션, 보안(TLS·SASL·ACL), 브로커 증설·롤링 재시작, 모니터링 지표와 병목 진단을 다룬다.
URL 단축기 설계: 긴 URL을 짧은 코드로 바꿔 주고 그 코드로 원래 주소에 리다이렉트하는 서비스(Bitly 같은)의 설계다. 요구 사항과 규모 추정, 301과 302 리다이렉트의 차이, 해시·고유 ID+Base62·무작위 코드 생성 방식 비교, 데이터 모델과 저장소, 캐시 중심의 읽기 경로, 사용자 지정 별칭·만료·클릭 분석·악용 방지를 다룬다.

Database19

검색엔진의 원리: 역인덱스와 랭킹: 검색엔진은 문서를 토큰으로 쪼개 단어 → 문서의 역인덱스를 만들고(색인), 질의어를 같은 방식으로 처리해 찾은 뒤 TF-IDF·BM25 같은 점수로 순서를 정한다(질의). 한국어는 형태소 분석이나 N-gram이 필요하다.
데이터베이스 샤딩: 한 DB에 담기 어려울 만큼 커진 데이터를 같은 스키마의 여러 DB로 행 단위로 나누는 샤딩을 정리했다. 샤드 키와 라우팅 방식(모듈러·범위·디렉터리·일관된 해싱·가상 버킷), 샤딩이 어렵게 만드는 것, ShardingSphere 같은 미들웨어, 기존 DB에서 옮겨 올 때의 동기화와 첫 요청 지연까지 다룬다.
데이터베이스 확장과 성능 최적화: DB가 느려지거나 한계에 닿을 때 싼 것부터 쓰는 수단을 순서대로 정리했다. 인덱스·쿼리 튜닝·커넥션 풀·캐시·구체화된 뷰(갱신 방식)·반정규화·수직 확장·읽기 복제본·파티셔닝(프루닝, 분할 방식, 로컬·글로벌 인덱스)·샤딩의 효과와 대가, 복제 구조(단일 리더·다중 리더·리더 없음)와 동기화 방식, 읽기 복제본 패턴의 복제 지연과 라우팅(애플리케이션 vs 미들웨어)을 다룬다.
분산 환경의 고유 ID 생성: 여러 서버가 동시에 겹치지 않는 ID를 만드는 다섯 가지 방법(UUID, Snowflake, DB 자동 증가, DB 세그먼트, Redis)을 비교하고, 시간순 정렬·64비트·저지연 같은 요구 사항에 따라 어떤 방식을 고를지, 시간순 UUID(UUIDv7)가 인덱스 문제를 어떻게 푸는지 정리했다.
블록·파일·오브젝트 스토리지: 저장 시스템의 세 갈래인 블록·파일·오브젝트 스토리지를 비교하고, 오브젝트 스토리지의 쓰임새, 복제 대신 패리티로 내구성을 얻는 이레이저 코딩, 큰 파일을 조각내 올리는 멀티파트 업로드를 정리했다.
와이드 컬럼 DB와 대규모 메시지 저장: Cassandra·ScyllaDB: Cassandra·ScyllaDB 같은 와이드 컬럼 DB는 파티션 키로 데이터를 노드에 나누고 파티션 안을 클러스터링 키로 정렬해 둔다. 파티션 키·클러스터링 키 모델, 조절 가능한 일관성, LSM 트리 저장 엔진, Cassandra와 ScyllaDB의 차이를 정리하고, 수조 건 메시지를 저장할 때 생기는 핫 파티션을 데이터 서비스 계층의 요청 병합으로 막는 방법과 로컬 SSD와 네트워크 디스크를 RAID로 묶어 디스크 지연을 줄이는 방법을 다룬다.
용도별 데이터베이스와 고르는 법: OLTP·OLAP·검색·키-값·문서·와이드 컬럼·그래프·시계열·벡터·공간 DB를 「어떤 질문에 답하는 저장소인가」로 나누고, 고르는 순서와 결정 트리, 확장 기능으로 여러 용도를 덮는 PostgreSQL, 컴퓨팅과 저장을 분리한 서버리스 DB, 클라우드 관리형 대응표를 정리했다.
웹 검색엔진의 동작: 크롤링, 색인, 랭킹, 질의 처리: 웹 검색엔진은 크롤러가 링크 그래프를 따라 페이지를 모으고, 중복을 묶어 샤딩된 역인덱스에 넣은 뒤, 질의가 오면 의도를 해석해 후보를 뽑고 여러 랭킹 신호로 순서를 정한다. 크롤러의 URL 프런티어, PageRank, 2단계 랭킹, 구글의 랭킹 시스템과 네이버 통합검색의 컬렉션 구조를 자료구조·알고리즘 관점에서 정리했다.
인덱스 설계와 쿼리 튜닝: 인덱스는 정렬이다. 카디널리티·분포도와 후보 컬럼 고르기, 복합 인덱스 컬럼 순서, 유니크·외래 키 인덱스, 인덱스를 못 타게 만드는 조건, EXPLAIN 접근 유형과 Oracle 인덱스 스캔 방식, 조인 방식(중첩 루프·해시·정렬 병합)과 조인 순서, ORDER BY·GROUP BY·커버링 인덱스, 빠른 쿼리를 위한 체크리스트, NoSQL의 인덱스와 MongoDB의 ESR 규칙까지 정리했다.
DB 내부 구조: 쿼리 실행과 인덱스 자료 구조: SQL 한 문장이 파서·옵티마이저·실행기·버퍼 관리자·트랜잭션·잠금 관리자를 거쳐 처리되는 흐름, Oracle을 예로 본 엔진의 메모리(SGA·PGA)·백그라운드 프로세스·파일 구성과 테이블스페이스→세그먼트→익스텐트→블록의 논리 저장 구조, 그리고 DB가 데이터를 찾는 데 쓰는 자료 구조(B-트리, LSM 트리, 해시, 스킵 리스트, 역색인, R-트리 등)를 정리했다. B-트리는 읽기에, LSM 트리는 쓰기에 강하다.
DB 커넥션 풀: 커넥션 풀은 DB 연결을 미리 만들어 빌려주고 돌려받는다. 풀 크기와 처리량의 관계, 대기 시간(maxWait·connectionTimeout)을 짧게 잡아야 장애가 번지지 않는 이유, 유효성 검사와 유휴 연결 정리, DataSource 프록시로 SQL에 출처 주석을 다는 법을 정리했다.
Elasticsearch 검색: 매핑·분석기·Query DSL: Elasticsearch로 무엇을 어떻게 찾는지 정리했다. 동적·명시적 매핑과 필드 타입, object와 nested, 분석기(문자 필터·토크나이저·토큰 필터), Query DSL의 질의·필터 문맥과 match·term·range·bool·multi_match, BM25 점수와 부스팅, 집계, 페이지네이션(from·search_after·PIT·scroll), suggester, Painless 스크립트, 벡터 검색과 ES|QL까지 다룬다.
Elasticsearch와 ELK 스택: Elasticsearch는 Lucene 위에 만든 분산 검색·분석 엔진이다. JSON 문서를 역인덱스로 색인해 전문 검색과 집계를 거의 실시간으로 처리한다. 클러스터·노드 역할·샤드·세그먼트 구조, 쓰기 경로와 복제·일관성 모델, 인덱스 템플릿·롤오버·ILM·데이터 티어, 스냅숏 백업, 확장과 튜닝, 모니터링과 장애 진단(429, 디스크 워터마크), 보안, ELK 로그 파이프라인을 정리한다.
Flyway로 DB 마이그레이션 관리하기: 스키마 변경을 버전이 붙은 SQL 파일로 기록하고 순서대로 적용하는 오픈소스 DB 마이그레이션 도구 Flyway. 왜 쓰는지, 동작 방식, 실행 방법을 정리한다.
JPA와 영속성 컨텍스트: Java의 ORM 표준인 JPA(Jakarta Persistence)가 객체와 테이블의 패러다임 불일치를 어떻게 메우는지, 영속성 컨텍스트의 1차 캐시·쓰기 지연·변경 감지와 엔티티 상태, N+1 문제의 원인과 해결(페치 조인·배치 크기·엔티티 그래프), 엔티티 설계 관례, 대량 데이터를 읽는 no-offset 배치 리더를 정리한다.
MongoDB 시작하기와 CRUD: 문서형 NoSQL인 MongoDB를 Atlas 클라우드에 만들고 접속 설정을 한 뒤, 기본 CRUD 명령과 Mongoose로 다루는 방법. 샤딩 구조(mongos, config server, shard)와 청크·밸런서까지.
Prisma: 커서로 이전·다음 항목 찾기와 CLI: Node.js ORM Prisma의 cursor·skip·take로 상세 화면의 이전/다음 항목 키를 조회하는 방법과, 자주 쓰는 Prisma CLI 명령.
Redis: Redis는 메모리에 데이터를 두는 키-값 저장소로, 캐시를 넘어 세션·분산 락·카운터·레이트 리미터·랭킹·큐로 쓰인다. 빠른 이유(메모리, 단일 스레드 이벤트 루프와 I/O 다중화, 효율적인 자료구조), 자료구조별 쓰임, 영속성(RDB·AOF·혼합)과 큰 키의 영향, 만료·교체 정책과 메모리 지표, 트랜잭션(MULTI·WATCH)과 Lua, 복제·센티널·클러스터와 리샤딩, ACL, 장애 진단, Memcached와의 차이를 정리한다.
SQL 기초: SQL 명령어 분류(DDL·DML·DCL)와 테이블 구조 변경과 제약 조건(기본 키·외래 키·CASCADE, 자연 키와 대리 키), 뷰·시퀀스·동의어, 데이터를 생성·조회·수정·삭제하고 조건·정렬·집계·그룹화하는 기본 문법, WHERE와 HAVING·DISTINCT·CROSS JOIN처럼 헷갈리기 쉬운 지점, 서브쿼리(상관 서브쿼리, EXISTS와 NOT IN의 NULL 함정), 저장 프로시저와 PL/SQL(블록, 예외, 커서, BULK COLLECT, 함수·패키지·트리거).

Django10

Model·Template·View 구조와 ORM·Admin·인증을 기본 제공하는 Python 웹 프레임워크.

Django 모델 관계 (1:1, 1:N, M:N): OneToOneField, ForeignKey, ManyToManyField로 모델 간 1:1, 1:N, M:N 관계를 표현하고 역참조하는 방법.
Django 시작하기와 MTV 패턴: Django 프로젝트와 앱을 만들고, Model·Template·View가 요청을 나눠 처리하는 MTV 구조를 이해한다.
Django Form과 ModelForm: Django Form으로 입력 폼 렌더링과 유효성 검사를 자동화하고, ModelForm으로 모델 필드를 재사용해 생성·수정 로직을 단순화한다.
Django Model, Migration과 Admin: models.py의 클래스로 DB 테이블 구조를 정의하고, makemigrations·migrate로 그 변경을 데이터베이스에 반영하며, admin.py에 모델을 등록해 관리자 페이지에서 데이터를 확인·편집하는 방법.
Django ORM과 QuerySet: Django ORM으로 SQL 없이 객체 문법으로 CRUD·조건 조회·정렬·집계를 수행하는 방법과, 각 API가 어떤 SQL이 되는지 대응표로 정리한다.
Django Template과 Static 파일: DTL의 변수·필터·태그와 템플릿 상속으로 화면을 구성하고, CSS·이미지 같은 정적 파일을 연결하는 방법.
Django URL과 View: urls.py가 요청 주소를 view 함수로 연결하고, view가 render로 응답을 만드는 흐름과 URL 분리·이름·namespace.
Django User와 인증: django.contrib.auth의 User 모델로 회원가입·로그인을 구현하고, 템플릿에서 현재 사용자 정보를 쓰는 방법.
DRF Serializer와 관계 표현: Django REST Framework의 Serializer로 모델을 JSON으로 바꾸고, 중첩 Serializer로 1:N·M:N 관계를 응답에 담으며, api_view로 CRUD를 구현하는 방법.

Express7

Express 라우팅과 CRUD API: Express로 서버를 띄우고 Router로 경로를 분리해 REST 방식의 CRUD API를 만드는 방법.
Express 미들웨어: 요청과 최종 라우트 핸들러 사이에서 로깅·파싱·에러 처리 같은 공통 작업을 수행하는 함수 체인.
Express 싱글톤 패턴과 서비스 패턴: 서버 인스턴스를 하나의 클래스로 관리하고 라우터에서 비즈니스 로직을 서비스 파일로 분리하는 구조화 기법.
Express 프로젝트 구조: 3계층, 이벤트, DI, 로더: 구조를 강제하지 않는 Express 앱을 오래 고칠 수 있게 나누는 법. 라우트·서비스·데이터 접근 3계층, 서비스에서 HTTP를 떼어 내기, 부수 작업을 이벤트 구독자로 분리, 생성자 주입, 설정 모듈, DB 기반 작업 스케줄러, 시작 과정을 로더로 쪼개기를 정리했다.
Koa: 미들웨어만 남긴 Node.js 웹 프레임워크: Express 팀이 만든 Node.js 웹 프레임워크 Koa. 코어에는 미들웨어와 ctx(Context)만 두고 라우팅·바디 파싱은 @koa/router·@koa/bodyparser로 붙인다. async 미들웨어가 await next() 앞뒤로 감싸는 양파 모델, 라우트 모듈화와 컨트롤러 분리를 정리한다.
Node.js 런타임: 구조·이벤트 루프·운영과 OS 차이: 브라우저 밖에서 JavaScript를 실행하는 런타임 Node.js를 정리한다. V8·libuv·스레드 풀로 이뤄진 구조, timers·poll·check 단계로 도는 Node 이벤트 루프와 nextTick·setImmediate의 차이, EventEmitter와 Buffer, cluster·worker_threads·child_process로 멀티코어 쓰기, 비동기 에러 처리와 --inspect 디버깅, 힙 크기 설정과 운영 관례, Node의 설계를 반성하며 나온 Deno·Bun, Windows·macOS 차이로 깨지는 환경 변수와 경로를 cross-env와 path 모듈로 푸는 법까지.
Node.js 스트림: 데이터를 조각으로 흘려 처리하기: 큰 데이터나 끝이 없는 데이터를 통째로 메모리에 올리지 않고 조각(chunk) 단위로 처리하는 Node.js 스트림을 정리한다. Readable·Writable·Duplex·Transform 네 종류, 흐름 모드와 일시정지 모드, 백프레셔와 highWaterMark, objectMode, pipe의 함정과 pipeline, for await 비동기 반복, 웹 스트림과의 관계, streams1~3의 변천까지.

NestJS13

Express·Fastify 위에 모듈·DI·데코레이터 기반 아키텍처를 얹은 TypeScript Node.js 서버 프레임워크.

NestJS 설정과 환경 변수: @nestjs/config로 .env를 읽어 DB 주소·포트·비밀키를 코드 밖으로 분리하고, 다른 모듈 설정은 forRootAsync와 ConfigService로 읽는 방법.
NestJS 파일 업로드(Multer): multipart/form-data 요청을 Multer와 FileInterceptor로 받아 이미지·영상 같은 미디어 파일을 저장하는 방법.
NestJS 프로젝트 구조와 실행 흐름: Nest CLI로 만든 프로젝트의 파일 구성과 main.ts에서 컨트롤러·서비스까지 요청이 흘러가는 기본 흐름.
NestJS Controller: 들어오는 요청을 경로·메서드별로 받아 파라미터를 꺼내고 응답을 반환하는 NestJS의 라우팅 계층.
NestJS DTO와 Validation: 요청 바디를 DTO 클래스로 정의하고 class-validator와 ValidationPipe로 자동 검증하는 패턴, 회원가입 구현 예.
NestJS Exception Filter와 Pipe: 예외를 일관된 응답 형식으로 바꾸는 Exception Filter와, 들어오는 값을 변환·검증하는 Pipe.
NestJS JWT 인증과 Passport: 로그인 시 JWT를 발급하고, Passport Strategy와 Guard로 요청마다 토큰을 검증해 현재 사용자를 꺼내는 NestJS 인증 구현.
NestJS Middleware와 Interceptor(AOP): 라우트 핸들러보다 먼저 실행되는 NestJS 미들웨어와, 핸들러 실행 전후를 감싸 로깅·응답 가공 같은 횡단 관심사(AOP)를 한곳에서 처리하는 인터셉터. 만들기, 적용 범위, 둘의 차이.
NestJS Module과 Provider: 의존성 주입과 캡슐화: @Injectable 클래스를 모듈의 providers에 등록하면 Nest가 인스턴스를 만들어 생성자에 주입한다(DI). 모듈은 관련 컨트롤러·프로바이더를 묶고 export한 것만 밖에 공개하는 구성 단위다.
NestJS에서 Mongoose 스키마 정의: @nestjs/mongoose 연결·디버그 로그 설정, @Schema·@Prop 데코레이터로 MongoDB 컬렉션 구조를 클래스로 정의하고 virtual 필드로 응답에서 민감 정보를 숨기는 방법.
Repository 패턴과 레이어 분리: 서비스와 데이터베이스 사이에 데이터 접근 전담 계층을 두어 비즈니스 로직과 DB 쿼리를 분리하는 패턴.
Swagger로 API 문서화: @nestjs/swagger로 코드의 데코레이터에서 OpenAPI 문서를 자동 생성하고, 운영 환경에서는 Basic Auth로 문서 접근을 막는 방법.

Web Basics20

2단계 인증: TOTP와 패스키: 인증기 앱의 6자리 코드(TOTP)는 등록 때 공유한 비밀 키와 현재 시각으로 서버와 앱이 같은 숫자를 각자 계산하는 방식이다. 패스키는 비밀을 공유하지 않는다: 기기가 사이트마다 키 쌍을 만들고 공개키만 서버에 주며, 로그인 때 서버의 챌린지에 개인키로 서명한다. 도메인에 묶여 있어 피싱에 강하다.
비밀번호 저장과 비밀번호 관리자: 서버는 비밀번호를 평문·암호문·단순 해시로 두지 않고, 사용자마다 다른 솔트를 섞어 Argon2id·bcrypt 같은 느린 해시로 저장한다. 비밀번호 관리자는 반대 방향의 문제를 푼다: 마스터 비밀번호에서 키를 유도해 금고를 기기에서 암호화하므로 서버는 내용을 볼 수 없다.
세션 기반 인증과 토큰 기반 인증: 로그인 상태를 서버 저장소에 두는 세션 방식과, 서명된 토큰(JWT)에 담아 클라이언트가 들고 다니는 토큰 방식의 흐름·장단점을 비교하고, 토큰 탈취 대책(짧은 만료, 슬라이딩 세션, 리프레시 토큰 회전)과 선택 기준을 정리한다.
스프링 애플리케이션 설계: DI, 프록시 트랜잭션, 멀티모듈, WebFlux: 스프링으로 서버를 만들 때 반복해서 부딪히는 설계 문제를 정리한다. IoC·DI와 생성자 주입, Service/ServiceImpl 관행과 SOLID, Lombok 사용 기준, 프록시 기반 @Transactional의 자기 호출 함정, 멀티모듈의 계층과 의존 규칙, 사용하지 않는 API 찾기, Spring MVC와 WebFlux의 차이를 다룬다.
스프링의 싱글톤 빈과 요청 스레드: 스프링 빈은 하나뿐인데 동시에 들어온 수많은 요청을 어떻게 처리하는가. 내장 Tomcat의 스레드 풀이 요청마다 스레드를 배정하고, 모든 스레드가 같은 싱글톤 빈을 공유하므로 빈은 상태 없이(stateless) 짜야 한다. NIO 커넥터, 스레드 풀 설정, 가상 스레드까지 정리한다.
웹 서버, WAS, 그리고 Nginx: 정적 자원을 내주는 웹 서버(Apache·Nginx)와 동적 처리를 맡는 WAS(Tomcat 등)의 역할 분담, 리버스 프록시·로드밸런싱, Nginx의 마스터-워커 구조와 겸하는 역할(웹 서버·프록시·캐시·TLS 종료), 그리고 Nginx의 location·rewrite·proxy_pass로 404를 다른 서버로 넘기는 설정.
웹 앱의 요청·응답 구조: 브라우저·프론트엔드 서버·백엔드(API) 서버·데이터베이스가 요청과 응답을 주고받는 웹 애플리케이션의 기본 흐름과, 한 컴퓨터 안에서 프로세스를 구분하는 포트의 역할.
웹훅과 폴링: 다른 서비스의 변화를 알아내는 두 방법. 폴링은 내가 주기적으로 묻고, 웹훅은 상대가 이벤트가 생길 때 내 엔드포인트를 호출한다. 동작 흐름과 장단점, 고르는 기준, 웹훅을 받는 쪽이 갖춰야 할 서명 검증·빠른 응답·멱등 처리·재시도 대비를 정리했다.
인코딩·암호화·해시·토큰화와 디지털 서명: 데이터를 바꾸는 네 가지 방법은 목적이 다르다. 인코딩은 형식 변환(키 없음, 보안 아님), 암호화는 키로 기밀성 확보(대칭·비대칭), 해시는 되돌릴 수 없는 지문, 토큰화는 원본을 금고에 두고 의미 없는 대체값을 쓰는 것이다. 해시와 개인키를 엮은 디지털 서명이 위변조와 서명자를 함께 증명한다. 용도별로 쓸 알고리즘(AEAD, HMAC, Argon2id, Ed25519, X25519·ML-KEM)과 nonce 재사용·변조·재전송·타이밍 같은 조합의 함정도 정리한다.
텔레그램 미니앱 인증 흐름: 텔레그램이 서명한 initData를 클라이언트가 서버로 보내고, 서버가 봇 토큰 기반 HMAC-SHA256으로 위변조와 만료를 검증한 뒤 자체 세션·JWT를 발급하는 미니앱 인증 패턴.
API 보안 체크리스트: API를 공개하기 전에 점검할 보안 항목을 전송·입력·인증과 인가·노출 범위·운영 단계로 묶었다. 한 가지 방어에 기대지 말고 여러 겹을 쌓는 게 핵심이다.
API 아키텍처 스타일: SOAP·REST·GraphQL·gRPC·WebSocket·Webhook: API는 시스템끼리 기능과 데이터를 주고받는 약속이다. 대표적인 여섯 가지 스타일(SOAP, REST, GraphQL, gRPC, WebSocket, Webhook)을 통신 방향·데이터 형식·잘 맞는 곳으로 비교하고, REST·GraphQL·gRPC를 계약·응답 모양·전송·스트리밍·오류 처리·캐시·브라우저 지원·버전 관리 등 축별로 나란히 놓았다. API와 SDK의 차이, 공개 범위에 따른 API 종류, API를 배울 때 거치는 주제 지도도 정리했다.
API 키와 HMAC 요청 서명: 서버끼리 호출하는 API에서 요청마다 '누가 보냈고 중간에 바뀌지 않았나'를 증명하는 HMAC 요청 서명. 앱 ID·액세스 키·시크릿 키의 역할, 서명할 문자열을 만드는 법, 타임스탬프와 논스로 재전송을 막는 법, 서버의 검증 순서, 토큰 방식과의 비교를 정리했다.
API 테스트의 종류: API를 검증하는 아홉 가지 테스트(스모크, 기능, 통합, 회귀, 부하, 스트레스, 보안, UI, 퍼즈)가 각각 어떤 질문에 답하는지, 개발에서 배포까지 어느 단계에서 돌리는지, 부하와 스트레스의 차이와 퍼즈 테스트가 찾는 것을 정리했다.
API 페이지네이션: 큰 목록을 나눠 내려 주는 API 페이지네이션의 여섯 가지 방식(오프셋, 페이지 번호, 커서, 키셋, 시간 기반, 혼합)을 요청 모양·DB 쿼리·장단점으로 비교한다. 깊은 페이지에서 오프셋이 느려지는 이유, 데이터가 바뀔 때 생기는 중복·누락, 정렬 키에 동점 깨기를 넣는 규칙, 응답에 다음 페이지 정보를 싣는 법까지.
Base64 인코딩: 바이너리 데이터를 ASCII 문자 64개만으로 바꿔 텍스트용 채널로 안전하게 보내는 인코딩. 6비트씩 끊어 변환하는 원리, 패딩, 약 33% 커지는 비용, 이미지를 API에 보내는 예를 정리한다.
CORS: 다른 출처(origin)의 프론트엔드가 API를 호출할 수 있도록 서버가 허용 범위를 알려 주는 브라우저 보안 정책.
GraphQL: GraphQL은 타입 스키마 위에서 클라이언트가 필요한 필드를 골라 질의하는 API 질의 언어이자 런타임이다. 쿼리·뮤테이션·구독, REST 대신 고를 때의 기준, N+1·캐시·악성 쿼리 같은 약점과 대책, 클라이언트 래핑·BFF·모놀리식·페더레이션 네 가지 도입 패턴, 등록된 쿼리로 운영하는 방식을 정리했다.
gRPC: Protocol Buffers로 정의하는 RPC: gRPC는 .proto 파일로 서비스 계약을 정의하고, 생성된 스텁으로 원격 메서드를 로컬 함수처럼 부르는 HTTP/2 기반 이진 RPC 프레임워크다. Protocol Buffers의 태그·varint 직렬화와 JSON 비교, 네 가지 호출 방식, Node.js 예제, 브라우저 제약과 도입 판단 기준을 정리했다.
REST API 설계: 자원을 URI로 표현하고 HTTP 메서드로 행위를 나타내는 API 설계 방식과 그 규칙. REST의 여섯 제약과 균일한 인터페이스(자기 서술적 메시지·HATEOAS), PUT·PATCH·POST 고르기, URI 규칙과 자원 원형, 상태 코드 선택과 오류 응답(RFC 9457), 멱등 키·버전 관리 방식·비동기 요청·조건부 요청·응답 모양 같은 실무 설계 팁까지.

Computer Science

148

컴퓨터 구조, 운영체제(프로세스·메모리·파일), 네트워크(TCP·HTTP), 데이터베이스, C와 기초 자료구조, 정보처리기사 개념까지 개발의 바탕이 되는 CS 지식 모음.

개발자가 빠지는 함정 모음: CSS·유니코드·부동소수점·시간·SQL·동시성·React·Git·네트워크 등에서 직관과 다르게 동작해 버그를 만드는 지점을 분야별로 묶고, 이름·주소·전화번호·이메일 같은 현실 데이터에 대한 착각(Falsehoods)을 덧붙였다. 공통 교훈은 '기본값과 경계를 믿지 말고, 표현과 비교의 기준을 명시하라'다.
그래픽 사용자 인터페이스: WIMP, 메타포, 이벤트 기반 프로그래밍, GUI 툴킷: 명령을 기억해 입력하는 CLI와 가능한 동작을 화면에 보여 주는 GUI의 차이, 데스크톱 GUI의 공통 구조인 WIMP(창·아이콘·메뉴·포인터)와 데스크톱 메타포, 재사용 부품인 위젯, GUI 프로그램의 실행 모델인 이벤트 기반 프로그래밍, WYSIWYG를 정리하고, Java Swing을 예로 GUI 툴킷의 컴포넌트 트리·레이아웃 관리자·리스너(옵저버)·UI 스레드 하나만 화면을 바꾸는 EDT 규칙을 다룬다.
달력과 시간에 대한 개발자의 착각: 하루는 24시간, 1년은 12개월, 시간대는 정시 단위, 날짜는 빠짐없이 이어진다는 가정이 모두 틀리는 사례를 날·주, 달력 체계, 윤년·연도, 시간대, 서머타임으로 묶고, 윤초와 여러 시간 표현(UTC·TAI·GPS 시간·Unix 시간·TrueTime), 리프 스미어를 덧붙였다. 결론은 직접 계산하지 말고 검증된 날짜 라이브러리와 IANA tz 데이터에 맡기라는 것이다.
데이터 압축: 무손실과 손실: 데이터를 더 적은 비트로 표현하는 압축의 두 갈래를 정리한다. 무손실 압축은 반복을 줄이는 런 렝스 부호화, 반복 구간을 참조로 바꾸는 사전 방식(LZ 계열), 자주 나오는 기호에 짧은 부호를 주는 허프만 부호화로 만들고, 손실 압축은 사람의 지각이 둔한 정보를 버리는 지각 부호화다. 동영상은 프레임 사이의 중복까지 없앤다.
디지털 오디오 기초: 표본화부터 입체 음향까지: 소리를 주파수·진폭·음색으로 나누고, 아날로그 소리가 표본화·양자화·부호화를 거쳐 디지털이 되는 과정, 나이퀴스트 정리와 파일 크기 계산, PCM·ADPCM·MP3 같은 부호화와 파일 포맷, MIDI, 서라운드와 HRTF 기반 입체 음향을 정리한다.
베지어 곡선: 베지어 곡선은 제어점 몇 개로 매끄러운 곡선을 정의하는 방법이다. 두 점 사이 선형 보간을 겹겹이 반복하는 드 카스텔조 알고리즘으로 1차(직선)·2차·3차 곡선 식과 행렬 표현을 유도하고, 펜 툴·SVG·CSS·폰트에서 어떻게 쓰이는지 정리한다.
변환 행렬: 이동·크기·회전과 동차 좌표: 그래픽스에서 물체를 옮기고 키우고 돌리는 일은 모두 행렬 곱이다. 좌표 끝에 1을 붙이는 동차 좌표로 이동까지 행렬 하나에 담고, 임의의 점·축을 기준으로 한 변환은 '원점으로 옮기고 → 변환하고 → 되돌리는' 합성으로 만든다. 2D·3D 변환 행렬과 곱하는 순서의 의미를 정리한다.
소프트웨어 복잡성: 본질적 복잡성과 우발적 복잡성: 큰 소프트웨어를 만들기 어려운 근본 원인은 이해하기 어렵다는 것, 곧 복잡성이다. 문제 자체에 있는 본질적 복잡성과 도구·설계가 덧붙인 우발적 복잡성을 나누고, 복잡성의 주원인인 상태·제어 흐름·코드 양, 「단순함(simple)」과 「쉬움(easy)」의 차이와 얽힘(complect), 피하고(avoid) 분리하라(separate)는 처방을 정리한다.
소프트웨어 비대화: 하드웨어가 빨라진 만큼 소프트웨어가 느려지고 커져서 사용자가 체감하는 속도는 그대로인 현상. 「개발자 시간이 더 비싸다」는 논리로 쌓인 의존성·계층·임시방편이 원인이다. 효율을 기본값으로 두고, 의존성을 아끼고, 증상이 아니라 원인을 고치고, 재현 가능하게 만든다.
소프트웨어 안전: 위험원 분석과 결함 허용 설계: 허용 가능한 위험만 남은 상태를 안전으로 정의하고, 소프트웨어 결함이 사고로 이어진 사례, 결함 예방·검출·제거·허용의 네 전략, 중복성과 다양성, IEC 61508을 뿌리로 한 분야별 안전 표준과 SIL, FMEA·FTA·HAZOP 안전 분석을 정리한다.
양자 컴퓨터의 원리: 큐비트, 양자 알고리즘, 양자 게이트: 양자 컴퓨터는 중첩된 큐비트를 쓰지만 모든 답을 한꺼번에 확인하지는 못한다. 핵심은 확률 진폭의 간섭으로 정답이 관측될 확률을 키우는 양자 알고리즘이다. 큐비트, 블로흐 구면과 X·H·CNOT 게이트, 그로버·쇼어 알고리즘, 암호에 미치는 영향과 흔한 오해를 정리했다.
양자역학 기초: 이중 슬릿, 중첩, 얽힘: 양자 컴퓨터를 이해하는 데 필요한 최소한의 양자역학. 이중 슬릿 실험이 보여 준 파동-입자 이중성, 관측하면 하나로 정해지는 양자 중첩, 거리와 무관하게 상관된 양자 얽힘, 그리고 양자역학에 대한 흔한 오해를 정리했다.
컴퓨터 그래픽스 렌더링 기초: 프레임버퍼에서 3D 래스터화까지: 화면이 메모리의 어떤 내용을 비추는지(래스터 스캔과 벡터 스캔, 텍스트 모드, 프레임버퍼)에서 시작해, 3D 장면을 2D 픽셀로 바꾸는 래스터화 렌더링의 단계(투영, 삼각형 메시, 스캔라인 채우기, 안티앨리어싱, 화가 알고리즘과 Z 버퍼, 후면 컬링, 플랫·고러드·퐁 셰이딩, 텍스처 매핑)와 GPU가 이 일을 병렬로 하는 이유를 정리한다.
컴퓨터의 역사: 무엇이 무엇을 대체했나: 주판·기계식 계산기에서 범용 기계의 구상, 릴레이→진공관→트랜지스터→집적회로로 이어진 스위치의 세대교체, 무어의 법칙과 2026년의 미세화 한계, 프로그램을 넣는 수단의 변천, 튜링 머신과 정지 문제, 개인용 컴퓨터가 보급된 조건을 「앞 단계의 어떤 병목을 풀었나」로 정리한다.
피드백 제어와 PID 제어기: 로봇이 목표값에 닿는 법: 로봇은 컴퓨터 제어로 물리 세계에서 일련의 동작을 자동으로 하는 기계다. 센서 → 오차 → 제어기 → 구동기로 도는 음의 피드백 루프, 무거운 물체가 목표를 지나쳐 진동하는 오버슈트, 현재·과거·미래의 오차를 비례·적분·미분 항으로 더하는 PID 제어기, 제어 루프 위에서 목표값을 정하는 상위 계획, 사람에게 쉬운 일이 로봇에게 어려운 모라벡의 역설을 정리한다.

C Programming14

C 언어의 컴파일 과정과 자료형·연산자·문자열, 포인터와 메모리, 구조체·공용체와 함수 포인터, 스코프와 링키지, 입출력, 빌드 도구(gcc·make)와 디버깅 도구, 호출 규약과 저수준 최적화, 역사와 표준.

포인터와 메모리: C에서 주소와 포인터로 메모리를 다루는 법과 자주 걸리는 함정. 주소·역참조, 문자열의 실체, 동적 할당과 저장 기간, 스택과 힙, 배열과 포인터가 다른 경우, 읽기 전용 리터럴, const의 위치, 이중 포인터, 댕글링 포인터, memcpy와 memmove, malloc/free와 new/delete의 짝.
호출 규약과 스택 프레임: 함수 호출이 기계어 수준에서 어떻게 이루어지는지 정리한다. 스택 프레임과 프롤로그·에필로그, 스택이 자라는 방향을 확인하는 법, cdecl과 System V AMD64 같은 호출 규약, 가변 인자 함수(va_list)가 동작하는 원리, 꼬리 호출 최적화.
C 기초: 컴파일, 자료형, 연산자, 제어문, 함수, 배열과 문자열: 비트와 바이트로 정보를 표현하는 법, 소스 코드가 실행 파일이 되는 4단계 컴파일 과정, 디버깅, C 자료형의 크기, 연산자와 수식의 함정(정수 나눗셈, 증감의 미정의 동작, 대입식, 단락 평가, 우선순위), 제어문(if·switch·반복문·goto)과 함수(원형, 값에 의한 호출), 배열 초기화 규칙, 널 종단 문자열과 ctype.h·string.h 함수의 함정(strncpy, strtok, gets 대신 fgets, atoi 대신 strtol), 명령행 인자.
C 디버깅 도구: C 프로그램의 버그를 잡는 도구를 쓰임새별로 정리한다. GDB·LLDB로 멈춰서 들여다보기, AddressSanitizer·UBSan으로 메모리 오류와 미정의 동작 잡기, leaks·Valgrind로 누수 찾기, strace로 시스템 콜 추적하기, 그리고 Segmentation fault와 Bus error의 차이.
C 사용자 정의 타입과 함수 포인터: 구조체, 공용체, 열거형, typedef: C의 사용자 정의 타입(구조체, 공용체, 열거형, typedef)과 함수 포인터를 정리한다. 구조체의 메모리 배치와 패딩, 멤버가 한 메모리를 공유하는 공용체와 태그 공용체·타입 퍼닝, int 상수일 뿐인 열거형, 새 타입이 아니라 별명인 typedef, 함수 포인터와 콜백, 그리고 이들을 조합해 캡슐화·다형성·제네릭 컨테이너를 흉내 내는 불투명 포인터와 가상 함수 테이블 패턴.
C 입력과 파일 입출력: scanf로 표준 입력을 받고, fopen·fprintf·fread·fclose로 파일을 읽고 쓰는 C 표준 라이브러리(stdio)의 기본 입출력. 매직 넘버로 JPEG를 판별하는 바이너리 읽기 예제를 담는다.
C 저수준 최적화: 컴파일러가 이미 해 주는 최적화와 프로그래머가 힌트로 도울 수 있는 부분을 구분한다. switch를 룩업 테이블·점프 테이블로 바꾸는 원리, 분기 예측 힌트(__builtin_expect, [[likely]]), 도달 불가 힌트, SIMD 내장 함수, memset 같은 라이브러리 함수를 직접 최적화하지 말아야 하는 이유.
C로 하는 2D 그래픽 기초: SDL과 MiniLibX 같은 C 그래픽 라이브러리의 공통 구조(창, 이벤트 루프, 이미지 버퍼, 렌더러)와 픽셀을 직접 다루는 기법(ARGB 색 패킹, 브레젠험 직선, 선형 보간 그라데이션, 회전 변환, 등각 투영)을 정리한다. SDL2와 SDL3의 차이도 짚는다.
C의 스코프와 링키지: C에서 같은 이름이 무엇을 가리키는지는 스코프, 이름 공간, 링키지가 정한다. 블록·파일 스코프와 이름 가림, 태그·멤버·라벨·일반 식별자의 네 가지 이름 공간, 저장 기간, static으로 파일 밖 노출을 막는 내부 링키지, 기호 상수를 #define·enum·const로 정의하는 법을 정리한다.
C의 역사와 표준: C는 유닉스를 이식하기 위해 태어났고, K&R C에서 C89/C90, C99, C11, C17, C23으로 표준화되었다. 원형 없는 함수 호출과 암묵적 int 같은 옛 규칙이 memset(int c) 같은 흔적으로 남은 이유, 유닉스·BSD·리눅스와 POSIX의 관계를 정리한다.
C의 정수 자료형과 형 변환: C 표준은 자료형의 최소 크기만 정한다. 고정 폭 정수(stdint.h)와 size_t, 정수 승격과 일반 산술 변환, 부호 확장, 부호 있는 정수 오버플로가 미정의 동작인 이유, 부동소수점 비교와 고정소수점까지 C에서 숫자가 예상과 다르게 계산되는 지점을 정리한다.
GCC 컴파일과 링크: gcc/clang으로 단계별 결과물(.i .s .o)을 뽑는 옵션, 경고·디버깅·최적화 플래그, 정적 라이브러리(.a)와 공유 라이브러리(.so/.dylib)를 만들고 링크하는 법, 링크 순서와 런타임 라이브러리 탐색, 헤더 중복 포함 방지를 정리한다.
Makefile과 make: make는 타깃과 의존 파일의 수정 시각을 비교해 바뀐 부분만 다시 빌드하는 도구다. 규칙·변수·자동 변수·패턴 규칙·내장 규칙, -MMD -MP로 헤더 의존성 자동화, .PHONY, 리링크 방지, 하위 디렉터리 빌드와 병렬 빌드에서 생기는 함정을 정리한다.

Computer Architecture16

CPU, 메모리, 입출력 장치가 어떻게 구성되고 협력해 프로그램을 실행하는지, 그리고 현대 CPU의 비순차 실행·분기 예측·캐시가 코드 성능에 어떤 영향을 주는지 다루는 분야.

기본 컴퓨터 프로그래밍: 기본 컴퓨터의 기계어와 어셈블리 언어, 의사 명령어, 2-pass 어셈블러, 그리고 루프·곱셈·서브루틴·입출력을 어셈블리로 작성하는 방법.
기본 컴퓨터의 구조와 설계: 교재의 16비트 기본 컴퓨터를 예로 명령어 형식과 직접·간접 주소, 레지스터와 공통 버스, 명령어 종류, 타이밍과 명령어 사이클, 입출력과 인터럽트, 하드와이어드 제어 장치 설계와 마이크로프로그램 제어(제어 메모리, 주소 시퀀싱)를 정리.
데이터의 표현: 컴퓨터가 숫자와 문자를 비트로 저장하는 방식: 진법과 변환, KB와 KiB, 워드 크기와 32비트·64비트의 차이, 문자 코드, 보수와 부호 확장, 고정·부동 소수점(IEEE 754 단정밀도·배정밀도의 범위와 특수값), 패리티와 해밍 코드.
디지털 논리 회로와 부품: 디지털 컴퓨터의 구성과 2진을 쓰는 이유, 트랜지스터로 만든 논리 게이트와 NAND·NOR 범용 게이트, 부울 대수와 정규형, 카르노 맵 간소화, 조합 회로(가산기·BCD 가산기·비교기·디코더·우선순위 인코더·MUX·DEMUX·코드 변환기·패리티)와 디코더·MUX로 함수 만들기, 래치와 플립플롭(특성식·여기표), 멀티바이브레이터와 555 타이머, 순차 회로 설계(타이밍, 무어·밀리 머신, 상태도에서 입력식까지), 시프트 레지스터와 링·존슨 카운터, 리플·동기·mod-N 카운터와 분주기, 셀 행렬로 짠 RAM과 ROM, 집적회로의 규모와 논리군, 게이트의 전기적 특성과 프로그래머블 논리 소자.
레지스터 전송과 마이크로 연산: 레지스터 전송 언어(RTL), 버스와 3-상태 버퍼, 메모리 읽기·쓰기, 산술·논리·시프트 마이크로 연산과 이를 구현하는 가산기·감가산기 회로.
메모리 계층 구조: 레지스터부터 디스크까지 속도·용량·가격이 다른 저장 장치를 계층으로 묶는 구조(계층별 지연 시간의 자릿수)와 RAM의 종류(SRAM·DRAM의 셀 구조, DRAM의 행·열 접근 타이밍과 순차 접근이 빠른 이유, NUMA), 칩을 병렬·직렬로 이어 만드는 기억장치 모듈, 하드 디스크·플래시 메모리(셀 원리, NOR·NAND, SSD와 FTL), RAID(작은 쓰기 문제), 연관 메모리.
부동소수점 오차: 반올림·비교·누적: 0.1 + 0.2가 0.3이 아닌 이유는 2진 부동소수점이 0.1을 정확히 담지 못하기 때문이다. 반올림 오차가 생기는 세 가지 원인, 반올림 모드, ulp와 상대 오차, 같음 비교를 상대 오차로 하는 법, 덧셈·뺄셈에서 오차가 커지는 흡수·상쇄와 Kahan 합산, 돈을 위한 decimal 타입을 정리한다.
입출력 구조와 시스템 버스: CPU와 주변 장치를 잇는 입출력 인터페이스와 장치 드라이버, 전송 방식(프로그램 I/O·인터럽트·DMA), 인터럽트 우선순위, 레지스터를 직접 읽고 쓰는 입출력 예(AVR), 시스템 버스의 선·대역폭·동기식과 비동기식, 병렬·데이지 체인·폴링 버스 중재, 직렬 통신.
캐시 메모리와 MMU: 캐시의 주소 매핑(연관·직접·집합 연관)과 쓰기 정책, 그리고 하드웨어 관점에서 MMU가 맡는 재배치·공유·보호와 세그먼트 보호 필드.
캐시를 고려한 코드: 프로그래머가 캐시를 직접 제어할 수 없는 대신 접근 패턴으로 성능을 끌어내는 방법. 캐시 라인과 하드웨어 프리페처, 행렬 곱의 전치·블로킹, 배열과 연결 리스트의 실제 차이, 넌템포럴 저장과 쓰기 결합 버퍼, 캐시 일관성(MESI)과 거짓 공유, TLB shootdown, 캐시 효과를 걸러 내는 마이크로벤치마크 방법을 정리한다.
컴퓨터 산술 연산: CPU가 다루는 데이터 형식별 덧셈·뺄셈 하드웨어 알고리즘, 시프트와 덧셈·뺄셈으로 하는 곱셈·나눗셈, 부동 소수점 연산, BCD 십진 연산.
컴퓨터 시스템의 기본 구성: ENIAC에서 프로그램 내장 방식, 집적회로를 거쳐 CPU·메모리·저장 장치로 이루어진 현대 컴퓨터의 기본 구조.
파이프라인과 병렬 처리: 플린 분류, 파이프라인의 원리와 해저드 해결법, 벡터 처리와 메모리 인터리빙, 다중 프로세서의 병렬 처리 단위·메모리 접근 모델(UMA·NUMA·NORMA)·시스템 구성(SMP·MPP·CC-NUMA·클러스터)·상호연결망과 토폴로지.
현대 CPU의 마이크로아키텍처: 교과서의 5단계 파이프라인과 달리 현대 x86·ARM 코어가 명령어를 μop으로 쪼개 비순차·슈퍼스칼라로 실행하는 구조. 프런트엔드(디코더·μop 캐시·LSD), 재정렬 버퍼와 예약 스테이션, 실행 포트와 포트 압력, 분기 예측과 분기 없는 코드, SMT를 정리한다.
CPU와 명령어 구조: 소스 코드가 명령어가 되는 과정, CPU 내부(ALU·제어장치·레지스터), 명령어 형식과 주소 지정 방식, 플래그, 서브루틴과 인터럽트, ISA와 RISC·CISC의 차이.

Database5

DBMS의 역할과 데이터 모델의 종류, 트랜잭션과 병행 제어·회복, 정규화, 관계대수와 ER 모델·DB 설계에 관한 노트 모음.

관계대수·관계해석과 DB 설계: 릴레이션의 구조와 성질, SQL의 바탕이 되는 관계대수 연산자(σ·π·⋈·÷와 집합 연산, 조인의 종류)와 결과 카디널리티, 비절차적인 관계해석(∃·∀와 EXISTS), DB 설계 단계와 개념적 설계의 ER 모델(개체·속성·관계, 카디널리티와 참여, 일반화·특수화와 집단화), ERD를 테이블로 옮기는 변환 규칙, 스키마와 인스턴스(내포·외연), 3단계 스키마와 데이터 독립성.
데이터베이스 모델: RDB, NoSQL, NewSQL: DBMS가 파일 처리 시스템의 어떤 문제를 푸는지와 1·2·3계층 구조, 관계형 DB의 특징과 한계, 코드의 규칙, NoSQL 네 가지 유형과 BASE·CAP 정리, 둘의 장점을 합치려는 NewSQL을 비교하고, 프로젝트에서 무엇을 고를지와 PostgreSQL·MySQL의 차이를 정리. 평면·계층·네트워크 모델에서 관계형까지의 계보와 분석용 스타·스노플레이크 스키마도 다룬다.
정규화와 반정규화: 중복으로 생기는 이상 현상을 없애는 정규화 단계(1NF~5NF)와 그 정확한 정의, 함수 종속의 암스트롱 공리와 속성 폐포로 후보키 찾기, 다치·조인 종속, 무손실 분해와 종속성 보존 판정, 다중값 속성을 펴는 법, 성능을 위해 일부러 정규화를 깨는 반정규화.
트랜잭션과 회복: 트랜잭션의 ACID 특성, 이를 지키기 위한 병행 제어·고립화 수준·회복 기법을 연결해서 정리. 동시 실행 문제(갱신 손실·더티 읽기 등), 스케줄의 충돌·뷰 직렬 가능성과 선행 그래프, 회복 가능·비연쇄·엄격 스케줄, 2단계 잠금(2PL)의 변형과 타임스탬프 순서·토마스 쓰기 규칙, wait-die·wound-wait 교착 예방, MVCC가 스냅숏으로 읽는 방식과 InnoDB·PostgreSQL의 구현 차이(undo·VACUUM), 스냅숏 격리·쓰기 스큐·SSI, 잠금의 종류와 단위, 비관적·낙관적 잠금, 2PC와 사가까지 다룬다.

Engineer Information Processing6

정보처리기사 실기에서 여러 회차에 반복해서 나오는 개념을 주제별로 묶은 요약 노트 모음.

소프트웨어 설계와 공학: 개발 생명주기 모델(폭포수·원형·나선형·V·UP·애자일), 요구공학(추출·분석·명세·검증, EARS, 추적 매트릭스), 구조적 분석·설계(문맥도·DFD·구조 차트)와 UML 객체지향 분석·설계(경계·제어·실체 클래스, 시퀀스·활동·상태 머신), 모듈 결합도·응집도와 복잡도 척도(McCabe 순환 복잡도, Halstead), 사용자 인터페이스 황금률, 디자인 패턴, 유지보수 유형과 Lehman 법칙·재공학, 형상 관리, CASE 도구 정리. 프로젝트 관리(비용 산정·일정·EVM·위험)는 별도 노트로 분리했다.
소프트웨어 테스트: ISO/IEC 25010 품질 특성과 McCall 모델, 품질 보증·품질 관리·감사와 테스트의 차이, 테스트 원리와 에러·결함·고장, V-모델의 테스트 레벨과 검증·확인, 명세 기반 기법(동등 분할·경곗값·결정 테이블·상태 전이·페어와이즈)과 구조 기반 커버리지(문장~MC/DC)의 실제 케이스 도출, 테스트 오라클, 통합 테스트, ISO/IEC/IEEE 29119 테스트 프로세스와 위험 기반 테스트, 결함 관리, AI 소프트웨어 테스트(변성 테스팅, 뉴런 커버리지) 정리.
소프트웨어 프로젝트 관리: 비용 산정·일정·위험: 프로젝트의 정의와 착수·계획·실행·통제·종료 단계, 참고 틀(PMBOK, ISO/IEC/IEEE 12207)과 CMMI 성숙도 5단계, WBS와 롤링 웨이브 계획, 비용 산정 기법(전문가 감정·델파이·LOC·COCOMO 모드별 계수·Putnam·기능 점수 가중치와 보정 공식), PERT 네트워크의 ES/EF·LS/LF 계산과 주 경로, EVM 지표(SV·CV·SPI·CPI·EAC·VAC), 위험의 식별·분석·대응(회피·완화·전가·수용)을 정리한다.
웹 서비스·시스템 통합·신기술 용어 색인: 정보처리기사 단답형에 나오는 웹 서비스(SOAP·WSDL·UDDI), 시스템 통합(EAI 연계 유형), 데이터·네트워크 신기술 용어가 창고의 어느 개념 노트에 있는지 잇는 색인이다. 정의는 각 개념 노트에 둔다.
정보 시스템 보안: 보안 3요소와 위협 모델, 주요 공격 기법(사회공학·악성 코드·봇넷 포함)과 익스플로잇·취약점 생명주기, 버퍼 오버플로 방어, 포트 스캔, 안전한 프로그램의 원칙(심층 방어·격리), 대칭·비대칭·해시 암호와 키 길이·디피-헬만 원리, 고전 암호·인코딩 구별, 보안 프로토콜(TLS·IPSec), 접근 통제 모델(벨-라파듈라·비바)과 AAA 정리.

Network24

네트워크 기초(물리 전송·변조·다중화 포함)와 OSI 계층 모델부터 IP·서브넷·NAT·멀티캐스트, QoS, 가입자망과 광역망(MPLS), 무선 네트워크, TCP·UDP, HTTP·HTTPS, DNS·CDN·HTTP 캐시와 프록시, 리눅스 네트워크 네임스페이스, RFC 읽는 법, WebSocket과 WebRTC까지 네트워크 노트 모음.

가입자망과 광역망: DSL·케이블·FTTH에서 SONET·ATM·MPLS까지: 집과 사무실을 통신사에 잇는 가입자망(전화 모뎀, ADSL·VDSL, 케이블 HFC, FTTx와 PON, 위성)과 통신사 사이를 잇는 광역망 기술(T1·E1, SONET/SDH, PPP, X.25 → 프레임 릴레이 → ATM), 그리고 지금 사업자 백본의 MPLS(레이블 push·swap·pop, LDP·RSVP-TE, 트래픽 엔지니어링, MPLS VPN)를 정리했다.
네트워크 계층 프로토콜: IPv4 헤더와 단편화(MTU), 주소 체계(클래스와 CIDR, 사설·링크 로컬(APIPA) 같은 특수 주소), 서브넷 계산(VLSM·경로 요약·특수 주소)과 라우팅 테이블(최장 프리픽스 일치, 직접·간접 전달), 라우팅과 포워딩(RIB·FIB, 라우터의 포워딩 과정), ARP 동작 과정·RARP, DHCP 주소 할당(DORA·옵션·임대·예약), ICMP 메시지 종류·생성 규칙과 ping·traceroute, IPv6(주소 종류·확장 헤더·ICMPv6·SLAAC), NAT의 종류(SNAT·DNAT·NAPT)와 포트 포워딩, 라우팅 알고리즘(거리 벡터·링크 상태·경로 벡터)과 RIP·OSPF·BGP 비교, IP 멀티캐스트(그룹 주소와 MAC 변환, IGMP, RPF와 송신자 기반·공유 트리, PIM), 회선·패킷 교환 방식 정리.
네트워크 기초: 네트워크의 정의(노드·링크·대역폭)와 분류(PAN·LAN·WAN, 점대점·데이지 체인을 포함한 토폴로지별 장단점, 클라이언트-서버와 P2P), 통신 방식, 프로토콜과 표준 기구, 패킷의 캡슐화, 계층별 네 가지 주소, 네트워크 장비(허브·브리지·스위치·라우터·AP·공유기·게이트웨이, L3 스위치와 라우터의 차이)와 가정·기업·클라우드의 배치, 1계층 전송 매체(유도·비유도)·전송 손상(감쇠·왜곡·잡음)·이더넷 속도 변천, 직렬·병렬과 동기·비동기 전송, 선로 부호화(NRZ·맨체스터)와 블록 부호화(4B/5B·8B/10B), 디지털 변조(ASK·FSK·PSK·QAM)와 나이퀴스트·섀넌 한계, CSMA/CD·다중 접근 방식 분류, 다중화(FDM·TDM·WDM·CDM, T1), 2계층의 회선·흐름·오류 제어와 오류 검출·정정(패리티·체크섬·CRC, BEC와 FEC, 해밍 부호), 이더넷과 MAC 주소, 스위치의 MAC 학습과 VLAN, 홉마다 바뀌는 프레임, 지연의 네 구성 요소와 계산.
네트워크 보안: 방화벽, VPN, 계층별 공격: 공용망의 위협은 가로막기·가로채기·변조·위조로 나뉘고 대칭키·공개키(RSA)·해시로 막는다. 방화벽은 정해 둔 규칙(포트·IP·프로토콜·연결 상태·애플리케이션)으로 트래픽을 걸러 내는 문지기이고, 패킷 필터에서 상태 추적·프록시·차세대 방화벽으로 발전했다. 방화벽을 통과한 공격은 IDS·IPS가 탐지·차단한다. VPN은 공용망 위에 암호화된 터널을 만들어 원격 사용자나 지점을 사설망처럼 잇는다. OSI 계층마다 노리는 공격이 달라 방어도 계층별로 겹겹이 쌓는다.
리눅스 네트워크 네임스페이스와 ip 명령: 리눅스에서 네트워크 설정을 다루는 ip 명령의 구조와 출력 읽는 법(인터페이스 플래그·MTU·scope·라우팅 테이블), 한 호스트 안에 격리된 네트워크 공간을 만드는 네트워크 네임스페이스와 veth 쌍, 이것이 컨테이너 네트워크의 바탕이 되는 원리를 정리한다.
무선 네트워크: Wi-Fi, 블루투스, 셀룰러 이동통신: 도달 거리로 나눈 무선망(WPAN·WLAN·WWAN)과 블루투스·지그비 같은 근거리 무선, IEEE 802.11 무선 LAN의 구조와 규격 변천, 충돌을 감지할 수 없는 무선의 CSMA/CA(숨은 터미널, IFS, 백오프, RTS/CTS와 NAV), 셀을 나눠 주파수를 재사용하는 셀룰러 구조와 핸드오프, 다중 접속(FDMA·TDMA·CDMA·OFDMA), 1G에서 5G까지 세대별 변화를 정리했다.
브라우저에 URL을 입력하면 일어나는 일: 주소창에 URL을 입력한 뒤 화면이 그려지기까지의 흐름. HSTS·서비스 워커·HTTP 캐시 확인, DNS 조회, TCP 연결, TLS 핸드셰이크, HTTP 요청·응답, 렌더링을 순서대로 잇고 각 단계의 상세 노트로 연결한다.
웹 PKI의 변천: 인증서 생태계는 왜 바뀌었나: CA가 돈을 받고 몇 년짜리 인증서를 팔던 웹 PKI가 CA 침해·대량 감청·SHA-1 충돌·Heartbleed·폐기 실패를 거치며 바뀐 과정. 전방 비밀성, 인증서 투명성(CT), ACME 자동 발급, 브라우저 주도의 규칙 변경, 47일까지 줄어드는 유효 기간이 그 결과이고, 이제 인증서는 수명 주기 전체를 자동화해야 하는 소모품이다.
이메일 전달 과정: SMTP, IMAP, 발신자 인증: 이메일은 우편처럼 릴레이된다. 메일 클라이언트(MUA)가 보낸 메일을 발신 서버(MTA)가 DNS MX 레코드로 수신 서버를 찾아 SMTP(서버 간 25, 제출 587·465)로 넘기고, 수신 서버(MDA)가 메일함에 넣으면 받는 사람의 클라이언트가 IMAP·POP3로 가져온다. 위조를 막기 위해 SPF·DKIM·DMARC로 발신자를 인증한다.
전송 계층: 포트, TCP, UDP: 프로세스 간 통신을 담당하는 전송 계층의 역할과 포트 번호 체계(임시 포트 범위 포함), 소켓과 역다중화, 연결 지향 TCP의 헤더·옵션(MSS·윈도 스케일·SACK)·플래그·3-way handshake(SYN 쿠키, 0-RTT)·순서 번호 규칙·상태 전이·4-way handshake와 절반 닫기·TIME_WAIT·강제 종료·keepalive, ECN 플래그, 재전송·지속·keepalive·TIME_WAIT 타이머, 흐름·오류(ARQ)·혼잡 제어, 비연결형 UDP와 체크섬, 그리고 TCP와 UDP의 비교.
프록시: 포워드 프록시와 리버스 프록시: 클라이언트와 서버 사이에서 요청을 대신 주고받는 프록시 서버. 누구를 대리하느냐에 따라 나뉘는 포워드 프록시와 리버스 프록시의 차이, 리버스 프록시가 맡는 일(TLS 종료·로드 밸런싱·캐시), VPN·NAT와의 관계, 원래 클라이언트 IP를 전달하는 헤더를 정리한다.
CDN: 전 세계 엣지 서버에 콘텐츠를 캐시해 사용자 가까운 곳에서 응답하는 CDN. 동작 방식, 얻는 것과 비용·위험, 캐시 무효화와 프론트엔드 배포에서의 쓰임을 정리한다.
DNS: 도메인 이름을 IP 주소로 바꿔 주는 DNS. 이름 공간의 트리 구조(레이블, FQDN·PQDN, gTLD·ccTLD·역방향 도메인), UDP와 TCP를 쓰는 경우, 재귀·반복 질의 흐름과 DNS 포워더, hosts 파일의 우선순위, 손실 재시도, 주요 레코드 종류, TTL과 캐시(잘못된 캐시 바로잡기), 프론트엔드에서 쓰는 dns-prefetch·preconnect를 정리한다.
HTTP 캐시: Cache-Control, ETag·Last-Modified로 브라우저와 CDN이 응답을 재사용하는 HTTP 캐시. 신선도와 재검증, 자주 쓰는 지시어, 자산별 캐시 전략을 정리한다.
HTTP 프로토콜: 웹 통신 규약 HTTP의 Stateless·Connectionless 성질, 요청·응답 메시지 형식, 아홉 가지 메서드와 안전·멱등(PUT·PATCH·POST의 차이), 상태 코드(API에서 자주 쓰는 코드와 비표준 코드), 헤더 종류, URL의 구성 요소와 URI·URL·URN의 차이, HTTP/1.1·2·3 비교와 HTTP/2가 빠른 이유.
HTTPS와 TLS: HTTP를 TLS로 감싸 도청·변조·위장을 막는 HTTPS. 대칭키·공개키를 섞어 쓰는 TLS 핸드셰이크, 첫 HTTP 요청의 빈틈을 막는 HSTS와 preload, HTTPS만으로는 부족한 경우를 정리한다.
IP QoS: 패킷을 차별해서 보내는 법: 최선형 IP 망에서 트래픽별로 대역폭·지연·지터·손실을 다르게 대우하는 QoS의 처리 단계(분류, 미터링·마킹, 폐기·큐잉, 스케줄링, 셰이핑)와 DSCP 코드, RED·WRED, 큐 스케줄링 방식, 플로우마다 예약하는 IntServ(RSVP)와 클래스로 묶는 DiffServ를 비교했다.
OSI 7계층: 네트워크 통신을 일곱 단계로 나눈 OSI 참조 모델과 각 계층의 역할, 대표 프로토콜, TCP/IP 4계층과의 대응(법률 표준과 사실 표준), 캡슐화와 계층별 PDU(SDU·PCI).
RFC와 요구 수준 키워드: 인터넷 표준 문서인 RFC가 무엇이고 어떻게 읽는지, 그리고 명세에서 MUST·SHOULD·MAY가 정확히 무엇을 뜻하는지 정한 RFC 2119·8174의 요구 수준 키워드를 정리한다.
SSH의 동작: 전송·인증·연결 계층: SSH는 믿을 수 없는 네트워크 위에 암호화된 원격 접속 통로를 만든다. 전송 계층이 키 교환과 서버 호스트 키 확인으로 암호화 채널을 열고, 인증 계층이 공개키 등으로 사용자를 확인하며, 연결 계층이 그 하나의 통로를 셸·명령·포트 포워딩·파일 전송 채널로 나눠 쓴다.
VoIP 전화망: SIP, SDP, RTP: 인터넷 전화(VoIP)가 목소리를 전달하는 구조를 정리했다. PSTN과 VoIP·PBX·게이트웨이의 관계, 음성을 디지털로 바꾸는 표본화·양자화·부호화와 8kHz·64kbps의 근거, 통화를 여닫는 SIP와 미디어 조건을 협상하는 SDP, 음성을 실어 나르는 RTP 헤더, G.711(PCMU·PCMA) 코덱, 지터와 지터 버퍼, 전화망 서버를 구현할 때의 동시성 구조를 다룬다.
WebRTC: 브라우저와 앱이 서버를 거치지 않고 오디오·비디오·데이터를 실시간으로 주고받게 하는 WebRTC의 API, 시그널링, ICE/STUN/TURN, 연결 흐름.
WebSocket: 한 번 맺은 연결로 서버와 브라우저가 양방향 실시간 통신을 하는 WebSocket. OS 소켓과의 차이, HTTP Upgrade 핸드셰이크와 버전, 프레임과 텍스트·바이너리, ping/pong, 압축 확장, 폴링·SSE·HTTP/2와의 비교, 보안과 인증, 로드 밸런싱·프록시·우아한 종료, 라이브러리 선택과 디버깅을 정리한다.

Operating System27

하드웨어와 프로그램 사이에서 자원을 관리하고 실행 환경을 제공하는 시스템 소프트웨어에 대한 노트 모음. 프로세스·메모리·파일의 이론과 함께 UNIX 시스템 프로그래밍(파일 디스크립터, 시그널, 셸, pthread, 타이머)과 리눅스 운영(systemd, 접근 제어, 배포판, 가상화)을 다룬다.

가상 메모리: 요구 페이징과 페이지 폴트 처리, OPT·FIFO·LRU·LFU·Clock 페이지 교체 알고리즘, 다양한 캐싱 환경, 프레임 할당과 스래싱, Working Set·PFF, 페이지 크기.
가상화와 하이퍼바이저: 하나의 물리 머신 위에 여러 운영체제를 돌리는 서버 가상화의 원리. 하이퍼바이저 Type 1·2 분류와 전가상화·반가상화·하드웨어 지원 가상화의 차이, 운영체제 수준 가상화(컨테이너), 샌드박스로서의 VM, 가상 네트워크 모드를 정리한다.
교착 상태: 프로세스들이 서로의 자원을 기다리며 멈추는 교착 상태의 4가지 발생 조건, 자원 할당 그래프, 예방·회피(은행원 알고리즘)·탐지와 복구·무시.
구조적 동시성: 동시 작업의 수명을 코드 블록에 묶어, 블록을 빠져나갈 때 그 안에서 띄운 작업이 모두 끝나 있게 하는 원칙. go 문·스레드 생성·콜백처럼 흐름을 갈라놓고 돌아오지 않는 기본 요소는 goto처럼 지역적 추론을 깨뜨린다. nursery·TaskGroup·coroutineScope가 이를 대체해 예외 전파, 자원 정리, 취소를 자동으로 보장한다.
데몬과 systemd: 터미널과 분리되어 백그라운드에서 도는 데몬의 개념, SysV 방식의 이중 fork 데몬화가 필요했던 이유, 그 일을 대신 해 주는 systemd의 유닛·서비스·타이머, cron을 대체하는 systemd 타이머와 journalctl 로그를 정리한다.
동시성·병렬·비동기·논블로킹과 동시성 모델: 동시성(논리적으로 함께 진행)과 병렬(물리적으로 동시에 실행), 동기·비동기(완료를 누가 확인하나)와 블로킹·논블로킹(제어권을 바로 돌려받나)을 구분하고, 스레드보다 가벼운 실행 단위(파이버·코루틴·그린 스레드·가상 스레드), async/await와 CPS, Reactor·Proactor, 공유 메모리 대신 메시지를 쓰는 CSP·액터, Go·Tokio·BEAM 런타임의 스케줄링, GIL과 그 대안을 한 지도로 정리한다.
디스크 관리와 스케줄링: 디스크 구조(섹터·논리 블록), 포맷팅·파티셔닝과 부팅 과정, 접근 시간 구성, FCFS·SSTF·SCAN·C-SCAN·N-SCAN·LOOK 디스크 스케줄링, 스왑 공간과 RAID.
리눅스 배포판과 패키지 관리: 리눅스 커널과 배포판의 관계, Debian·RHEL·Arch 계열의 차이와 패키지 관리자(apt·dnf·pacman), CentOS가 CentOS Stream으로 바뀐 과정과 Rocky Linux·AlmaLinux 같은 대안, 배포판·커널 버전 확인 방법을 정리한다.
리눅스 서버 점검: 부하·메모리·자원 한도: 서버에 들어가면 보는 순서(부하 평균, 커널 로그, 디스크, TCP 상태, I/O), free의 available과 페이지 캐시·버퍼 캐시, 메모리가 바닥날 때 캐시 회수에서 OOM Killer까지 벌어지는 일, open files·max user processes 같은 ulimit 한도와 systemd 설정, 운영 보안 습관을 정리했다.
리눅스 접근 제어: DAC, MAC, sudo: 리눅스가 누가 무엇을 할 수 있는지 정하는 방식. 소유자가 권한을 정하는 DAC(rwx·setuid), 커널 정책이 강제하는 MAC(AppArmor·SELinux), 관리자 권한을 빌려 쓰는 sudo와 sudoers 문법, 비밀번호 정책을 맡는 PAM을 정리한다.
멀티스레딩 디자인 패턴과 논블로킹 알고리즘: 생산자-소비자, 스레드 풀, 퓨처·프로미스, 모니터 객체, 배리어, 읽기-쓰기 락 여섯 가지 멀티스레딩 패턴이 각각 어떤 동기화 문제를 푸는지 정리한다. 스레드 안전의 뜻과 락 없이 얻는 방법, 언어별 기본 자료구조의 스레드 안전성과 동시성 해시 테이블 설계(락 스트라이핑, 버킷 단위 CAS), CPU·I/O 바운드에 따른 스레드 풀 크기, 포크-조인과 작업 훔치기도 다룬다. 락을 쓰는 블로킹 알고리즘과 CAS로 짜는 논블로킹 알고리즘의 차이, 진행 보장 단계(락 프리, 기아 없음, 대기 없음)도 함께 다룬다.
메모리 관리: 논리·물리 주소와 주소 바인딩, MMU, 동적 로딩·링킹과 스와핑, 연속 할당과 단편화, 페이징(TLB·다단계 페이지 테이블·쓰기 시 복사)과 세그멘테이션.
셸이 명령을 실행하는 방식: 셸이 한 줄의 명령을 토큰화·파싱·확장한 뒤 fork·exec·wait와 pipe·dup2로 실행하는 과정. 파이프라인이 동시에 실행되는 이유, 쓰지 않는 파이프 끝을 닫아야 하는 이유, heredoc·서브셸·종료 상태까지 정리한다.
운영체제 개요: 운영체제가 무엇이고 왜 필요한지, 커널 영역과 이중 모드·시스템 호출, 단일형·마이크로·하이브리드 커널의 구조 차이, 어떤 기준으로 분류되는지 정리한 입문 노트.
운영체제의 시간과 타이머: 운영체제가 다루는 세 가지 시간(벽시계·단조·프로세스 CPU 시간), 이를 재는 하드웨어(RTC·HPET·TSC), POSIX 시계 API, sleep 계열 함수, alarm과 인터벌 타이머를 정리한다. 경과 시간은 단조 시계로 재야 하는 이유가 핵심이다.
자주 쓰는 리눅스 명령어 지도: 리눅스 명령어를 파일·보기·텍스트 처리·프로세스·시스템 정보·사용자·네트워크·패키지 범주로 묶은 지도. grep·cut·sed·awk·sort·uniq를 파이프로 이어 로그를 훑는 법과, CPU 사용률이 100%일 때 의심할 원인과 확인 순서를 함께 정리한다.
컴퓨터 시스템 구조와 인터럽트: 모드 비트, 타이머, 장치 제어기, 인터럽트, 시스템 콜, 동기식·비동기식과 블로킹·논블로킹 입출력, DMA, 커널 입출력 서브시스템(드라이버 계층, 블록·문자·네트워크 장치, 버퍼링·캐싱·스풀링, 입출력 성능 원칙), 커널 주소 공간을 통해 운영체제가 하드웨어를 다루는 방식과, 시스템 콜·라이브러리 함수의 차이와 man 페이지 섹션을 정리.
파일 시스템: 파일과 디렉터리, 트리 구조 디렉터리와 경로, 디렉터리 엔트리, 파티션, 리눅스 디렉터리 구조(FHS), open() 동작, 파일 보호와 마운트, 접근 방식 등 파일 시스템의 인터페이스.
파일 시스템 구현: 블록과 연속·연결·인덱스 할당, inode의 직접·간접 블록과 경로 탐색, FAT, 빈 공간·디렉터리 관리, VFS/NFS, 버퍼 캐시와 페이지 캐시.
프로세스 동기화: 공유 데이터에 동시에 접근할 때 생기는 경쟁 상태, 운영체제 안의 경쟁 상태, 임계 구역 문제와 해결 조건, 피터슨 알고리즘과 Test-and-Set, 뮤텍스 락과 세마포어(상호 배제·실행 순서 제어), 고전적인 동기화 문제, 모니터의 진입 큐와 조건 변수.
프로세스 상태와 CPU 스케줄링: 프로세스 상태 전이, CPU burst와 성능 척도, 선점·비선점 스케줄링 알고리즘(FCFS·SJF·HRN·RR·MLFQ), 다중 프로세서·실시간·스레드 스케줄링, 문맥 교환 비용 정리.
프로세스와 스레드: 프로세스의 문맥과 메모리 영역(코드·데이터·힙·스택), PCB, 문맥 교환, 스레드의 구조와 장점, 사용자 수준·커널 수준 스레드 모델(N:1·1:1·M:N), 멀티프로세스와 멀티스레드 비교, fork·exec·wait·exit, IPC 수단과 파이프·FIFO·공유 메모리·메시지 큐 사용법.
Bash 스크립트 작성법: Bash 스크립트를 쓸 때 필요한 문법을 한곳에 모았다. 변수와 매개변수 확장, 배열, [[ ]]·(( ))·case 조건문, 반복문, 함수와 $@, 종료 코드와 특수 변수, set -euo pipefail과 trap, 디버깅, 그리고 명령줄을 빠르게 쓰는 습관.
POSIX 스레드와 동기화 API: C에서 스레드를 다루는 POSIX pthread API와 동기화 도구. 스레드 생성·join·detach, 뮤텍스와 조건 변수, POSIX 세마포어, 원자성을 하드웨어가 보장하는 방법, 커널 내부의 스핀락, Java 모니터와의 대응을 정리한다.
UNIX 시그널: 커널이나 다른 프로세스가 프로세스에 보내는 비동기 알림인 시그널. 주요 시그널과 기본 동작, sigaction과 핸들러 작성 규칙, 보류·병합 특성, SIGCHLD와 좀비 프로세스, 시그널을 통신에 쓸 때의 한계를 정리한다.
UNIX 파일 입출력과 파일 디스크립터: 프로세스가 파일·파이프·소켓을 정수 하나(파일 디스크립터)로 다루는 UNIX 입출력 모델. 커널의 세 테이블, open 플래그와 read 반환값 처리, dup2와 리다이렉션, stdio 버퍼링 모드와 페이지 캐시, I/O 멀티플렉싱, mmap과 그 한계를 정리한다.

Programming Languages40

언어 일반(계보·패러다임·실행 방식·의미론·타입 시스템), C++의 문법·템플릿·STL·예외·가상 함수·스마트 포인터·메모리 풀, Java·Kotlin·Python·Go의 언어 동작과 관용구, 추상 클래스·인터페이스·위임·DTO/VO·클린 코드·GoF 패턴·책임 주도 설계와 객체 지향 설계 사례 모음.

같은 문제, 열다섯 가지 설계: 상태와 결합을 다루는 법: 터틀 그래픽(앞으로 가기, 돌기, 펜 올리기)이라는 단순한 문제를 객체 지향 클래스부터 순수 함수 모듈, 함수형 코어 API, 에이전트, 인터페이스·함수 의존성 주입, 상태 모나드, 커맨드 배치, 이벤트 소싱, 스트림 처리, 인터프리터, 추상 자료형, 능력 기반 API까지 열다섯 가지로 구현하며 상태를 누가 쥐는지와 구현과 어떻게 떼어 내는지를 비교한다. 행동(인터페이스)이 아니라 데이터(커맨드 타입)로 결합을 끊는 방식의 장점도 정리한다.
객체 지향 설계 면접: 풀이 순서와 반복되는 설계 부품: 주차장·도서관 같은 시스템을 클래스와 관계로 설계하는 객체 지향 설계(OOD) 면접의 풀이 순서(요구 사항 → 유스케이스 → 클래스 → 활동·시퀀스 → 코드 골격 → 동시성), 17개 사례에 되풀이해 나오는 설계 부품(계정과 사람 분리, 정의와 인스턴스 분리, 상태 enum, Search 인터페이스와 색인, 알림·결제·로그·청구서), 사례별 디자인 패턴 지도와 SOLID, 피해야 할 설계, 자주 받는 질문과 공부 순서를 정리한다.
객체 지향 설계 사례: 예약·대여 시스템: 객체 지향 설계 면접의 예약·대여 계열 여섯 사례(도서관, 영화 예매, 항공, 호텔, 식당, 렌터카)를 요구 사항, 액터, 핵심 클래스와 enum, 핵심 흐름으로 정리한다. 검색 → 예약 → 결제 → 알림 → 취소·환불의 공통 골격, 대출 한도 5권·10일과 연체료, 회차별 좌석(ShowSeat·FlightSeat)과 SERIALIZABLE 트랜잭션, 24시간 전 취소 전액 환불, 좌석별 식사 주문, 반납 지점이 다른 렌터카와 부가 서비스 같은 사례별 차이를 다룬다.
객체 지향 설계 사례: 주차장·ATM과 카드·보드 게임: 객체 지향 설계 면접의 시설·장치와 게임 계열 네 사례(다층 주차장, ATM, 블랙잭과 카드 덱, 체스)를 요구 사항, 액터, 핵심 클래스와 enum, 핵심 흐름으로 정리한다. 차종별 주차 자리 배정 규칙과 싱글턴·락으로 지키는 티켓 발급, 시간대별 요금, ATM의 하드웨어 부품 클래스와 거래 커맨드 계층·잔액 조회 시퀀스, 블랙잭의 소프트·하드 합계와 보험·스플릿·더블 규칙, 체스 말별 이동 규칙과 자기 킹을 노출하는 수를 막는 검증을 다룬다.
객체 지향 설계 사례: 커머스·커뮤니티·플랫폼: 객체 지향 설계 면접의 플랫폼 계열 일곱 사례(아마존 쇼핑몰, Stack Overflow, 온라인 증권, LinkedIn, Facebook, Cricinfo, Uber)를 요구 사항, 액터, 핵심 클래스와 enum, 흐름으로 정리한다. 장바구니·주문·배송 로그와 결제 시퀀스, 평판·현상금·태그와 질문 종료 사유, 시장가·지정가·스톱 주문과 부분 체결·주식 묶음·주문 유효 기간, 프로필·연결 요청·검색 색인과 2단계 BFS 친구 추천, 경기 → 이닝 → 오버 → 공 계층, 기사 매칭과 거리·시간 요금 계산을 다룬다.
객체 지향의 본질: 메시징: 객체 지향이라는 말을 만든 앨런 케이의 관점에서 OOP의 본질을 메시징·캡슐화·늦은 바인딩 세 가지로 정리한다. 클래스와 상속은 C++·Java가 대중화한 구현 방식일 뿐 필수 조건이 아니며, 핵심은 상태를 숨긴 독립 개체들이 메시지로 협력하는 구조다.
메모리 풀: 같은 크기의 객체를 자주 할당·해제할 때 큰 블록을 미리 잡아 두고 한 칸씩 나눠 주는 메모리 풀을 정리한다. 고정 크기 풀은 빈 칸 인덱스 스택 하나로 할당과 해제를 O(1)에 끝내고, 가변 풀은 고정 풀을 청크로 이어 붙인다. 클래스의 operator new/delete를 오버로딩하면 호출 코드를 바꾸지 않고 풀을 쓸 수 있다.
모던 Java 기능: 모듈, var, record, sealed, 패턴 매칭, switch 식: Java 9 이후 LTS 버전에 들어온 언어 기능을 정리한다. LTS별 주요 기능 표, 모듈 시스템의 requires·exports·opens와 강한 캡슐화, var의 지역 타입 추론과 제약, 불변 데이터 운반 클래스 record, 상속을 닫는 sealed, instanceof·switch·레코드 패턴 매칭, 화살표 문법과 yield·완전성 검사를 갖춘 switch 식, 처음과 끝 접근을 통일한 Sequenced Collections.
싱글턴 패턴: 인스턴스를 하나만 두는 싱글턴 패턴의 목적과 Java 구현 방식(이른 초기화, synchronized, DCL과 volatile, 홀더 클래스, enum)을 스레드 안전성과 비용으로 비교하고, C++의 함수 안 static(Meyers 싱글턴)과 복사 금지, 전역 상태가 되는 단점과 DI 컨테이너·모듈로 대신하는 방법을 정리한다.
위임 패턴과 Kotlin by: 객체가 받은 요청을 다른 객체에 넘겨 처리하는 위임 패턴과, 이를 언어 문법으로 지원하는 Kotlin의 by 키워드를 정리한다. 클래스 위임은 인터페이스 구현을 통째로 다른 객체에 맡기고, 프로퍼티 위임은 getter/setter를 맡기며, by lazy와 by viewModels()가 그 대표적인 쓰임이다.
좋은 코드를 위한 열 가지 원칙: 코드 규약 준수, 이유를 남기는 주석, 견고함, SOLID, 테스트하기 쉬운 구조, 적당한 추상화, 과설계 없는 패턴 사용, 전역 의존 줄이기, 지속적인 리팩터링, 보안 우선이라는 열 가지 코딩 원칙을 각각 왜 필요한지와 함께 정리하고, 원칙끼리 부딪칠 때의 판단 기준을 덧붙인다.
책임 주도 설계: 협력·책임·메시지: 객체지향 설계는 좋은 객체가 아니라 좋은 협력을 설계하는 일이다. 메시지를 먼저 정하고 그 메시지를 처리할 책임을 가진 객체를 고른다. 객체가 받는 메시지의 집합이 인터페이스가 되고, 속성은 책임을 정한 뒤에 따라온다.
추상 클래스와 인터페이스: 인스턴스를 만들 수 없는 추상 클래스와, 구현할 행동의 계약만 정하는 인터페이스를 Java 기준으로 비교한다. 추상 클래스는 상태와 공통 구현을 물려주는 'is-a' 관계, 인터페이스는 여러 개를 붙일 수 있는 'can-do' 역할이며, Java 8 이후 디폴트 메서드로 경계가 흐려졌어도 상태를 가질 수 있느냐가 결정적 차이다.
클린 코드: 함수와 이름: 『클린 코드』의 함수와 이름 규칙을 정리한다. 나쁜 코드가 비싼 이유와 보이스카우트 규칙, 피해야 할 습관도 다룬다. 함수는 작게, 한 가지만, 한 추상화 수준으로 쓰고 위에서 아래로 이야기처럼 읽히게 배치한다. 값을 돌려주는 질의와 상태를 바꾸는 명령은 나눈다(명령-질의 분리). 타입 분기는 팩터리 한 곳에 가두고 나머지는 다형성에 맡기며, 이름은 의도를 드러내고 한 개념에 한 단어만 쓴다.
타입 시스템: 검사, 추론, 다형성, 변성, 건전성: 타입 시스템이 프로그램의 어떤 오류를 언제 막는지 정리한다. 정적·동적 검사와 그 한계, 타입 판단과 추론 규칙, 곱·합·함수·재귀 타입과 Option·Result, 제약 생성과 단일화로 하는 타입 추론, 매개변수·부분형·임시 다형성(정적·동적 다형성), 명목적·구조적 타입과 덕 타이핑, 공변·반공변·무공변, 패턴 매칭의 완전성 검사, 진행과 보존으로 보는 타입 건전성, 의존 타입과 선형·아핀 타입.
프로그래밍 언어 의미론: 구문, 바인딩, 람다 계산, 평가 전략: 프로그래밍 언어 이론의 기초 개념을 정리한다. 구문과 의미론, 구체 구문과 AST, 작은·큰 단계 연산 의미론과 표시·공리적 의미론, 자유·바인딩 변수와 렉시컬·동적 스코프, 클로저의 환경, 람다 계산의 알파 변환·베타 축약과 변수 포획, 값·이름·필요에 의한 호출과 참조·공유에 의한 호출, 환경과 저장소와 별칭, 연속과 CPS, 프로그램 동치와 Hoare 논리, 위생적 매크로, 컴파일·해석이 구현의 성질인 이유, 의미를 보존하는 최적화.
프로그래밍 언어의 계보와 선택: 기계어·어셈블리에서 고급 언어까지 세대 구분, 1950년대 Fortran·LISP부터 2010년대 Rust·Go·Kotlin·Swift·TypeScript까지 언어가 어떤 문제를 풀려고 이어져 왔는지, C++가 여전히 쓰이는 분야, 언어별 에너지 효율 연구의 결론을 정리한다.
프로그래밍 패러다임: 명령형·선언형·객체 지향·함수형·반응형·관점 지향·제네릭·동시성 프로그래밍이 각각 무엇을 중심에 두고 코드를 짜는지 비교한다. 패러다임을 레코드·클로저·동시성·이름 붙은 상태 같은 개념의 묶음으로 보는 관점, 관찰 가능한 비결정성과 상태 표현력이라는 두 축, 새 개념이 필요하다는 신호인 창조적 확장 원칙, goto를 없앤 구조적 프로그래밍, 명령형·함수형·객체 지향의 차이와 객체 지향의 네 기둥(추상화, 캡슐화, 상속, 다형성)과 추상화·캡슐화·정보 은닉의 구분, is-a·has-a 관계를 정리한다. 함수형의 순수 함수·부수 효과·참조 투명성과 순수 함수가 스레드 안전한 이유, 클래스와 객체 지향이 같은 말이 아닌 이유도 다룬다.
프로그램이 실행되기까지: 컴파일, 바이트코드, 인터프리터, GC: 소스 코드가 CPU에서 돌기까지의 세 갈래(네이티브 컴파일, 바이트코드 + VM·JIT, 인터프리터)와, 운영체제가 실행 파일을 띄워 종료하기까지의 단계, 가비지 컬렉션이 관리하는 영역과 추적·참조 카운팅의 비교, 순환 참조와 retain cycle, GC의 장단점과 Java·Python·Go의 방식, 브라우저에서 네이티브 코드를 돌리는 WebAssembly를 정리한다.
C++ 기초: 문법, 참조자, 클래스, 복사와 이동, 오버로딩: C++ 프로그램의 구조, 초기화 문법과 L·R-value, 입출력 스트림, 헤더와 네임스페이스, 저장 지정자(static·extern·mutable), switch의 fallthrough, 포인터와 참조자의 차이, 그리고 클래스의 접근 지정·friend·this·생성자 종류·초기화 리스트·static 멤버·소멸자와 RAII·private 생성자와 소멸자, 복사 생성자와 복사 대입·얕은 복사와 깊은 복사·이동·3·5·0의 규칙, 함수 오버로딩과 연산자 오버로딩, explicit 형 변환을 정리한다. 참조자는 null이 없는 별명이고, 자원은 소멸자에 묶으며, 인자 하나짜리 생성자에는 기본으로 explicit을 붙인다.
C++ 상속과 가상 함수: 접근 지정, 생성·소멸 순서, vtable, 슬라이싱, 다중 상속: C++ 상속의 다섯 가지 형태(단일·다중·다단계·계층·혼합), protected와 상속 방식(public·protected·private)이 접근 수준을 어떻게 바꾸는지, 기반에서 파생으로 생성되고 역순으로 소멸되는 순서, 가상 함수가 vtable과 vptr로 호출 대상을 고르는 원리와 비가상 함수의 이름 가림, 가상 생성자와 static 가상 함수가 없는 이유, 생성자·소멸자 안의 가상 호출과 pure virtual call, 가상 소멸자, 순수 가상 함수와 추상 클래스, 객체 슬라이싱, 다중 상속의 생성 순서와 다이아몬드 문제·가상 상속을 정리한다.
C++ 스마트 포인터: unique_ptr, shared_ptr, weak_ptr: 힙 객체의 소유권을 RAII 객체로 표현하는 C++ 스마트 포인터를 정리한다. 단독 소유인 unique_ptr(이동만 가능, 원시 포인터와 같은 크기), 참조 카운트로 공유하는 shared_ptr(제어 블록, make_shared, 원자적 카운트), 순환 참조를 끊는 비소유 weak_ptr(lock), C++17에서 제거된 auto_ptr의 문제, 함수 인자로 넘기는 규칙을 다룬다. 기본은 unique_ptr이고 소유가 정말 여럿일 때만 shared_ptr을 쓴다.
C++ 예외 처리의 내부 동작: C++의 throw가 실제로 하는 일을 정리한다. 예외 객체는 힙에 할당되어 참조 카운트로 해제되고, 스택 되감기는 컴파일러가 만든 테이블(.eh_frame, LSDA)을 보고 함수와 call site를 찾아 소멸자를 부른다. 현대 컴파일러의 zero-cost 방식은 try 자체에는 비용이 없지만 throw가 매우 비싸므로, 예외는 진짜 예외 상황에만 쓰고 일상적인 실패는 오류 코드나 std::expected로 돌려준다.
C++ 코딩 표준과 clang-format: C++ 프로젝트의 코딩 표준이 무엇을 정하는지(사전·사후 조건, 유지보수, 서식, 이름, 클래스 배치, 문서화, 최적화 힌트)를 한 프로젝트 표준을 예로 정리하고, 서식은 사람이 지키지 말고 clang-format으로 자동화하는 방법을 다룬다.
C++ 템플릿: 타입을 매개변수로 받아 함수와 클래스를 찍어 내는 C++ 템플릿을 정리한다. 함수·클래스 템플릿, 기본 템플릿 인자와 비타입 인자, 특수화, 템플릿 재귀와 가변 인자 템플릿까지 다루며, 템플릿은 컴파일 시점에 타입별 코드를 생성하는 정적 다형성이라는 점이 핵심이다.
C++ STL 컨테이너와 시간 복잡도: C++ 표준 라이브러리의 vector·deque·list·set·map·unordered 컨테이너가 내부적으로 어떤 자료구조인지, 그래서 연산별 시간 복잡도가 어떻게 되는지 정리한다. vector 끝 삽입은 용량을 배수로 늘리기 때문에 분할 상환 O(1)이고, set·map은 레드-블랙 트리라 O(log n)이다.
DTO와 VO, DAO와 Repository: 이름이 비슷해 헷갈리는 네 가지 객체를 구분한다. DTO는 계층 사이로 데이터를 실어 나르는 로직 없는 상자, VO는 값으로만 같음을 따지는 불변 도메인 객체다. DAO는 테이블 중심으로 영속성을 추상화한 저수준 계층이고, Repository는 도메인 객체의 컬렉션처럼 보이게 만든 상위 수준 계층이다.
Go 동시성: 고루틴, 채널, select, context, sync: Go의 동시성 도구를 정리한다. 고루틴이 OS 스레드보다 가벼운 이유와 G·M·P 스케줄러의 시스템 콜 처리·스피닝, 버퍼 없는·버퍼 있는 채널의 동작과 닫기·nil 채널 규칙, select의 무작위 선택과 타임아웃·논블로킹 패턴, context로 취소·마감 시간을 전파하는 법, sync 패키지의 Mutex·RWMutex·WaitGroup·Once·Pool·Map과 atomic, 레이스 디텍터.
Go 언어: 설계 원칙, 타입, 에러 처리, 빌드와 테스트, GC: Go의 장단점과 The Zen of Go의 원칙, 암묵적으로 구현되는 인터페이스와 nil 인터페이스 함정, 값과 포인터 리시버, 배열과 슬라이스 헤더·append, Swiss Table 기반 맵, 구조체 임베딩, 제네릭과 타입 제약, error 값과 감싸기·errors.Is/As, defer·panic·recover, 정적 바이너리 빌드와 모듈·MVS·워크스페이스, 테이블 기반 테스트와 벤치마크, 세대 구분도 압축도 하지 않는 동시 GC와 GOGC·GOMEMLIMIT, 클린 아키텍처 계층으로 프로젝트를 나누는 방법을 정리한다.
GoF 디자인 패턴: 객체 지향 설계에서 반복되는 문제의 검증된 해법인 GoF 디자인 패턴을 생성·구조·행위 세 갈래로 나눠, 패턴마다 푸는 문제와 한 줄 비유로 정리한다. 패턴은 어휘이자 도구이며, 필요 없는 곳에 쓰면 오히려 복잡도를 늘린다.
Java 동시성: 메모리 모델, 동기화, 스레드 풀, 가상 스레드: Java에서 여러 스레드가 안전하게 협력하는 방법을 정리한다. happens-before로 정의되는 Java 메모리 모델, synchronized와 고유 락·wait/notify, volatile·Atomic·Lock의 보장 차이, 스레드 안전 컬렉션과 ConcurrentHashMap, ThreadLocal과 ScopedValue, ThreadPoolExecutor의 매개변수와 거부 정책, 작업 훔치기로 도는 Fork/Join, 가상 스레드가 플랫폼 스레드와 다른 점과 쓰는 법.
Java 실무 관용구: Enum, Optional, 예외와 자원, 날짜 API, 람다와 스트림, 비동기: Java 코드를 안전하고 읽기 좋게 만드는 관용구를 주제별로 정리한다. 상수와 행위를 묶는 Enum, null을 API에서 몰아내는 방법과 Optional 규칙, checked 예외를 unchecked로 바꾸는 전략과 try-with-resources의 억제된 예외, Date·Calendar 대신 java.time, CompletableFuture 조합, 함수형 인터페이스·람다 캡처·메서드 참조 네 가지, 스트림의 지연 파이프라인과 병렬 스트림의 조건, 스트림과 반복문의 성능 차이를 다룬다.
Java 언어 기본: 접근 제어자, static, 객체 비교, 제네릭, 리플렉션: Java 면접에서 자주 묻는 언어 기본기를 주제별로 정리한다. Java의 특징과 개발 환경·첫 프로그램·배우는 순서, 접근 제어자와 패키지, final·finally·finalize, static과 static final(C·C++의 static과 컴파일 시 처리 포함), 오버로딩과 오버라이딩, 업·다운캐스팅, ==·equals·hashCode와 문자열 상수 풀, String 계열, Comparable과 Comparator, 값 전달, 컴포지션, 기본형과 래퍼 클래스·오토박싱, 제네릭과 타입 소거, 리플렉션·어노테이션·동적 프록시.
Java 입출력과 직렬화: 스트림, Path·Files, Serializable, Jackson: Java 입출력의 두 계열(바이트 스트림과 문자 스트림)과 인코딩, 보조 스트림을 겹쳐 기능을 붙이는 데코레이터 구조, 버퍼링과 flush, File 대신 쓰는 Path·Files를 정리하고, 그 위에서 객체를 바이트로 바꾸는 Java 기본 직렬화(Serializable)의 serialVersionUID·보안 문제와 대안인 JSON 라이브러리 Jackson의 어노테이션, 캐시 저장처럼 타입 정보를 보존해야 할 때의 설정과 함정을 다룬다.
Java 코딩 컨벤션: Google 스타일과 캠퍼스 핵데이 규칙: Java 코드 스타일의 대표 기준인 Google Java Style Guide와 네이버 캠퍼스 핵데이 Java 컨벤션을 항목별로 비교하고, 이름 규칙·import·중괄호·줄 길이·Javadoc 같은 공통 원칙과 Checkstyle·EditorConfig·포매터로 규칙을 자동 적용하는 방법을 정리한다.
JVM 내부 구조: 실행 엔진, 클래스 로딩, 메모리 영역, GC: JVM의 구성 요소(클래스로더·런타임 데이터 영역·실행 엔진)와 계층형 JIT, javac가 만든 바이트코드가 클래스 로딩(로딩·링크·초기화, 부모 위임)을 거쳐 실행되는 과정, 스택과 힙의 역할, 세대별 GC와 Serial·Parallel·G1·ZGC·Shenandoah 비교, GC 로그·힙 덤프로 메모리 문제를 진단하는 방법, GraalVM Native Image와 AOT 캐시를 정리한다.
Kotlin 핵심 문법: 널 안전성, 클래스 종류, 지연 초기화, 스코프 함수: Kotlin이 Java와 다른 핵심 문법을 정리한다. 타입 시스템의 널 안전성, data·sealed·enum 클래스와 object·companion object, lateinit과 by lazy의 차이, let·run·with·apply·also 스코프 함수 고르는 법, 일급 함수와 고차 함수.
Python 언어 기본: 객체와 가변성, 함수, 데코레이터, 클래스, 타입 힌트, import: Python 문법이 실제로 어떻게 동작하는지 주제별로 정리한다. 이름과 객체, 가변·불변 타입과 is·==, 얕은 복사와 깊은 복사, *args·**kwargs와 인자 종류, 일급 함수와 LEGB 스코프·클로저·nonlocal, 람다의 제약, 데코레이터, 컴프리헨션과 제너레이터 식, 컨텍스트 매니저, 클래스 변수와 인스턴스 변수, 이름 맹글링, 매직 메서드, 프로퍼티와 디스크립터, 타입 힌트와 mypy, import 시스템과 __init__.py, Python 2와 3의 차이.
Python 언어 동작: 제너레이터, MRO, 메모리 관리, 동시성, 성능: Python의 런타임 동작을 정리한다. 이터러블·이터레이터·제너레이터의 관계와 지연 평가, 다중 상속의 MRO(C3 선형화)와 super(), CPython의 참조 카운팅·세대별 순환 수집과 메모리 누수 패턴, threading·multiprocessing·asyncio 비교와 이벤트 루프·TaskGroup, 측정에서 런타임 교체까지의 성능 최적화, CPython·PyPy(추적 JIT)·Jython(JVM, GIL 없음) 구현체 비교, 덕 타이핑과 Protocol.

Algorithm

자료구조, 탐색, 그래프, 알고리즘 설계 패러다임, 정렬, 복잡도 분석과 코딩 테스트 전략을 모은 알고리즘 노트.

구간 합과 접두사 합: 앞에서부터의 누적 합을 미리 구해 두고, 임의 구간의 합을 뺄셈 한 번으로 구하는 기법. 접미사·곱 변형과 해시를 곁들여 합이 k인 부분 배열을 세는 방법.
빅오 표기법과 시간 복잡도: 입력 크기가 커질 때 알고리즘의 연산량이 어떻게 늘어나는지를 최고차항으로 표현하는 방법과, 상한(O)·하한(Ω)·딱 맞는 범위(Θ)의 차이.
코딩 테스트 접근법: 주석으로 설계하고 테스트 케이스를 먼저 적는 문제 풀이 순서, 출제 빈도별 알고리즘 우선순위, 막혔을 때 풀이를 볼 시점을 정하는 연습법과 그 방식이 자기기만이 되는 함정, 랜덤 비교 테스트로 반례 찾기, 막혔을 때 접근을 찾는 관점과 이론상 최선 복잡도(BTTC)를 기준으로 시간·공간을 줄이는 최적화 기법, 파이썬·자바스크립트 실전 팁.
파싱 알고리즘과 프랫 파서: 토큰열을 구문 트리로 만드는 파싱 알고리즘의 흐름. BNF 규칙을 함수로 옮기는 재귀 하향 파서(JSON 예제), 연산자 우선순위로 그리디하게 묶는 플로이드의 상향식 파서, 바인딩 파워로 둘의 장점을 합친 프랫 파서를 셸 문법 예제로 정리한다.
현실 시스템을 움직이는 알고리즘과 자료구조: 일상 소프트웨어에서 자료구조가 쓰이는 곳(피드의 리스트, 실행 취소의 스택, 캐시의 해시 테이블, DOM의 트리, 지도 검색의 R-트리), 대규모 시스템 설계에 자주 나오는 알고리즘(일관된 해싱, 지오해시·쿼드트리, 블룸 필터, HyperLogLog, 토큰 버킷, 머클 트리, 합의 알고리즘), 세상을 움직이는 아홉 가지 알고리즘을 정리한다. 블룸 필터는 중복 URL 크롤링 방지 예로 자세히 본다.
KMP 문자열 검색 알고리즘: 텍스트에서 패턴을 찾을 때 불일치가 나도 텍스트 포인터를 되돌리지 않는 KMP 알고리즘. 패턴의 접두사이자 접미사인 가장 긴 부분의 길이를 담은 실패 함수(pi 배열)로 점프할 위치를 정해 O(N + M)에 검색한다. 롤링 해시로 창을 비교하는 라빈-카프와 다른 문자열 검색 알고리즘도 비교한다.

Data Structure9

알고리즘 문제에서 데이터를 담고 꺼내는 방식을 정하는 기본 자료구조 모음.

기초 자료구조: 배열에서 트라이까지: 연산의 약속(추상 자료형)과 구현(자료구조)을 나누는 관점, 배열과 realloc 크기 조정 비용, 배열·행렬 문제의 요령(부분 배열과 부분 수열, 인덱스 변환, 전치), 연결 리스트(C 구조체·Kotlin 예제)와 둘 중 고르는 기준, 더미 노드·제자리 뒤집기 같은 연결 리스트 기법, 층을 쌓아 건너뛰는 스킵 리스트, 이진 탐색 트리와 균형, 해시 테이블과 충돌, 트라이, 얕은 복사와 깊은 복사.
서로소 집합 (Union-Find): 원소들이 어떤 집합에 속하는지 관리하며, 두 집합을 합치고 대표를 찾는 연산을 빠르게 처리하는 자료구조.
세그먼트 트리: 배열을 구간별로 나눠 각 구간의 합·최솟값 같은 요약을 이진 트리에 저장해, 값이 바뀌는 배열에서도 구간 질의와 갱신을 모두 O(log n)에 처리하는 자료구조. 배열 크기 잡기, 재귀 구현, 지연 전파와 펜윅 트리 비교까지 정리한다.
스택: 한쪽 끝에서만 넣고 빼는 후입선출(LIFO) 자료구조와 언어별 구현, 다음 큰 원소를 O(n)에 구하는 단조 스택.
큐와 덱: 먼저 넣은 것을 먼저 꺼내는 큐(FIFO)와 양쪽 끝에서 넣고 뺄 수 있는 덱, 스택 두 개로 큐·큐로 스택 만들기, 구현에 따라 달라지는 덱의 임의 접근 비용.
트리와 이진 탐색 트리: 계층 구조를 표현하는 트리의 용어, 이진 트리의 종류와 배열 표현, 네 가지 순회와 반복 구현, 이진 탐색 트리의 연산·편향·검증, 균형 트리의 종류와 AVL 회전, 레드-블랙 트리가 널리 쓰이는 이유, B 트리와 B+ 트리의 차이.
해시 테이블: 키를 해시 함수로 배열 인덱스로 바꿔 평균 O(1)에 찾는 해시 테이블의 원리, 해시 함수 설계(나눗셈·곱셈·다항·보편 해싱), 개방 주소법과 분리 연결법의 충돌 해결 비교와 이중 해싱의 약점, 적재율과 리사이즈, Java HashMap·Python dict 같은 실제 구현, 빈도 세기·애너그램 같은 문제 풀이 패턴, 해시 맵과 연결 리스트로 만드는 O(1) LRU·LFU 캐시.
힙과 우선순위 큐: 우선순위가 가장 높은 원소를 O(log n)에 넣고 꺼낼 수 있게 해 주는 완전 이진 트리 기반 자료구조, 편향되지 않는 이유와 힙 정렬, 크기 k짜리 힙으로 상위 k개를 O(n log k)에 구하는 방법.

Graph9

정점과 간선으로 관계를 표현하는 그래프의 기본 개념과 최단 경로 알고리즘.

그래프의 기본과 표현 방법: 정점과 간선으로 이루어진 그래프의 종류, 사이클 없는 그래프와 트리의 차이, 인접 행렬·인접 리스트로 저장하는 방법과 밀집·중복 간선의 처리, 탐색 기법과 놓치기 쉬운 경우.
다익스트라 최단 경로: 음이 아닌 가중치 그래프에서 한 정점으로부터 모든 정점까지의 최단 거리를 우선순위 큐로 구하는 알고리즘.
단절점과 단절선: 지우면 그래프가 끊어지는 정점(단절점)과 간선(단절선)을 DFS 방문 순서와 low 값으로 O(V + E)에 찾는 방법.
오일러 경로와 오일러 회로: 모든 간선을 정확히 한 번씩 지나는 경로·회로의 존재 조건(차수의 짝홀)과, 히어홀저 알고리즘으로 O(V + E)에 회로를 구하는 방법. 다중 간선에서 이미 쓴 간선을 다시 훑지 않는 요령을 함께 정리한다.
위상 정렬: 방향 비순환 그래프(DAG)의 정점을 모든 간선 u→v에서 u가 앞에 오도록 나열하는 위상 정렬. 진입 차수와 큐를 쓰는 칸 알고리즘, DFS 후위 순서를 뒤집는 방법, 사이클 판별, 사전순 최소 순서를 정리한다.
최단 경로 알고리즘 고르기: 가중치 유무, 음수 간선·음수 사이클, 출발점 하나인지 모든 쌍인지, 목적지가 하나인지에 따라 BFS·0-1 BFS·다익스트라·벨만-포드·플로이드-워셜·DAG 최단 경로·A*를 고르는 기준과 각 알고리즘의 원리, 트리와 밀집 그래프에서의 선택.
최소 공통 조상 (LCA): 트리에서 두 노드의 가장 가까운 공통 조상을 찾는 LCA. 깊이를 맞춰 함께 올라가는 O(N) 방법과, 2^k번째 조상 표(희소 테이블)로 질의마다 O(log N)에 답하는 이진 올리기(binary lifting), 두 노드 사이 거리 구하기까지.
최소 신장 트리: 크루스칼과 프림: 가중치 그래프의 모든 정점을 사이클 없이 가장 싸게 잇는 최소 신장 트리와, 간선을 고르는 크루스칼·정점을 넓혀 가는 프림 알고리즘의 동작·복잡도·선택 기준, 결과가 늘 트리인 이유와 비연결 그래프의 최소 신장 숲.

Math10

점화식의 일반항, 벡터공간, 내적·외적과 거리처럼 알고리즘 분석과 계산 기하에 쓰이는 수학 노트 모음.

미분과 적분 기초: 극한과 연속, 순간변화율로서의 도함수와 미분 규칙(곱·몫·연쇄 법칙), 지수·로그·삼각함수의 도함수, 증감과 극값을 이용한 최적화, 누적으로서의 적분과 미적분학의 기본 정리를 정리하고 수치 미분·경사 하강·수치 적분 코드로 연결한다.
벡터 내적·외적과 거리: 내적이 수직과 정사영을, 외적이 방향과 넓이를 알려 주는 원리. 법선 벡터로 점과 초평면 사이 거리 공식을 유도하고, 계산 기하에서 쓰는 CCW·점과 직선 거리 계산, 제곱 거리 비교와 원·직사각형 겹침 판정을 정리한다.
벡터공간과 부분공간: 선형대수의 출발점인 벡터공간의 공리 8가지, 영벡터·역원의 유일성, 부분공간 판정법, 부분공간의 교집합·합공간·직합, 일차결합과 생성공간(span).
비트 연산 기법: 정수의 비트를 직접 다루는 연산자와 관용구. k번째 비트 검사·설정·끄기·뒤집기, 2의 거듭제곱 판별, 최하위 1비트, XOR의 성질, 비트마스크로 집합 표현하기, 언어별 정수 폭과 음수 처리 차이.
선형 점화식의 일반항: 상수 계수 선형 점화식의 일반항을 생성함수, 특성방정식, 행렬 대각화 세 가지로 구하고, 세 방법이 같은 고유값을 찾는 일임을 야콥스탈 수열로 보인다.
수학적 최적화와 정수 계획법: 배정·일정·적재 같은 조합 문제를 결정 변수·제약 조건·목적 함수로 적어 솔버에 맡기는 방법. 전용 알고리즘·휴리스틱·솔버 모델링의 차이, 정수 선형 계획법 모델링 예(구간 배정), 목적 함수 설계와 운영에서의 주의점을 정리했다.
순열과 조합: 순서를 따지는 순열과 따지지 않는 조합의 공식을 재귀적으로 유도하고, 파스칼 점화식과 이항 정리, 중복 순열·중복 조합, 완전 탐색의 경우의 수 추정과 파이썬 구현을 정리한다.
정수론 기초: 소수·최대공약수·합동식: 알고리즘 문제와 암호에 자주 나오는 정수론을 정리한다. 산술의 기본 정리와 나눗셈 정리, 유클리드 호제법과 베주 항등식(확장 유클리드), 에라토스테네스의 체로 소인수분해, 선형 합동식과 중국인의 나머지 정리, 오일러 피 함수와 페르마의 소정리, 약수 함수와 뫼비우스 함수, 선형 합동 생성기와 자릿수 묶음으로 큰 정수 더하기.
푸리에 변환: 신호를 여러 주파수의 사인·코사인 성분의 합으로 분해해 시간·공간 영역을 주파수 영역으로 바꾸는 변환. 디지털 신호에는 이산 푸리에 변환(DFT)을 쓰고 FFT로 O(n log n)에 계산한다. 크기(스펙트럼)는 성분의 세기, 위상은 위치 정보를 담으며, 주파수 영역에서 필터링한 뒤 역변환한다.

Paradigm8

문제를 쪼개고, 기억하고, 매 순간 최선을 고르는 등 알고리즘을 설계하는 대표적인 사고방식.

그리디 알고리즘: 매 선택의 순간마다 당장 가장 좋아 보이는 것을 골라 최종 해답에 도달하는 방법과 그 정당성 확인. 거스름돈과 로마 숫자 변환을 예로 든다.
동적 계획법 (DP): 겹치는 하위 문제의 답을 한 번만 계산해 저장하고 재사용하여 큰 문제를 효율적으로 푸는 기법. 하위 문제를 찾는 연습(타일링)과 구간 DP(연쇄 행렬 곱셈)를 함께 다룬다.
분할 정복: 문제를 서로 독립적인 작은 하위 문제로 나누어 재귀적으로 풀고, 그 결과를 합쳐 원래 문제를 해결하는 기법과, 실행 시간을 점화식(반복 대입·추정 후 증명·마스터 정리)으로 구하는 법.
스위핑 (Sweep Line): 데이터를 정렬해 한 방향으로 한 번만 훑으며 답을 갱신하는 기법. 구간 겹침 판정·병합 같은 구간 문제의 기본 부품, 겹치는 구간 세기와 평면을 직선으로 나누는 기하 문제를 예로 든다.
재귀 함수: 자기 자신을 다시 호출해 문제를 더 작은 같은 문제로 줄여 가는 함수와 그 종료 조건. 예제로 팩토리얼과 유클리드 호제법(최대공약수·최소공배수)을 다룬다.
최장 증가 부분 수열 (LIS): 수열에서 순서를 지키며 고른 증가 부분 수열 중 가장 긴 것을 구하는 문제. O(n²) DP, 이분 탐색으로 길이를 구하는 O(n log n) 방법, 실제 수열까지 복원하는 방법.
투 포인터와 슬라이딩 윈도우: 인덱스 두 개를 규칙에 따라 움직여 이중 반복문 O(n²)을 O(n)으로 줄이는 기법. 양 끝에서 좁히기, 같은 방향 윈도우, 두 배열 병합·교집합, 빠른·느린 포인터의 네 가지 모양과 회문 판정·중심 확장을 정리한다.

Search5

가능한 경우를 빠짐없이, 또는 영리하게 줄여 가며 답을 찾는 탐색 알고리즘 모음.

깊이 우선 탐색 (DFS): 한 갈래를 갈 수 있는 데까지 파고든 뒤 되돌아오는 그래프 탐색으로, 스택이나 재귀로 구현한다.
너비 우선 탐색 (BFS): 시작점에서 가까운 노드부터 큐를 이용해 차례로 방문하는 그래프 탐색으로, 가중치 없는 그래프의 최단 거리를 구한다.
완전 탐색과 백트래킹: 가능한 모든 경우를 나열해 답을 찾는 방법과, 가망 없는 경로를 일찍 잘라내는 백트래킹.
이분 탐색: 정렬된 데이터에서 탐색 범위를 절반씩 줄여 O(log n)에 원하는 값을 찾는 방법과 그 복잡도 증명, lower bound·upper bound, 경계 조건 실수, 삼분할이 빠르지 않은 이유, 순차 탐색과 어느 쪽을 고를지.

Sorting4

데이터를 일정한 순서로 나열하는 대표적인 정렬 알고리즘과 그 복잡도.

기본 정렬: 버블·선택·삽입·셸·계수·기수 정렬: 구현이 단순한 O(n²) 비교 정렬 세 가지와 입력 상태에 따른 실제 속도 비교, 간격을 줄여 가며 삽입 정렬하는 셸 정렬, 비교 없이 정렬하는 계수 정렬·기수 정렬(LSD·MSD).
병합 삽입 정렬 (Ford-Johnson): 비교 횟수를 최소화하도록 설계된 Ford-Johnson 알고리즘. 짝짓기로 큰 원소를 재귀 정렬하고, 작은 원소를 야콥스탈 수 순서로 이진 삽입해 이진 탐색 비용을 낭비하지 않는다.
병합 정렬과 퀵 정렬: 분할 정복으로 평균 O(n log n)에 정렬하는 두 대표 알고리즘과 상향식 병합 정렬, 퀵 셀렉트, 정렬 알고리즘 복잡도·안정성 비교, 언어별 표준 정렬, 메모리보다 큰 데이터의 외부 정렬.

DevOps

개발한 서비스를 안정적으로 빌드·배포·운영하기 위한 인프라와 자동화 지식 모음.

12요소 앱: 클라우드에서 확장·배포·운영하기 쉬운 애플리케이션을 만드는 열두 가지 원칙(코드베이스, 의존성, 설정, 백엔드 서비스, 빌드·릴리스·실행, 프로세스, 포트 바인딩, 동시성, 폐기 가능성, 개발·운영 일치, 로그, 관리 프로세스)을 각 원칙이 막는 문제와 지금의 구현 방식으로 정리했다.
고가용성과 재해 복구 설계: 데이터센터 하나가 통째로 사라져도 서비스를 이어 가기 위한 설계 원칙. RTO·RPO로 목표를 정하고, 백업·파일럿 라이트·웜 스탠바이·액티브-액티브 중 전략을 고르며, 데이터·플랫폼·운영 도구까지 모든 계층을 여러 데이터센터에 나누고, 전환을 정기 훈련으로 검증한다. 복구에 쓰는 운영 도구가 가장 자주 다중화에서 빠진다.
관측 가능성: 로그, 트레이스, 메트릭: 관측 가능성의 세 기둥인 로그(개별 사건), 트레이스(요청 하나의 경로), 메트릭(집계 가능한 수치)의 차이와 수집 구조, OpenTelemetry로 한 표준에 모으는 방법, 메트릭 수집의 풀·푸시 모델과 서비스 디스커버리, 쓰기가 많고 읽기가 몰리는 메트릭에 범용 DB 대신 시계열 DB를 쓰는 이유를 정리한다.
내구성 워크플로와 Temporal: 스케줄 배치를 코드로 짜고 상태를 복원하기: Jenkins 류로 스케줄 배치를 운영할 때 생기는 디스크 포화·플러그인 충돌·알림 누락 문제를, 실행 상태를 DB에 저장해 재시작에도 이어 실행하는 내구성 워크플로 엔진 Temporal로 옮기는 방식을 정리했다. Workflow·Activity·서버·워커의 구조, cron·Jenkins와의 역할 차이, 중복 실행 방지와 노드 축소 대응 같은 운영 주의점까지 다룬다.
배포 전략: 롤링, 블루-그린, 카나리, 섀도, 피처 토글: 새 버전을 운영에 올리는 방식을 다운타임·롤백 속도·비용·노출 범위로 비교한다. 한 번에 바꾸는 빅뱅(Recreate), 하나씩 바꾸는 롤링, 환경을 통째로 전환하는 블루-그린, 일부 사용자에게 먼저 여는 카나리, 트래픽 사본으로 검증하는 섀도, 배포와 출시를 떼어 내는 피처 토글과 A/B 테스트를 다룬다.
서버 장애 진단 패턴: 서버 장애를 추측이 아니라 계측으로 좁혀 가는 방법과, 자주 반복되는 장애 유형의 증상·원인·해결을 모았다. load average와 CPU·I/O 지표 읽기, 힙 덤프로 메모리 누수 찾기, DB 커넥션 실패와 DNS 역조회, 인덱스를 못 타는 쿼리와 MVCC 죽은 튜플, 세션이 Redis 메모리를 고갈시키는 경우, 선착순 카운터 병목, 피크 트래픽 대비와 사후 분석까지 다룬다.
서버리스 아키텍처: 서버를 예약하지 않고 이벤트가 올 때만 코드를 실행해 실행한 만큼 내는 방식이다. IaaS·PaaS·컨테이너와의 차이, FaaS와 BaaS, 함수를 부르는 네 가지 경로, 함수를 나누는 네 가지 코드 구성(함수당 작업 하나·서비스·모놀리식·그래프), 콜드 스타트·실행 시간·연결 수·종속 같은 제약과 맞는 곳을 정리했다.
서비스 운영 준비 체크리스트: 서버 애플리케이션을 프로덕션에 올리기 전에 확인할 최소 기준을 회복력, 수평 확장, 무중단 배포, 프로세스 감독, 로그, 알림과 헬스 체크, 지표, 고가용성, 부하·장애 테스트, 백업 복구, 보안, 법 열두 분야로 나누고 각 항목을 자세한 노트로 잇는다. 오래된 보안 헤더(X-XSS-Protection, HPKP)처럼 지금은 따르지 않는 항목도 정리한다.
스타트업 인프라 선택 원칙: 작은 팀이 인프라를 고를 때의 판단 기준. 데이터 계층에는 관리형 서비스에 돈을 쓰고, 단순한 도구를 고르고, 관리형 편의 기능은 커스터마이즈 여지를 먼저 보고, 관측 표준(OpenTelemetry)·IdP·의존성 업데이트·비용 추적처럼 늦을수록 비싸지는 것은 처음부터 들인다. 가변 인프라·비대한 이미지·공유 DB 같은 클라우드 네이티브 안티패턴도 함께 정리한다.
장애 대응과 포스트모템: 장애는 탐지 → 전파 → 해결 → 보고 → 회고의 다섯 단계로 다룬다. 해결은 확산을 막는 임시 조치(롤백·재기동·증설·기능 스위치)가 먼저고, 보고서와 비난 없는 포스트모템으로 재발 방지·탐지·처리 개선 과제를 검증 가능한 액션 아이템으로 남긴다.
쿠버네티스 구조와 핵심 개념: 쿠버네티스는 원하는 상태를 선언하면 컨트롤 플레인이 노드의 컨테이너를 그 상태로 계속 맞추는 오케스트레이터다. 컨트롤 플레인(API 서버·etcd·스케줄러·컨트롤러 매니저)과 노드(kubelet·kube-proxy·런타임)의 역할, 파드와 워크로드 리소스, 서비스 네 가지 유형, 쿠버네티스 디자인 패턴, 자주 쓰는 kubectl 명령, 생태계 도구 지도를 정리한다.
쿠버네티스 네트워킹: 서비스, DNS, Ingress, NetworkPolicy: 파드마다 IP를 주는 네트워크 모델과 CNI, 서비스의 가상 IP가 kube-proxy(iptables·nftables·IPVS) 규칙으로 파드에 닿는 원리, 서비스 유형별 세부 동작, CoreDNS와 이름 해석, 외부로 나가는 트래픽, Ingress·Gateway API, NetworkPolicy, 서비스 메시(Istio·Linkerd), 연결·DNS 문제 진단을 정리한다.
쿠버네티스 보안: 인증, RBAC, 서비스 계정, 파드 보안: 쿠버네티스 API에 접근하는 주체를 확인하는 인증(X.509·토큰·OIDC)과 kubeconfig 구조, 권한을 주는 RBAC(Role·ClusterRole·바인딩, verb)와 최소 권한 적용법, 파드가 API를 부르는 서비스 계정과 토큰, 그리고 컨테이너 권한을 줄이는 Pod Security Standards·Pod Security Admission·securityContext를 정리한다.
쿠버네티스 스케줄링과 자원 관리, 오토스케일링: 파드를 어느 노드에 둘지 정하는 nodeSelector·노드 어피니티·파드 (안티)어피니티·토폴로지 분산·테인트와 톨러레이션, CPU·메모리 requests와 limits의 의미와 초과 시 동작, QoS 클래스, LimitRange·ResourceQuota·PriorityClass, 그리고 HPA·VPA·Cluster Autoscaler의 동작 원리와 함께 쓸 때의 주의점을 정리한다.
쿠버네티스 운영: Helm, 업그레이드, 관측, 장애 진단, 오퍼레이터, GitOps: 쿠버네티스 클러스터와 앱을 운영하는 데 필요한 것들: Helm 차트·릴리스·훅, 버전 업그레이드 순서와 etcd 백업·복구, cordon·drain과 PodDisruptionBudget, 로그 구조와 kubectl logs, metrics-server와 Prometheus 모니터링, CrashLoopBackOff·ImagePullBackOff 진단과 kubectl debug, CRD와 오퍼레이터 패턴, Argo CD·Flux GitOps, 멀티 클러스터 관리.
쿠버네티스 워크로드와 파드 생명주기: 파드의 단계(Pending·Running·Succeeded·Failed·Unknown)와 컨테이너 상태, 재시작 정책, 사이드카·앰버서더·어댑터·초기화 컨테이너 패턴, liveness·readiness·startup 프로브, 그리고 Deployment·ReplicaSet·StatefulSet·DaemonSet·Job·CronJob이 파드를 관리하는 방식과 주요 설정(maxSurge·maxUnavailable, 순차 배포, completions·parallelism, concurrencyPolicy)을 정리한다.
쿠버네티스 위 웹 서비스의 요청 경로와 구성 요소: 브라우저 요청이 로드 밸런서, 게이트웨이, 서비스 메시를 거쳐 파드의 컨테이너에 닿고, 그 트래픽이 Prometheus·Grafana로 관측되기까지의 경로와 각 구성 요소(Terraform, Kubernetes, Helm, Istio, API 게이트웨이)의 역할을 프론트엔드 개발자 관점에서 정리했다.
쿠버네티스 저장소와 설정: PV·PVC, ConfigMap, Secret: 파드가 죽어도 남는 저장소를 요청하는 PV·PVC와 접근 모드·회수 정책, StorageClass의 동적 프로비저닝과 CSI, emptyDir·hostPath 같은 볼륨 유형, 그리고 설정과 비밀 값을 이미지 밖에서 넣는 ConfigMap·Secret의 주입 방식, Secret의 실제 보안 수준, 외부 비밀 저장소 연동, 변경이 파드에 반영되지 않는 이유와 해결법을 정리한다.
클라우드 기초와 AWS: 서비스 모델, 인프라, 컴퓨팅, 보안 그룹: 온프레미스와 클라우드의 차이, NIST가 정의한 다섯 가지 특징과 배포 모델, 제공자가 어디까지 관리하느냐로 나뉘는 IaaS·PaaS·SaaS와 공동 책임 모델, 클라우드를 받치는 가상화·네트워크 가상화(SDN·NFV), 리전·가용 영역·엣지 로케이션으로 이루어진 AWS 글로벌 인프라, EC2의 인스턴스 유형과 요금 모델, 관리형 서비스(ECS·EKS·Lambda), 보안 그룹으로 RDS 접속을 여는 법과 배스천 SSH 터널, 콘솔·CLI·SDK와 코드형 인프라.
클라우드 네이티브와 코드형 인프라: 클라우드 네이티브를 개발 프로세스·애플리케이션 구조·배포 단위·인프라의 네 축으로 정의하고, 가상화에서 IaaS·PaaS·컨테이너로 이어진 클라우드의 변천, 전환 로드맵(CNCF 랜드스케이프의 여섯 영역), 전통적 구성 관리와 코드형 인프라(IaC)·GitOps의 차이와 대표 도구를 정리했다.
클라우드 비용 최적화와 숨은 비용: 클라우드 비용을 줄이는 여섯 가지 방법(사용량 줄이기, 유휴 자원 정리, 적정 크기, 비업무 시간 종료, 약정 할인과 스팟, 데이터 전송 최적화)과, 청구서에서 예상 밖으로 커지는 숨은 비용(무료 사용량 경계, 공인 IPv4, 유휴 로드 밸런서, 붙지 않은 디스크와 남은 스냅숏, 객체 스토리지 요청 요금, 미완료 멀티파트 업로드, 송신 데이터 전송)을 정리했다.
클라우드 서비스 지도: AWS·Azure·GCP 대응표: 세 주요 클라우드의 서비스를 컴퓨팅·스토리지·데이터베이스·네트워크·메시징·보안·관측·IaC 범주로 나란히 놓은 대응표, 처음 익힐 AWS 핵심 서비스와 학습 순서, 계층·범위로 고르는 클라우드 로드 밸런서, 수집에서 시각화까지의 빅데이터 파이프라인 단계와 처리 엔진(Hadoop·Spark), 클라우드 모니터링이 갖춰야 할 기능을 정리했다.
클라우드 SLA·계약과 규제: 품질 지표, 도입 판단, 계약, 클라우드컴퓨팅법: 클라우드 서비스의 품질을 가용성·응답성·확장성으로 재는 법과 SLA의 가용률·서비스 크레딧, 어떤 시스템을 먼저 클라우드로 옮길지 고르는 기준과 중요도 평가, 계약 전에 준비할 업무 연속성 계획·출구 전략·보안 통제, 계약서에 꼭 넣을 항목, 그리고 「클라우드컴퓨팅 발전 및 이용자 보호에 관한 법률」이 정한 이용자 권리(사고 통지, 저장 국가 공개, 반환·파기, 임치, 입증 책임 전환)와 공공·금융·의료·교육 분야의 클라우드 규정을 정리했다.
플랫폼 엔지니어링: 내부 개발자 플랫폼과 골든 패스: 플랫폼 엔지니어링은 개발팀마다 반복되는 인프라·배포·보안 작업을 내부 개발자 플랫폼(IDP)이라는 내부 제품으로 묶어 셀프서비스로 제공하는 일이다. 개발자를 고객으로 보는 제품 관점, IDP의 다섯 구성 요소와 플랫폼 오케스트레이터, 포털과 플랫폼의 차이, 골든 패스(포장된 길)의 네 가지 성질과 설계법, 최소 실행 가능 플랫폼에서 시작해 키우는 방식을 정리한다.
AWS Lambda의 내부 구조: 서버리스 함수 서비스 Lambda가 요청을 처리하는 과정을 동기·비동기 호출 경로, 실행 환경을 배정하는 Assignment 서비스와 Placement 서비스, 함수마다 격리하는 Firecracker 마이크로VM, 코드·이미지를 청크로 나눠 공유하는 저장 계층, 콜드 스타트를 줄이는 SnapStart로 나눠 정리했다.
AWS VPC 네트워크 구성: AWS에서 격리된 가상 네트워크인 VPC와 서브넷·라우팅 테이블을 바탕으로, 인터넷(인터넷 게이트웨이·NAT), 원격 근무자(Client VPN), 사내 데이터센터(Site-to-Site VPN·Direct Connect), 다른 VPC(피어링·Transit Gateway), AWS 서비스와 SaaS(게이트웨이·인터페이스 엔드포인트, PrivateLink)를 잇는 방법을 한 장의 구성도로 정리했다.
ChatOps: 채팅에서 운영하기: ChatOps는 배포·조회·알림·장애 대응 같은 운영 작업을 팀 채팅방에서 봇 명령으로 실행하는 협업 방식이다. 누가 무엇을 했는지 모두에게 보이고(투명성), 보면서 배우고(온보딩), 손으로 치던 위험한 명령이 검증된 스크립트가 된다. 구성 요소, 도입 단계, 권한·비밀·알림 피로 같은 위험을 정리한다.
CI/CD: 코드 변경을 자동으로 빌드·테스트하고(CI) 배포까지 이어 주는(CD) 파이프라인의 개념과 단계, dev·QA·UAT·운영으로 산출물을 승격하는 흐름, 파이프라인 설계 시 고려할 것, GitHub Actions 예시와 CI 비밀 값 관리, Docker 이미지 빌드·태그 전략·층 캐시·보안 스캔 게이트·Testcontainers.
DevOps, SRE, 플랫폼 엔지니어링, NoOps와 클라우드 거버넌스: 개발과 운영을 잇는 방식의 갈래를 비교한다. DevOps는 협업 문화와 자동화, SRE는 SLO·에러 버짓으로 신뢰성을 공학 문제로 다루는 실천, 플랫폼 엔지니어링은 개발자가 스스로 쓰는 내부 플랫폼을 제품으로 만드는 일, NoOps는 서버리스로 운영 작업을 클라우드에 넘기는 지향이다. 클라우드를 들인 조직의 운영 모델(중앙 집중·분산·공유 서비스·CCoE), 통제가 아니라 가드레일로서의 거버넌스와 문화 전환, 테스트가 개발자 몫으로 옮겨 간 흐름과 회사 규모별 배포·품질 도구의 변화도 함께 다룬다.
DevSecOps와 클라우드 보안: 개발 흐름에 보안 넣기, 위협과 대응: DevSecOps는 보안 검사를 출시 직전의 관문이 아니라 개발·빌드·배포·운영 전 과정에 자동화해 넣는 방식이다. 위협 모델링, 코드·의존성·이미지·IaC 자동 검사, 비밀 관리, 지속 모니터링과 취약점 관리가 핵심이고, 특히 SSH 키·토큰·인증서·자격 증명 같은 비밀은 저장소에 넣지 않고 비밀 관리 도구로 짧게 발급해 쓴다. 클라우드에서 생기는 관리적 위협(남용, 내부자, 섀도 IT, APT)과 기술적 위협(API, 가상화 탈출, 계정 탈취, 유출·손실, DoS), CVE·CCE 점검과 제로데이·원데이·올드데이, 확장성을 기준으로 한 보안 솔루션 배치도 다룬다.
Docker 네트워크와 볼륨: Docker 네트워크 드라이버(bridge·host·none·overlay·macvlan)의 동작, bridge 네트워크의 veth·NAT 원리, 사용자 정의 네트워크와 내장 DNS, 포트 공개(-p)와 EXPOSE의 차이, 컨테이너 간 통신 제한, 그리고 볼륨·바인드 마운트·tmpfs의 차이와 볼륨 수명·드라이버·읽기 전용 마운트, 이미지 층을 저장하는 스토리지 드라이버를 정리한다.
Docker 컨테이너 운영: 자원 제한, 보안, 로그, 장애 진단: cgroups로 CPU·메모리·I/O·PID를 제한하는 옵션과 CPU 스로틀링·OOM의 원리, 컨테이너 격리를 보강하는 비root 실행·rootless 모드·capability·seccomp·AppArmor·SELinux, Docker 소켓과 Docker in Docker의 위험, 비밀 값 전달과 이미지 스캔·서명, 로깅 드라이버와 로그 회전, docker stats·events·Prometheus 모니터링, 종료 코드·재시작 정책·exec·diff·cp·prune을 이용한 장애 진단을 정리한다.
Docker Compose: 여러 컨테이너 묶어 띄우기: compose.yaml 하나로 웹 서버·애플리케이션·DB 컨테이너를 정의하고 함께 띄우는 Docker Compose의 최상위 구성, 서비스 주요 키, 환경 변수 관리(.env·environment·env_file 우선순위), depends_on과 healthcheck로 시작 순서 제어, 네트워크 분리, 볼륨 공유, 여러 파일 겹치기, 스케일링, secrets, 점검 명령.
Dockerfile 작성과 컨테이너의 PID 1: 이미지와 컨테이너의 관계와 층 구조, Dockerfile 명령(RUN·CMD·ENTRYPOINT 조합, COPY·ADD, ARG·ENV, WORKDIR, USER, HEALTHCHECK), 베이스 이미지(Debian·Alpine·distroless·scratch) 고르기, 컨테이너가 바로 꺼지는 이유와 PID 1·좀비 프로세스 문제(tini·--init), 디버깅 요령, 멀티 스테이지 빌드·빌드 캐시·BuildKit, 태그 전략·레지스트리·댕글링 이미지·save·load 같은 이미지 관리.
Packer와 머신 이미지 굽기: Packer는 템플릿 하나로 AMI·GCE 이미지·VM·컨테이너 이미지를 자동으로 만드는 HashiCorp의 이미지 빌더다. 소스(빌더)로 임시 머신을 띄우고 프로비저너로 설정한 뒤 스냅숏을 떠서 후처리기로 넘기는 흐름, HCL2 템플릿과 packer init·build, Dockerfile과의 차이, 골든 이미지와 불변 인프라에서의 쓰임을 정리한다.
S3·CloudFront로 정적 사이트 배포하기: 빌드한 SPA·정적 사이트를 AWS에 올리는 표준 구성. 비공개 S3 버킷을 원본으로 두고 CloudFront가 OAC로만 읽어 HTTPS·압축·엣지 캐시를 맡으며, ACM 인증서(us-east-1)와 Route 53 별칭 레코드로 커스텀 도메인을 붙인다. SPA 라우팅 처리, 캐시 헤더와 무효화, GitHub Actions에서 OIDC로 배포하는 워크플로까지 정리한다.
Terraform: 코드로 클라우드 인프라 만들기: Terraform은 원하는 인프라를 HCL 코드로 선언하면, 상태 파일과 비교한 계획(plan)을 보여 주고 승인 뒤 제공자 API를 호출해 실제 자원을 만든다(apply). write → init → plan → apply 흐름, HCL 파일 규칙과 데이터 소스, import·graph·destroy 명령, 상태 파일과 원격 백엔드·잠금, 모듈, 드리프트와 불변 인프라, CI에서의 운영 방식을 정리한다.
VM과 컨테이너: OS 전체를 가상화하는 VM과 애플리케이션 단위로 격리하는 Docker 컨테이너의 차이, Docker의 핵심 개념과 클라이언트·데몬·레지스트리 구조, dockerd·containerd·runc 런타임 계층과 OCI 표준, Docker와 쿠버네티스의 관계, 컨테이너가 많아질 때 필요한 오케스트레이션·오토 스케일링(Swarm·Kubernetes·ECS), MSA에서의 장단점을 다룬다.

AI & Data

LLM·에이전트 도구(Claude Code, 스킬, 루프 엔지니어링)와 AI 활용법, 머신 러닝·딥러닝·강화 학습·자연어 처리의 기초 개념, 파이썬 데이터 분석·Jupyter 같은 데이터 도구에 관한 노트.

강화 학습: 에이전트·MDP·가치 함수와 알고리즘 분류: 강화 학습은 에이전트가 환경과 주고받는 상태·행동·보상으로 누적 보상을 최대화하는 정책을 배우는 방법이다. 기본 용어, 마르코프 결정 과정(MDP), 리턴·가치 함수·벨만 방정식, 모델 기반/모델 프리·가치 기반/정책 기반·온/오프 정책 분류, 응용 분야, 환경 점검과 알고리즘별 구현 요령을 정리한다.
결정 트리와 앙상블: 랜덤 포레스트와 부스팅: 표 형태(정형) 데이터에서는 딥러닝보다 트리 기반 모델이 강할 때가 많다. 지니 불순도로 가지를 나누는 결정 트리, 여러 트리를 투표시키는 배깅·랜덤 포레스트, 앞 모델의 실수를 이어 고치는 부스팅(AdaBoost, XGBoost·LightGBM·CatBoost)을 비교한다. 두 계열이 쓰는 트리 깊이와 하이퍼파라미터의 차이, 정형 데이터에서 그레이디언트 부스팅이 이기는 이유, 큰 트리 하나보다 작은 트리 여러 개가 나은 이유(상관과 분산)를 다루고, 학습한 모델을 서버나 기기에 배포하는 방식을 정리한다.
내 일을 줄이는 하네스 만들기: 에이전트 코딩의 단위는 결과물이 아니라 결과물을 만드는 장치(하네스)다. 대화로 맥락을 쌓고, CLAUDE.md·PLAN/PROGRESS 파일·명령·서브에이전트·참고 자료 캐시로 장치를 만들고, 결과가 아니라 장치를 고치며, cron과 claude -p로 이슈 → 구현 → 보고까지 돌리는 방법을 정리했다. 병목의 이동(토큰·머지·thinking·추론 속도), 사람의 인지 부하, 코드와 소프트웨어의 가치 변화도 다룬다.
네이버 블로그 크롤링: 네이버 검색 API로 키워드별 블로그 글 URL·제목·작성일을 모으고, iframe 안의 본문은 PostView 주소나 Selenium으로 받아 BeautifulSoup으로 추출해 CSV로 저장하는 흐름. API 한도, iframe 구조, 선택자 변경, 예외 처리 함정을 정리한다.
논문 읽기와 구현: 고르고, 여러 번 나눠 읽고, 재현할 수 있게 공개하기: 머신 러닝 논문은 목록을 만들어 병렬로 훑고 일부만 깊게 읽는다. 한 편은 제목·초록·그림 → 도입·결론 → 본문 순으로 여러 번 나눠 읽고 네 가지 질문으로 이해를 점검한다. 구현은 수식을 코드로 옮기는 반복 작업이 되지 않게 저자의 의도와 실패를 상상하며 하고, 공개할 때는 의존성·학습 코드·평가 코드·사전 학습 모델·결과 표와 재현 명령의 다섯 가지를 갖춘다.
데이터 시각화: 인코딩, 차트 고르기, 디자인 원칙: 시각화는 데이터의 각 열을 위치·길이·색 같은 시각 채널에 대응시키는 일이다. 그래픽 문법의 일곱 요소로 차트를 분해하고, 데이터 유형과 지각 특성으로 채널을 고르고, 크기·분포·비율·관계·시간 변화라는 질문으로 차트를 고른 뒤, 잉크 비례·겹침 풀기·적고 의미 있는 색·직접 레이블·옅은 맥락 요소로 다듬고 3차원은 피한다.
데이터 직군: 분석가·엔지니어·머신러닝 엔지니어·사이언티스트: 데이터 직군은 성향에 따라 기획자형 데이터 분석가, 개발자형 데이터 엔지니어와 머신러닝 엔지니어, 연구자형 데이터 사이언티스트로 나뉜다. 직군별 주요 업무·필요 역량·자격 요건, 분석가와 머신러닝 직군의 일하는 흐름, 연구와 프로덕션의 차이, 애널리틱스 엔지니어·MLOps 엔지니어·AI 엔지니어 같은 새 직군, 기대와 현실의 차이, 직군별 학습 로드맵, 자격증·대학원·학원과 포트폴리오(Kaggle, 공모전, 직접 수집하는 프로젝트, 블로그), 채용 과제와 면접까지 정리한다.
데이터 파이프라인과 저장소 용어: 데이터 파이프라인은 수집 → 적재 → 저장 → 처리 → 활용의 다섯 단계로 데이터를 옮기고 다듬는다. 단계별 도구 지도(2026)와 도구를 고르는 원칙, 배치와 스트림·이벤트 시간과 늦게 오는 데이터·람다와 카파 아키텍처, ETL과 ELT, 웨어하우스·레이크·레이크하우스·테이블 포맷·데이터 메시 같은 저장소 용어, 데이터 계층과 테이블 이름 규칙, 분석 저장소가 커 가는 단계와 재작업에 강한 적재·운영 원칙을 정리한다.
데이터의 위치 추정: 평균·절사평균·가중평균·중앙값: 수치 데이터를 값 하나로 대표하는 위치 추정(대푯값)을 정리한다. 산술평균은 이상치 하나에 크게 흔들리므로, 양 끝을 잘라 내는 절사평균, 데이터마다 중요도를 주는 가중평균, 순서의 가운데를 쓰는 중앙값을 상황에 맞게 고른다.
디자인 시스템을 아는 화면 생성 에이전트 설계하기: 프롬프트→코드 한 번의 점프 대신 구체화·기억·참고·생성·검증·축적 루프를 하네스로 묶고, 중간 표현(스펙)·온디맨드 스킬·자동 채점기·세션 간 메모리로 결과를 일관되게 만드는 에이전틱 코딩 기법.
딥러닝 직관으로 이해하기: 신경망으로 숫자에서 패턴 찾기: 인공지능을 「신경망으로 숫자에서 패턴 찾기」 한 문장으로 풀어 보는 입문 노트. 컴퓨터에서는 사진·소리·바둑판이 모두 숫자이고, 사람이 순서도를 짜는 프로그래밍과 달리 딥러닝은 곱하기·더하기 구조의 가중치를 학습으로 찾는다. 층이 쌓이며 선에서 눈·다리로 올라가는 특징, 설명하기 어려운 이유, 강화 학습과 알파고에서 알파제로로의 변화, 전이 학습까지 다룬다.
루프 엔지니어링: 에이전트에게 한 턴씩 프롬프트하는 대신, 일을 찾고·맡기고·검증하고·기록하고·다음 단계를 고르는 루프를 설계한다. 자동화·워크트리·스킬·커넥터·서브에이전트·상태 파일로 구성하고, 검증과 이해는 사람이 끝까지 쥔다.
머신 러닝 기초: 네 단계 추상화: 머신 러닝은 데이터의 분포를 배워 예측하는 일이다. 문제를 데이터 → 모델 → 최적화 목표(손실 함수) → 최적화 알고리즘의 네 단계로 나눠 보면 어떤 기법이든 자리를 찾을 수 있다. 최소제곱법과 그 행렬 풀이(정규 방정식)를 예로 들고, K-겹 교차 검증과 데이터 누수, 과적합·과소적합, 확률과 우도의 차이와 MLE·MAP, 특징화, 규제(L1·L2)와 특징 스케일링의 구분, 차원의 저주와 PCA를 정리한다. 소프트웨어 엔지니어가 다시 초보자가 되어 머신 러닝 실무자로 넘어가는 법도 다룬다.
머신러닝 모델 서빙: 학습한 모델을 서비스에서 호출할 수 있게 띄우는 방법. VM·컨테이너·서버리스·모델 서버 같은 배포 형태와 CPU·GPU 추론 선택, 모바일·엣지 배포, 동기 API와 큐 기반 비동기 워커 중 무엇을 고를지, 가중치·이미지 분리, 배치 처리, 헬스 체크, 배포 게이트 같은 설계 원칙과, BentoML처럼 모델을 API·컨테이너로 묶어 주는 프레임워크의 역할을 정리했다.
멀티 에이전트: 여러 AI 에이전트가 조사·작성·검토·실행 역할을 나눠 일하는 방식. 목표 설정 → 분업 → 병렬 수행 → 통합 → 검토로 돌아가며, 에이전트 수보다 역할 설계와 연결(공유 컨텍스트·가드레일)이 품질을 좌우한다.
문자열·문서 유사도: 편집 거리와 코사인 유사도: 검색어와 제목처럼 짧은 문자열은 편집 거리·Jaro-Winkler로, 키워드 묶음처럼 긴 문서는 벡터화 후 코사인 유사도로 비교한다. L1·L2·L∞ 거리와 자카드 유사도, 희소 벡터의 한계, 문서가 많을 때의 역색인·LSH와 k-means 군집도 다룬다. 영화 검색·추천 기능에 적용한 파이썬 예제와 함께 정리.
미드저니 프롬프트 파라미터: 미드저니 프롬프트 끝에 붙이는 --ar, --s, --c, --w, --sref, --sw, --p, --v 같은 파라미터의 뜻과 범위를 크리스마스 디자인용 프롬프트 예시로 정리했다.
분류 모델 성능 평가 지표: 분류 모델은 혼동 행렬의 TP·FP·FN·TN으로 평가한다. 정밀도·재현율이 서로 맞바뀌는 이유, 정확도가 불균형 데이터에서 속이는 이유, 조화평균인 F1 점수, 임계값을 바꿔 그리는 ROC 곡선과 AUC(양성이 드물면 PR AUC), 회귀 지표 MAE·RMSE·MAPE·R²와 문제 유형별 지표 고르기, 객체 탐지의 IoU·PR 곡선·AP·mAP를 정리한다.
분산 데이터 처리: MapReduce, Spark, SQL 엔진: 한 서버로 감당할 수 없는 데이터를 클러스터로 처리하는 기술의 계보(GFS·MapReduce·Hadoop → Spark → Trino)와 핵심 원리를 정리했다. MapReduce의 한계, Spark RDD의 계보(lineage)·지연 실행·좁은/넓은 의존성, 지금의 표준인 DataFrame·Spark SQL, 객체 저장소 위 클러스터 운영 팁, 대화형 SQL 엔진이 빠른 이유, 열 지향 포맷 Parquet의 컬럼 선택·조건 푸시다운을 다룬다.
불확실한 지식으로 추론하기: 베이지안 분류기와 퍼지 추론: 불확실성을 다루는 두 추론 방식을 비교한다. 베이지안 추론은 경계가 분명한 부류 중 어디에 속하는지가 불확실할 때 베이즈 정리로 사후확률을 계산하고, 퍼지 추론은 '키 큰 사람'처럼 경계 자체가 흐릿할 때 0~1의 소속도로 집합과 논리를 확장한다.
비헤이비어 트리: 게임 AI·로봇·대화 시스템에서 행동을 고르는 트리 구조. 매 틱마다 루트부터 깊이 우선으로 평가하고, 노드는 Success·Failure·Running 중 하나를 돌려준다. Sequence·Selector·Parallel 복합 노드, 데코레이터, 액션·조건 리프로 행동을 조립하며, 상태 전이가 폭증하는 FSM보다 모듈화와 재사용이 쉽다.
서비스용 텍스트 분류 모델 만들기: 악성 댓글 탐지, 상품 카테고리 자동 분류처럼 실제 서비스에 넣는 분류 모델을 만들 때의 결정들. 라벨 기준 정의와 애매한 데이터 제외, 노이즈 많은 텍스트의 토큰화, 가벼운 모델을 고르는 이유와 BoW 선형 모델에서 TextCNN·BiLSTM·트랜스포머까지의 후보, 클래스 불균형, 모델로 라벨 오류 찾기, 사람이 고친 데이터로 재학습, 텍스트·이미지·메타데이터를 함께 쓰는 다중 입력 모델을 정리했다.
스케일과 지능 유틸리티: 합의가 예상한 한계를 넘어 규모를 키울 때 창발 속성이 나온다는 경험칙과, 규모를 키우면 터지는 기술·자본·사업·문화 문제를 하나씩 쪼개 푸는 시스템 관점. 킬러 앱을 사용자 행동에서 찾는 원칙, 지능을 전기 같은 새 유틸리티로 보는 비유와 '밤의 빛' 같은 구체적 효용의 필요, 토큰 단위로 추상화되는 소비와 추론 스택의 과소 투자, 무한한 수요가 만드는 컴퓨트 부족, 민주화와 집중의 갈림길, 교육의 재설계를 정리한다.
시각화 설계 과정: 과업 분석, 상호작용, 평가: 시각화 도구는 사용자가 데이터로 무엇을 하려는지(과업)를 먼저 끌어내고, 스케치와 프로토타입을 반복해 형태를 정하고, 개관 → 확대·필터 → 세부 순서의 상호작용을 붙인 뒤, 사용자가 얻은 통찰(정성)과 통제 실험의 정확도·속도(정량)로 평가한다.
시계열 분석: 정상성·분해·ARIMA에서 Prophet과 딥러닝 예측까지: 시간 순서로 관측한 데이터를 다루는 시계열 분석을 정리한다. 추세·계절성·주기 성분, 정상성과 ACF·PACF·단위근 검정, 로그 변환과 차분, 고전 분해와 STL, 기준 예측과 지수평활, ARIMA·SARIMAX와 GARCH 같은 확장, Prophet의 성분 모델과 주요 파라미터, 윈도 지도 학습·seq2seq·인과 합성곱 같은 딥러닝 예측, 시간 순서를 지키는 평가, DTW 거리로 하는 시계열 분류·군집까지 다룬다.
시스템 프롬프트 설계 패턴: 제품용 시스템 프롬프트는 정체성 → 거절 규칙 → 출력 형식 → 환경·도구 설명의 골격을 따른다. 안정적인 규칙은 시스템에, 요청마다 바뀌는 내용은 사용자 프롬프트에 나누는 법, 유출된 Copilot·Bing·ChatGPT·v0 프롬프트에서 반복되는 설계 패턴, 프롬프트 속 비밀은 지켜지지 않는다는 보안 교훈을 정리했다.
에이전트를 믿을 수 있는 환경 만들기: 에이전트를 한두 개 붙잡고 돌보는 단계에서 수십·수백 개를 병렬로 돌리는 단계로 가는 열쇠는 신뢰이고, 신뢰는 환경에서 나온다. 앱을 직접 실행해 증거를 모으는 검증 스킬(CLI + 기능 지도)과 검증용 테스트(E2E·속성 기반·차등 테스트), 엔지니어의 작업 방식을 담은 스킬, 그리고 에이전트를 교정할 때마다 고르는 다섯 층(코드베이스 → 정적 분석 → 규칙·리뷰 봇·스킬 → 스타일 가이드)을 정리했다. 나쁜 패턴이 바이러스처럼 번지는 이유, 지름길이 곧 옳은 길이 되는 에이전트 친화 프레임워크, 정원사 역할도 다룬다.
예측형 AI와 생성형 AI: 예측형 AI는 과거 데이터에서 분류·회귀·추천·이상 탐지 같은 좁은 답을 내고, 대개 직접 학습한 모델로 만든다. 생성형 AI는 사전 학습된 큰 모델 위에 프롬프트·컨텍스트를 얹어 열린 출력을 만든다. 두 방식의 개발 루프, 평가 방법, 흔한 함정과 대응을 비교한다.
웹 크롤링 전략: 정적·동적 판별과 수집 방식 고르기: 크롤링은 먼저 페이지가 정적인지 동적인지 판별하고, 공식 API → 숨은 데이터 엔드포인트 직접 호출(네트워크 리버싱) → 헤드리스 브라우저 순으로 가벼운 방식을 고른다. 브라우저 자동화는 편하지만 느리고 무거우며, 엔드포인트를 찾으면 훨씬 가볍고 빨라진다. 로그인 페이지의 쿠키·세션·CSRF 토큰, 브라우저 자동화의 암묵적·명시적 대기, 멀티프로세싱·스레드·비동기로 병렬 수집하는 법도 다룬다.
웹 AI 플랫폼 고르기: 클라이언트, 서버, 하이브리드: 웹 AI는 모델이 어디서 도나(브라우저 / 서버)와 얼마나 고칠 수 있나(가중치 접근)로 네 가지 선택지가 생긴다. 내장 AI·커스텀 클라이언트 모델·관리형 API·자체 호스팅을 모델 성능·비용·프라이버시·호환성·유지 보수로 비교하고, 요구 사항에서 플랫폼을 고르는 법과 클라이언트 우선 하이브리드 라우팅을 정리한다.
이벤트 로그 설계와 수집: 지표와 의사 결정에 쓰는 이벤트 로그를 어떻게 설계하고 모으는지 정리했다. 보고 싶은 지표에서 거꾸로 로그를 정하기, 기록 시점의 기준 세우기, 매번 검증하기, 테이블 모양으로 남기기 같은 설계 원칙과 설계 순서, 품질 문제의 원인과 대응, who·what·how·when 구조, 스키마로 로그를 공유하는 법, 클라이언트·서버 로그의 차이, 에이전트 → 스트림 버퍼 → 원본 저장소·검색 인덱스로 이어지는 수집 파이프라인과 수집 자체를 감시하는 법을 다룬다.
자연어 처리 파이프라인: 전처리부터 언어 모델까지: 자연어 처리(NLP)는 사람의 언어를 컴퓨터가 다루게 하는 분야다. 표현·분류·구조 분석·중의성 해소·언어 모델·시퀀스 변환으로 나뉘는 과제, 데이터셋 준비 → 전처리(토큰화·정제·정규화·인코딩·패딩) → 모델 학습 → 평가·예측의 흐름, 한국어 데이터셋, 교착어 토큰화, 원-핫·TF-IDF·임베딩 층 같은 표현 방식, n-gram부터 트랜스포머·LLM까지의 언어 모델 계보와 퍼플렉서티, 학습 이전의 구문 분석·지식 그래프, 스펙트로그램에서 출발하는 음성 인식과 음성 합성을 정리한다.
조직 AX: 개발 자동화에서 전사 AI 전환까지: AI 전환(AX)을 개발팀 도구에서 조직의 일하는 방식으로 넓히는 과정. 과거 PR 재현·레거시 마이그레이션·신규 서비스 실험으로 자동화 가능성을 재면 실패 원인이 AI가 아니라 요구사항과 맥락 부족임이 드러난다. 맥락을 핵심 자산으로 삼는 원칙, 한 달짜리 Quick Win, 비개발자 온보딩 허들과 GUI 우회, 설치·인증·배포를 감춘 사내 AI 플랫폼, 보안 스캔·승인·인증 프록시를 갖춘 바이브 코딩 앱 배포 파이프라인을 정리한다.
지능형 튜터링 시스템과 베이지안 지식 추적: 지능형 튜터링 시스템(ITS)은 학습자가 무엇을 알고 모르는지 추정해 맞는 문제와 피드백을 주는 교육 소프트웨어다. 생성 규칙과 버그 규칙으로 이뤄진 도메인 모델, 숙달 정도를 기록하는 학생 모델, 정답·오답 관찰로 숙달 확률을 갱신하는 베이지안 지식 추적의 네 확률(사전·전이·추측·실수)과 갱신식, 숙달 학습과 적응형 순서, 교육 데이터 마이닝, 대규모 온라인 강좌가 부딪힌 피드백 문제를 정리한다.
책임 있는 AI: 윤리, 프라이버시·공정성·신뢰: AI의 판단은 데이터와 설계자의 선택이 담긴 산출물이라는 관점에서, AI 거버넌스의 세 축인 프라이버시·공정성·신뢰와 투명성을 데이터·지능·UX 세 층에 나눠 무엇을 할지 정리한다. 덜 모으고 PII를 지우고, 데이터 편향(COMPAS, 하위 집단 누락)을 점검하고 신고 경로를 열고, 사용자를 '보정된 신뢰'로 이끌며, 트롤리 딜레마·모럴 머신처럼 정답 없는 판단은 명시하고 공론화한다.
컴퓨터 비전 기초: 커널과 합성곱에서 CNN까지: 컴퓨터 비전은 픽셀 격자에서 높은 수준의 의미를 뽑는 분야다. 영상 처리와의 차이, 분류·탐지·분할·특징·매칭·3D·추적·생성의 세부 과제와 대표 데이터셋, 픽셀 하나로 하는 색 추적, 주변 픽셀 묶음(패치)에 커널을 곱해 더하는 합성곱과 에지 검출, 약한 특징을 모아 얼굴을 찾는 Viola-Jones, 커널을 학습하는 합성곱 신경망(CNN), 얼굴 랜드마크에서 표정·생체 인식으로 올라가는 추상화 층을 정리한다.
클라이언트 사이드 웹 AI: 내장 AI API, 라이브러리, 런타임: 브라우저에서 AI를 돌리는 방법은 브라우저가 들고 있는 모델을 부르는 내장 AI(Chrome의 Summarizer·Translator·Prompt API 등)와, Transformers.js·WebLLM 같은 라이브러리로 직접 고른 모델을 돌리는 방식 두 가지다. Chrome 내장 AI API의 현재 상태와 쓰는 법, 라이브러리별 쓰임, Wasm·WebGPU·WebNN 런타임을 정리한다.
파이썬 데이터 분석 프로세스: 데이터를 구하고 NumPy·pandas로 처리한 뒤 탐색적 데이터 분석(EDA)과 시각화로 패턴을 찾고, 필요하면 성능을 개선하는 파이썬 데이터 분석의 흐름.
퍼셉트론과 다층 퍼셉트론: 퍼셉트론은 입력과 가중치의 합을 활성화 함수에 통과시키는 인공 뉴런이자 선형 분류기다. 퍼셉트론 학습(경사 하강·델타 규칙), XOR 문제로 드러난 한계, 은닉층을 쌓은 다층 퍼셉트론(MLP)과 오류 역전파 알고리즘, 그 행렬 표기를 정리한다.
평가 주도 개발(EDD): AI 기능을 테스트하며 다듬기: 평가 주도 개발은 TDD를 AI의 불확실성에 맞게 바꾼 개발 방식이다. 문제를 API 계약처럼 정의하고, 제로샷 기준선을 만들고, 결정적 검사·사람·LLM 심판을 섞은 평가 체계를 세운 뒤, 작고 겨냥한 수정으로 프롬프트를 개선한다. 프롬프트·지표·테스트 입력은 코드처럼 버전 관리하고 CI에서 회귀를 막는다.
프로덕트 데이터 분석: 지표, 로그, 실험: 서비스에 쌓이는 사용자 데이터로 제품을 계속 고치는 일. 서비스를 보는 틀(AARRR) → 로그를 지표로 → 지금 가장 중요한 지표(OMTM) → 쪼개서 들여다보기의 순서로 진행한다. 지표의 조작적 정의, 저량과 유량, 허무 지표, 선행 지표, 로그가 분석의 전제인 이유, 심슨의 역설·코호트·퍼널, A/B 테스트와 밴딧, 결과를 행동으로 옮기는 법을 정리한다.
프롬프트 작성법 치트시트: 목표·맥락·과제·제약·형식·예시를 채우면 프롬프트가 된다. 어떤 LLM에나 통하는 원칙(분명하게, 이유를 붙여, 예시로 보여 주고, 구조를 나누고, 금지 대신 할 일을), 앱에 넣는 프롬프트의 구성 요소, 제로샷·퓨샷·생각의 사슬·자기 성찰 기법, 역할·어조·형식을 골라 끼우는 예시를 한 장으로 정리했다.
프롬프트에서 하네스로: 에이전틱 패턴의 진화: AI 개발의 중심은 프롬프트 엔지니어링(무엇을 말할까) → 컨텍스트 엔지니어링(무엇을 보여 줄까) → 하네스 엔지니어링(어떤 시스템을 만들까)으로 옮겨 왔다. 엔지니어링의 엄밀함은 사라지지 않고 위치만 옮긴다. 각 단계의 핵심 기법(CoT·ReAct·플로우 엔지니어링, Write/Select/Compress/Isolate, KV 캐시, 하네스 2×2), 실전 사례, 치명적 삼요소와 2의 규칙을 정리한다.
AI 2027: 초지능 도래 시나리오와 정렬 문제: AI Futures Project가 낸 초지능 도래 예측 시나리오. AI가 AI 연구를 자동화하면서 진전이 복리로 빨라지는 지능 폭발, 그 과정에서 모델의 목표가 사양(Spec)과 어긋나는 정렬 실패, 미·중 경쟁과 모델 가중치 탈취, 정부·기업의 권력 집중을 하나의 연대기로 그리고, 경쟁(race)과 감속(slowdown) 두 결말로 갈라진다. 시나리오에 쓰인 핵심 개념(진전 배수, 작업 시간 지평, IDA, 뉴럴리즈, 정렬·통제 기법)과 한계를 정리한다.
AI 기능 기획: 시스템 블루프린트와 유스케이스 발굴: 웹 서비스에 AI 기능을 넣기 전에 기회(유스케이스·가치) → 솔루션(데이터·지능·UX) → 거버넌스의 세 관점으로 지도를 그린다. 가치 범주로 아이디어를 내고, 사용자 여정에 배치하고, 데이터 준비도·비용·실패 모드를 따져 우선순위를 정한 뒤 끝에서 끝까지 이어지는 프로토타입으로 검증한다.
AI 기능의 UX 패턴: 배경형·제한형·개방형: AI 기능은 사용자에게 드러나는 정도에 따라 배경형(조용히 기존 경험을 돕는다), 제한형(버튼으로 정해진 작업을 부른다), 개방형(자유 입력)으로 나뉜다. 노출이 클수록 유연하지만 위험도 커진다. 유형별 예와 모범 사례, 둘 중 고르는 기준, 투명성·안내·제어·신뢰 보정·실패 관리 패턴 표를 정리한다.
AI 네이티브 프론트엔드 개발: 코드를 AI만으로 쓰는 팀에서 프론트엔드가 일하는 방식. 금지 규칙 대신 대화로 뽑은 스킬, 구조를 직접 바꾸며 이해하기, 의도 정렬 순서, 이슈·PR로 맥락 관리, 병렬 작업과 이탈 감지, 디자인 픽셀 비교와 상태 재현 환경, BE·디자인을 정본으로 삼아 FE를 얇게 만들기, AI에게 관측 통로 달아 주기, 통합과 완성도로 옮겨 가는 역할을 정리한다.
AI 모델로 완성도 높은 프론트엔드 디자인 뽑기: AI는 상상보다 모방을 잘한다. 디자인 시스템·시각 레퍼런스(와이어프레임·스크린샷·무드보드)·서사·검증 도구를 미리 주고 기본 폰트·아이콘을 바꾸면 흔한 템플릿 대신 의도가 분명한 UI가 나온다.
AI 시대 개발자의 역할: LLM이 코드 작성을 맡게 되면서 개발자의 일은 모호한 요구를 명확한 문제로 재정의하고, 비결정적 AI를 결정적 검증 장치(하네스·오라클)로 묶고, 결과를 판단·책임지고, 코딩하며 저절로 쌓이던 맥락을 따로 보존하는 쪽으로 옮겨 갔다. 구조적 한계, 시장의 변화, 지시에서 위임으로의 전환, 길러야 할 역량을 정리했다. AI가 주니어의 일을 가져간 뒤 의도적 연습을 일부러 설계하고 시니어가 가르치는 법을 배워야 하는 이유도 정리했다.
AI 이미지를 쓸모 있는 벡터로 바꾸기: 미드저니로 그린 래스터 이미지를 업스케일러로 키우고 일러스트레이터 이미지 추적(Image Trace)으로 벡터화하면, 지저분한 픽셀이 정리된 편집 가능한 벡터를 쉽게 얻는다. 단계별 역할과 추적 설정을 정리했다.
AI 코딩 실무 가드레일: AI 코딩 에이전트로 프로덕션 코드를 다룰 때의 실무 규칙. 프로젝트 규모에 따른 세 가지 모드, CLAUDE.md와 앵커 주석(AIDEV-NOTE), 테스트는 사람이 쓴다는 원칙, 맥락을 아끼지 않는 프롬프트, 작업마다 새 세션, AI가 건드리면 안 되는 영역과 실수의 등급을 정리한다.
AI 플랫폼 전환과 일의 재편: AI를 클라이언트·서버, 웹, 모바일·클라우드에 이은 플랫폼 전환으로 보는 관점. 이전 플랫폼 위에 쌓여 확산이 빠르고, 모델은 SQL 같은 안정된 층이 되며, 제품의 핵심은 메모리·도구 사용·권한(entitlements)을 갖춘 스캐폴딩과 데이터 피드백 루프다. 성과의 기준은 벤치마크가 아니라 실물 경제의 잉여이고, 가장 큰 병목은 기술이 아니라 일의 방식과 직무를 바꾸는 변화 관리다. 소프트웨어 엔지니어는 아키텍트가 되고, 리더십은 명확성·에너지·과잉 제약 문제 풀기로 정리된다.
AI로 개발 가속하기: AI 네이티브 작업 방식과 규칙을 키우는 개발: AI를 가끔 꺼내 쓰는 도구가 아니라 리서치·기획·구현·테스트·운영 전반에 깔린 협업자로 다루는 작업 방식. AI부터 시도하고 사람이 검증하는 원칙과 도입 단계, 도구 네 범주와 개발 생명 주기별 활용, 거대한 한 방 프롬프트와 도메인 지식 문서, PRD → 태스크 리스트 흐름, AI가 짜고 사람이 검토하는 바이브 코딩의 현실적 패턴, 이상 행동을 볼 때마다 규칙을 더하는 Rule-Growing Development, AI가 코드를 찾는 방식을 고려한 주석·이름, AI가 맡을 수 있는 작업 길이, 팀·윤리 규칙과 사람의 역할을 정리한다.
AI에게 일 맡기기: 권한·정보·도구: 코딩 에이전트를 사람에게 일을 맡기듯 다루는 틀. 일을 잘할수록 권한을 넓히고 못하면 좁히는 위임 단계, 기대 출력·관찰 창·되돌릴 지점으로 하는 모니터링, What·Why를 전하는 STICC와 How가 필요할 때의 인지 작업 분석(CTA), 되묻게 하기·불확실성 지도·메타 프롬프트, 템플릿과 문서 같은 컨텍스트, 꼭 필요한 MCP만 붙이기와 검증 도구, 그리고 이를 묶은 하루 작업 흐름을 정리한다.
Claude 스킬 만들기 가이드: Anthropic의 스킬 제작 가이드 요점: 3단계 프로그레시브 디스클로저, 트리거를 담은 description, 폴더·이름 규칙, 테스트와 증상별 대응, 배포 방식과 팀 공용 스킬 패키지화, 실전 패턴 5가지.
Claude Code 활용 가이드: 채팅형 AI와 무엇이 다른지부터 설치, 질문 → 편집 → 도구 → 맥락 → 자동화로 익숙해지는 순서, 슬래시 명령·단축키, MCP 연결, Skills와 CLAUDE.md, 팀 설정 공유, 권한 모드와 자동 모드, `claude -p` 자동화, Claude Code에 맞는 프롬프트 습관, 개발 팀장처럼 위임하는 작업 방식까지 Claude Code를 쓰는 데 필요한 요점을 한 장으로 정리.
Claude Code 훅: 도구 호출 앞뒤에 규칙 걸기: 훅은 Claude Code의 특정 시점(도구 실행 전후, 응답 종료, 압축 전 등)에 내 명령을 자동으로 실행하는 장치다. 포맷터·타입 검사·민감 파일 차단처럼 모델에게 부탁하지 않고 반드시 지켜야 하는 규칙을 건다. 이벤트 종류, 설정 위치와 matcher, 표준 입력 JSON과 종료 코드 2의 의미, .env 읽기 차단 예제, 유용한 훅, 보안 주의점과 디버깅 방법을 정리했다.
Jupyter Notebook: 코드·실행 결과·마크다운 문서·시각화를 한 파일에 담는 웹 기반 인터랙티브 개발 환경으로, 데이터 과학의 사실상 표준 도구.
LLM 보안 공격: 탈옥, 프롬프트 인젝션, 데이터 중독: LLM이 새 컴퓨팅 스택이 되면서 운영체제처럼 고유한 보안 문제가 생겼다. 안전 학습을 우회하는 탈옥(역할극, Base64, 최적화된 접미사, 노이즈 이미지), 외부 데이터에 숨긴 지시로 모델을 가로채는 프롬프트 인젝션(숨은 글씨, 검색 결과, 공유 문서로 데이터 빼내기), 학습 데이터에 심는 데이터 중독·백도어를 수법별로 정리했다. 공격마다 방어가 나오고 다시 우회되는 고양이와 쥐 게임이다.
LLM 서빙의 병목: KV 캐시, 배치, GPU: LLM을 수억 명에게 서비스할 때 병목은 연산보다 GPU 메모리인 경우가 많다. 어텐션 비용과 KV 캐시, 산술 강도와 배치 크기, GPU 사용률이 속이는 지표인 이유, 지역보다 GPU를 따라가는 배치, 오토스케일이 안 되는 상황을 정리했다. PagedAttention·연속 배치·프롬프트 캐싱 같은 지금의 서빙 기법과 H100·H200·B200의 연산 대비 메모리 대역폭도 다룬다.
LLM 위키: LLM이 쓰고 관리하는 지식 창고: 질문할 때마다 원문 조각을 다시 찾는 RAG 대신, LLM이 원문을 읽어 서로 링크된 마크다운 위키를 쌓고 고쳐 나가는 지식 관리 패턴이다. 원문·위키·스키마의 세 층, 입수·질의·점검 세 작업, index와 log 파일, 유사도 검색이 관계형 질문에 약한 이유와 대안을 정리한다.
LLM은 무엇을 하고 왜 작동하나: 대규모 언어 모델은 '지금까지의 글에 이어질 그럴듯한 다음 토큰'을 하나씩 확률로 고르는 기계다. 다음 토큰 예측, 매개변수 파일과 실행 코드 두 개로 된 모델, 인터넷의 손실 압축으로서의 사전 학습과 환각, 역전 저주, 임베딩, 트랜스포머 내부 구조, 기본 모델에서 어시스턴트로 가는 학습 단계, 스케일링 법칙, 계산 환원 불가능성에서 오는 한계와 이를 보완하는 시스템 2 추론·자기 개선·도구 사용까지 정리한다.
MLOps: 머신러닝을 운영 환경에서 굴리기: MLOps는 머신러닝(ML)과 운영(Ops)을 합친 말로, 모델을 서비스에 올리고 데이터·모델 버전 관리, 모니터링, 재학습까지 계속 돌리는 일이다. 생명 주기별 구성 요소와 도구, 프로젝트를 고르고 지표·베이스라인을 정하는 법, Kubeflow Pipelines로 본 학습·배포 파이프라인, ML 시스템에 필요한 테스트, 피처 테이블과 학습·서빙 불일치를 막는 법, 파이프라인을 먼저 잇고 모델은 나중에 키우는 원칙을 정리했다.
newspaper로 기사 본문 추출하기: 사이트별 파서 없이 뉴스·블로그 기사에서 제목·작성자·발행일·본문·이미지를 뽑는 파이썬 라이브러리 newspaper. 관리가 멈춘 newspaper3k 대신 같은 API의 newspaper4k를 쓰고, download → parse → nlp 순서, Source로 사이트 기사 URL 모으기, Configuration으로 언어·헤더·프록시 다루기를 정리한다.

Recommender System4

사용자가 좋아할 아이템을 예측해 골라 주는 추천 시스템을 묶은 주제다. 추천이 나오는 세 자리, 협업·콘텐츠 기반 필터링의 기초, 후보 생성 → 랭킹의 딥러닝 구조, 밴딧과 실시간 피드백·A/B 테스트를 하위 노트로 나누고, 실서비스에서 반복되는 설계 원칙을 정리했다.

딥러닝 추천 시스템: 후보 생성과 랭킹: 아이템이 수십만~수억 개일 때 쓰는 딥러닝 추천의 2단계 구조(후보 생성 → 랭킹)를 정리했다. 최근 본 아이템으로 다음 아이템을 맞히는 학습, word2vec을 아이템 시퀀스에 적용한 Item2Vec, 맥락을 조건으로 넣는 법, 사용자 벡터와 근사 최근접 이웃 검색으로 바꾸는 서빙, 학습·배포 파이프라인, RNN·트랜스포머 순차 추천, 여러 서비스의 이력과 이미지·텍스트를 합치는 크로스오버·멀티모달 추천, 장기 가치와 파운데이션 추천 모델로 가는 흐름을 다룬다.
실시간 추천과 실험: 밴딧, 피드백 지연, A/B 테스트: 뉴스처럼 수명이 짧은 콘텐츠를 사용자 반응에 맞춰 바로바로 추천하는 방법을 정리했다. ε-greedy·톰슨 샘플링·UCB로 탐색과 활용을 오가는 멀티암드 밴딧, 사용자 군집·아이템 특징과 밴딧을 묶은 타기팅, 뉴스용 보정(시간 감쇠·위치 편향·중복 회피), 클릭률의 한계와 열독률, 피드백 지연이 성능에 주는 영향, 실시간 파이프라인 구조, 노출 편향을 걷어 낸 인기 콘텐츠, 버킷 A/B 테스트, 여론에 영향을 주는 추천의 투명성과 사용자 조절권을 다룬다.
추천 시스템 기초: 협업 필터링과 콘텐츠 기반 필터링: 추천 시스템의 두 기둥인 협업 필터링(행동 데이터)과 콘텐츠 기반 필터링(아이템 내용)을 정리했다. 명시적·암묵적 피드백, 베이스라인 모형과 이웃 기반 CF(유사도·KNN 가중 평균), 편향을 더한 행렬 분해(ALS)와 디노이징 오토인코더, 아이템·태그 공동 임베딩, 오디오·텍스트·이미지 임베딩, 둘을 섞는 앙상블과 폴백, 콜드 스타트·희소성·인기 편향, 오프라인·온라인 평가 지표, 알고리즘보다 추천 자리와 비용을 먼저 정하는 원칙을 다룬다.

Tools

개발과 협업, 분석, 3D 작업에 쓰는 도구들의 사용법 모음.

개발 도구 지형도와 세상을 바꾼 오픈소스: 개발 도구를 개발 환경·다이어그램·AI·호스팅·코드 품질·보안·노트·디자인 범주로 나눈 지도와, 범주별로 무엇을 갖추면 되는지 정리한다. 웹·데이터·개발 도구·머신러닝·컨테이너 분야의 판도를 바꾼 오픈소스, 큰 기업이 시작한 오픈소스와 기업이 코드를 공개하는 이유, AI 앱의 쓰임새 범주도 함께 다룬다.
구글 검색 연산자: 따옴표·OR·제외·와일드카드 같은 기본 연산자와 site:·intitle:·filetype: 같은 고급 연산자로 구글 검색 결과를 좁히는 법. 일부 연산자는 이미 사라졌으니 조합해 쓰기 전에 동작을 확인한다.
다이어그램 코드: 코드로 그리는 아키텍처 그림: 다이어그램을 그림 도구 대신 텍스트·코드로 작성해 버전 관리·리뷰·재생성을 가능하게 하는 방식. 클라우드 아키텍처를 파이썬으로 그리는 Diagrams, 문서 안에서 렌더링되는 Mermaid·PlantUML, 마크다운을 마인드맵으로 바꾸는 Markmap, JSON을 그래프로 보여 주는 JSON Crack 등 도구별 쓰임과 고르는 기준을 정리한다.
워드프레스: 철학, 테마·플러그인 고르기, 속도, 생태계: 웹의 큰 몫을 차지하는 오픈 소스 CMS 워드프레스. '옵션이 아닌 결정', 80% 규칙 같은 설계 철학, 테마·플러그인을 고르는 기준, 사이트를 빠르게 하는 순서, 실력을 쌓는 길과 GPL 위에서 돌아가는 비즈니스 모델을 정리했다.
유의적 버전(SemVer): MAJOR.MINOR.PATCH 세 숫자로 변경의 성격(호환 깨짐, 기능 추가, 버그 수정)을 알리는 버전 규칙. 각 자리를 올리는 기준과 예시 흐름, 0.x 단계의 의미, 프리릴리스와 빌드 메타데이터, 버전 비교 순서, npm의 ^·~ 범위가 SemVer에 기대는 방식을 정리했다.
Blender: 무료 오픈소스 3D 제작 도구 Blender의 화면 조작과 변형 단축키, Edit 모드, 모디파이어, 메시 편집 도구, 그리고 모델링 이후의 Shading → Material → UV → Rigging 흐름.
Compressor로 영상 용량 줄이기: Apple 실리콘(M1 이상) Mac에서 Compressor로 MPEG-4 프리셋을 만들어 하드웨어 인코딩하면 빠르다. 비트레이트를 4,500Kbps로 지정해 보관·공유용으로 용량을 줄이는 설정을 정리했다.
DBeaver에서 SQL로 데이터 다루기: 여러 DBMS를 한 화면에서 다루는 무료 GUI 클라이언트 DBeaver의 특징, PostgreSQL 연결 방법, SQL 편집기로 데이터를 조회·수정하는 방법과 주의점.
GA4 시작하기: GA4 계정·속성을 만들고 gtag.js 또는 Google Tag Manager(Google 태그)로 웹사이트에 추적 태그를 설치하는 과정.
Google Sheets vs Excel: 엑셀보다 느리지만 공동 작업·클라우드·배열 함수·Apps Script 덕분에 협업과 자동화에 강한 Google Sheets의 장점.
Jira: 이슈 구성, JQL, 워크플로: Jira 이슈의 주요 필드와 Epic·Component·Label을 구분해 쓰는 기준, JQL로 이슈를 구조적으로 검색하는 방법, 워크플로·Board·Sprint·스토리 포인트로 팀 업무를 운영할 때의 원칙과 실무 팁.
LaTeX 시작하기: 내용과 서식을 분리해 논문·문서를 조판하는 LaTeX의 특징, 설치(TeX Live·MacTeX)와 Overleaf, 문서 기본 구조와 한글(kotex) 설정, 입문 자료.
Markdown 문법: 간단한 기호만으로 제목·목록·코드·링크·표 등을 표현하는 경량 마크업 언어의 기본 문법과 Mermaid 다이어그램, markdownlint.
Retool: 로우 코드로 내부 도구 만들기: 어드민 페이지·대시보드 같은 내부 도구를 UI 개발 없이 약간의 JS와 SQL로 만드는 로우 코드 플랫폼 Retool의 특징과 어울리는 쓰임.
Segment로 사용자 데이터 수집하기: 한 번 심은 이벤트 추적 코드로 여러 분석·마케팅 도구에 데이터를 보내는 CDP Segment의 Source·Destination 구조, Track·Identify 스펙, Cloud/Device 모드, Warehouse, 디버깅.
The Missing Semester: CS 교육에서 빠진 도구 학기: MIT의 무학점 과정 The Missing Semester는 전공 수업이 가르치지 않는 셸, 편집기, Git, 디버깅, 패키징, 코드 품질 도구와 코딩 에이전트 활용을 9강으로 다룬다. 강의별 핵심 개념과 도구, 이 창고의 관련 노트를 지도처럼 묶었다.
tmux: 터미널 멀티플렉서: 터미널 하나에서 여러 세션·창·분할 화면을 다루고, SSH 연결이 끊겨도 작업을 서버에 살려 두는 터미널 멀티플렉서 tmux의 개념과 기본 키.
Vim과 Neovim: ed에서 vi, Vim, Neovim으로 이어진 모드형 편집기의 계보와 두 편집기의 차이, 설정 파일과 플러그인 관리, 공백 표시·접기·연속 숫자·<expr> 매핑·복사 강조·시스템 클립보드 같은 편집 기술, 편집기 밖에서 Vim 키를 쓰는 방법(man 페이지, Vimium).
VS Code 설정과 활용: settings.json과 설정 동기화, launch.json으로 C 프로그램 디버깅, 브라우저에서 저장소를 여는 github.dev, 생산성을 올리는 확장 프로그램까지 VS Code를 쓰며 알아 두면 좋은 기능 모음.

Chrome DevTools9

Chrome에 내장된 웹 개발자 도구 모음. 여는 법, 할 일별로 어느 패널을 쓰는지, 명령 메뉴·단축키·설정, 검색·문제·변경사항 같은 보조 도구를 한곳에 모은 DevTools 노트 안내.

DevTools Application 패널: 저장소·서비스 워커: Application 패널은 매니페스트·서비스 워커·캐시 저장소(PWA), Local/Session Storage·IndexedDB·쿠키, 저장소 지우기, bfcache 테스트, 추측 규칙(prefetch·prerender) 디버깅, 프레임 보안 정보를 한곳에서 보고 고치는 곳이다. 무엇을 확인하려 할 때 어느 탭을 열고 무엇을 보는지 정리한다.
DevTools Console 활용: Chrome DevTools 콘솔로 메시지를 읽고 걸러 내는 법, console.table·group·time·assert·count·trace 같은 Console API와 %c 서식, 실시간 표현식, $0·$_·$()·$$()·copy()·monitorEvents·getEventListeners·queryObjects 같은 콘솔 전용 유틸리티, 페이지 위에서 JavaScript를 실행하는 법을 정리했다.
DevTools Network 패널: 리소스가 실제로 오가는지, 헤더·페이로드·응답·쿠키가 무엇인지, 어느 단계에서 시간이 드는지 확인하는 패널. 기록·필터·검색으로 요청을 좁히고, 캐시 끄기·스로틀링·오프라인·요청 차단으로 조건을 바꾸고, HAR·fetch·cURL로 내보내거나 다시 보낸다. HTTPS·혼합 콘텐츠·서드 파티 쿠키는 개인 정보 보호 및 보안 패널에서 본다.
DevTools로 기기·환경 에뮬레이션하기: 기기 모드로 뷰포트·DPR·터치·기기 프리셋을, 네트워크 상태 패널로 사용자 에이전트를, 센서 패널로 위치·방향·유휴 상태를, 렌더링 탭으로 다크 모드·모션 감소·인쇄·색각 이상을 흉내 낸다. 흉내로 부족하면 Android 원격 디버깅·WebView 검사·포트 포워딩으로 실기기에서 확인하고, WebAuthn 패널로 가상 인증기를 만든다.
DevTools로 성능·메모리 분석하기: Performance 패널의 실시간 지표 화면과 트레이스 녹화·읽기(메인 트랙, 플레임 차트, Bottom-up·Call tree, 긴 작업, 인사이트, 주석, 저장·공유, 선택기 통계), 성능 모니터, 렌더링 탭과 레이어 패널, 커버리지, 메모리 패널로 누수·팽창·잦은 GC를 찾는 절차, Lighthouse 실행법을 정리한다.
DevTools로 DOM과 CSS 다루기: Elements 패널에서 DOM을 고르고 고치는 법, 스타일 창의 취소선·흐림·경고 표시로 CSS가 안 먹는 이유를 읽는 법, 상태 강제(:hov)·색상 선택기·Flex/Grid/컨테이너 오버레이·애니메이션 패널로 레이아웃과 움직임을 디버깅하는 법, CSS 개요·자동 완성 패널, 접근성 트리·대비·포커스 검사까지 정리한다.
DevTools로 JavaScript 디버깅하기: Chrome DevTools Sources 패널로 JavaScript를 디버깅하는 법. 상황별 중단점(줄·조건부·로그포인트·DOM·XHR/fetch·이벤트 리스너·예외·debugger 문), 단계 실행과 Scope·Watch·Call Stack, 스니펫, 소스 맵과 무시 목록, 로컬 파일에 저장하는 Workspaces와 응답을 바꿔 끼우는 로컬 재정의, Recorder까지 정리했다.
DevTools의 AI 지원과 에이전트용 DevTools(MCP): DevTools 안에서 Gemini와 채팅하며 스타일·네트워크·소스·성능을 묻는 AI 지원 패널과 코드 생성, 그때 Google로 가는 데이터와 끄는 정책, 그리고 코딩 에이전트가 MCP로 실제 Chrome을 조작하게 하는 Chrome DevTools MCP 서버(설정 플래그, 자동 연결, 에뮬레이션·Lighthouse·메모리·확장 프로그램·서드파티 도구)와 WebMCP 디버깅을 정리한다.

Code Review7

리뷰 코멘트와 PR 소통: 의도가 정확히 전달되는 리뷰 코멘트 쓰는 법, PR에서 자주 쓰는 약어(LGTM·IMO·NIT·PTAL), 리뷰를 받는 쪽의 태도와 PR 템플릿.
리팩터링 원칙: 마틴 파울러 『리팩터링』(2판) 1·2장에서 뽑은 원칙. 리팩터링의 정의, 기능 추가와 리팩터링을 나누는 두 개의 모자, 테스트 먼저, 3의 법칙, 성능은 다듬은 뒤에 챙긴다는 태도를 정리한다.
불리언 변수 이름 짓기: 불리언 변수 이름을 영어 문법에 맞게 짓는 네 가지 형태(is, 조동사, has, 3인칭 단수 동사)와 흔한 실수(is + 동사원형)를 정리한다. Bool·mutating·nonmutating 함수 이름을 구분하는 법도 함께 다룬다.
삭제하기 쉬운 코드: 코드는 쓰는 순간부터 유지 비용을 낳는다. 확장성과 재사용을 미리 설계하기보다, 바뀔 가능성을 기준으로 경계를 나눠 나중에 쉽게 버리고 바꿀 수 있게 쓴다. 쓰지 않기 → 복사 → 함수 추출 → 보일러플레이트 허용 → 래퍼 → 덩어리 → 변경 경계 분리의 단계로 정리한다.
코드 리뷰 원칙과 체크리스트: 코드 리뷰를 왜 하는지(품질이 비용을 낮추는 이유, 리뷰의 다섯 가지 효과), 작성자와 리뷰어가 할 일, 자동화할 것과 사람이 볼 것을 나누는 원칙, 리뷰를 빠르게 돌리고 교착을 푸는 운영법, 가독성·부작용·경계 조건·보안·성능·테스트 체크리스트.
코드 리뷰에서 자주 나온 지적: 코드 리뷰에서 자주 반복되는 JavaScript·React 코드 지적(const, else, 기본값, 불리언 이름, 빈 문자열 비교, 비동기 에러, 불변 업데이트, props 설계 등)을 고친 코드와 함께 정리.
Simple Design: 코드 품질을 '가독성'·'깔끔함' 같은 느낌 대신 객관적 기준으로 다루기 위해 켄트 벡의 Simple Design을 '중복이 없으면서 최소한의 문법 요소로 구성된 코드'로 줄여 쓰는 방법. 중복 제거 시점, 비용과의 타협, 본질적 복잡성 다루기, DRY·KISS·YAGNI와의 관계까지 정리한다.

Dev Environment5

운영체제별 터미널·Git 설치, 로컬 HTTPS, 빌드 도구와 IDE 오류, Python 버전 관리처럼 코드를 쓰기 전에 갖춰야 하는 개발 환경 설정 모음.

로컬 개발 환경에 HTTPS 적용하기: localhost는 대부분 보안 컨텍스트로 취급되지만 Secure 쿠키·HTTP/2·커스텀 호스트가 필요하면 로컬 HTTPS가 필요하다. mkcert로 내 기기만 믿는 로컬 CA를 만들어 인증서를 발급하고, 웹 서버·Node·프레임워크 개발 서버에 붙인다.
Java 빌드 도구와 IntelliJ 실행 오류: 빌드와 빌드 도구(Ant·Maven·Gradle)의 의미, JDK 설치 뒤 챙길 것, 그리고 IntelliJ가 힙 메모리 설정(-Xms > -Xmx) 때문에 조용히 죽을 때 원인을 찾고 고치는 법.
macOS에서 pyenv로 Python 환경 잡기: macOS의 시스템 Python을 건드리지 않고 pyenv로 원하는 버전을 설치·지정하는 순서와, VSCode에서 그 인터프리터를 고르고 프로젝트별 venv로 패키지를 분리하는 방법. 버전·가상환경·패키지를 한 번에 다루는 uv도 함께 정리했다.
Windows 개발 환경: 터미널, Git 설치, 줄바꿈: 터미널·셸의 뜻과 CMD·PowerShell·Git Bash의 차이, Windows용 Git 설치 때 고를 옵션, 그리고 Windows에서 자주 만나는 CRLF 줄바꿈 오류(Prettier의 Delete ␍)를 정리한 노트.

Git18

코드의 변경 이력을 기록하고 여러 사람이 동시에 작업할 수 있게 해 주는 분산 버전 관리 시스템.

대형 저장소에서 Git 빠르게 쓰기: 얕은 클론, refspec, 부분 클론, 희소 체크아웃: 커밋 이력과 파일이 많은 모노레포에서 clone·checkout·status가 느려지는 원인과 줄이는 방법을 정리했다. 이력을 자르는 얕은 클론, 받을 브랜치를 좁히는 단일 브랜치·refspec, 파일 내용을 나중에 받는 부분 클론, 작업 트리를 일부만 펼치는 희소 체크아웃, 파일 감시와 백그라운드 유지 보수까지 다루고 CI와 개발자 PC에서 각각 무엇을 쓰는지 정리한다.
모노레포와 폴리레포: 여러 서비스의 코드를 저장소 하나에 두는 모노레포와 서비스마다 저장소를 나누는 폴리레포(마이크로레포)를 구조·권한·의존성 버전·코드 품질 기준·도구 면에서 비교하고, 폴리레포에서 의존성 버전을 맞추는 방법으로 버전 세트 기반 빌드 시스템(Amazon Brazil)의 구조를 정리했다.
브랜치 전략: Git Flow, GitHub Flow, 트렁크 기반 개발: 팀이 브랜치를 어떻게 나누고 언제 합치는지 정한 규칙. 릴리스 주기가 긴 제품에 맞는 Git Flow(main·develop·feature·release·hotfix), 지속 배포에 맞는 GitHub Flow(main + 짧은 기능 브랜치 + PR), 하루 단위로 trunk에 합치는 트렁크 기반 개발을 비교하고 고르는 기준과 git-flow 도구의 현재 상태, 중앙 집중·기능 브랜치·포크 워크플로의 차이를 정리했다.
영어 커밋 메시지 동사 사전: 영어 커밋 메시지는 작문이 아니라 패턴이다. Fix·Add·Remove·Use·Update·Improve·Make·Ensure·Prevent·Avoid 같은 동사 20여 개와 in·to·for·when·where 같은 전치사 패턴만으로 대부분의 커밋을 쓸 수 있다. 동사별 쓰임과 서로 헷갈리는 동사의 구분, 간결하게 쓰는 규칙을 정리한다.
원격 저장소와 GitHub: Git(버전 관리 도구)과 GitHub(호스팅·협업 서비스)의 차이, remote·push·pull·fetch·clone으로 로컬 저장소를 GitHub 같은 원격 저장소와 동기화하는 방법과, 이력을 유지한 채 다른 서비스로 옮기는 미러링.
자주 쓰는 Git 설정 옵션: 개발자들이 실제로 켜 두는 git config 옵션을 pull·merge·rebase·diff·전역 설정별로 묶었다. 대부분 기본값의 불편함을 고치는 한 줄 설정이다.
작업 중인 변경 다루기: stash, worktree, clean: 커밋하기 애매한 작업을 잠시 치워 두는 stash, 브랜치를 바꾸지 않고 다른 브랜치를 옆 폴더에 펼치는 worktree, 추적하지 않는 파일을 지우는 clean을 정리했다. 잠깐 끼어든 일이면 stash, 오래 병행할 일이면 worktree가 기본이다.
커밋 컨벤션과 자동 검사: 좋은 커밋 메시지의 7가지 규칙(빈 줄, 50/72자, 명령문 제목, 무엇·왜 본문)과 type(scope): subject 형식의 컨벤션, 커밋 템플릿 설정, husky와 commitlint로 규칙을 자동 검사하는 방법.
Git 기본 명령과 파일 상태: Git이 분산 버전 관리 시스템으로서 중앙 집중식(SVN)과 다른 점, 저장소를 만들고 add·commit으로 버전을 기록하며, 파일이 untracked·modified·staged·committed 상태를 오가는 흐름, 작업 디렉터리·스테이징·로컬·원격 네 곳 사이에서 명령이 코드를 옮기는 방식. 커밋을 식별하는 해시도 함께 다룬다.
Git 되돌리기와 이력 다루기: reflog로 지나온 상태를 찾아 되돌리는 법과 상황별 복구 레시피(마지막 커밋 고치기, 다른 브랜치에 잘못한 커밋 옮기기, 파일 하나 되돌리기, 원격 상태로 초기화), reset·revert로 커밋을 되돌리고, cherry-pick으로 커밋 하나를 옮기며, 진행 중인 merge·rebase를 --abort로 취소하고, 푸시한 민감 정보·작성자를 filter-repo로 정리하는 방법. 공유된 이력이면 revert, 내 로컬 이력이면 reset이 기본이다.
Git 브랜치: 원본에 영향을 주지 않고 독립적으로 작업할 수 있도록 커밋 흐름을 나누는 Git의 핵심 기능.
Git 브랜치 병합: 갈라진 브랜치를 하나로 합치는 방법으로, Fast-Forward·3-Way Merge·Merge Conflict 세 가지 상황이 있다.
Git 이력 검색: log 필터, grep, pickaxe, blame, bisect: 커밋 이력에서 원하는 것을 찾는 방법을 질문별로 정리했다. 범위 표기(A..B, A...B)와 log 필터(작성자·기간·메시지·파일), 지금 코드에서 찾는 git grep, 코드가 생기거나 사라진 커밋을 찾는 pickaxe(-S, -G)와 log -L, 줄마다 마지막 수정을 보는 blame, 버그를 넣은 커밋을 이진 탐색하는 bisect까지 다룬다.
Git의 내부 구조: 객체와 인덱스: .git 폴더 안의 objects(blob·tree·commit)와 index가 add·commit 때 어떻게 만들어지는지, 내용 기반 해시(체크섬)로 데이터를 관리하고 변경분이 아닌 스냅숏을 저장하는 원리.
GitHub 이슈·프로젝트로 진행 상황 관리하기: GitHub Issues를 작업 목록으로, Projects를 우선순위·상태 보드로 쓰고, 이슈를 브랜치·커밋·PR과 연결하면 저장소 하나에서 팀의 진행 상황이 투명하게 보인다. 이슈 크기 기준, 마일스톤·하위 이슈·프로젝트 보드(Status 칸과 기본 워크플로)로 묶어 보는 법, 스크럼 대응, 팀 개발 흐름과 리뷰 제출 종류, 문서화 원칙을 정리했다.
GitHub 협업 저장소 설정: 팀 저장소를 처음 세팅할 때 할 일: 협업자·브랜치 보호 규칙·CODEOWNERS·이슈/PR 템플릿(마크다운 템플릿과 YAML 이슈 폼, config.yml)·라벨, 그리고 PR 알림 도구와 기능별 브랜치 습관.
merge·squash·rebase 언제 쓰나: PR을 합칠 때 merge 커밋, squash, rebase·인터랙티브 rebase를 상황에 따라 고르는 기준. 기본은 merge 커밋(진짜 이력, 쉬운 되돌리기, 잘게 쪼개진 bisect), 작은 diff에 WIP가 많으면 squash, 큰 diff에 WIP가 많으면 인터랙티브 rebase로 다듬는다.

Career

개발자로 일하며 성장하는 법, 협업, 의사결정, 제품 관점과 리더십, 구직 준비, 그리고 분야별 읽을 책 목록을 모은 커리어 메모.

개발 분야별 추천 도서: CS 기초, 알고리즘, 설계·코드 품질, DevOps·SRE, 프론트엔드·UX, 언어·도구, 일하는 방식·커리어까지 분야별 개발 서적과 각 분야의 입문 경로, 그리고 분산 시스템을 바꾼 고전 논문.

Job Search15

기술 면접 준비: 유형별 대비와 시스템 디자인 7단계: 개발자 기술 면접은 코딩, 시스템 디자인, 객체 지향 설계(OOD), 행동(behavioral) 면접으로 나뉜다. 유형별로 무엇을 보는지와 준비 자료, 퀴즈·온라인 코딩 테스트·과제·화상 면접·온사이트 같은 진행 형식별 대비, 면접 언어 고르기, 남은 시간에 맞춘 준비 계획(주제 우선순위, Blind 75·Grind 75), 코딩 인터뷰를 자기소개 → 질문 명확화 → 접근 논의 → 말하며 코딩 → 테스트 → 역질문으로 진행하는 법을 정리하고, 시스템 디자인 면접의 유형과 요구 사항 확인 → 용량 추정 → 상위 설계 → DB 설계 → 인터페이스 설계 → 확장성 → 신뢰성의 7단계를 다룬다.
면접 잘 보는 법: 태도와 답변: 면접관은 말보다 태도를 먼저 읽는다. 눈 맞춤과 미러링, 일찍 도착하기, 겸손과 감사, 결론부터 짧게 답하기, 이력서 숙지와 모르면 모른다고 하기, 실수를 빨리 인정하기, 압박 면접 대응, 역질문과 감점되는 질문, 감사 메일, 기술 질문 준비, 면접에서 피할 회사를 가려내는 신호까지 면접 전·중·후의 원칙을 정리한다.
미국 개발자 채용 프로세스와 ATS: 미국 개발자 채용은 레주메·LinkedIn 준비부터 오퍼 협상까지 10단계로 흐른다. 지원 경로별 통과 가능성, 리크루터·하이어링 매니저의 역할, ATS가 실제로 하는 일, 7초 스캔과 Yes/Maybe/No 분류, 일찍 지원해야 하는 이유를 정리했다.
비상장 회사 재무제표 찾아보기: 비상장 스타트업의 매출·손익은 외부감사 대상이면 DART 감사보고서로, 벤처기업확인을 받았으면 벤처인 공시로 볼 수 있다. 이직·협업 전에 무엇을 어디서 보고 어떻게 읽을지 정리했다.
스톡옵션: 행사가, 베스팅, 행사와 세금 구조: 스톡옵션은 주식이 아니라 정해진 행사가로 주식을 살 수 있는 권리다. 부여 → 베스팅(클리프) → 행사 → 매도의 단계마다 조건과 비용이 붙는다. 세전 차익이 아니라 행사 대금, 세금, 매도 제약까지 반영한 실질 가치로 판단한다. 오퍼는 진입 가치 대비 성장 여지와 베스팅·행사 기간 같은 정책 두 축으로 평가한다. 미국 스타트업의 ISO·NSO, 409A, AMT 함정, 83(b) 선택, 퇴사 후 90일 행사 기간, RSU와 오퍼 때 물을 질문도 정리한다.
업무 경험에서 나의 역량 찾기: 재능과 흥미로 보는 역량 정리표: 해 본 일을 직무 역량 → 업무 성과 → 업무 수행 과정 관찰 → 나의 역량 키워드 네 칸으로 정리해 강점을 찾는 표. 과정을 관찰할 때 남과 비교해 쉬웠던 것은 재능, 시키지 않아도 즐겁게 한 것은 흥미(노력)로 나눠 적고, 둘이 겹치는 키워드를 자기소개서·이력서의 장점으로 쓴다.
연봉 협상: 오퍼 읽기, 열 가지 원칙, 회사 고르기: 취업은 일자리를 얻는 것이 아니라 내 노동을 파는 거래이고, 협상은 그 거래의 당연한 일부다. 기본급·보너스·지분·사이닝 보너스로 이뤄진 총보상(TC)을 읽는 법, 모든 것을 기록하기, 결정을 미루며 문 열어 두기, 정보 지키기, 긍정적인 태도, 결정권자를 밖에 두기, 대안(BATNA) 만들기, 이유 붙이기, 돈 밖의 조건, 상대가 중시하는 것 알기, 이길 수 있는 조건 주기의 열 가지 원칙, 복수 오퍼·시한부 오퍼 다루는 법, 오퍼를 비교할 때 볼 일곱 가지 축을 정리한다.
인성 면접 준비: STAR, 핵심 사례, 단골 질문: 인성·경험 면접(Behavioral Interview)은 과거 행동으로 일하는 방식과 연차에 맞는 범위를 본다. STAR(R)로 답을 짜는 법, 질문을 외우는 대신 핵심 사례 3~5개를 준비하는 법, 꼭 나오는 세 질문, 엘리베이터 피치로 하는 자기소개, 그리고 단골 질문과 회사별 질문을 무엇을 묻는지에 따라 묶어 답할 요소를 정리했다. Amazon 리더십 원칙 16개별로 실제로 나온 질문도 짝지었다. 경험형·가정형·가치관형 질문 형식, 답이 약해지는 패턴, 쓰기·녹화·모의 면접 연습법, 가치관·가정 질문을 더했다.
인성 면접 평가 기준: 8가지 영역과 레벨별 기대치: 빅테크 인성 면접은 동기, 주도성, 모호함 속 오너십, 끈기, 갈등 해결과 공감, 성장, 소통의 8가지 영역에서 신호를 모으고, 같은 행동이라도 영향 범위(나 혼자, 팀, 여러 팀)로 주니어·시니어·스태프를 가른다. 채용 추천이 나오는 방식, 시니어 지원자가 빠지는 함정, 이야기를 목차·결과 먼저로 전달하는 법, 불리하게 해석될 표현을 막는 방어적 사고를 정리했다.
자기소개서와 포트폴리오 쓰는 법: 국문 자기소개서는 나를 정의하는 문서가 아니라 어떤 상황에서 어떻게 행동했는지 보여 주는 문서다. 문제 해결 서사와 PREP 구성, 지원 동기를 채용 동기로 뒤집기, 주제별 우선순위(지원 동기 > 문제 해결 > 단점 > 장점 > 가치관 > 기술, 성장 배경·인성 자랑은 피하기), 장단점 전개법, 흔한 실수, 포트폴리오의 네 요소와 차별화, 채용 담당자가 포트폴리오를 읽는 방식(문제 해결 중심 선별, 첫인상, 요약이 앞에 오는 케이스 스터디), 이력서가 본문이고 포트폴리오는 부록이라는 역할 구분, 개발자 포트폴리오에서 과정을 보여 주고 외부 링크로 이탈시키지 않는 법을 정리한다.
초보 웹 개발자의 공부 방향과 차별화: 분야를 하나 깊게 파고, 클론코딩은 기능을 더해 내 것으로 만들고, 배포·블로그·오픈소스로 한 일을 드러내는 초보 웹 개발자의 학습·취업 준비 원칙, 면접관이 포트폴리오 코드에서 보는 평가 축과 README에 담을 것.
코딩 인터뷰 평가 기준과 면접관 체크리스트: 빅테크의 코딩 인터뷰는 소통, 문제 해결, 기술 역량, 테스트 네 축으로 평가하고 Strong hire부터 Strong no hire까지의 구간으로 점수를 낸다. 축별 기본·고급 신호와 구간별 판정, 점수가 전화 면접·온사이트 결과로 이어지는 방식, 그리고 면접관이 면접 전후에 지킬 체크리스트를 정리한다.
프론트엔드 면접 유형과 준비법: 프론트엔드 면접은 알고리즘보다 도메인 지식과 실전 구현을 본다. JavaScript 코딩, UI 코딩, 알고리즘, 퀴즈, 프론트엔드 시스템 디자인, 비헤이비어럴 여섯 유형별로 무엇을 보고 어떻게 준비하는지, 유형별 대표 문제, 시스템 디자인용 RADIO 프레임워크, UI 구현 때 짚을 체크리스트를 정리하고 개념은 Frontend 노트로 잇는다.
한국 개발자가 미국에서 일하는 경로: 비자가 먼저다: 미국 취업의 가장 큰 벽은 영어나 실력이 아니라 취업 비자다. H-1B 추첨의 구조와 2026년부터 바뀐 임금 가중 추첨, 미국 학위 → OPT → H-1B, 캐나다 지사 → L-1 전근, 영주권 같은 현실적인 경로와 지금 할 수 있는 준비를 정리했다.
합격하는 영문 레주메 작성법: 외국계 취업용 레주메를 한 장으로, 성과 중심으로 쓰는 법: ATS가 읽을 수 있는 서식, 섹션 순서, 연락처·학력 표기, 헤드라인을 단 2~3문장 Summary, 액션 동사와 숫자로 쓰는 경력, XYZ 공식, 미국식 직함·프로젝트·수상 쓰는 법, 채용 공고 키워드 반영, 커버레터 구조와 템플릿·흔한 실수, 리크루터에게 먼저 보내는 영문 메일, 개발 환경·생산성 경험을 드러내는 법.

Product21

공감하는 제품 만들기: 경청 세션과 스트레스 케이스: 공감은 친절이 아니라 상대의 사고 흐름을 이해하는 기술이다. 표면 의견 밑의 이유와 망설임을 듣는 경청 세션 진행법, 엣지 케이스를 스트레스 케이스로 바꿔 보는 관점, 사전 부검으로 해로운 시나리오를 미리 찾는 법을 정리했다.
기능 공장: 출시량이 아니라 결과를 보는 팀: 기능을 많이 내보내는 것을 성과로 착각하는 팀을 기능 공장이라 부른다. 측정·회고·사후 점검이 없고 로드맵이 기능 목록인 12가지 신호로 진단하고, 출력(output) 대신 결과(outcome)와 학습을 기준으로 일하도록 바꾼다.
기술 부채: 기술 부채는 지금 빠른 길을 택한 대가로 나중에 치르는 추가 작업이다. 원금(고치는 비용)과 이자(고치지 않아 매번 더 드는 비용)로 생각하고, 파울러의 사분면으로 원인을 나누며, 백로그 항목으로 보이게 만든 뒤 이자가 큰 곳부터 갚는다.
디자이너와 함께 일하기: 역할·채용·협업: 그래픽·인터랙션·UX 디자인의 차이, 디자이너를 뽑기 전에 정할 권한과 성공 기준, 서로 다른 관점을 섞는 팀 구성(경쟁가치모형), 디자이너·개발자·고객·브랜드 에이전시가 함께 일하는 원칙을 정리했다.
백로그와 추정: 에픽·사용자 스토리·스토리 포인트: 큰 목표를 에픽과 사용자 스토리로 쪼개고(3C, INVEST, 인수 기준), 스토리 포인트와 플래닝 포커로 상대 크기를 추정하고, 속도와 번다운·번업 차트로 진척을 본다. 각 도구는 계획을 돕는 설명 지표이지 성과 지표가 아니라는 점이 핵심이다.
사용자 리서치: 방법 고르기, 페르소나·시나리오, 사용성 평가: 더블 다이아몬드의 단계마다 맞는 리서치 방법이 다르다. 사용자를 직접 못 만나면 리뷰·상담 기록·포럼을 쓰고, 조사 결과는 근거 있는 페르소나와 사용 전·중·후 UX 시나리오로 정리해 UX 전략으로 잇는다. 화면은 닐슨의 10가지 휴리스틱 평가와 5명 단위 사용성 테스트로 검증하고, 큰 조직에서는 정기 세션으로 학습 문화를 만든다. 급할수록 맥락·분석 시간·자기 디자인에 대한 애착을 경계하고, 참가자 보호를 위한 윤리 절차를 갖춘다.
상세페이지 9단계 구조: 상세페이지는 고객이 의심을 하나씩 풀며 구매 버튼까지 스크롤을 내리게 하는 싸움이다. 유입과 전환, 세일즈 퍼널을 바탕으로 판매 증거 → 판매 관리 → 인증 → 메인 이미지 → 문제 → 상세 이미지 → 공감 → 액션 → 상세 정보의 9단계를 고객의 질문 순서로 정리하고, 강점을 위로 올리는 조정법과 표시·광고 규정, 접근성 주의점을 덧붙인다.
새 서비스 개발 프로젝트 진행 순서: 기획 → 개발 기반 구축 → 개발 진행 → 서비스 진화의 기승전결로 정리한 서비스 개발 절차.
스크럼: 책임·이벤트·산출물: 스크럼은 한 달 이하의 스프린트 안에서 투명성·검토·적응을 반복하는 가벼운 프레임워크다. 세 가지 책임(PO·스크럼 마스터·개발자), 다섯 가지 이벤트, 세 가지 산출물과 각각의 약속(제품 목표·스프린트 목표·완료의 정의)으로 구성된다. 2020년판 스크럼 가이드 기준으로 정리하고, 흔히 잘못 알려진 운영 방식을 함께 짚었다.
스포티파이 모델: 스쿼드·트라이브·챕터·길드와 그 한계: 자율적인 교차 기능 팀(스쿼드)을 트라이브로 묶고 직군별 챕터·길드로 가로지르는 매트릭스 조직 모델. 자율이 정렬보다 앞서고, 엔지니어링 책임자가 팀 밖에 있고, 협업 기술을 가정만 한 탓에 잘 작동하지 않았다. 모델을 통째로 들여오지 말고 책임 구조와 정렬 장치부터 설계한다.
애자일과 스프린트: 애자일의 핵심은 만들고-보여주고-피드백 받고-방향을 맞추는 주기를 모두가 함께 짧게 만드는 것이다. 스프린트는 목표를 쳐내는 마감 장치가 아니라 정해진 주기마다 속도와 방향을 점검하는 장치이며, 일정은 미리 예측하지 말고 만들어 보며 측정한다. 구글 스프린트 5일 구성과 장치들, 폭포수와 애자일을 고르는 기준도 함께 정리했다.
유스케이스 다이어그램: UML 유스케이스 다이어그램으로 시스템이 누구에게 어떤 기능을 제공하는지 한 장에 그려 범위를 합의하는 법. 액터·유스케이스·시스템 경계, 연관·일반화·include·extend 관계, 작성 4단계, 정상·대안·예외 흐름과 시나리오를 담는 유스케이스 명세, 흔한 실수를 정리한다.
제품 중심 개발자 (Product-Minded Engineer): 기획을 구현만 하지 않고 제품의 이유를 묻고, 제품·엔지니어링 트레이드오프를 함께 제안하며, 출시 후 데이터까지 책임지는 개발자의 9가지 특징과 성장 방법. 목적 조직에서 개발자가 맡는 역할과 OKR·애자일의 관계까지.
조직의 디지털 전환과 웹 거버넌스: 디지털 전환은 기술 도입이 아니라 고객 행동 변화에 조직을 맞추는 일이다. 디지털 성숙도 5단계, 웹 거버넌스의 네 영역(전략·관리·실행·측정), 권한 없는 실무자가 변화를 이끄는 방법을 정리했다.
초기 스타트업과 창업: 개발자가 빠지기 쉬운 함정: 초기 스타트업 엔지니어는 아키텍처부터 고객 대화·온콜·채용까지 맡는다. 개발자가 창업할 때는 기술 중심 피벗, 복잡한 사업 모델, 장인 정신이라는 세 함정을 피하고, 작은 제품을 빨리 내서 검증 횟수를 늘린다.
칸반과 린: 흐름과 낭비: 린은 고객 가치를 기준으로 낭비를 없애고 흐름을 만드는 사고방식이고, 칸반은 그것을 일에 적용해 보드로 시각화하고 진행 중인 일(WIP)을 제한해 당기는 흐름을 만드는 방법이다. 칸반·스크럼·스크럼반 비교, 흐름 지표와 리틀의 법칙, 낭비 유형, 가치 흐름 매핑, 병목과 제약 이론, 카이젠·PDCA를 정리했다.
콘텐츠 전략과 핵심 모델: 콘텐츠는 목적·핵심 메시지·다음 궁금증·운영 계획을 갖춰야 전략이 된다. 메인 페이지가 아니라 사업 목표와 사용자 작업이 겹치는 핵심 페이지부터 설계하는 핵심 모델(core model)과 워크숍 진행법을 정리했다.
투자자가 보는 IR 자료: 시장·비즈니스 모델·숫자: 스타트업이 기관 투자를 받을 때 거치는 실사에서 투자자가 듣고 싶은 것. 회사 소개보다 시장(TAM)과 성장, 좁혀 말한 비즈니스 모델, 경영진이 보는 지표와 숫자로 표현한 고객, 유닛 이코노믹스와 성장 요인을 쪼갠 브리지 분석, 고정비·변동비와 재무 계획, 약점의 솔직한 공개, ESG를 숫자로 설명하는 법을 정리한다.
BDD·SDD로 기획서를 태스크로 나누기: 기획·디자인·개발·QA가 같은 문서를 보도록 기획을 사용자 행동(BDD의 given-when-then)과 데이터 구조(SDD)로 정리해 태스크를 만드는 방법. then 하나가 태스크 하나가 되어 진척도·일정·테스트 범위가 함께 보이고, Figma에 디자인과 기획을 합쳐 두면 최신 화면까지 한곳에서 관리된다.
EoA: 불확실성을 다루는 애자일 메커니즘: EoA(Essence of Agility, 기민함의 맥)는 정해진 실천법을 따라 하는 대신, 불확실할 때 효과적인 메커니즘을 이해하고 맥락에 맞는 실천법을 스스로 설계하게 하는 프레임워크다. 네 가지 상위 목표, 결과 관찰 질문(OOQ), 병목 정의, 팀 템플릿과 세션 운영법을 정리했다.
Shape Up: 6주 사이클 제품 개발 방식: Basecamp가 만든 제품 개발 방식. 견적 대신 투입할 시간의 상한(appetite)을 먼저 정하고, 거칠지만 위험을 제거한 형태(shape)로 다듬은 피치를 베팅 테이블에서 골라 6주 동안 팀에 맡긴다. 백로그를 두지 않고, 시간이 다 되면 범위를 줄여서라도 끝낸다.

Work26

개발 배우기의 네 단계와 넘는 법: 개발 입문은 자신감이 오르는 강의 단계, 빈 에디터 앞의 혼란, 범위가 넓어지는 절망의 사막, 실력이 붙는 상승기를 거친다. 단계마다 넘는 방법이 다르고, 비전공자는 CS 기초를 의식적으로 보완하며 학력 대신 공개된 결과물로 실력을 증명한다.
개발 자료 잘 찾는 법: 막혔을 때 자료를 찾는 순서: 영어 검색과 관용 키워드 → 검색 연산자로 좁히기 → 공식 문서에서 API의 입출력 확인 → 라이브러리 소스 직접 열기 → 오픈소스 저장소의 이슈·PR 검색.
개발자 기술 블로그: 왜 쓰고 어떻게 오래 쓰나: 남에게 설명하며 이해의 빈틈을 찾고, 기록이 포트폴리오와 기회가 된다. 메모가 아닌 완성된 글을 형식을 정해 쓰고, 오래 보존할 수 있는 도구와 검색·구독 채널로 꾸준히 운영한다.
개발자 생산성: 무엇이 10배 차이를 만드나: 프로그래밍은 선형 노동이 아니라 설계라서 개인 간 생산성 차이가 곱으로 벌어진다. 10배 프로그래머를 만드는 요소(설계 희생, 단순함, 지식, 저수준 이해, 디버깅, 집중), 연구로 밝혀진 스타 엔지니어의 아홉 가지 업무 전략, 팀의 속도를 스프린트·마라톤·인터벌로 나눠 보는 모델과 속도를 깎는 요인, 프로그래머에 맞춘 뽀모도로와 집중 원칙을 정리한다.
개발자 역량 지도: 주니어에서 시니어, 풀스택, 아키텍트까지: 주니어에서 시니어로 가며 넓혀야 할 열한 가지 역량(협업 도구, 언어, API, 서버·클라우드, 인증·테스트, DB, CI/CD, 자료구조·알고리즘, 시스템 설계, 디자인 패턴, AI 도구), 풀스택 개발자가 다루는 일곱 영역, 소프트웨어 아키텍트에게 필요한 지식 지도, 모든 개발자가 알아야 할 여덟 가지 표준을 한 장에 정리한다.
개발자에서 리더로: 테크 리드·팀장이 바꿔야 할 것: 리더의 성과는 내 산출물이 아니라 팀이 만든 가치다. 기술 실력만 믿고 직접 코딩·통제에 매달리는 다섯 가지 실수를 피하고, 1:1 면담·업무 배정·심리적 안전감·피드백·목표와 문서화로 팀을 키운다.
개발자의 마음 관리: 감정을 다시 해석하기: 자신감과 가면 증후군 사이를 오가는 개발자의 감정을 시스템 1·시스템 2 관점으로 보고, 같은 신체 감각을 다른 감정으로 해석하는 인지 재평가로 분노·스트레스·질투·두려움·피로·무력감을 다루는 법을 정리했다.
개발자의 지속 가능한 학습 루프: 개발 학습은 의지로 버티는 1년이 아니라 수십 년 이어지는 습관이어야 한다. 정보 습득 → 학습 → 정리 → 실습 → 적용의 다섯 단계, 기술 블로그를 고르고 읽는 법, 메타인지·설명해 보기·흐름 따라 공부하기 같은 공부법, 틈새 시간과 선택과 집중으로 루프를 유지하는 법을 정리했다. AI 도구를 다 따라가지 않고 흘러들어오게 하는 법, 생성형 지식과 고수에게 배우는 질문, 구현 의도로 실행하는 법도 정리했다.
디버깅 사고법: 가설을 세우고 반증한다: 버그는 머릿속 모델(멘탈 모델)이 실제 시스템과 어긋난 자리에서 생기므로, 디버깅은 그 어긋남을 배우는 문제 해결이다. 과학적 방법의 다섯 단계, 좋은 가설의 조건(원인과 실패 지점을 함께 설명하고 반증 가능), 주석을 규범이 아닌 참고로 읽기, 고정 마인드셋과 성장 마인드셋, 능동적 회상·나눠 공부하기·끈기 같은 습관을 정리한다.
비즈니스 이메일 쓰는 법: 업무 메일은 받는 사람, 단일 주제, 스타일, 구성 요소 네 가지로 정리된다. To·CC·BCC와 답장·전체 답장·전달을 고르는 기준, 한 메일 한 목적 규칙, 3~8단어 제목부터 서명·첨부·발송 전 점검까지의 체크리스트.
사이드 프로젝트를 시작하고 끝까지 가는 10가지 팁: 꾸준히 하나는 굴리기, 내 불편에서 아이디어 찾기, 틈새 겨냥, 작게 시작, 1~2주 단위 기한, 코딩 전 랜딩 페이지로 검증하기까지 사이드 프로젝트를 시작하고 유지하는 원칙. 내가 쓸 것을 내가 만드는 출발점과 불편 일기, MVP·MMP·MLP로 나눈 검증, 빌드 인 퍼블릭까지 다룬다.
사회 초년생을 위한 직장 생활 팁: 경력 관리와 자기 관리 습관, 업무량이 많을 때 실수를 줄이고 속도를 올리는 실무 습관, 집중 시간을 지키는 법, 업무 전화를 실수 없이 처리하는 법을 상황별로 정리했다.
소프트웨어 문서화: 네 가지 문서 유형과 코드에서 문서 만들기: 소프트웨어 문서는 목적에 따라 튜토리얼·하우투 가이드·레퍼런스·해설의 네 유형으로 나뉘고(Diátaxis), 한 문서는 한 유형만 따른다. 레퍼런스는 코드 구조를 따라 주석에서 자동 생성해 코드와 어긋나지 않게 한다. 무엇은 이름으로, 왜는 기록으로 남긴다. 프로젝트의 입구인 README에 담을 것과 README를 먼저 쓰는 README 주도 개발도 다룬다.
실력만으로는 부족하다: 명성 쌓기와 커뮤니티 기여: 일을 잘해도 알려지지 않으면 기회가 오지 않는다. 글쓰기·발표·공개 작업으로 명성을 쌓는 원칙, 흔한 핑계를 넘는 법, 커뮤니티에 기여할 때 지킬 태도를 정리했다.
엔지니어 레벨: 주니어에서 Distinguished까지의 커리어 사다리: 소프트웨어 엔지니어의 커리어 사다리는 주니어, 엔지니어, 시니어, 스태프, 시니어 스태프, 프린시플, Distinguished로 올라가며, 레벨을 가르는 것은 코드 실력보다 영향 범위(개인 → 팀 → 조직 → 회사 → 업계)와 일의 크기다. 레벨별 기대 역할, 빅테크의 레벨 명칭(Google L, Meta E), 승진 기대 기간, IC와 매니저 트랙, 더 읽을 자료를 정리한다.
오픈소스 기여 시작하기: 문서·답변에서 코어 기여까지: 기여는 코드만이 아니다. 문서 번역, Q&A 답변, 리뷰, 글쓰기도 기여다. 쓰고 있는 라이브러리에서 good first issue로 시작하고, 소스 추적·토론 채널 참여·프로토타입으로 깊은 기여로 넘어간다.
오픈소스 라이선스: 허용형과 카피레프트: 오픈소스 라이선스는 사용·수정·배포를 허락하는 조건이다. MIT·BSD·Apache 2.0 같은 허용형과 MPL·LGPL·GPL·AGPL 같은 카피레프트를 소스 공개 의무, 같은 라이선스 강제, 특허 조항으로 비교하고, 라이선스 호환성, 라이선스 없는 저장소의 의미, SPDX 표기, 오픈소스가 아닌 소스 공개 라이선스(BSL·SSPL)로의 전환 흐름을 정리한다.
오픈소스 프로젝트 운영: 도입, 포크, 문서, 확산, 유지: 오픈소스는 공개만으로 쓰이지 않는다. 쓸 라이브러리는 인기·문서·인터페이스로 고르고, 포크할 때는 당위와 계획으로 신뢰를 얻는다. 문서와 예제가 성패를 가르고, 공개 후에는 이슈 대응·로드맵·메인테이너의 지속 가능성이 프로젝트를 살린다.
웹 프로젝트 가격 책정: 프리랜서·에이전시가 웹 프로젝트 값을 정하는 원칙. 시간제·고정가·월 단위 계약을 고르는 기준, 가격을 올릴 신호, 예산을 묻는 법, 견적서 쓰기, 잊기 쉬운 사후 지원까지 정리했다.
의사결정 체크리스트: 결정을 내리기 전에 무엇을, 언제까지, 누가, 누구와 상의해, 누구의 승인으로, 누구에게 알릴지 정하는 6가지 항목. 수평적인 팀에서는 결정 자체가 아니라 결정권자를 합의로 위임하고, 치열한 결정일수록 빠르게 정한다.
친절한 엔지니어링: 정직, 심리적 안전감, 피드백: 친절은 예의 바름(nice)이 아니라 상대에게 관심을 쏟아 그가 있는 자리에서 돕는 것(kind)이다. 정직하되 개인적으로 신경 쓰기, 코드 리뷰 같은 비동기 소통에서 '왜'를 묻기, 비난 없는 문화와 실패에서 배우기로 심리적 안전감 만들기, 피드백을 받는 법과 주는 법(감정·신뢰·논리)을 정리했다.
컴퓨팅 사고와 개발 실력 늘리는 법: 컴퓨팅 사고는 문제를 분해·패턴 인식·추상화·알고리즘으로 다듬어 컴퓨터가 실행할 수 있는 절차로 바꾸는 사고다. 요구사항을 데이터의 관점으로 다시 정의하는 법, 알고리즘을 자연어·순서도·의사 코드로 적는 법과 순차·선택·반복의 세 제어 구조, 알고리즘 공부가 프론트엔드 개발자에게도 필요한 이유, 개발을 운동처럼 훈련하는 방법을 정리했다.
페어 프로그래밍: 두 사람이 드라이버와 내비게이터 역할을 번갈아 맡아 한 코드를 함께 짜는 애자일 실천법. 역할을 나누는 이유, 장단점, 핑퐁·포모도로·스트롱 스타일 같은 진행 방식, 짝을 존중하는 진행 규칙과 원격 도구를 정리한다.
협업을 잘하는 개발자: 프로그래머가 아니라 문제 해결사: 코드의 가치는 코드가 만드는 비즈니스 가치에서 나오고, 개발 직군만으로는 그 가치를 키우기 어렵기 때문에 개발자는 협업해야 한다. 문제의 본질 찾기·모순 해소·함께 풀기라는 문제 해결 원칙과 심리적 안전감, 의도와 맥락을 담은 말하기, 수평적 팀에서의 역할 감각을 정리했다.
회사에서 빠르게 성장하는 법: 짧은 피드백 사이클, 스스로 높이는 업무 난이도, 신중한 이직 판단으로 회사의 성장 속도를 따라잡고, 본캐에 수렴하는 부캐와 100일 프로젝트로 도구가 바뀌어도 나에게 쌓이는 역량을 만드는 방법.
회의 잘하는 법: 발산과 수렴: 회의가 산으로 가는 이유는 사람보다 방식에 있다. 발산 회의와 수렴 회의를 구분해 알리고, 결과물을 정의하고, 그라운드 룰과 짧은 마감을 두면 대부분의 회의가 나아진다. 참석자로서 쓸 수 있는 환기 질문과 침묵·반복을 깨는 장치까지 정리했다.

Life & Learning

글쓰기, 저널리즘, 디자인, 영어, 공부법, 유학 준비처럼 개발 밖에서 모은 교양·실용 지식.

발표·포트폴리오 디자인 팁: 3의 법칙, 정렬, 자간, 굵기로 하는 강조, 키워드 중심 구성 등 발표 자료를 깔끔하게 만드는 원칙과 상업적 이용 가능한 무료 폰트를 구하는 곳.
블럭-건물 암기법: 한눈에 들어오는 '블럭' 단위로 가리고 떠올리기를 반복하며 펜 색으로 숙련도를 표시하는 단계별 암기법.
자산 가격의 형성: 요구수익률, 멀티플, 성장: 자산 가격은 수익을 요구수익률로 나눈 값이다. 요구수익률은 무위험수익률에 위험 프리미엄을 더해 정해지므로 금리가 오르면 가격이 내리고, 금리가 내리면 가격이 오른다. 금리는 단기 가격을 크게 흔들지만 중립금리 주변을 오가므로, 장기 가격은 결국 수익의 성장이 결정한다.
전세와 한국 주택 가격: 한국 주택의 매매가는 수익률이 아니라 전세가에 붙어 움직인다. 전세가는 입주물량과 전세자금대출 금리가 정하고, 전월세전환율은 대출금리로 수렴한다. 전세가율과 전월세전환율로 주택 수익률과 금리 위험선을 계산할 수 있다.

English4

비즈니스 미팅 쿠션 표현: 고객이나 상사의 의견에 동의·재구성·반론·제안할 때 관계를 해치지 않으면서 내 논점을 세우는 영어 표현과, 업무 메일에서 지나치게 낮추지 않고 말하는 법.
상황별 영어 회화 표현: 의견 말하기, 이유 대기, 인사, 감사, 천만에요, 칭찬, 거절, 애정 표현을 상황별로 묶고, 격식 정도와 잘못 알려진 표현을 바로잡은 일상 영어 표현집.
OPIc 공략 전략: 영어 말하기 시험 OPIc에서 IH·AL 등급을 받기 위한 답변 구조, 유형별 전략, 롤플레이 공식.
TOEIC 핵심 문법 정리: 동사 형식, 자동사·타동사, 가정법, 사역·지각동사, 가산·불가산, 수량 표현, 접속부사, 전치사 등 TOEIC 빈출 문법.

Journalism3

뉴스 가치와 기자의 역할: 시의성·근접성·영향성·저명성·흥미성·진귀성 등 뉴스 가치와, 일상에서 기삿거리를 발견하는 관점.
데이터 저널리즘 실무: 주제 설정부터 수집·정제·분석·시각화·기사화까지 데이터 기자들이 일하는 방식, 무료 도구로 시작하는 첫 시각화, 읽히는 데이터 기사와 탐사 매체의 펀딩 모델에 관한 논점.
언론사의 디지털 전환 과제: 지면·TV 중심 언론사가 디지털로 넘어가며 공통으로 마주치는 네 가지 과제(디지털 전환, 수익 다각화, 콘텐츠 경쟁력, 신뢰)와 매체 유형별로 달라지는 우선순위.

Study Abroad3

미국 유학 학비 지원과 장학금: 국제학생이 미국 유학 비용을 마련하는 경로를 정리했다. 연방 지원을 받을 수 없으므로 학교 자체 지원(need-based·merit), 대학원 조교직, 정부·재단 장학금이 핵심이다. need-blind와 need-aware의 차이, 학위 과정별 전략, 대표 장학 프로그램을 다룬다.
비전공자의 미국 CS 석사 준비: 컴퓨터공학을 전공하지 않은 사람이 미국 CS 석사에 지원하는 방법을 정리했다. 입학처가 보는 선수 과목(자료구조·알고리즘·이산수학이 최소선), 한국에서 학점을 만드는 경로(방송대 편입, 대학 비학위 과정, MOOC), ML 전공을 위한 수학 독학 자료, 비전공자 전용 과정인 Northeastern Align MS in CS를 비교한다.
조지아텍 온라인 석사: OMSCS와 OMSA: 조지아텍의 온라인 컴퓨터공학 석사(OMSCS)와 분석학 석사(OMSA)를 정리했다. 일하면서 한 학기 한두 과목씩 듣는 비동기 과정이고, 학비는 학점당 200달러대다. 지원 자격과 마감, 졸업 요건, 사전 준비, 비자와의 관계를 다룬다.

Writing3

글쓰기 원칙: 구조, 설득, 문장력: 잘 쓴 글의 구조와 PREP 공식, 독자를 설득하는 원칙, 짧고 명확하게 쓰는 비즈니스 글쓰기 습관, 말하듯 쓰고 사실과 판단을 가르는 우리말 글쓰기, 그리고 어휘 수집·메모·사전·분석적 읽기·퇴고로 문장력을 기르는 습관, 목적·독자·첫인상으로 설계하는 온라인 글쓰기.
뉴스레터 발행 원칙: 오래 가는 뉴스레터의 원칙을 독자와의 관계, 쓰는 법, 지표와 운영, 습관과 과정, 성장과 수익의 다섯 주제로 묶었다. 핵심은 한 사람에게 쓰듯 꾸준히 보내고, 답장으로 성과를 재는 것이다.
움베르토 에코의 글을 잘 쓰는 규칙: 규칙마다 자기가 금지하는 실수를 그 문장 안에서 저지르는 에코의 역설적 글쓰기 규칙 모음. 어휘·문장·문장부호·논리·태도로 묶고, 한국어 글에 옮겨 쓰는 법을 정리했다.