#design-pattern
노트 39개
Frontend › Architecture
프론트엔드 MV* 아키텍처의 흐름: MVC에서 MVI까지MVC·MVP·MVVM의 구조와 차이, 수동적 뷰·감독 컨트롤러·프레젠테이션 모델·Model 2 같은 변형, 웹 프론트엔드의 아키텍처가 MVC → MVVM → Container-Presenter → Flux → 가벼운 전역 스토어·서버 상태 관리로 바뀌어 온 흐름과, Flux가 reducer와 단일 스토어의 Redux로 줄어든 과정, 그 흐름을 정리한 MVI(Model-View-Intent) 아키텍처. 뷰와 비즈니스 로직을 분리하고, 뷰는 의도만 전하고, 데이터는 한 방향으로 돈다.
Frontend › CSS
객체 지향 CSS(OOCSS)구조와 겉모양을 분리하고, 컨테이너와 콘텐츠를 분리해 재사용 가능한 클래스 '객체'로 CSS를 짜는 방법론. 미디어 객체 같은 대표 패턴, 특정도 전쟁을 피하는 규칙, 시맨틱 클래스와의 긴장, 캐스케이드 기본값·타이포그래피 전략·객체 범위 같은 실무 전략과 흔한 오용, BEM·유틸리티 CSS로 이어진 흐름까지.
Frontend › CSS
CSS 설계 방법론: BEM과 ITCSS전역 범위와 명시도 문제를 규칙으로 다스리는 CSS 방법론. 이름으로 관계를 드러내는 BEM(.block__element--modifier), 파일을 일반→구체 순서의 일곱 층으로 쌓는 ITCSS와 BEMIT 접두사, OOCSS·SMACSS와의 차이를 비교하고, 지금은 @layer·@scope·CSS Modules가 같은 일을 어떻게 나눠 맡는지 정리한다.
Frontend › JavaScript
데코레이터와 콜 포워딩함수를 고치지 않고 감싸서 동작을 더하는 데코레이터 함수. 캐싱 래퍼로 보는 기본 모양, 감싼 메서드가 this를 잃는 문제와 func.call(this, ...args)로 넘기는 콜 포워딩, call과 apply의 차이, 여러 인자를 키 하나로 바꾸는 해시, 유사 배열에 배열 메서드를 빌려 쓰는 메서드 빌리기, 래퍼가 원래 함수의 속성을 잃는 한계를 정리한다. 부분 적용은 함수형 프로그래밍 노트에 있다.
Frontend › JavaScript
JavaScript 디자인 패턴: 생성 패턴객체를 만드는 방식을 다루는 생성 패턴 중 생성자·모듈·싱글톤·프로토타입 패턴을 JavaScript 코드로 정리하고, 프로토타입 기반 언어라서 달라지는 점을 짚는다. 단일 상속을 보완해 여러 클래스에 동작을 섞어 넣는 믹스인(Object.assign 방식, 클래스 팩토리 방식, 이벤트 믹스인)과 관찰자 패턴을 독립 클래스로 만든 이벤트 이미터 구현도 함께 다룬다.
Frontend › JavaScript
Proxy와 Reflect객체에 가해지는 읽기·쓰기·in·delete·호출·new 같은 기본 동작을 트랩으로 가로채는 Proxy와, 그 동작을 원래 객체에 그대로 넘기는 Reflect. 기본값·검증·가상 속성·함수 래퍼 같은 쓰임, getter 상속에서 receiver가 필요한 이유, 내부 슬롯·private 필드·동일성 비교에서 생기는 한계, Vue·Immer 같은 라이브러리가 Proxy를 쓰는 방식을 정리한다.
Frontend › JavaScript
TypeScript 실용 패턴구조적 타입 위에서 자주 쓰는 TypeScript 패턴을 모았다. 브랜드 타입으로 명목 타이핑 흉내 내기, enum 대신 as const 객체, 예외 대신 Result 유니언 반환, 클래스를 합성하는 믹스인, 이벤트 맵으로 만드는 타입 안전 이벤트 이미터, 인스턴스화 표현식으로 제네릭 특수화, 배열 만들기·커링·정적 초기화 블록 같은 작은 관용구까지 코드와 함께 정리한다.
Frontend › React
로직 재사용 패턴: HOC, Render Props, 커스텀 훅여러 컴포넌트가 같은 상태 로직(구독, 마우스 위치, 마운트 여부)을 나눠 쓰는 세 가지 방법. 컴포넌트를 받아 감싼 컴포넌트를 돌려주는 고차 컴포넌트(HOC), 무엇을 그릴지 함수로 받는 render props, 훅 안에 로직만 담는 커스텀 훅을 비교하고, 컨테이너 컴포넌트와 커스텀 훅 중 무엇을 재사용할지 고르는 기준을 정리한다.
Frontend › React
재사용 컴포넌트를 위한 리액트 패턴 5가지Compound Components, Control Props, Custom Hook, Props Getters, State Reducer를 제어 역전(IoC) 정도와 구현 복잡도로 비교한다. 제어권을 많이 넘길수록 유연해지지만 쓰기 어려워지므로, 필요한 만큼만 고르는 것이 핵심이다.
Frontend › Testing
험블 객체 패턴: 테스트하기 쉬운 코드가 좋은 코드인 이유목은 비용에 따라 네트워크 목·전역 목·스파이·더미/스텁 네 단계로 나뉘고, 비싼 목이 많다는 것은 설계 문제의 신호다. 전역 객체·네트워크처럼 테스트하기 어려운 코드를 얇은 험블 객체로 떼어 내 인터페이스 뒤에 두면 나머지는 더미와 스텁만으로 테스트되고, 코드는 자연스럽게 SOLID에 가까워진다.
Frontend › UI Design
반응형 UI 패턴: 내비게이션, 캐러셀, 데이터 표작은 화면의 디자인은 큰 화면을 줄인 것이 아니고, 큰 화면은 작은 화면을 늘린 것이 아니다. 좁은 화면에서 공간이 모자라면 먼저 숨기지 않고 보이게 다듬고, 다음은 가로로 넘겨 보는 오버플로 패턴, 마지막이 버튼으로 여닫는 점진적 공개다. 캐러셀은 좁은 화면에서만 가로 스크롤로 두고 넓은 화면에서는 그리드로 펼친다. 데이터 표는 첫 열 고정·카드로 쌓기·열 숨기기 중 사용 목적에 맞춰 고르고, 페이지는 Mostly Fluid·Column Drop 같은 레이아웃 패턴으로 바꾼다.
Backend › Architecture
분산 시스템의 통신·데이터 흐름 패턴서비스끼리 주고받는 방식(요청-응답, 비동기 요청-응답, 발행-구독, 경쟁 소비자, 우선순위 큐, 클레임 체크), 데이터가 흐르는 방식(ETL, 배치, 스트림 처리, 이벤트 소싱, CQRS), 여러 서비스를 조율하는 방식(오케스트레이션, 사가, 리더 선출, 분산 락, 앰배서더)을 한 지도로 묶고 각 패턴이 푸는 문제와 대가를 정리했다.
Backend › Architecture
소프트웨어 아키텍처 패턴계층형, 클라이언트-서버, 이벤트 기반, 마이크로서비스, 플러그인(마이크로커널), 헥사고날(포트와 어댑터) 아키텍처를 구조·장점·약점으로 비교하고, 구성 요소·커넥터와 제어·데이터 흐름으로 스타일을 가르는 다섯 계열(데이터 흐름, 호출-반환, 독립 구성 요소, 데이터 중심, 가상 머신)과 문제 모양별 선택 경험칙을 정리한다. 패턴마다 얻는 것과 치르는 것이 다르므로 시스템의 변경 방향과 팀 규모를 보고 고른다.
Backend › Architecture
클라우드 설계 패턴클라우드 앱이 반복해서 만나는 문제(서버가 파일 전송을 떠안음, 순간 폭주, 설정 재배포, 여러 단계 작업의 실패, 인스턴스 상태 판단, 인증 위임)를 푸는 패턴을 모았다. 발레 키, 정적 콘텐츠 호스팅, 큐 기반 부하 평준화, 파이프와 필터, 계산 자원 통합, 외부 설정 저장소, 스케줄러·에이전트·감독자, 헬스 엔드포인트 모니터링, 연합 ID, 백그라운드 작업을 다루고, 다른 노트에 집이 있는 패턴은 지도로 잇는다.
Backend › Express
Express 싱글톤 패턴과 서비스 패턴서버 인스턴스를 하나의 클래스로 관리하고 라우터에서 비즈니스 로직을 서비스 파일로 분리하는 구조화 기법.
Backend › Express
Express 프로젝트 구조: 3계층, 이벤트, DI, 로더구조를 강제하지 않는 Express 앱을 오래 고칠 수 있게 나누는 법. 라우트·서비스·데이터 접근 3계층, 서비스에서 HTTP를 떼어 내기, 부수 작업을 이벤트 구독자로 분리, 생성자 주입, 설정 모듈, DB 기반 작업 스케줄러, 시작 과정을 로더로 쪼개기를 정리했다.
Backend › NestJS
NestJS Middleware와 Interceptor(AOP)라우트 핸들러보다 먼저 실행되는 NestJS 미들웨어와, 핸들러 실행 전후를 감싸 로깅·응답 가공 같은 횡단 관심사(AOP)를 한곳에서 처리하는 인터셉터. 만들기, 적용 범위, 둘의 차이.
Backend › NestJS
NestJS Module과 Provider: 의존성 주입과 캡슐화@Injectable 클래스를 모듈의 providers에 등록하면 Nest가 인스턴스를 만들어 생성자에 주입한다(DI). 모듈은 관련 컨트롤러·프로바이더를 묶고 export한 것만 밖에 공개하는 구성 단위다.
Backend › NestJS
Repository 패턴과 레이어 분리서비스와 데이터베이스 사이에 데이터 접근 전담 계층을 두어 비즈니스 로직과 DB 쿼리를 분리하는 패턴.
Backend › Web Basics
스프링 애플리케이션 설계: DI, 프록시 트랜잭션, 멀티모듈, WebFlux스프링으로 서버를 만들 때 반복해서 부딪히는 설계 문제를 정리한다. IoC·DI와 생성자 주입, Service/ServiceImpl 관행과 SOLID, Lombok 사용 기준, 프록시 기반 @Transactional의 자기 호출 함정, 멀티모듈의 계층과 의존 규칙, 사용하지 않는 API 찾기, Spring MVC와 WebFlux의 차이를 다룬다.
Backend › Web Basics
스프링의 싱글톤 빈과 요청 스레드스프링 빈은 하나뿐인데 동시에 들어온 수많은 요청을 어떻게 처리하는가. 내장 Tomcat의 스레드 풀이 요청마다 스레드를 배정하고, 모든 스레드가 같은 싱글톤 빈을 공유하므로 빈은 상태 없이(stateless) 짜야 한다. NIO 커넥터, 스레드 풀 설정, 가상 스레드까지 정리한다.
Computer Science › Engineer Information Processing
소프트웨어 설계와 공학개발 생명주기 모델(폭포수·원형·나선형·V·UP·애자일), 요구공학(추출·분석·명세·검증, EARS, 추적 매트릭스), 구조적 분석·설계(문맥도·DFD·구조 차트)와 UML 객체지향 분석·설계(경계·제어·실체 클래스, 시퀀스·활동·상태 머신), 모듈 결합도·응집도와 복잡도 척도(McCabe 순환 복잡도, Halstead), 사용자 인터페이스 황금률, 디자인 패턴, 유지보수 유형과 Lehman 법칙·재공학, 형상 관리, CASE 도구 정리. 프로젝트 관리(비용 산정·일정·EVM·위험)는 별도 노트로 분리했다.
Computer Science › Operating System
멀티스레딩 디자인 패턴과 논블로킹 알고리즘생산자-소비자, 스레드 풀, 퓨처·프로미스, 모니터 객체, 배리어, 읽기-쓰기 락 여섯 가지 멀티스레딩 패턴이 각각 어떤 동기화 문제를 푸는지 정리한다. 스레드 안전의 뜻과 락 없이 얻는 방법, 언어별 기본 자료구조의 스레드 안전성과 동시성 해시 테이블 설계(락 스트라이핑, 버킷 단위 CAS), CPU·I/O 바운드에 따른 스레드 풀 크기, 포크-조인과 작업 훔치기도 다룬다. 락을 쓰는 블로킹 알고리즘과 CAS로 짜는 논블로킹 알고리즘의 차이, 진행 보장 단계(락 프리, 기아 없음, 대기 없음)도 함께 다룬다.
Computer Science
프로그래밍 언어와 객체 지향 설계언어 일반(계보·패러다임·실행 방식·의미론·타입 시스템), C++의 문법·템플릿·STL·예외·가상 함수·스마트 포인터·메모리 풀, Java·Kotlin·Python·Go의 언어 동작과 관용구, 추상 클래스·인터페이스·위임·DTO/VO·클린 코드·GoF 패턴·책임 주도 설계와 객체 지향 설계 사례 모음.
Computer Science › Programming Languages
같은 문제, 열다섯 가지 설계: 상태와 결합을 다루는 법터틀 그래픽(앞으로 가기, 돌기, 펜 올리기)이라는 단순한 문제를 객체 지향 클래스부터 순수 함수 모듈, 함수형 코어 API, 에이전트, 인터페이스·함수 의존성 주입, 상태 모나드, 커맨드 배치, 이벤트 소싱, 스트림 처리, 인터프리터, 추상 자료형, 능력 기반 API까지 열다섯 가지로 구현하며 상태를 누가 쥐는지와 구현과 어떻게 떼어 내는지를 비교한다. 행동(인터페이스)이 아니라 데이터(커맨드 타입)로 결합을 끊는 방식의 장점도 정리한다.
Computer Science › Programming Languages
객체 지향 설계 면접: 풀이 순서와 반복되는 설계 부품주차장·도서관 같은 시스템을 클래스와 관계로 설계하는 객체 지향 설계(OOD) 면접의 풀이 순서(요구 사항 → 유스케이스 → 클래스 → 활동·시퀀스 → 코드 골격 → 동시성), 17개 사례에 되풀이해 나오는 설계 부품(계정과 사람 분리, 정의와 인스턴스 분리, 상태 enum, Search 인터페이스와 색인, 알림·결제·로그·청구서), 사례별 디자인 패턴 지도와 SOLID, 피해야 할 설계, 자주 받는 질문과 공부 순서를 정리한다.
Computer Science › Programming Languages
객체 지향 설계 사례: 예약·대여 시스템객체 지향 설계 면접의 예약·대여 계열 여섯 사례(도서관, 영화 예매, 항공, 호텔, 식당, 렌터카)를 요구 사항, 액터, 핵심 클래스와 enum, 핵심 흐름으로 정리한다. 검색 → 예약 → 결제 → 알림 → 취소·환불의 공통 골격, 대출 한도 5권·10일과 연체료, 회차별 좌석(ShowSeat·FlightSeat)과 SERIALIZABLE 트랜잭션, 24시간 전 취소 전액 환불, 좌석별 식사 주문, 반납 지점이 다른 렌터카와 부가 서비스 같은 사례별 차이를 다룬다.
Computer Science › Programming Languages
객체 지향 설계 사례: 주차장·ATM과 카드·보드 게임객체 지향 설계 면접의 시설·장치와 게임 계열 네 사례(다층 주차장, ATM, 블랙잭과 카드 덱, 체스)를 요구 사항, 액터, 핵심 클래스와 enum, 핵심 흐름으로 정리한다. 차종별 주차 자리 배정 규칙과 싱글턴·락으로 지키는 티켓 발급, 시간대별 요금, ATM의 하드웨어 부품 클래스와 거래 커맨드 계층·잔액 조회 시퀀스, 블랙잭의 소프트·하드 합계와 보험·스플릿·더블 규칙, 체스 말별 이동 규칙과 자기 킹을 노출하는 수를 막는 검증을 다룬다.
Computer Science › Programming Languages
객체 지향 설계 사례: 커머스·커뮤니티·플랫폼객체 지향 설계 면접의 플랫폼 계열 일곱 사례(아마존 쇼핑몰, Stack Overflow, 온라인 증권, LinkedIn, Facebook, Cricinfo, Uber)를 요구 사항, 액터, 핵심 클래스와 enum, 흐름으로 정리한다. 장바구니·주문·배송 로그와 결제 시퀀스, 평판·현상금·태그와 질문 종료 사유, 시장가·지정가·스톱 주문과 부분 체결·주식 묶음·주문 유효 기간, 프로필·연결 요청·검색 색인과 2단계 BFS 친구 추천, 경기 → 이닝 → 오버 → 공 계층, 기사 매칭과 거리·시간 요금 계산을 다룬다.
Computer Science › Programming Languages
객체 지향의 본질: 메시징객체 지향이라는 말을 만든 앨런 케이의 관점에서 OOP의 본질을 메시징·캡슐화·늦은 바인딩 세 가지로 정리한다. 클래스와 상속은 C++·Java가 대중화한 구현 방식일 뿐 필수 조건이 아니며, 핵심은 상태를 숨긴 독립 개체들이 메시지로 협력하는 구조다.
Computer Science › Programming Languages
싱글턴 패턴인스턴스를 하나만 두는 싱글턴 패턴의 목적과 Java 구현 방식(이른 초기화, synchronized, DCL과 volatile, 홀더 클래스, enum)을 스레드 안전성과 비용으로 비교하고, C++의 함수 안 static(Meyers 싱글턴)과 복사 금지, 전역 상태가 되는 단점과 DI 컨테이너·모듈로 대신하는 방법을 정리한다.
Computer Science › Programming Languages
위임 패턴과 Kotlin by객체가 받은 요청을 다른 객체에 넘겨 처리하는 위임 패턴과, 이를 언어 문법으로 지원하는 Kotlin의 by 키워드를 정리한다. 클래스 위임은 인터페이스 구현을 통째로 다른 객체에 맡기고, 프로퍼티 위임은 getter/setter를 맡기며, by lazy와 by viewModels()가 그 대표적인 쓰임이다.
Computer Science › Programming Languages
책임 주도 설계: 협력·책임·메시지객체지향 설계는 좋은 객체가 아니라 좋은 협력을 설계하는 일이다. 메시지를 먼저 정하고 그 메시지를 처리할 책임을 가진 객체를 고른다. 객체가 받는 메시지의 집합이 인터페이스가 되고, 속성은 책임을 정한 뒤에 따라온다.
Computer Science › Programming Languages
추상 클래스와 인터페이스인스턴스를 만들 수 없는 추상 클래스와, 구현할 행동의 계약만 정하는 인터페이스를 Java 기준으로 비교한다. 추상 클래스는 상태와 공통 구현을 물려주는 'is-a' 관계, 인터페이스는 여러 개를 붙일 수 있는 'can-do' 역할이며, Java 8 이후 디폴트 메서드로 경계가 흐려졌어도 상태를 가질 수 있느냐가 결정적 차이다.
Computer Science › Programming Languages
C++ 상속과 가상 함수: 접근 지정, 생성·소멸 순서, vtable, 슬라이싱, 다중 상속C++ 상속의 다섯 가지 형태(단일·다중·다단계·계층·혼합), protected와 상속 방식(public·protected·private)이 접근 수준을 어떻게 바꾸는지, 기반에서 파생으로 생성되고 역순으로 소멸되는 순서, 가상 함수가 vtable과 vptr로 호출 대상을 고르는 원리와 비가상 함수의 이름 가림, 가상 생성자와 static 가상 함수가 없는 이유, 생성자·소멸자 안의 가상 호출과 pure virtual call, 가상 소멸자, 순수 가상 함수와 추상 클래스, 객체 슬라이싱, 다중 상속의 생성 순서와 다이아몬드 문제·가상 상속을 정리한다.
Computer Science › Programming Languages
C++ 템플릿타입을 매개변수로 받아 함수와 클래스를 찍어 내는 C++ 템플릿을 정리한다. 함수·클래스 템플릿, 기본 템플릿 인자와 비타입 인자, 특수화, 템플릿 재귀와 가변 인자 템플릿까지 다루며, 템플릿은 컴파일 시점에 타입별 코드를 생성하는 정적 다형성이라는 점이 핵심이다.
Computer Science › Programming Languages
DTO와 VO, DAO와 Repository이름이 비슷해 헷갈리는 네 가지 객체를 구분한다. DTO는 계층 사이로 데이터를 실어 나르는 로직 없는 상자, VO는 값으로만 같음을 따지는 불변 도메인 객체다. DAO는 테이블 중심으로 영속성을 추상화한 저수준 계층이고, Repository는 도메인 객체의 컬렉션처럼 보이게 만든 상위 수준 계층이다.
Computer Science › Programming Languages
GoF 디자인 패턴객체 지향 설계에서 반복되는 문제의 검증된 해법인 GoF 디자인 패턴을 생성·구조·행위 세 갈래로 나눠, 패턴마다 푸는 문제와 한 줄 비유로 정리한다. 패턴은 어휘이자 도구이며, 필요 없는 곳에 쓰면 오히려 복잡도를 늘린다.
DevOps
쿠버네티스 구조와 핵심 개념쿠버네티스는 원하는 상태를 선언하면 컨트롤 플레인이 노드의 컨테이너를 그 상태로 계속 맞추는 오케스트레이터다. 컨트롤 플레인(API 서버·etcd·스케줄러·컨트롤러 매니저)과 노드(kubelet·kube-proxy·런타임)의 역할, 파드와 워크로드 리소스, 서비스 네 가지 유형, 쿠버네티스 디자인 패턴, 자주 쓰는 kubectl 명령, 생태계 도구 지도를 정리한다.