6개 언어 / 82개 카테고리 / 1,524개 항목의 reference 코드 모음. 모든 파일에 한국어 줄 단위 주석이 달려 있어 읽으며 학습하는 자료로 사용한다.
| 언어 | 카테고리 수 | 항목 수 |
|---|---|---|
| CSS | 14 | 416 |
| Animation | 8 | 125 |
| JavaScript | 9 | 134 |
| Java | 22 | 374 |
| Python | 17 | 280 |
| Rust | 12 | 195 |
| 합계 | 82 | 1524 |
- 표에서 항목명을 클릭하면 reference 파일이 열림
- 각 파일은 줄 단위 한국어 주석이 달려 있어 읽으며 학습
.html은 브라우저로,.java/.py/.rs/.js는 직접 실행
- CSS
- Animation
- JavaScript
- Java
- java-advanced-patterns
- java-algorithms
- java-best-practices
- java-coding-patterns
- java-collections
- java-concurrency
- java-core-api
- java-data-processing
- java-design-patterns
- java-fundamentals
- java-interview
- java-io
- java-jpa
- java-jvm
- java-modern
- java-oop
- java-project-structures
- java-reactive
- java-security
- java-spring
- java-stream
- java-testing
- Python
- Rust
@media, @keyframes, @import 등 at-rule (17개)
| 항목 | 설명 |
|---|---|
| at-rules--keyframes | 애니메이션의 중간 단계를 정의한다. from/to 또는 퍼센트로 각 단계의 스타일을 지정한다. |
| at-rules--starting-style | 요소가 처음 렌더링되거나 display: none에서 전환될 때의 시작 스타일을 정의한다. 진입 애니메이션을 가능하게 한다. |
| charset | 스타일시트에서 사용하는 문자 인코딩을 선언한다. 파일의 맨 첫 줄에 위치해야 한다. |
| color-profile | ICC 색상 프로파일을 정의하여 color() 함수에서 사용할 수 있게 한다. 넓은 색 영역(wide gamut)을 지원한다. |
| container | 부모 컨테이너의 크기에 따라 스타일을 적용하는 컨테이너 쿼리. 뷰포트가 아닌 컴포넌트 단위의 반응형 디자인을 가능하게 한다. |
| counter-style | 사용자 정의 카운터(목록 번호매기기) 스타일을 만든다. |
| font-face | 커스텀 폰트를 정의한다. 외부 폰트 파일을 로드하여 사용할 수 있게 한다. |
| font-palette-values | 컬러 폰트의 색상 팔레트를 커스터마이즈한다. 폰트에 내장된 색상을 오버라이드할 수 있다. |
| import | 외부 CSS 파일을 현재 스타일시트에 포함한다. |
| layer | 캐스케이드 레이어를 정의하여 CSS 우선순위를 명시적으로 관리한다. 레이어 순서가 명시도보다 우선한다. |
| media | 미디어 쿼리 조건에 따라 스타일을 적용하는 조건부 at-rule. 화면 크기, 색상 지원, 사용자 선호도 등을 감지할 수 있다. |
| namespace | CSS에서 사용할 XML 네임스페이스를 정의한다. SVG나 MathML 요소에 선택적으로 스타일을 적용할 때 사용된다. |
| page | 인쇄 시 페이지의 레이아웃을 설정한다. 마진, 크기, 방향 등을 지정할 수 있다. |
| property | CSS 커스텀 속성(변수)의 타입, 상속 여부, 초기값을 명시적으로 정의한다. 변수의 애니메이션을 가능하게 한다. |
| scope | 스타일의 적용 범위(스코프)를 명시적으로 제한한다. 시작 경계와 끝 경계를 지정하여 특정 DOM 영역에만 스타일을 적용할 수 있다. |
| supports | 브라우저가 특정 CSS 기능을 지원하는지 확인하고 조건부로 스타일을 적용한다. |
| view-transition | 문서를 View Transition API에 옵트인시킨다. 동일 문서 또는 크로스 문서 네비게이션 시 페이지 전환 애니메이션을 활성화한다. |
width/height/margin/padding/border/outline (65개)
| 항목 | 설명 |
|---|---|
| aspect-ratio | 요소의 선호 가로세로 비율을 설정 |
| block-size | 블록 방향(가로 쓰기에서 높이)의 크기를 설정하는 논리적 속성 |
| border-bottom-color | 요소의 아래쪽 테두리 색상을 설정 |
| border-bottom-style | 요소의 아래쪽 테두리 스타일을 설정 |
| border-bottom-width | 요소의 아래쪽 테두리 너비를 설정 |
| border-bottom | 요소의 아래쪽 테두리를 설정하는 단축 속성 |
| border-collapse | 테이블 셀의 테두리를 합칠지 분리할지 설정 |
| border-color | 요소 테두리의 색상을 설정하는 단축 속성 |
| border-image | 이미지를 요소의 테두리로 사용하는 단축 속성 |
| border-left-color | 요소의 왼쪽 테두리 색상을 설정 |
| border-left-style | 요소의 왼쪽 테두리 스타일을 설정 |
| border-left-width | 요소의 왼쪽 테두리 너비를 설정 |
| border-left | 요소의 왼쪽 테두리를 설정하는 단축 속성 |
| border-radius | 요소의 모서리를 둥글게 만드는 단축 속성 |
| border-right-color | 요소의 오른쪽 테두리 색상을 설정 |
| border-right-style | 요소의 오른쪽 테두리 스타일을 설정 |
| border-right-width | 요소의 오른쪽 테두리 너비를 설정 |
| border-right | 요소의 오른쪽 테두리를 설정하는 단축 속성 |
| border-spacing | 테이블 셀 간의 간격을 설정 (border-collapse: separate일 때만 적용) |
| border-style | 요소 테두리의 스타일을 설정하는 단축 속성 |
| border-top-color | 요소의 위쪽 테두리 색상을 설정 |
| border-top-style | 요소의 위쪽 테두리 스타일을 설정 |
| border-top-width | 요소의 위쪽 테두리 너비를 설정 |
| border-top | 요소의 위쪽 테두리를 설정하는 단축 속성 |
| border-width | 요소 테두리의 너비를 설정하는 단축 속성 |
| border | 요소의 테두리를 설정하는 단축 속성 (너비, 스타일, 색상) |
| box-sizing | 요소의 너비와 높이 계산에 패딩과 보더를 포함할지 설정 |
| height | 요소의 높이를 설정 |
| inline-size | 인라인 방향(가로 쓰기에서 너비)의 크기를 설정하는 논리적 속성 |
| margin-block-end | 블록 방향 끝쪽(가로 쓰기에서 아래쪽)의 바깥 여백을 설정하는 논리적 속성 |
| margin-block-start | 블록 방향 시작쪽(가로 쓰기에서 위쪽)의 바깥 여백을 설정하는 논리적 속성 |
| margin-block | 블록 방향(가로 쓰기 모드에서 상하)의 바깥 여백을 설정하는 논리적 단축 속성 |
| margin-bottom | 요소의 아래쪽 바깥 여백을 설정 |
| margin-inline-end | 인라인 방향 끝쪽(LTR에서 오른쪽)의 바깥 여백을 설정하는 논리적 속성 |
| margin-inline-start | 인라인 방향 시작쪽(LTR에서 왼쪽)의 바깥 여백을 설정하는 논리적 속성 |
| margin-inline | 인라인 방향(가로 쓰기 모드에서 좌우)의 바깥 여백을 설정하는 논리적 단축 속성 |
| margin-left | 요소의 왼쪽 바깥 여백을 설정 |
| margin-right | 요소의 오른쪽 바깥 여백을 설정 |
| margin-top | 요소의 위쪽 바깥 여백을 설정 |
| margin | 요소의 바깥 여백을 설정하는 단축 속성 |
| max-block-size | 블록 방향의 최대 크기를 설정하는 논리적 속성 |
| max-height | 요소의 최대 높이를 설정 |
| max-inline-size | 인라인 방향의 최대 크기를 설정하는 논리적 속성 |
| max-width | 요소의 최대 너비를 설정 |
| min-block-size | 블록 방향의 최소 크기를 설정하는 논리적 속성 |
| min-height | 요소의 최소 높이를 설정 |
| min-inline-size | 인라인 방향의 최소 크기를 설정하는 논리적 속성 |
| min-width | 요소의 최소 너비를 설정 |
| outline-color | 요소의 외곽선 색상을 설정 |
| outline-offset | 요소와 외곽선 사이의 간격을 설정 |
| outline-style | 요소의 외곽선 스타일을 설정 |
| outline-width | 요소의 외곽선 너비를 설정 |
| outline | 요소의 외곽선을 설정하는 단축 속성 (보더 바깥에 그려짐, 레이아웃에 영향 없음) |
| padding-block-end | 블록 방향 끝쪽(가로 쓰기에서 아래쪽)의 안쪽 여백을 설정하는 논리적 속성 |
| padding-block-start | 블록 방향 시작쪽(가로 쓰기에서 위쪽)의 안쪽 여백을 설정하는 논리적 속성 |
| padding-block | 블록 방향(가로 쓰기에서 상하)의 안쪽 여백을 설정하는 논리적 단축 속성 |
| padding-bottom | 요소의 아래쪽 안쪽 여백을 설정 |
| padding-inline-end | 인라인 방향 끝쪽(LTR에서 오른쪽)의 안쪽 여백을 설정하는 논리적 속성 |
| padding-inline-start | 인라인 방향 시작쪽(LTR에서 왼쪽)의 안쪽 여백을 설정하는 논리적 속성 |
| padding-inline | 인라인 방향(가로 쓰기에서 좌우)의 안쪽 여백을 설정하는 논리적 단축 속성 |
| padding-left | 요소의 왼쪽 안쪽 여백을 설정 |
| padding-right | 요소의 오른쪽 안쪽 여백을 설정 |
| padding-top | 요소의 위쪽 안쪽 여백을 설정 |
| padding | 요소의 안쪽 여백을 설정하는 단축 속성 |
| width | 요소의 너비를 설정 |
우선순위, 특이도, 상속, !important (10개)
| 항목 | 설명 |
|---|---|
| all-property | 모든 CSS 속성을 한 번에 초기화하는 단축 속성. unicode-bidi, direction, 커스텀 속성을 제외한 모든 속성에 initial, inherit, unset, revert를 적용 |
| cascade-order | CSS 캐스케이드의 우선순위 결정 순서: 1) 출처와 중요도 2) @layer 순서 3) 명시도 4) 소스 코드 순서. 같은 명시도라면 나중에 선언된 스타일이 적용된다 |
| cascade-specificity--layer | 캐스케이드 레이어를 정의하여 스타일의 우선순위를 구조적으로 관리. 레이어 순서가 늦을수록 우선순위가 높고, 레이어에 속하지 않은 스타일이 모든 레이어보다 우선 |
| cascade-specificity--scope | 스타일의 적용 범위를 특정 DOM 하위 트리로 제한하는 최신 규칙. 시작 선택자(scope root)와 선택적 종료 선택자(scope limit)로 범위를 정의 |
| custom-properties-scope | 커스텀 속성은 CSS 상속을 따르므로 선언된 요소와 그 자식에서만 사용 가능. 컴포넌트 스코프 변수를 만들어 격리된 스타일링이 가능 |
| custom-properties | --로 시작하는 커스텀 속성을 정의하고 var()로 참조하는 CSS 변수 시스템. 테마, 반복 값 관리, 동적 스타일링에 핵심 |
| important | 선언에 !important를 붙이면 명시도를 무시하고 최우선 적용된다. 하지만 !important끼리 충돌하면 다시 명시도 규칙을 따르며, 유지보수를 극도로 어렵게 만든다 |
| inheritance | 일부 CSS 속성은 부모에서 자식으로 자동 상속된다. color, font-*, line-height, text-align 등 텍스트 관련 속성은 상속되고, margin, padding, border, background 등 박스 모델 속성은 상속되지 않는다 |
| initial-inherit-unset-revert | CSS 글로벌 키워드. initial은 속성의 스펙 초기값, inherit는 부모 값 강제 상속, unset은 상속 속성이면 inherit 아니면 initial, revert는 이전 출처의 값으로 복원, revert-layer는 이전 레이어의 값으로 복원 |
| specificity-calculation | CSS 명시도(Specificity) 계산법. 인라인 스타일(1-0-0-0) > ID 선택자(0-1-0-0) > 클래스/속성/가상클래스(0-0-1-0) > 요소/가상요소(0-0-0-1) 순서로 가중치가 부여된다 |
color, background, gradient, opacity (23개)
| 항목 | 설명 |
|---|---|
| accent-color | 폼 컨트롤(체크박스, 라디오, 범위, 프로그레스)의 강조 색상을 설정 |
| background-attachment | 배경 이미지가 뷰포트/요소 스크롤에 따라 움직일지 고정될지 설정 |
| background-blend-mode | 배경 이미지와 배경색 사이의 블렌딩(혼합) 모드를 설정 |
| background-clip | 배경이 그려지는(잘리는) 영역을 설정 |
| background-color | 요소의 배경색을 설정 |
| background-image | 요소에 하나 이상의 배경 이미지를 설정 |
| background-origin | 배경 이미지의 위치 기준 영역을 설정 |
| background-position | 배경 이미지의 초기 위치를 설정 |
| background-repeat | 배경 이미지의 반복 방식을 설정 |
| background-size | 배경 이미지의 크기를 설정 |
| background | 배경 관련 속성을 한꺼번에 설정하는 단축 속성 |
| caret-color | 텍스트 입력 커서(캐럿)의 색상을 설정 |
| color-scheme | 요소가 지원하는 색상 스킴(라이트/다크)을 브라우저에 알림 |
| color | 요소의 텍스트 및 텍스트 장식의 전경색을 설정 |
| conic-gradient | 중심점 주위를 회전하며 색상이 전환되는 원뿔형 그라디언트 이미지를 생성 |
| forced-color-adjust | 강제 색상 모드(고대비 모드 등)에서 요소의 색상 조정 방식을 설정 |
| linear-gradient | 두 개 이상의 색상이 직선 방향으로 부드럽게 전환되는 그라디언트 이미지를 생성 |
| opacity | 요소 전체(자식 포함)의 불투명도를 설정 |
| print-color-adjust | 인쇄 시 브라우저의 배경색/이미지 최적화(제거) 여부를 제어 |
| radial-gradient | 중심점에서 바깥으로 퍼지는 원형/타원형 그라디언트 이미지를 생성 |
| repeating-conic-gradient | 원뿔형 그라디언트를 반복하여 방사형 줄무늬 패턴 등을 생성 |
| repeating-linear-gradient | 선형 그라디언트를 반복하여 줄무늬 패턴 등을 생성 |
| repeating-radial-gradient | 방사형 그라디언트를 반복하여 동심원 패턴 등을 생성 |
filter, mask, clip-path, blend-mode (22개)
| 항목 | 설명 |
|---|---|
| backdrop-filter | 요소 뒤의 영역에 필터 효과를 적용합니다 (글라스모피즘 등) |
| clip-path | 요소의 표시 영역을 특정 도형으로 잘라냅니다 |
| filter-effects--background-blend-mode | 요소의 배경 이미지와 배경색이 서로 어떻게 혼합되는지 설정합니다 |
| filter | 요소에 흐림, 색상 변환 등의 그래픽 필터 효과를 적용합니다 |
| image-rendering | 이미지 크기 변경 시 사용되는 렌더링 알고리즘을 설정합니다 |
| isolation | 요소가 새로운 stacking context를 생성하여 블렌드 효과의 범위를 제한합니다 |
| mask-clip | 마스크가 적용되는 영역을 설정합니다 |
| mask-composite | 여러 마스크 레이어가 서로 어떻게 합성되는지 설정합니다 |
| mask-image | 마스크로 사용할 이미지를 지정합니다 |
| mask-mode | 마스크가 알파(투명도) 기반인지 휘도 기반인지 설정합니다 |
| mask-origin | 마스크 위치의 기준 영역을 설정합니다 |
| mask-position | 마스크 이미지의 위치를 설정합니다 |
| mask-repeat | 마스크 이미지의 반복 방식을 설정합니다 |
| mask-size | 마스크 이미지의 크기를 설정합니다 |
| mask-type | SVG 요소의 마스크 타입을 설정합니다 |
| mask | 요소에 마스크를 적용하는 단축 속성입니다 |
| mix-blend-mode | 요소의 콘텐츠가 부모 및 배경과 어떻게 혼합되는지 설정합니다 |
| object-fit | 대체 요소(img, video 등)의 콘텐츠가 컨테이너에 어떻게 맞춰지는지 설정합니다 |
| object-position | 대체 요소의 콘텐츠가 컨테이너 내에서 정렬되는 위치를 설정합니다 |
| shape-image-threshold | 이미지에서 도형을 추출할 때 알파 채널의 임계값을 설정합니다 |
| shape-margin | shape-outside로 정의된 도형의 바깥 여백을 설정합니다 |
| shape-outside | float된 요소 주변으로 인접 콘텐츠가 감싸는 도형을 정의합니다 |
플렉스 레이아웃 속성 (18개)
| 항목 | 설명 |
|---|---|
| align-content | 여러 줄일 때 교차축을 따라 줄(line)들을 정렬합니다 |
| align-items | 교차축(cross axis)을 따라 플렉스 아이템을 정렬합니다 |
| align-self | 개별 플렉스 아이템의 교차축 정렬을 재정의합니다 |
| column-gap | 플렉스 아이템 열 사이의 간격을 설정합니다 |
| flex-basis | 플렉스 아이템의 초기 크기(남은 공간 분배 전 기본 크기)를 설정합니다 |
| flex-direction | 플렉스 아이템의 배치 방향(주축)을 설정합니다 |
| flex-flow | flex-direction과 flex-wrap의 단축 속성입니다 |
| flex-grow | 플렉스 아이템이 남은 공간을 차지하는 비율을 설정합니다 |
| flex-shrink | 플렉스 아이템이 공간이 부족할 때 줄어드는 비율을 설정합니다 |
| flex-wrap | 플렉스 아이템이 한 줄에 모두 배치될지, 여러 줄로 줄바꿈될지 설정합니다 |
| flex | flex-grow, flex-shrink, flex-basis의 단축 속성입니다 |
| gap | 플렉스 아이템 사이의 간격을 설정합니다 (row-gap과 column-gap의 단축) |
| justify-content | 주축(main axis)을 따라 플렉스 아이템을 정렬합니다 |
| order | 플렉스 아이템의 시각적 배치 순서를 변경합니다 |
| place-content | align-content와 justify-content의 단축 속성입니다 |
| place-items | align-items와 justify-items의 단축 속성입니다 |
| place-self | align-self와 justify-self의 단축 속성입니다 |
| row-gap | 플렉스 아이템 행 사이의 간격을 설정합니다 |
CSS Grid 레이아웃 (28개)
| 항목 | 설명 |
|---|---|
| grid--align-content | 그리드 트랙 전체를 블록축(세로) 방향으로 정렬합니다 |
| grid--align-items | 그리드 셀 안에서 아이템의 블록축(세로) 정렬을 설정합니다 |
| grid--align-self | 개별 그리드 아이템의 블록축(세로) 정렬을 설정합니다 |
| grid--column-gap | 그리드 열 사이의 간격을 설정합니다 |
| grid--gap | 그리드 셀 사이의 간격을 설정합니다 (row-gap과 column-gap의 단축) |
| grid--justify-content | 그리드 트랙 전체를 인라인축(가로) 방향으로 정렬합니다 |
| grid--place-content | align-content와 justify-content의 단축 속성입니다 |
| grid--place-items | align-items와 justify-items의 단축 속성입니다 |
| grid--place-self | align-self와 justify-self의 단축 속성입니다 |
| grid--row-gap | 그리드 행 사이의 간격을 설정합니다 |
| grid-area | 그리드 아이템의 위치와 크기를 설정하거나 이름 붙은 영역에 배치합니다 |
| grid-auto-columns | 암시적으로 생성되는 열 트랙의 크기를 설정합니다 |
| grid-auto-flow | 자동 배치되는 아이템의 흐름 방향과 채우기 방식을 설정합니다 |
| grid-auto-rows | 암시적으로 생성되는 행 트랙의 크기를 설정합니다 |
| grid-column-end | 그리드 아이템의 열 끝 위치를 지정합니다 |
| grid-column-start | 그리드 아이템의 열 시작 위치를 지정합니다 |
| grid-column | 그리드 아이템의 열 시작/끝 위치를 설정하는 단축 속성입니다 |
| grid-row-end | 그리드 아이템의 행 끝 위치를 지정합니다 |
| grid-row-start | 그리드 아이템의 행 시작 위치를 지정합니다 |
| grid-row | 그리드 아이템의 행 시작/끝 위치를 설정하는 단축 속성입니다 |
| grid-template-areas | 이름을 사용하여 그리드 영역을 시각적으로 정의합니다 |
| grid-template-columns | 그리드의 열 트랙 크기와 라인 이름을 정의합니다 |
| grid-template-rows | 그리드의 행 트랙 크기와 라인 이름을 정의합니다 |
| grid-template | grid-template-rows, grid-template-columns, grid-template-areas의 단축 속성입니다 |
| grid | 모든 명시적/암시적 그리드 속성을 한 번에 설정하는 단축 속성입니다 |
| justify-items | 그리드 셀 안에서 아이템의 인라인축(가로) 정렬을 설정합니다 |
| justify-self | 개별 그리드 아이템의 인라인축(가로) 정렬을 설정합니다 |
| masonry-auto-flow | 메이슨리(벽돌) 레이아웃에서 아이템의 배치 방식을 설정합니다 (실험적) |
position, display, z-index, float, overflow (47개)
| 항목 | 설명 |
|---|---|
| bottom | 위치가 지정된 요소의 아래쪽 오프셋을 설정합니다 |
| break-after | 요소 뒤에서의 페이지, 열 또는 영역 나누기를 제어합니다 |
| break-before | 요소 앞에서의 페이지, 열 또는 영역 나누기를 제어합니다 |
| break-inside | 요소 내부에서의 페이지, 열 또는 영역 나누기를 제어합니다 |
| clear | 요소를 앞선 float 요소 아래로 이동시킵니다 |
| column-count | 다단 레이아웃의 열 수를 설정합니다 |
| column-fill | 다단 레이아웃에서 콘텐츠가 열에 배분되는 방식을 설정합니다 |
| column-rule-color | 다단 레이아웃에서 열 구분선의 색상을 설정합니다 |
| column-rule-style | 다단 레이아웃에서 열 구분선의 스타일을 설정합니다 |
| column-rule-width | 다단 레이아웃에서 열 구분선의 두께를 설정합니다 |
| column-rule | 다단 레이아웃에서 열 사이의 구분선을 설정하는 단축 속성입니다 |
| column-span | 요소가 다단 레이아웃의 모든 열에 걸쳐 배치될지 설정합니다 |
| column-width | 다단 레이아웃에서 이상적인 열 너비를 설정합니다 |
| columns | column-count와 column-width를 한 번에 설정하는 단축 속성입니다 |
| contain-intrinsic-size | 크기 격리(containment)가 적용된 요소의 자연스러운 크기를 설정합니다 |
| contain | 요소의 격리(containment) 수준을 설정하여 렌더링 최적화를 돕습니다 |
| container-name | 컨테이너 쿼리 컨테이너의 이름을 설정합니다 |
| container-type | 요소를 컨테이너 쿼리 컨테이너로 설정하고 그 유형을 지정합니다 |
| content-visibility | 요소의 콘텐츠 렌더링 여부를 제어하여 성능을 최적화합니다 |
| display | 요소의 표시 유형과 자식 요소의 레이아웃 방식을 설정합니다 |
| float | 요소를 컨테이너의 왼쪽 또는 오른쪽에 배치하여 텍스트와 인라인 요소가 주위를 감싸도록 합니다 |
| inset-block-end | 블록 끝 방향의 논리적 오프셋을 설정합니다 |
| inset-block-start | 블록 시작 방향의 논리적 오프셋을 설정합니다 |
| inset-block | 블록 방향(수평 쓰기 모드에서 top/bottom)의 논리적 오프셋을 설정하는 단축 속성입니다 |
| inset-inline-end | 인라인 끝 방향의 논리적 오프셋을 설정합니다 |
| inset-inline-start | 인라인 시작 방향의 논리적 오프셋을 설정합니다 |
| inset-inline | 인라인 방향(수평 쓰기 모드에서 left/right)의 논리적 오프셋을 설정하는 단축 속성입니다 |
| inset | top, right, bottom, left를 한 번에 설정하는 단축 속성입니다 |
| layout--column-gap | 열 사이의 간격을 설정합니다 |
| layout--container | container-name과 container-type을 한 번에 설정하는 단축 속성입니다 |
| left | 위치가 지정된 요소의 왼쪽 오프셋을 설정합니다 |
| orphans | 페이지/열 나누기 전에 남겨야 할 최소 줄 수를 설정합니다 |
| overflow-anchor | 스크롤 앵커링 동작을 제어합니다 |
| overflow-block | 블록 방향의 넘침 처리 방식을 설정합니다 |
| overflow-clip-margin | overflow: clip이 적용된 요소의 클리핑 경계를 확장합니다 |
| overflow-inline | 인라인 방향의 넘침 처리 방식을 설정합니다 |
| overflow-wrap | 긴 단어가 넘칠 때 줄바꿈 여부를 설정합니다 |
| overflow-x | 수평 방향의 넘침 처리 방식을 설정합니다 |
| overflow-y | 수직 방향의 넘침 처리 방식을 설정합니다 |
| overflow | 요소의 콘텐츠가 박스를 넘칠 때의 처리 방식을 설정하는 단축 속성입니다 |
| position | 요소의 배치 방법을 설정합니다 |
| right | 위치가 지정된 요소의 오른쪽 오프셋을 설정합니다 |
| text-overflow | 넘치는 텍스트를 어떻게 표시할지 설정합니다 |
| top | 위치가 지정된 요소의 위쪽 오프셋을 설정합니다 |
| visibility | 요소의 표시 여부를 설정합니다. 레이아웃 공간은 유지됩니다 |
| widows | 페이지/열 나누기 후에 표시해야 할 최소 줄 수를 설정합니다 |
| z-index | 위치가 지정된 요소의 쌓임 순서를 설정합니다 |
미디어 쿼리, 컨테이너 쿼리, viewport 단위 (15개)
| 항목 | 설명 |
|---|---|
| breakpoint-strategy | 일반적인 브레이크포인트 값과 프로젝트에 맞는 설정 전략. 디바이스가 아닌 콘텐츠 기반으로 브레이크포인트를 결정하는 것이 핵심. |
| container-queries | 뷰포트가 아닌 부모 컨테이너의 크기를 기준으로 스타일을 변경한다. 재사용 가능한 컴포넌트 설계에 필수적. |
| fluid-spacing | clamp()로 뷰포트 크기에 따라 자연스럽게 변하는 여백과 패딩을 설정한다. 브레이크포인트 없이 부드러운 반응형 간격 구현. |
| fluid-typography | clamp() 함수로 뷰포트 크기에 따라 자연스럽게 변하는 폰트 크기를 설정한다. 브레이크포인트 없이 부드러운 반응형 타이포그래피 구현. |
| media-other-conditions | 화면 너비 외에 기기 방향, 색상 선호, 모션 감소, 포인터 종류 등 다양한 미디어 특성을 활용한 조건부 스타일링. |
| media-width-queries | min-width와 max-width를 사용한 미디어 쿼리로 화면 너비에 따라 다른 스타일을 적용한다. 반응형 디자인의 핵심 도구. |
| mobile-first-vs-desktop-first | CSS를 작성할 때 모바일 기본 → 큰 화면 확장(mobile-first) 또는 데스크톱 기본 → 작은 화면 축소(desktop-first) 중 어떤 접근법을 택할지 비교. |
| print-styles | @media print를 활용하여 인쇄에 최적화된 스타일을 적용한다. 불필요한 요소 숨기기, 링크 URL 표시, 배경색 제어 등. |
| responsive--aspect-ratio | aspect-ratio 속성으로 요소의 가로세로 비율을 유지한다. 비디오 임베드, 이미지 카드, 썸네일 등에 필수. |
| responsive-flexbox | flex-wrap과 미디어 쿼리 조합으로 유연한 반응형 레이아웃을 구현한다. flex-basis와 flex-grow를 활용한 자동 줄바꿈 패턴. |
| responsive-grid | CSS Grid의 auto-fill, auto-fit, minmax()를 조합하여 미디어 쿼리 없이 자동으로 반응하는 그리드 레이아웃을 구현한다. |
| responsive-images | srcset, sizes, picture 요소, object-fit을 활용하여 화면 크기와 해상도에 따라 최적의 이미지를 제공한다. |
| responsive-table | 모바일에서 넓은 테이블을 처리하는 여러 패턴: 가로 스크롤, 카드형 변환, 열 숨기기 등. |
| viewport-meta | 태그를 통해 모바일 브라우저의 뷰포트 크기와 스케일링을 제어한다. 반응형 디자인의 필수 전제 조건. |
| viewport-units-fullscreen | 100vh의 모바일 주소창 문제와 dvh(dynamic viewport height) 등 새로운 뷰포트 단위로 해결하는 방법. |
기본/속성/의사 클래스/의사 요소 선택자 (59개)
| 항목 | 설명 |
|---|---|
| active | 요소가 활성화(클릭/터치)되는 순간에 적용된다. |
| after | 선택한 요소의 마지막 자식으로 가상 요소를 생성한다. content 속성이 필수이다. |
| any-link | 방문 여부와 관계없이 href 속성이 있는 모든 링크 요소에 적용된다. |
| autofill | 브라우저가 자동완성으로 값을 채운 input 요소에 적용된다. |
| backdrop | 최상위 레이어(dialog, popover, fullscreen)에 표시되는 요소의 배경 딤 처리를 스타일링한다. |
| before | 선택한 요소의 첫 번째 자식으로 가상 요소를 생성한다. content 속성이 필수이다. |
| checked | 체크박스, 라디오 버튼, 또는 select의 option이 선택된 상태일 때 적용된다. |
| combinator-adjacent-sibling | 첫 번째 요소 바로 다음에 오는 형제 요소를 선택한다. |
| combinator-child | 첫 번째 요소의 직접 자식인 두 번째 요소만 선택한다. |
| combinator-column | 테이블의 특정 열에 속하는 셀을 선택한다. (실험적 기능, 브라우저 지원 제한적) |
| combinator-descendant | 첫 번째 요소의 자손(모든 깊이)인 두 번째 요소를 선택한다. |
| combinator-general-sibling | 첫 번째 요소 이후의 모든 형제 요소를 선택한다 (바로 다음이 아니어도 됨). |
| dir | 요소의 텍스트 방향(LTR 또는 RTL)에 따라 적용된다. |
| disabled | 비활성화된 폼 요소에 적용된다. |
| empty | 자식 노드(텍스트 포함)가 없는 요소에 적용된다. |
| enabled | 활성화된(disabled가 아닌) 폼 요소에 적용된다. |
| file-selector-button | 파일 입력()의 버튼 부분을 스타일링한다. |
| first-child | 형제 요소 중 첫 번째인 요소에 적용된다. |
| first-letter | 블록 요소의 첫 번째 글자에만 스타일을 적용한다. 드롭캡(큰 첫 글자) 효과에 사용된다. |
| first-line | 블록 요소의 첫 번째 줄에만 스타일을 적용한다. 실제 렌더링된 첫 줄이 기준이다. |
| first-of-type | 같은 타입의 형제 요소 중 첫 번째를 선택한다. |
| focus-visible | 키보드 탐색 등 포커스가 시각적으로 표시되어야 할 때만 적용된다. 마우스 클릭 시에는 적용되지 않는다. |
| focus-within | 요소 자체 또는 자손 요소가 포커스를 받았을 때 적용된다. |
| focus | 요소가 포커스를 받았을 때 적용된다. 키보드, 마우스 등 모든 입력에 반응한다. |
| fullscreen | 전체 화면 모드로 표시되고 있는 요소에 적용된다. |
| has | 인자로 전달된 상대 선택자에 매칭되는 요소를 포함하는 부모/조상 요소를 선택한다. 'CSS의 부모 선택자'라고 불린다. |
| hover | 마우스 포인터가 요소 위에 있을 때 적용되는 의사 클래스. |
| invalid | 유효성 검사에 실패한 폼 요소에 적용된다. |
| is | 인자 목록 중 하나라도 매칭되는 요소를 선택한다. 선택자를 그룹화하여 코드를 줄일 수 있다. |
| lang | 요소의 언어가 인자와 일치할 때 적용된다. lang 속성이나 Content-Language 헤더 기반으로 판단한다. |
| last-child | 형제 요소 중 마지막인 요소에 적용된다. |
| last-of-type | 같은 타입의 형제 요소 중 마지막을 선택한다. |
| link | 아직 방문하지 않은 링크에 적용된다. |
| local-link | 현재 페이지와 같은 URL을 가리키는 링크에 적용된다 (같은 페이지 내 앵커 링크 등). |
| marker | 리스트 아이템의 마커(불릿, 번호)를 스타일링한다. |
| modal | 모달 상태인 요소(showModal()로 열린 dialog 등)에 적용된다. 외부 인터랙션이 차단된 상태이다. |
| not | 인자로 전달된 선택자에 매칭되지 않는 요소를 선택하는 부정 의사 클래스. |
| nth-child | An+B 수식으로 형제 요소 중 특정 위치의 요소를 선택한다. |
| nth-last-child | 끝에서부터 세어 An+B 위치의 형제 요소를 선택한다. |
| nth-of-type | 같은 타입의 형제 요소 중 An+B 위치의 요소를 선택한다. |
| only-child | 형제 요소가 없는 유일한 자식 요소에 적용된다. |
| only-of-type | 같은 타입의 형제가 없는 요소에 적용된다. |
| optional | required 속성이 없는 폼 요소에 적용된다. |
| paused | 재생 가능한 요소(audio, video)가 일시정지 상태일 때 적용된다. |
| placeholder-shown | placeholder 텍스트가 표시되고 있는(아직 입력하지 않은) input/textarea에 적용된다. |
| placeholder | input과 textarea의 placeholder 텍스트 스타일을 지정한다. |
| playing | 재생 가능한 요소(audio, video)가 재생 중일 때 적용된다. |
| popover-open | popover 속성이 있고 현재 표시(showing) 상태인 요소에 적용된다. |
| required | required 속성이 설정된 폼 요소에 적용된다. |
| root | 문서 트리의 루트 요소를 선택한다. HTML에서는 요소이다. |
| selection | 사용자가 텍스트를 드래그하여 선택한 부분의 스타일을 지정한다. |
| target | URL 프래그먼트(해시)와 일치하는 id를 가진 요소에 적용된다. |
| valid | 유효성 검사를 통과한 폼 요소에 적용된다. |
| view-transition-group | 뷰 전환의 그룹 컨테이너를 스타일링한다. 전환 중 크기와 위치 애니메이션을 담당한다. |
| view-transition-image-pair | 뷰 전환에서 old와 new 스냅샷 이미지 쌍을 감싸는 컨테이너를 스타일링한다. |
| view-transition-new | 뷰 전환 시 새로운(new) 상태의 스냅샷을 스타일링한다. |
| view-transition-old | 뷰 전환 시 이전(old) 상태의 스냅샷을 스타일링한다. |
| visited | 사용자가 이미 방문한 링크에 적용된다. |
| where | :is()와 동일하게 동작하지만 명시도가 항상 0이다. 오버라이드하기 쉬운 기본 스타일을 만들 때 유용하다. |
rotate/scale/translate/perspective 등 변형 (10개)
| 항목 | 설명 |
|---|---|
| backface-visibility | 요소의 뒷면이 사용자를 향할 때 보이는지 여부를 설정합니다 |
| perspective-origin | 원근 효과의 소실점(관찰자의 시선 위치)을 설정합니다 |
| perspective | 자식 요소에 원근감을 부여하여 3D 깊이감을 만듭니다 |
| rotate | 요소를 독립적으로 회전시키는 개별 변형 속성입니다 |
| scale | 요소의 크기를 독립적으로 조절하는 개별 변형 속성입니다 |
| transform-box | transform과 transform-origin이 참조하는 레이아웃 박스를 정의합니다 |
| transform-origin | 변형이 적용되는 기준점(원점)을 설정합니다 |
| transform-style | 자식 요소가 3D 공간에서 배치될지 평면으로 납작하게 렌더링될지 설정합니다 |
| transform | 요소에 2D 또는 3D 변형을 적용합니다 |
| translate | 요소를 독립적으로 이동시키는 개별 변형 속성입니다 |
font, text, line-height, writing-mode (45개)
| 항목 | 설명 |
|---|---|
| direction | 텍스트의 쓰기 방향(왼쪽→오른쪽 또는 오른쪽→왼쪽)을 설정 |
| font-family | 요소에 사용할 글꼴 목록을 우선순위 순으로 지정 |
| font-feature-settings | OpenType 글꼴 기능을 직접 제어 |
| font-kerning | 글꼴에 내장된 커닝(글자 간격 미세 조정) 정보 사용 여부를 설정 |
| font-optical-sizing | 글꼴 크기에 따라 글리프 형태를 자동으로 최적화할지 설정 |
| font-size-adjust | 소문자 높이(x-height)를 기준으로 글꼴 크기를 조정 |
| font-size | 글꼴의 크기를 설정 |
| font-stretch | 글꼴의 장평(너비)을 설정 |
| font-style | 글꼴을 기울임꼴(이탤릭)로 설정 |
| font-synthesis | 브라우저가 누락된 굵은체/기울임체/소문자대문자를 인위적으로 합성할지 설정 |
| font-variant-caps | 대문자 변형 글리프의 사용을 제어 |
| font-variant-ligatures | 합자(ligature) 사용 여부를 세밀하게 제어 |
| font-variant-numeric | 숫자, 분수, 서수 표기의 글리프 변형을 제어 |
| font-variant | 글꼴 변형 관련 속성을 한꺼번에 설정하는 단축 속성 |
| font-variation-settings | 가변 글꼴의 변형 축(variation axis)을 직접 제어 |
| font-weight | 글꼴의 굵기(두께)를 설정 |
| font | 글꼴 관련 속성을 한꺼번에 설정하는 단축 속성 |
| hyphens | 단어가 줄바꿈될 때 하이픈(-) 삽입 여부를 설정 |
| initial-letter | 첫 글자를 드롭캡(큰 첫 글자) 스타일로 표시 |
| letter-spacing | 글자 사이의 간격을 조정 |
| line-height | 줄 상자의 최소 높이(줄 간격)를 설정 |
| tab-size | 탭 문자(U+0009)의 표시 너비를 설정 |
| text-align-last | 블록 요소의 마지막 줄(또는 강제 줄바꿈 직전 줄)의 정렬 방식을 설정 |
| text-align | 블록 요소 내 인라인 콘텐츠의 수평 정렬 방식을 설정 |
| text-decoration-color | 텍스트 장식 선의 색상을 설정 |
| text-decoration-line | 텍스트 장식 선의 종류를 설정 |
| text-decoration-style | 텍스트 장식 선의 스타일을 설정 |
| text-decoration-thickness | 텍스트 장식 선의 두께를 설정 |
| text-decoration | 텍스트 장식(밑줄, 윗줄, 취소선 등)을 설정하는 단축 속성 |
| text-emphasis-color | 텍스트 강조 마크의 색상을 설정 |
| text-emphasis-style | 텍스트 강조 마크의 형태를 설정 |
| text-emphasis | 텍스트 강조 마크(점, 원 등)를 설정하는 단축 속성 |
| text-indent | 블록 요소에서 텍스트 첫 줄의 들여쓰기를 설정 |
| text-orientation | 세로 쓰기 모드에서 글자의 방향(회전 여부)을 설정 |
| text-shadow | 텍스트에 그림자 효과를 추가 |
| text-transform | 텍스트의 대소문자 변환 방식을 설정 |
| text-underline-offset | 밑줄의 위치(텍스트 기준선에서의 거리)를 조정 |
| text-wrap | 텍스트 줄바꿈 방식을 제어 |
| typography--overflow-wrap | 단어가 콘텐츠 박스를 넘칠 때 줄바꿈 허용 여부를 설정 |
| typography--text-overflow | 넘치는 인라인 콘텐츠를 어떻게 표시할지 설정 (말줄임 등) |
| vertical-align | 인라인/인라인 블록 요소 또는 테이블 셀의 수직 정렬을 설정 |
| white-space | 요소 내 공백 처리 방식과 줄바꿈 동작을 설정 |
| word-break | 단어가 줄의 끝에 도달했을 때 줄바꿈 규칙을 설정 |
| word-spacing | 단어 사이의 간격을 조정 |
| writing-mode | 텍스트 줄의 진행 방향(가로/세로)을 설정 |
px/em/rem/vw, calc/clamp/var (29개)
| 항목 | 설명 |
|---|---|
| attr | HTML 요소의 속성(attribute) 값을 CSS에서 참조하는 함수. 현재는 content 속성에서만 완전 지원 |
| calc | CSS 내에서 수학 계산을 수행하는 함수. 서로 다른 단위를 혼합하여 계산 가능 (예: 100% - 40px) |
| ch | 현재 폰트에서 문자 '0'(DIGIT ZERO)의 너비를 기준으로 한 단위. 고정폭 폰트에서는 모든 문자가 동일하므로 정확한 문자 수 제어 가능 |
| clamp | 최소값, 선호값, 최대값을 한 번에 지정하는 함수. 반응형 타이포그래피에서 가장 강력한 도구 |
| color-mix | 두 색상을 지정된 색상 공간에서 혼합하는 함수. 비율을 조절하여 중간색을 생성할 수 있다 |
| counter-counters | CSS 카운터의 현재 값을 문자열로 반환하는 함수. counter()는 단일 레벨, counters()는 중첩 번호 매기기(1.1, 1.2 등)에 사용 |
| cqi-cqb | 컨테이너 쿼리 단위. cqi는 쿼리 컨테이너의 인라인 크기(보통 너비)의 1%, cqb는 블록 크기(보통 높이)의 1% |
| currentcolor | 해당 요소에 현재 적용된 color 속성의 값을 참조하는 키워드. border, box-shadow, SVG fill 등에서 텍스트 색상과 자동으로 동기화 |
| em | 부모 요소의 font-size를 기준으로 한 상대 단위. font-size 속성에서 사용 시 부모 기준, 다른 속성에서는 해당 요소 자신의 font-size 기준 |
| env | 사용자 에이전트(브라우저)가 정의한 환경 변수를 참조하는 함수. 주로 모바일의 safe-area-inset 값에 사용 |
| ex | 현재 폰트에서 소문자 'x'의 높이(x-height)를 기준으로 한 단위. 텍스트와 인라인 요소를 정밀하게 정렬할 때 사용 |
| hex | 16진수 표기법으로 색상을 지정. #RRGGBB 또는 축약형 #RGB. 투명도를 포함하려면 #RRGGBBAA |
| hsl-hsla | 색조(Hue, 0 |
| lh-rlh | lh는 해당 요소의 line-height 기준, rlh는 루트 요소(html)의 line-height 기준 단위. 텍스트 수직 리듬을 유지할 때 유용 |
| max | 쉼표로 구분된 여러 값 중 가장 큰 값을 선택하는 함수. 최소 크기 보장에 유용 |
| min | 쉼표로 구분된 여러 값 중 가장 작은 값을 선택하는 함수. 최대 크기 제한에 유용 |
| named-colors | CSS에서 이름으로 사용할 수 있는 148개의 미리 정의된 색상. red, blue, tomato, cornflowerblue 등 |
| oklab | 지각적으로 균일한 Lab 색상 공간. Lightness(0~1), a축(초록-빨강), b축(파랑-노랑)으로 구성. 색상 보간(그라디언트)에 특히 우수 |
| oklch | 지각적으로 균일한 색상 공간. Lightness(0~1), Chroma(채도), Hue(색조 각도)로 구성. 같은 명도 값이면 실제로 같은 밝기로 보인다 |
| percent | 부모 요소를 기준으로 한 백분율 단위. width는 부모 너비 기준, height는 부모 높이 기준, font-size는 부모 font-size 기준 등 속성마다 기준이 다르다 |
| px | CSS의 기본 고정 길이 단위. 1px은 디스플레이의 1 CSS 픽셀(장치 독립적)이며, 고해상도 디스플레이에서는 여러 물리 픽셀에 대응할 수 있다 |
| rem | 루트 요소(html)의 font-size를 기준으로 한 상대 단위. 기본값 16px에서 1rem = 16px |
| rgb-rgba | 빨강(R), 초록(G), 파랑(B) 채널을 0~255 또는 0% |
| svw-svh-lvw-lvh-dvw-dvh | 모바일 브라우저의 동적 UI(주소창, 툴바)를 고려한 뷰포트 단위. svh는 UI가 모두 표시된 상태의 작은 뷰포트, lvh는 UI가 숨겨진 큰 뷰포트, dvh는 현재 상태에 따라 동적으로 변경 |
| transparent | 완전히 투명한 색상 키워드. rgba(0, 0, 0, 0)과 동일. 그라디언트, 보더, 배경 등에서 투명 효과에 사용 |
| url | 외부 리소스(이미지, 폰트, 커서 등)를 참조하는 함수. 상대/절대 URL 또는 데이터 URI를 지정할 수 있다 |
| var | CSS 커스텀 속성(변수)의 값을 참조하는 함수. --로 시작하는 변수를 읽으며, 폴백 값을 지정할 수 있다 |
| vmin-vmax | 뷰포트의 너비와 높이 중 작은 쪽(vmin) 또는 큰 쪽(vmax)의 1%. 화면 방향(가로/세로)에 관계없이 일관된 크기를 유지할 때 유용 |
| vw-vh | 뷰포트(브라우저 창) 너비(vw)와 높이(vh)의 1%. 100vw = 뷰포트 전체 너비, 100vh = 뷰포트 전체 높이 |
cursor, scroll-*, will-change, contain (28개)
| 항목 | 설명 |
|---|---|
| all | unicode-bidi와 direction을 제외한 모든 속성을 한꺼번에 초기화합니다 |
| appearance | 요소의 플랫폼 네이티브 스타일을 제어합니다 |
| box-shadow | 요소에 하나 이상의 그림자 효과를 추가합니다 |
| cursor | 요소 위에서 마우스 커서의 모양을 설정합니다 |
| inherit | 속성값을 부모 요소로부터 강제로 상속받는 전역 키워드입니다 |
| initial | 속성을 CSS 명세의 초기값으로 설정하는 전역 키워드입니다 |
| overscroll-behavior-x | 가로 방향의 오버스크롤 동작을 제어합니다 |
| overscroll-behavior-y | 세로 방향의 오버스크롤 동작을 제어합니다 |
| overscroll-behavior | 스크롤이 끝에 도달했을 때의 동작(스크롤 체이닝, 바운스 등)을 제어합니다 |
| pointer-events | 요소가 마우스/터치 이벤트의 대상이 되는지 여부를 설정합니다 |
| resize | 사용자가 요소의 크기를 조절할 수 있는지 설정합니다 |
| revert-layer | 속성을 이전 캐스케이드 레이어의 값으로 되돌리는 전역 키워드입니다 |
| revert | 속성을 브라우저 기본 스타일시트의 값으로 되돌리는 전역 키워드입니다 |
| scroll-behavior | 스크롤 동작이 부드러운 애니메이션으로 이루어지는지 설정합니다 |
| scroll-margin | 스크롤 스냅 시 자식 요소의 스냅 영역에 마진을 추가합니다 |
| scroll-padding | 스크롤 스냅 시 컨테이너의 최적 뷰 영역에 패딩을 추가합니다 |
| scroll-snap-align | 스크롤 스냅 시 자식 요소의 정렬 위치를 설정합니다 |
| scroll-snap-stop | 빠르게 스크롤할 때 스냅 포인트를 건너뛸 수 있는지 설정합니다 |
| scroll-snap-type | 스크롤 컨테이너에서 스냅 포인트의 방향과 엄격도를 설정합니다 |
| touch-action | 터치 스크린에서 브라우저의 기본 터치 동작(스크롤, 줌)을 제어합니다 |
| unset | 상속 속성은 inherit, 비상속 속성은 initial로 설정하는 전역 키워드입니다 |
| user-select | 사용자가 텍스트를 선택할 수 있는지 여부를 제어합니다 |
| visual--caret-color | 텍스트 입력 커서(캐럿)의 색상을 설정합니다 |
| visual--contain-intrinsic-size | content-visibility: auto로 렌더링이 건너뛰어진 요소의 예상 크기를 지정합니다 |
| visual--contain | 요소의 렌더링 범위를 제한하여 성능을 최적화합니다 |
| visual--content-visibility | 요소의 콘텐츠 렌더링을 건너뛰어 초기 로딩 성능을 향상시킵니다 |
| visual--text-shadow | 텍스트에 그림자 효과를 추가합니다 |
| will-change | 브라우저에 곧 변경될 속성을 미리 알려 렌더링 최적화를 유도합니다 |
3D, 모션패스, 파티클, 글리치 등 고급 시각 효과 (15개)
| 항목 | 설명 |
|---|---|
| 3d-perspective-gallery | 3D 원근감이 적용된 이미지 갤러리. transform-style: preserve-3d와 perspective로 카드가 입체적으로 배치된다. |
| audio-reactive-bars | Web Audio API의 AnalyserNode로 주파수 데이터를 추출해 바 높이로 시각화하는 오디오 리액티브 이펙트. |
| css-motion-path | offset-path로 정의한 SVG 경로를 따라 요소가 이동하는 CSS 모션 패스. offset-distance를 애니메이션한다. |
| cursor-spotlight | 커서 위치에 원형 스포트라이트가 따라다니는 효과. CSS 변수와 radial-gradient로 구현한다. |
| cursor-trail | 커서를 따라다니는 잔상 효과. 마우스 이동 시 작은 원들이 생성되어 점차 사라진다. |
| elastic-overscroll | 스크롤 끝에 도달했을 때 콘텐츠가 탄성적으로 늘어났다 돌아오는 iOS 스타일 오버스크롤. |
| holographic-card | 마우스 위치에 따라 무지개빛 반사가 변하는 홀로그래픽 카드. CSS 변수로 틸트와 그래디언트를 연동한다. |
| image-hover-distortion | 이미지에 호버하면 CSS filter로 왜곡 효과가 적용된다. hue-rotate, saturate, contrast 조합으로 글리치 느낌을 낸다. |
| liquid-distortion | SVG feTurbulence와 feDisplacementMap으로 물결/왜곡 효과를 만든다. 텍스트나 이미지에 적용 가능. |
| morphing-clippath | clip-path: polygon()의 꼭짓점들이 계속 변형되면서 유기적인 도형이 만들어지는 배경 효과. |
| neon-glow-text | text-shadow를 여러 겹 쌓아 네온 간판 느낌의 글로우 텍스트를 만든다. 깜빡임 애니메이션 포함. |
| noise-grain-overlay | 필름 카메라 느낌의 노이즈 그레인 오버레이. 작은 SVG 패턴을 랜덤 이동시켜 노이즈 효과를 낸다. |
| particle-field | 마우스에 반응하는 파티클 시스템. 점들이 가까이 있으면 선으로 연결되고, 마우스를 피하거나 끌려온다. |
| scroll-image-sequence | Apple 스타일로 스크롤 위치에 따라 이미지 프레임이 재생되는 효과의 개념 구현. CSS steps()와 스크롤 연동. |
| smooth-scroll-lenis | lerp(선형 보간) 기반의 부드러운 스크롤. 브라우저 기본 스크롤을 비활성화하고 JS로 관성 스크롤을 구현한다. |
@keyframes와 animation 속성 활용 (23개)
| 항목 | 설명 |
|---|---|
| animation-composition | 애니메이션 효과가 기존 속성 값과 어떻게 합성될지 결정한다. |
| animation-delay | 애니메이션이 시작되기 전의 대기 시간을 설정한다. |
| animation-direction | 애니메이션의 재생 방향을 설정한다. 정방향, 역방향, 또는 번갈아 재생할 수 있다. |
| animation-duration | 애니메이션 한 사이클이 완료되는 데 걸리는 시간을 설정한다. |
| animation-fill-mode | 애니메이션 실행 전후에 요소에 적용할 스타일을 결정한다. |
| animation-iteration-count | 애니메이션이 반복되는 횟수를 설정한다. |
| animation-name | 적용할 @keyframes 애니메이션의 이름을 지정한다. |
| animation-play-state | 애니메이션의 재생 상태를 제어한다. 실행 중이거나 일시정지할 수 있다. |
| animation-range-end | 스크롤 기반 애니메이션이 끝나는 타임라인 위치를 설정한다. |
| animation-range-start | 스크롤 기반 애니메이션이 시작되는 타임라인 위치를 설정한다. |
| animation-range | 스크롤 기반 애니메이션의 재생 범위를 설정하는 단축 속성. animation-range-start와 animation-range-end를 한 번에 지정한다. |
| animation-timeline | 애니메이션을 구동하는 타임라인을 지정한다. 시간 기반 대신 스크롤이나 뷰 기반 타임라인을 사용할 수 있다. |
| animation-timing-function | 애니메이션의 진행 속도 곡선을 정의한다. 각 키프레임 구간에 개별적으로 적용된다. |
| animation | 애니메이션 관련 속성을 한 줄로 설정하는 단축 속성. name, duration, timing-function, delay, iteration-count, direction, fill-mode, play-state를 모두 포함한다. |
| keyframes | 애니메이션의 중간 단계를 정의하는 at-rule. 각 키프레임에서 CSS 속성 값을 지정하여 애니메이션 시퀀스를 만든다. |
| scroll-timeline-axis | 스크롤 타임라인의 진행 방향(축)을 설정한다. |
| scroll-timeline-name | 스크롤 타임라인에 이름을 부여한다. 다른 요소에서 animation-timeline으로 참조할 수 있다. |
| scroll-timeline | 스크롤 타임라인의 이름과 축을 한 번에 설정하는 단축 속성. |
| timeline-scope | 타임라인의 스코프(참조 가능 범위)를 확장한다. 기본적으로 타임라인은 하위 요소에서만 참조 가능하지만, 이 속성으로 상위까지 확장할 수 있다. |
| view-timeline-axis | 뷰 타임라인의 진행 방향(축)을 설정한다. |
| view-timeline-inset | 뷰 타임라인의 가시 영역을 조정하는 인셋(안쪽 여백) 값을 설정한다. |
| view-timeline-name | 뷰 타임라인에 이름을 부여한다. |
| view-timeline | 요소의 가시성에 기반한 뷰 타임라인을 생성하는 단축 속성. 이름과 축을 함께 지정한다. |
상태 변화에 부드러운 전환 (7개)
| 항목 | 설명 |
|---|---|
| starting-style | 요소가 처음 렌더링되거나 display: none에서 표시될 때 적용할 시작 스타일을 정의한다. 진입 전환 애니메이션을 가능하게 한다. |
| transition-behavior | 이산(discrete) 속성의 전환 동작을 제어한다. display 같은 비연속 속성의 전환을 가능하게 한다. |
| transition-delay | 전환 효과가 시작되기 전의 대기 시간을 설정한다. |
| transition-duration | 전환 효과가 완료되는 데 걸리는 시간을 설정한다. |
| transition-property | 전환 효과를 적용할 CSS 속성을 지정한다. |
| transition-timing-function | 전환 효과의 속도 곡선을 정의한다. |
| transition | CSS 속성의 전환 효과를 한 줄로 설정하는 단축 속성. property, duration, timing-function, delay를 포함한다. |
스피너, 스켈레톤, shimmer 등 로딩 표시 (15개)
| 항목 | 설명 |
|---|---|
| content-placeholder-fade | 플레이스홀더가 페이드아웃되면서 실제 콘텐츠가 페이드인하는 전환 효과. 버튼으로 상태 토글. |
| loading-text-dots | "Loading" 텍스트 뒤에 점이 하나씩 나타났다 사라지는 클래식한 로딩 표시. steps()와 overflow로 구현한다. |
| orbit-loader | 작은 원이 중심점 주위를 위성처럼 궤도를 도는 로더. 여러 궤도를 겹치면 더 화려한 효과. |
| percentage-counter | CSS @property를 사용해 0%에서 100%까지 숫자가 카운트되는 애니메이션. counter()와 커스텀 프로퍼티를 조합한다. |
| progress-bar-indeterminate | 총 진행량을 알 수 없을 때 사용하는 무한 좌우 이동 프로그레스 바. 바가 짧아졌다 길어지며 좌에서 우로 반복 이동한다. |
| progress-bar-striped | 줄무늬 패턴이 사선으로 이동하는 프로그레스 바. repeating-linear-gradient로 줄무늬를 만들고 background-position을 애니메이션한다. |
| pull-to-refresh | 모바일 당겨서 새로고침 패턴. 터치/마우스 드래그로 스피너를 끌어내리면 회전하며 로딩 상태가 된다. |
| skeleton-shimmer | 콘텐츠 로딩 전 회색 뼈대 위에 반짝이는 그래디언트가 좌에서 우로 이동하는 스켈레톤 UI. |
| skeleton-to-content | 스켈레톤 상태에서 실제 콘텐츠가 로드되면 자연스럽게 전환되는 효과. 버튼 클릭으로 로드 완료를 시뮬레이션한다. |
| spinner-bar-wave | 세로 바 여러 개가 높낮이를 달리하며 웨이브 형태로 움직이는 이퀄라이저 스타일 로딩. |
| spinner-border | 테두리 일부만 색칠한 원을 회전시키는 가장 기본적인 로딩 스피너. border와 border-radius, animation: rotate만으로 구현한다. |
| spinner-circular-progress | SVG circle의 stroke-dasharray와 stroke-dashoffset을 애니메이션하여 원형 진행 표시를 만든다. 무한 회전과 함께 dash가 늘었다 줄어드는 효과. |
| spinner-dots-bounce | 3개의 점이 순차적으로 위아래 바운스하는 로딩 애니메이션. animation-delay로 시차를 줘서 파동 효과를 만든다. |
| spinner-dots-pulse | 점이 커졌다 작아지며 순환하는 펄스 로딩. scale 변환과 opacity를 조합해 부드러운 맥박 효과를 낸다. |
| spinner-morphing-shape | border-radius를 애니메이션하여 원 -> 사각형 -> 다이아몬드 등으로 반복 변형되는 로더. |
호버, 클릭, 포커스 등 작은 피드백 (20개)
| 항목 | 설명 |
|---|---|
| accordion-smooth-height | 아코디언 패널이 grid-template-rows를 활용하여 부드럽게 높이 애니메이션되는 효과. |
| button-border-draw | 호버 시 테두리가 순차적으로 그려지는 효과. ::before와 ::after를 사용하여 상하좌우 테두리를 나눠 그린다. |
| button-hover-fill | 호버 시 배경색이 왼쪽에서 오른쪽으로 채워지는 버튼 효과. ::before 의사 요소와 scaleX 트랜스폼을 활용한다. |
| button-magnetic | 커서가 버튼 근처에 오면 버튼이 마치 자석처럼 커서 쪽으로 끌려오는 효과. |
| button-ripple | Material Design 스타일의 물결(ripple) 효과. 클릭한 위치에서 원형으로 퍼져나간다. |
| card-3d-tilt | 마우스 위치에 따라 카드가 3D로 기울어지는 인터랙티브 효과. |
| card-hover-lift | 카드에 호버하면 위로 살짝 들어올리며 그림자가 확대되는 효과. |
| checkbox-animation | 체크박스 선택 시 SVG 체크마크가 그려지는 애니메이션 효과. |
| dropdown-scale-fade | 드롭다운 메뉴가 scale과 fade 조합으로 열리고 닫히는 효과. |
| hamburger-morph | 햄버거 메뉴 아이콘(세 줄)이 X 아이콘으로 부드럽게 모핑되는 효과. |
| image-hover-zoom | 이미지에 호버하면 컨테이너 내에서 부드럽게 확대되는 효과. |
| input-focus-float-label | 입력 필드에 포커스하거나 값이 있을 때 라벨이 위로 떠오르는 플로팅 라벨 패턴. |
| input-validation-shake | 유효성 검사 실패 시 입력 필드가 좌우로 흔들리는 시각적 피드백 효과. |
| link-underline-slide | 링크에 호버하면 밑줄이 왼쪽에서 오른쪽으로 슬라이드하며 나타나는 효과. |
| micro-interactions--skeleton-shimmer | 콘텐츠 로딩 중 스켈레톤 UI에 빛이 흐르는 쉬머(shimmer) 효과. |
| notification-badge-bounce | 알림 뱃지가 바운스 애니메이션과 함께 나타나는 효과. |
| popover-entry-exit | @starting-style과 transition-behavior: allow-discrete를 사용한 네이티브 Popover API 진입/퇴장 애니메이션. |
| progress-bar-fill | 프로그레스 바가 지정된 비율까지 부드럽게 채워지는 애니메이션. |
| toggle-switch-elastic | 탄성(elastic) 이징이 적용된 토글 스위치. 슬라이더가 끝에서 통통 튀는 듯한 느낌을 준다. |
| tooltip-fade-slide | 툴팁이 fade + slide 조합으로 부드럽게 등장하고 퇴장하는 효과. |
bounce, shake, fade 등 모션 패턴 (20개)
| 항목 | 설명 |
|---|---|
| aurora-effect | 오로라(Northern Lights)처럼 빛이 일렁이는 배경 효과 |
| blob-morph | 유기적인 블롭 형태가 계속 변형되며 움직이는 효과 |
| circular-motion | 요소가 원형 궤도를 따라 회전하는 애니메이션 |
| confetti-burst | 클릭하면 색종이가 폭발하듯 터지는 Canvas 기반 축하 효과 |
| flip-card | 카드를 호버하거나 클릭하면 뒤집히며 뒷면이 보이는 3D 효과 |
| glassmorphism-card | 프로스트 유리 효과의 카드. backdrop-filter로 배경을 흐리게 하며, 호버 시 효과가 강화된다. |
| gradient-mesh-animate | 여러 그래디언트가 겹쳐져 움직이는 메시 그래디언트 배경 효과 |
| infinite-marquee | 끊김 없이 무한 스크롤되는 텍스트 또는 로고 띠 효과 |
| lava-lamp | CSS blur와 contrast 필터를 활용한 라바램프 효과. 방울들이 떠다니며 합쳐지고 분리된다. |
| metaball-effect | blur와 contrast 필터를 조합하여 원들이 합쳐지고 분리되는 메타볼 효과 |
| neumorphism-press | 뉴모피즘(소프트 UI) 디자인의 버튼. 누르면 들어간 듯한 입체 효과가 표현된다. |
| pulse-breathing | 맥박이나 호흡처럼 부드럽게 확대/축소가 반복되는 효과 |
| rotating-word | 문장 안의 단어가 순환하며 교체되는 효과 ("We build [websites/apps/brands]") |
| stagger-list-enter | 리스트 아이템이 시차를 두고 순차적으로 등장하는 애니메이션 |
| svg-line-draw | SVG 경로가 한 획씩 그려지는 애니메이션 효과 |
| text-character-wave | 글자 하나하나가 파도처럼 위아래로 움직이는 애니메이션 |
| text-glitch | 디지털 글리치(깨짐) 효과가 적용된 텍스트. ::before와 ::after로 색 어긋남을 표현한다. |
| text-gradient-sweep | 텍스트 위로 그래디언트가 계속 흐르는 효과 |
| text-reveal-slide | 텍스트가 마스크 뒤에서 아래에서 위로 슬라이드하며 공개되는 효과 |
| typewriter | 텍스트가 한 글자씩 타이핑되는 효과와 깜빡이는 커서 |
페이지/뷰 전환 효과 (10개)
| 항목 | 설명 |
|---|---|
| circle-expand | 클릭 지점에서 원이 확장되어 새 페이지로 전환 |
| crossfade-transition | 이전 페이지가 fade out되고 새 페이지가 fade in되는 기본 전환 |
| curtain-wipe | 색상 커튼이 화면을 덮은 후 걷히면서 새 콘텐츠가 공개되는 전환 |
| dark-mode-circular-spread | 다크모드 토글 시 클릭 지점에서 원형으로 확장되며 테마가 전환 |
| flip-page-transition | 책 페이지를 넘기는 것처럼 3D로 회전하며 전환 |
| ios-style-push | iOS 네비게이션 스타일의 push(진입)/pop(복귀) 전환 |
| material-shared-axis | Material Design 3의 공유 축 전환 패턴 (Forward/Backward) |
| shared-element-morph | 리스트에서 디테일 뷰로 전환 시 공유 요소가 자연스럽게 모핑 |
| slide-push-transition | 새 페이지가 들어오면서 이전 페이지를 밀어내는 전환 |
| view-transition-slide | View Transitions API를 활용한 슬라이드 전환 |
스크롤 기반 애니메이션 (15개)
| 항목 | 설명 |
|---|---|
| color-section-transition | 섹션별로 배경색이 부드럽게 전환되는 효과 |
| counter-rollup | 숫자가 0에서 목표 값까지 카운트업되는 애니메이션 |
| fade-in-on-scroll | 요소가 뷰포트에 진입할 때 투명에서 불투명으로 자연스럽게 나타남 |
| horizontal-scroll-section | 수직 스크롤을 수평 이동으로 변환하는 효과 |
| image-reveal-clippath | 색상 오버레이가 슬라이드한 후 이미지가 공개되는 효과 |
| parallax-css | 순수 CSS로 구현하는 패럴랙스 효과. 레이어별로 서로 다른 속도로 스크롤 |
| scroll-driven-reveal | 스크롤에 따라 clip-path와 scale로 콘텐츠를 점진적으로 공개 |
| scroll-linked-header-shrink | 스크롤 시 헤더가 점점 작아지며 compact 스타일로 전환 |
| scroll-progress-bar | 페이지 스크롤 진행률을 상단 바로 시각화 |
| scroll-snap-animation | scroll-snap으로 섹션에 스냅하면서 각 섹션에 진입 애니메이션 적용 |
| scroll-velocity-skew | 스크롤 속도에 따라 요소가 기울어지는 효과 |
| slide-in-on-scroll | 좌, 우, 아래에서 슬라이드하며 등장하는 스크롤 애니메이션 |
| staggered-grid-reveal | 그리드 아이템이 하나씩 순차적으로 등장하는 애니메이션 |
| sticky-section-swap | sticky 포지션을 활용해 스크롤에 따라 콘텐츠가 교체되는 효과 |
| text-fill-on-scroll | 스크롤에 따라 텍스트가 색상으로 점진적으로 채워지는 효과 |
렌더링 성능, rAF, 페인트, 레이아웃 스래싱 (15개)
| 항목 | 설명 |
|---|---|
| browser-rendering--will-change | 브라우저에 어떤 속성이 변경될 예정인지 미리 알려 GPU 레이어를 사전 생성한다. 남용하면 오히려 메모리 낭비. |
| composite-gpu | 컴포지터만 사용하는 속성(transform, opacity)은 Layout/Paint 없이 GPU에서 레이어를 합성만 하므로 가장 성능이 좋다. |
| critical-rendering-path | 브라우저가 HTML/CSS/JS를 받아 화면에 픽셀로 그리기까지의 전체 과정. DOM 구축 → CSSOM 구축 → Render Tree → Layout → Paint → Composite 6단계. |
| css-containment | contain 속성으로 요소의 렌더링 영향 범위를 제한하고, content-visibility: auto로 화면 밖 요소의 렌더링을 건너뛴다. |
| forced-synchronous-layout | JS에서 레이아웃 속성(offsetHeight 등)을 읽으면 브라우저가 보류 중인 스타일 변경을 즉시 적용(강제 레이아웃)하여 정확한 값을 반환한다. 이것이 성능 병목의 주요 원인. |
| image-optimization | lazy loading, 차세대 포맷(WebP/AVIF), srcset, decoding='async' 등 이미지 성능 최적화 기법. |
| layout-thrashing | 읽기/쓰기가 반복되어 레이아웃이 여러 번 강제 실행되는 현상(Layout Thrashing)과 fastdom 등의 해결 패턴. |
| memory-management | 자바스크립트의 메모리 누수 패턴과 방지법. 이벤트 리스너 미해제, 클로저의 외부 변수 참조, 분리된 DOM 참조가 대표적. |
| performance-now-measuring | performance.now()로 고해상도(마이크로초) 타이밍을 측정하고, Performance API로 코드 실행 시간과 리소스 로딩을 분석한다. |
| reflow-layout | 요소의 기하학적 속성(크기, 위치)이 변경되면 레이아웃을 다시 계산하는 과정. 렌더링 파이프라인에서 가장 비용이 큰 작업 중 하나. |
| repaint | 요소의 시각적 속성(색상, 그림자 등)만 변경되어 레이아웃 재계산 없이 다시 그리는 과정. Reflow보다 비용이 적다. |
| request-animation-frame | 브라우저의 다음 리페인트 직전에 콜백을 실행한다. 60fps 기준 약 16.7ms마다 호출되며, 부드러운 애니메이션의 핵심. |
| request-idle-callback | 브라우저가 유휴 상태일 때 우선순위가 낮은 작업을 실행한다. 사용자 인터랙션이나 애니메이션을 방해하지 않으면서 백그라운드 작업 수행. |
| resource-loading | async/defer 스크립트, preload, prefetch, preconnect 등 리소스 로딩 최적화 전략. 렌더링 차단을 최소화하고 중요 리소스를 우선 로드. |
| web-workers | 메인 스레드와 별도의 백그라운드 스레드에서 무거운 연산을 실행한다. UI 응답성을 유지하면서 CPU 집약적 작업 처리. |
map/filter/reduce, JSON, 정렬, 비동기 데이터 (12개)
| 항목 | 설명 |
|---|---|
| array-filter-search | 입력값에 따라 배열을 실시간 필터링하여 검색 UI를 구현하는 패턴 |
| array-map-rendering | 배열 데이터를 DOM 요소로 변환하여 리스트/카드 UI를 렌더링하는 패턴 |
| array-reduce-aggregation | 데이터를 카테고리별로 그룹핑하고 집계하여 섹션별로 렌더링하는 패턴 |
| array-sort-ordering | 버튼 클릭으로 이름순, 가격순, 날짜순 등 다양한 기준으로 정렬을 전환하는 패턴 |
| debounce | 연속적인 함수 호출을 마지막 호출 후 일정 시간이 지나야 실행하는 패턴. 검색 입력에 필수 |
| deep-clone-immutable | structuredClone과 spread operator를 사용한 깊은 복사 및 불변 상태 업데이트 패턴 |
| destructuring-optional-chaining | 구조 분해 할당과 옵셔널 체이닝으로 중첩 API 응답에서 안전하게 데이터를 추출하는 패턴 |
| fetch-async-await | fetch API와 async/await를 사용한 데이터 호출 및 에러 처리 패턴 (mock data 사용) |
| localstorage-crud | 로컬 저장소를 사용한 데이터 생성, 읽기, 수정, 삭제 패턴 (할 일 목록) |
| pagination-pattern | 배열을 slice()로 나누어 페이지별로 표시하는 클라이언트 사이드 페이지네이션 패턴 |
| template-literal-rendering | 템플릿 리터럴과 표현식을 활용하여 데이터 기반 동적 HTML을 생성하는 패턴 |
| throttle | 일정 시간 간격으로만 함수 실행을 허용하는 패턴. 스크롤/리사이즈 이벤트 최적화에 필수 |
이벤트, 위임, 버블링, custom event (18개)
| 항목 | 설명 |
|---|---|
| addeventlistener-options | capture, once, passive, signal(AbortController) 옵션을 활용한 이벤트 리스너 등록과 해제 |
| clipboard-events | copy, paste, cut 이벤트와 navigator.clipboard API를 사용한 클립보드 조작 |
| create-append | JavaScript로 DOM 요소를 동적으로 생성하고 문서에 추가하는 패턴 |
| custom-events | new CustomEvent()와 dispatchEvent()로 컴포넌트 간 느슨한 결합 통신을 구현 |
| dom-events--pointer-events | 마우스, 터치, 펜을 통합하는 Pointer Events API - 디바이스에 관계없이 일관된 인터랙션 처리 |
| dom-traversal | parentElement, children, nextElementSibling, closest() 등으로 DOM 트리를 탐색하는 패턴 |
| drag-events | HTML5 드래그 앤 드롭 API - dragstart, drag, dragover, drop과 dataTransfer 객체 |
| event-bubbling-capturing | 이벤트가 DOM 트리를 따라 전파되는 두 가지 방향(캡처링/버블링)과 stopPropagation |
| event-delegation | 자식 요소마다 이벤트를 달지 않고 부모 요소 하나에만 이벤트를 등록하여 버블링으로 처리하는 패턴 |
| focus-management | focus(), blur(), tabindex, focus trap을 활용한 접근성 있는 포커스 관리 (모달, 드롭다운) |
| form-events | submit, input, change, focus/blur 이벤트와 FormData API를 사용한 폼 처리 |
| innerhtml-textcontent | HTML 문자열 파싱과 순수 텍스트 설정의 차이점, XSS 보안 위험 |
| keyboard-events | keydown, keyup 이벤트와 key/code 프로퍼티를 사용한 키보드 입력 처리 및 단축키 구현 |
| mouse-events | click, dblclick, mousedown/up/move와 좌표 시스템(clientX/Y, pageX/Y, offsetX/Y)의 차이 |
| queryselector | CSS 선택자를 사용하여 DOM 요소를 선택하는 가장 범용적인 메서드 |
| scroll-events | scroll, scrollend 이벤트와 passive 리스너를 사용한 성능 최적화, IntersectionObserver 대안 |
| touch-events | touchstart/move/end와 touches 배열을 사용한 모바일 터치 인터랙션, 핀치/스와이프 감지 |
| window-events | resize, load, DOMContentLoaded, beforeunload, hashchange, popstate 등 전역 이벤트 |
classList, style, getComputedStyle, 좌표 (15개)
| 항목 | 설명 |
|---|---|
| constructable-stylesheets | new CSSStyleSheet()로 JavaScript에서 직접 스타일시트를 생성하고 adoptedStyleSheets로 문서나 Shadow DOM에 적용한다. |
| css-custom-properties-js | setProperty(), getPropertyValue(), removeProperty()로 CSS 변수(--*)를 JavaScript에서 동적으로 읽고 쓰고 삭제한다. |
| css-supports | 브라우저가 특정 CSS 기능을 지원하는지 JavaScript에서 감지한다. @supports 규칙의 프로그래밍 버전이다. |
| css-typed-om | 문자열 대신 타입이 있는 JavaScript 객체로 CSS 값을 다룬다. CSS.px(), CSS.percent() 등으로 타입 안전한 조작이 가능하다. |
| cssstylesheet-insertrule | 기존 스타일시트에 CSS 규칙을 동적으로 삽입한다. 인라인 스타일과 달리 선택자를 사용할 수 있어 여러 요소에 한번에 적용 가능하다. |
| dataset-css | HTML data-* 속성을 JavaScript의 dataset API로 조작하고, CSS의 속성 선택자([data-*])로 스타일을 연동하는 패턴. |
| dynamic-style-injection | document.createElement('style')로 <style> 태그를 동적으로 생성하여 문서에 삽입한다. 런타임에 CSS 규칙을 생성할 때 유용하다. |
| element-classlist | CSS 클래스를 추가, 제거, 토글, 교체하는 메서드를 제공하는 DOMTokenList. className보다 안전하고 편리하다. |
| element-style | 인라인 스타일을 직접 읽고 쓰는 가장 기본적인 방법. style 객체의 프로퍼티는 camelCase로 접근한다. |
| forced-reflow | 특정 DOM 프로퍼티를 읽으면 브라우저가 즉시 레이아웃을 재계산(forced reflow)한다. 읽기/쓰기를 분리하는 배치 패턴으로 성능을 최적화한다. |
| get-bounding-client-rect | 요소의 크기(width, height)와 뷰포트 기준 위치(top, right, bottom, left, x, y)를 DOMRect 객체로 반환한다. |
| get-computed-style | 요소에 적용된 모든 CSS의 최종 계산 값을 읽는다. 외부 스타일시트, 상속, 기본 스타일까지 포함한 실제 렌더링 값을 반환한다. |
| inline-style-batch-csstext | cssText를 사용하면 여러 인라인 스타일을 한 번에 문자열로 설정할 수 있어, 개별 프로퍼티 설정보다 간결하다. |
| match-media | JavaScript에서 미디어 쿼리를 평가하고, 미디어 조건 변화를 실시간으로 감지하여 반응형 로직을 구현한다. |
| style-vs-class-performance | 인라인 style 조작과 class 토글 방식의 차이와 성능을 비교하고, 상황에 따른 최적의 선택 기준을 제시한다. |
var/let/const, 호이스팅, 클로저, this, prototype (20개)
| 항목 | 설명 |
|---|---|
| arrow-functions | 화살표 함수의 간결한 문법과 일반 함수와의 this 바인딩 차이 |
| async-await | Promise 기반 비동기 코드를 동기 코드처럼 작성할 수 있는 문법적 설탕(syntactic sugar) |
| closure | 함수가 선언될 때의 렉시컬 환경을 기억하여, 외부 함수가 종료된 후에도 외부 변수에 접근할 수 있는 함수 |
| destructuring | 객체와 배열에서 값을 추출하여 변수에 할당하는 간결한 문법 |
| event-loop | 콜 스택, 태스크 큐(매크로태스크), 마이크로태스크 큐의 동작 원리와 실행 순서 |
| higher-order-functions | 함수를 인자로 받거나 함수를 반환하는 함수 패턴 - map, filter, reduce 등의 기반 |
| iterator-generator | 반복 프로토콜(Symbol.iterator)과 제너레이터 함수(function*)를 사용한 지연 평가와 커스텀 순회 |
| let-const-var | 변수 선언 키워드의 스코프, 호이스팅, 재할당 가능 여부 차이를 이해하고 올바르게 사용하기 |
| map-set | 키-값 쌍을 저장하는 Map과 고유값 집합을 관리하는 Set 컬렉션 |
| nullish-coalescing | null 또는 undefined만 체크하여 기본값을 설정하는 연산자 - ||와의 차이점 |
| optional-chaining | null 또는 undefined인 중간 값에서 에러 없이 안전하게 깊은 속성에 접근하는 연산자 |
| primitive-types | string, number, boolean, null, undefined, symbol, bigint - 불변(immutable)하며 값으로 비교되는 기본 데이터 타입 |
| promise | 비동기 작업의 완료/실패를 나타내는 객체 - then/catch/finally 체이닝과 Promise.all/race/allSettled |
| proxy-reflect | 객체의 기본 동작(get, set, delete 등)을 가로채는 메타프로그래밍 도구 - Vue 3 반응성 시스템의 기반 |
| reference-types | Object, Array, Function, Map, Set 등 힙에 저장되며 참조로 비교되는 데이터 타입 |
| settimeout-setinterval | 타이머를 사용한 지연 실행과 반복 실행, clearTimeout/clearInterval로 취소 |
| spread-rest | 전개 연산자(...)로 배열/객체를 펼치거나, 나머지 매개변수로 가변 인자를 받는 패턴 |
| template-literals | 백틱(`)을 사용한 문자열 보간, 멀티라인, 태그드 템플릿 리터럴 |
| type-coercion | == vs ===의 차이와 JavaScript의 암묵적 타입 변환 규칙을 이해하여 버그를 방지 |
| weakref-finalization | 약한 참조로 가비지 컬렉션을 방해하지 않는 참조와, 객체 소멸 시 콜백을 등록하는 메커니즘 |
lerp, easing, 삼각함수, spring 물리 (20개)
| 항목 | 설명 |
|---|---|
| angle-atan2 | 두 점 사이의 각도를 구함. 시선 추적, 방향 계산, 회전에 핵심 |
| bezier-curve | 2차/3차 베지어 곡선 좌표 계산. 경로 애니메이션, 곡선 그리기의 기초 |
| cartesian-to-polar | 직교좌표(x, y)를 극좌표(반지름, 각도)로 변환. 마우스 위치를 각도/거리로 해석 |
| distance-2d | 두 점 사이의 직선 거리를 계산. 근접 감지, 거리 기반 효과의 기본 |
| dot-product | 두 벡터의 내적. 방향 유사도, 조명 계산, 투영에 사용 |
| easing-functions | t(0~1) 값을 변환하여 가속/감속 곡선을 생성. 자연스러운 모션의 핵심 |
| lerp | 두 값 사이를 t(0~1) 비율로 보간. 부드러운 전환의 기본 공식 |
| magnetic-effect | 마우스가 가까이 오면 요소가 끌려가는 자석 효과. 버튼, CTA에 활용 |
| map-remap-range | 하나의 범위에 있는 값을 다른 범위로 변환. 입력을 시각적 출력으로 매핑할 때 핵심 |
| math-motion--circular-motion | 원 궤도를 따라 회전하는 운동. 위성, 시계, 궤도 애니메이션 |
| math-motion--clamp | 값을 최소/최대 범위 내로 제한. 드래그 경계, 입력 값 제한 등에 필수 |
| math-motion--elastic-overscroll | 경계를 넘으면 저항이 증가하는 탄성 오버스크롤. iOS 풀투리프레시 같은 효과 |
| momentum-inertia | 드래그 후 놓으면 관성으로 미끄러지며 마찰로 감속. 자연스러운 제스처 인터랙션 |
| noise-simplex | 부드럽게 변하는 유사 랜덤 값. Math.random()보다 자연스러운 움직임 생성 |
| normalize-vector | 벡터의 방향은 유지하면서 크기를 1로 만듦. 일정한 속도의 방향 이동에 필수 |
| parallax-mouse | 마우스 위치에 따라 여러 레이어가 다른 속도로 이동. 깊이감 표현 |
| polar-to-cartesian | 극좌표(반지름, 각도)를 직교좌표(x, y)로 변환. 원형 배치, 궤도 모션의 기본 |
| sine-wave-motion | 사인 함수로 주기적 왕복 운동. 파도, 호흡, 펄스 효과의 기본 |
| smooth-cursor-following | lerp + requestAnimationFrame으로 커스텀 커서가 마우스를 부드럽게 따라감 |
| spring-physics | 스프링(용수철) 물리 시뮬레이션. 바운스, 탄성 효과의 기반 |
IntersectionObserver, MutationObserver 등 (8개)
| 항목 | 설명 |
|---|---|
| infinite-scroll | 리스트 끝의 센티널(sentinel) 요소를 감시하여, 끝에 도달하면 자동으로 다음 데이터를 불러오는 무한 스크롤을 구현한다. |
| intersection-observer-basics | 요소가 뷰포트(또는 지정한 루트)에 진입하거나 퇴장하는 것을 비동기적으로 감지한다. 스크롤 이벤트 리스너보다 훨씬 효율적이다. |
| intersection-observer-options | threshold로 트리거 비율을 세밀하게 설정하고, rootMargin으로 감지 영역을 확장/축소하여 미리 또는 늦게 트리거할 수 있다. |
| lazy-loading-io | IntersectionObserver로 이미지나 컴포넌트가 뷰포트 근처에 올 때만 로딩하여 초기 페이지 로드 성능을 개선한다. |
| mutation-observer | DOM 트리의 변화(자식 추가/삭제, 속성 변경, 텍스트 변경)를 비동기적으로 감지한다. |
| performance-observer | 브라우저 성능 메트릭(LCP, FCP, FID, CLS 등)을 관찰하고 수집한다. Core Web Vitals 모니터링에 필수적이다. |
| resize-observer | 요소의 크기(width, height) 변화를 감지한다. 컨테이너 쿼리 대용이나 반응형 컴포넌트 구현에 사용된다. |
| scroll-triggered-animation | 스크롤 시 요소가 뷰포트에 진입하면 애니메이션 클래스를 추가하여 등장 효과를 구현한다. |
모달, 탭, 캐러셀, 무한스크롤 등 UI (14개)
| 항목 | 설명 |
|---|---|
| accordion | 여러 패널을 접었다 펼치는 아코디언. 부드러운 높이 애니메이션과 아이콘 회전 포함 |
| bottom-sheet | 모바일 환경의 바텀 시트 UI. 터치 드래그로 올리고 내리는 인터랙션 포함 |
| dark-mode-toggle | 다크모드와 라이트모드를 CSS 변수로 전환하고 localStorage에 설정을 저장하는 패턴 |
| drag-and-drop | 드래그 앤 드롭으로 리스트 아이템의 순서를 변경하는 패턴 |
| dropdown-menu | 드롭다운 메뉴 열기/닫기, 항목 선택, 외부 클릭 닫기 패턴 |
| image-lazy-loading | IntersectionObserver를 사용하여 뷰포트에 진입한 이미지만 로드하는 성능 최적화 패턴 |
| modal-dialog | 모달 열기/닫기, 백드롭 클릭 닫기, ESC 키 닫기를 포함한 모달 다이얼로그 패턴 |
| responsive-nav | 데스크톱에서는 가로 네비게이션, 모바일에서는 햄버거 메뉴로 전환되는 반응형 패턴 |
| sidebar-toggle | 사이드바 열기/닫기 애니메이션. 모바일에서는 오버레이, 데스크톱에서는 push 방식 |
| skeleton-loading | 데이터 로딩 중 스켈레톤 UI를 표시하고, 로드 완료 시 실제 콘텐츠로 전환하는 패턴 |
| smooth-scroll-to-section | 네비게이션 클릭 시 해당 섹션으로 부드럽게 스크롤 이동하는 패턴 |
| tab-component | 탭 버튼 클릭으로 콘텐츠를 전환하며, 활성 탭에 인디케이터를 표시하는 패턴 |
| toast-notification | 화면 하단이나 상단에 잠시 나타났다 자동으로 사라지는 알림 메시지 패턴 |
| ui-patterns--infinite-scroll | IntersectionObserver로 스크롤 끝에 도달하면 자동으로 추가 데이터를 불러오는 패턴 |
Element.animate, Animation 객체 (12개)
| 항목 | 설명 |
|---|---|
| animation-composite | composite 옵션으로 같은 요소에 걸린 여러 애니메이션의 합성 방식을 제어한다. 'add'는 값을 더하고, 'accumulate'는 누적한다. |
| animation-controls | Animation 객체의 메서드로 애니메이션을 재생, 일시정지, 역재생, 취소할 수 있다. |
| animation-finished | 애니메이션 완료 시점을 Promise로 감지한다. async/await 패턴으로 순차 애니메이션 체이닝이 가능하다. |
| animation-timing-options | animate()의 두 번째 인자로 duration, easing, iterations, fill, delay, direction, composite 등 다양한 타이밍 옵션을 설정한다. |
| element-animate | 요소에 키프레임 기반 애니메이션을 JS로 직접 생성한다. CSS @keyframes 없이 동적으로 애니메이션을 만들 수 있다. |
| get-animations | 요소에 현재 걸린 모든 애니메이션 목록을 배열로 반환한다. 전체 문서의 애니메이션도 조회할 수 있다. |
| keyframe-effect | 키프레임 효과를 객체로 분리하여 재사용하거나, 여러 요소에 동일한 효과를 적용할 수 있다. |
| lerp-interpolation | lerp(a, b, t) 패턴으로 현재 값에서 목표 값으로 매 프레임 부드럽게 보간한다. 마우스 따라가기, 부드러운 스크롤 등에 활용한다. |
| raf-basics | 브라우저 렌더링 주기(보통 60fps)에 맞춰 콜백을 실행하는 프레임 단위 루프. 부드러운 커스텀 애니메이션의 기본이다. |
| raf-cancellation | cancelAnimationFrame으로 예약된 rAF 콜백을 취소하여 메모리 누수와 불필요한 연산을 방지한다. |
| raf-deltatime | 프레임 간 경과 시간(deltaTime)을 계산하여 프레임률에 독립적인 일정 속도 애니메이션을 구현한다. |
| web-animation-api--animation-timeline | currentTime으로 애니메이션 타임라인을 직접 조작(스크럽)하고, playbackRate로 재생 속도를 제어한다. |
Specification, CQRS, Saga 등 고급 패턴 (15개)
| 항목 | 설명 |
|---|---|
| aspect-patterns | 횡단 관심사를 분리하는 AOP 패턴. 프록시 기반 로깅, 트랜잭션, 권한, 감사 구현 |
| batch-processing | 대용량 데이터를 청크 단위로 읽고-처리-쓰기하는 패턴. Spring Batch 개념과 직접 구현 |
| circuit-state-machine | 상태와 전이를 명시적으로 관리하는 패턴. enum 기반 상태 머신, 전이 테이블, 서킷 브레이커 구현 |
| event-driven | 이벤트 발행/구독으로 컴포넌트 간 결합도를 낮추는 패턴. EventBus 구현, 비동기 이벤트 처리 |
| feature-toggle | 코드 배포 없이 기능을 켜고 끄는 패턴. 전략 기반 토글, A/B 테스트, 점진적 롤아웃 |
| fluent-api | 메서드 체이닝으로 읽기 쉬운 코드를 작성하는 설계 기법. 타입 안전 빌더, DSL 스타일 API 구현 |
| functional-java | Java에서 함수형 프로그래밍 기법 적용. Either, Try, Validation 패턴으로 안전한 에러 처리 |
| interpreter | 간단한 언어의 문법을 정의하고 해석하는 패턴. DSL 구현, 표현식 파싱과 평가 |
| monad-pattern | 값을 감싸고 flatMap으로 체이닝하는 패턴. Optional이 모나드인 이유, 컨텍스트 전파의 원리 |
| object-pool | 생성 비용이 큰 객체를 미리 만들어 재사용하는 패턴. 커넥션 풀의 원리, GenericObjectPool 활용 |
| pipeline-pattern | 데이터를 여러 단계를 거쳐 순차적으로 변환하는 패턴. Function 체이닝, 필터/변환/집계 파이프라인 |
| plugin-architecture | 코어 시스템을 수정하지 않고 기능을 확장할 수 있는 구조. Java SPI와 ServiceLoader 활용 |
| scheduler-patterns | 정기 작업 실행을 위한 스케줄링 패턴. Timer, ScheduledExecutorService, cron 기반 스케줄러 |
| type-safe-builder | 컴파일 타임에 필수 파라미터 설정 순서를 강제하는 빌더 패턴. 각 단계마다 다른 타입을 반환 |
| visitor-pattern | 객체 구조를 변경하지 않고 새로운 연산을 추가하는 패턴. 더블 디스패치, sealed class와의 조합 |
정렬, 탐색, DFS/BFS, DP, 그리디 등 (20개)
| 항목 | 설명 |
|---|---|
| backtracking | 해를 찾는 과정에서 조건에 맞지 않으면 되돌아가는 기법: N-Queen, 순열, 조합 생성 |
| bfs | 큐를 이용한 너비 우선 탐색, 최단 경로, 레벨별 탐색 |
| binary-search | 정렬된 배열에서 O(log n)으로 원소를 탐색하는 알고리즘. Arrays.binarySearch 활용과 lower/upper bound 변형 |
| binary-tree | 이진 트리의 구조와 전위/중위/후위/레벨 순회 구현 |
| bst | 이진 탐색 트리의 삽입, 삭제, 검색, 높이 균형 확인 |
| dfs | 재귀와 스택을 이용한 깊이 우선 탐색, 경로 탐색, 사이클 감지 |
| dijkstra | 가중치 그래프에서 단일 출발점 최단 경로를 찾는 알고리즘, PriorityQueue 활용 |
| dp-knapsack | 0/1 배낭 문제와 동전 교환 문제로 배우는 2차원 DP |
| dynamic-programming | DP의 핵심 개념: 메모이제이션(탑다운)과 타뷸레이션(바텀업), 피보나치와 계단 오르기 |
| graph-representation | 인접 리스트와 인접 행렬로 그래프를 표현하는 방법, 가중치 그래프 포함 |
| greedy | 매 순간 최선의 선택을 하여 전체 최적해를 구하는 그리디 알고리즘, 활동 선택 문제 |
| hash-table | 해시 테이블의 원리와 구현, 충돌 해결 전략 (체이닝, 개방 주소법) |
| heap | 최소힙/최대힙 구현, heapify 과정, Java PriorityQueue 활용 |
| linked-list | 단일/이중 연결 리스트 구현, 역전, 중간 노드 찾기 등 핵심 연산 |
| queue-implementation | FIFO 자료구조와 원형 큐 구현, BFS의 기초가 되는 핵심 자료구조 |
| sliding-window | 고정 또는 가변 크기의 윈도우를 배열/문자열 위에서 이동시키며 부분 문제를 효율적으로 해결 |
| sorting-algorithms | 버블/선택/삽입/퀵/머지/힙 정렬의 비교와 Java Arrays.sort의 내부 동작 |
| stack-implementation | LIFO 자료구조 구현, 괄호 매칭, 후위 표기법 계산 등 스택 활용 문제 |
| string-algorithms | KMP 패턴 매칭, 문자열 매칭, 아나그램 판별 등 문자열 처리 핵심 알고리즘 |
| two-pointers | 정렬된 배열에서 두 개의 포인터를 사용하여 O(n)으로 문제를 해결하는 기법 |
Effective Java식 모범 사례 (15개)
| 항목 | 설명 |
|---|---|
| code-organization | 패키지 구조 설계, 레이어 분리, 순환 의존 방지로 유지보수 가능한 코드베이스 만들기 |
| effective-api-design | 좋은 API 설계 원칙 - 매개변수 최소화, 반환 타입 선택, 메서드 네이밍, 오버로딩 규칙 |
| effective-builder | Effective Java Item 2 - 생성자에 매개변수가 많으면 빌더를 고려하라. 불변 객체를 깔끔하게 생성하는 빌더 패턴 |
| effective-defensive-copy | 방어적 복사(defensive copy)로 불변성을 보장하고, Date/Collection 등 가변 객체를 안전하게 다루는 방법 |
| effective-equals | equals와 hashCode 계약(대칭, 추이, 일관성)을 준수하는 올바른 구현 방법 |
| effective-exception | checked vs unchecked 예외 선택 기준, 예외 전환, 예외 무시 금지, 예외 계층 설계 |
| effective-optional | Optional의 올바른 활용법과 isPresent()+get() 같은 안티패턴을 피하는 방법 |
| effective-string | 문자열 연결 성능, StringBuilder, 문자열 비교 주의점, 유용한 String 메서드 |
| effective-try-resources | try-with-resources 구문으로 자원을 안전하게 관리하고, AutoCloseable 인터페이스와 suppressed exception을 이해하기 |
| error-handling | 글로벌 에러 처리 전략, 에러 코드 vs 예외, Result 타입 패턴으로 우아한 에러 핸들링 |
| logging-practices | SLF4J + Logback 조합, 로그 레벨 선택 기준, 구조화된 로깅, MDC를 활용한 효과적인 로깅 전략 |
| memory-management | GC 기본 개념, 메모리 누수 패턴, WeakReference, try-finally 정리로 Java 메모리를 효과적으로 관리 |
| naming-conventions | Java 표준 네이밍 규칙 - 변수, 메서드, 클래스, 상수, 패키지의 올바른 이름 짓기 |
| null-safety | null 방어 전략, @Nullable/@NonNull 어노테이션, Objects.requireNonNull, Optional 조합으로 NullPointerException을 예방 |
| performance-tips | 문자열 연산, 컬렉션 초기 용량, 오토박싱 회피, 지연 초기화 등 실무에서 즉시 적용 가능한 성능 팁 |
Guard Clause, Pipeline 등 일반 패턴 (15개)
| 항목 | 설명 |
|---|---|
| array-manipulation | 배열 회전, 나선형 순회, 부분 배열 등 코딩 테스트 빈출 배열 문제 패턴 |
| binary-search-answer | 이분 탐색으로 최적값을 찾는 기법: '가능한 답의 범위에서 조건을 만족하는 최적값 탐색' |
| bit-manipulation | AND, OR, XOR, NOT, SHIFT 비트 연산과 비트마스크 활용 패턴 |
| input-parsing | BufferedReader, StringTokenizer, Scanner를 활용한 빠른 입력 처리와 출력 최적화 |
| math-patterns | GCD, LCM, 소수 판별 (에라토스테네스의 체), 순열/조합 계산 |
| mst | 크루스칼 (Union-Find)과 프림 알고리즘으로 최소 신장 트리 구하기 |
| prefix-sum | 누적합 배열을 이용한 구간 합 쿼리, 2D 누적합 |
| recursion-patterns | 재귀의 기본 구조, 꼬리 재귀, 분할 정복, 메모이제이션 패턴 |
| segment-tree | 구간 쿼리와 포인트 업데이트를 O(log n)으로 처리하는 트리 자료구조 |
| shortest-path | 음수 간선이 있는 그래프의 최단 경로, 모든 쌍 최단 경로 |
| simulation | 방향 배열, 좌표 이동, 상태 관리 등 시뮬레이션 문제의 핵심 패턴 |
| string-manipulation | 문자열 뒤집기, 팰린드롬 판별, 압축, 파싱 등 자주 출제되는 문자열 문제 |
| topological-sort | DAG에서 선후 관계를 만족하는 순서 결정, 선수 과목 문제, 사이클 감지 |
| trie | 문자열 집합에서 접두사 검색, 자동완성, 사전 검색을 효율적으로 수행하는 트리 자료구조 |
| union-find | 서로소 집합 자료구조, 경로 압축, 랭크 기반 합치기로 거의 O(1) 연산 |
List/Set/Map/Queue 컬렉션 (20개)
| 항목 | 설명 |
|---|---|
| arrays-utility | Arrays 클래스의 sort, copyOf, fill, stream, deepEquals, mismatch 등 배열 조작 유틸리티 메서드 |
| collection-choosing | 상황과 요구사항에 따라 최적의 컬렉션 구현체를 선택하는 가이드와 성능 비교표 |
| collections-utility | Collections 클래스가 제공하는 frequency, disjoint, min, max, nCopies, singleton 등의 유틸리티 메서드 |
| iterator-pattern | 컬렉션의 요소를 순회하는 Iterator, ListIterator, Iterable 인터페이스와 fail-fast 동작 원리 |
| list-arraylist | 동적 배열 기반 List 구현체로, 인덱스 접근 O(1), 삽입/삭제 O(n)의 시간복잡도를 가지며 가장 범용적으로 사용되는 컬렉션 |
| list-copyof | Java 9+에서 제공하는 팩토리 메서드로 생성하는 진정한 불변(Immutable) 리스트 |
| list-linkedlist | 이중 연결 리스트 기반 List/Deque 구현체로, 양 끝 삽입/삭제 O(1), 인덱스 접근 O(n)의 특성을 가진다 |
| list-operations | Collections 클래스를 활용한 리스트 정렬, 검색, 셔플, 역순, 불변 래퍼 등의 유틸리티 연산 |
| map-concurrenthashmap | 스레드 안전한 HashMap으로, 세그먼트 단위 락과 CAS 연산을 활용하여 높은 동시성을 제공 |
| map-hashmap | 해시 테이블 기반 Map 구현체로, 키-값 쌍을 저장하며 해시 충돌 시 체이닝(연결리스트→트리) 방식으로 처리 |
| map-linkedhashmap | 삽입 순서 또는 접근 순서를 유지하는 HashMap으로, LRU 캐시 구현에 활용 가능 |
| map-operations | Java 8+에서 추가된 Map의 merge, compute, getOrDefault 등 함수형 연산과 Java 9+ 팩토리 메서드 |
| map-treemap | 레드-블랙 트리 기반의 정렬된 Map으로, NavigableMap 인터페이스를 통해 범위 검색과 근접 키 탐색을 지원 |
| queue-blockingqueue | 생산자-소비자 패턴을 위한 스레드 안전한 큐로, 큐가 비어있을 때 take()가 블로킹되고 가득 찼을 때 put()이 블로킹된다 |
| queue-deque | 순환 배열 기반의 Deque(양방향 큐) 구현체로, 스택과 큐 모두로 활용 가능하며 LinkedList보다 빠르다 |
| queue-priorityqueue | 이진 힙 기반의 우선순위 큐로, 항상 가장 작은(또는 Comparator에 따라 가장 높은 우선순위) 원소를 먼저 꺼낸다 |
| set-enumset | Enum 타입 전용 Set으로, 내부적으로 비트 벡터를 사용하여 극도로 빠르고 메모리 효율적인 구현 |
| set-hashset | 해시 테이블 기반 Set 구현체로, 중복을 허용하지 않으며 equals/hashCode 계약에 의존하여 동일성을 판단 |
| set-linkedhashset | 해시 테이블 + 이중 연결 리스트로 삽입 순서를 유지하는 Set 구현체 |
| set-treeset | 레드-블랙 트리 기반의 정렬된 Set 구현체로, NavigableSet 인터페이스를 통해 범위 검색과 근접 원소 탐색을 지원 |
Thread, Executor, synchronized, Atomic (20개)
| 항목 | 설명 |
|---|---|
| atomic-classes | AtomicInteger, AtomicReference, compareAndSet 등 CAS 기반의 논블로킹 동시성 제어 |
| completable-future-combine | allOf, anyOf, thenCombine, applyToEither로 여러 비동기 작업을 조합하는 패턴 |
| completable-future | CompletableFuture로 비동기 작업 체이닝, 변환(thenApply), 소비(thenAccept), 조합(thenCompose), 예외 처리 |
| concurrent-collections | ConcurrentHashMap, CopyOnWriteArrayList, ConcurrentLinkedQueue 등 스레드 안전 컬렉션의 특성과 활용 |
| countdown-latch | CountDownLatch로 여러 스레드의 초기화 완료를 대기하거나 테스트에서 동시 시작을 제어하는 패턴 |
| cyclic-barrier | CyclicBarrier로 여러 스레드를 동기화 지점에서 만나게 하고, 단계별로 재사용하는 패턴 |
| deadlock | 데드락 발생 조건 4가지, 감지 방법, 회피 전략, jstack을 통한 분석 |
| executor-service | ExecutorService와 ThreadPoolExecutor를 사용한 스레드 풀 관리, 풀 크기 전략, 생명주기 관리 |
| executor-types | newFixedThreadPool, newCachedThreadPool, newScheduledThreadPool, newSingleThreadExecutor의 특성과 선택 기준 |
| future-callable | Callable로 결과를 반환하는 작업 정의, Future로 비동기 결과 조회, 타임아웃, 취소 처리 |
| read-write-lock | ReadWriteLock으로 읽기 동시 접근 허용, 쓰기 배타적 접근을 구현하여 읽기 비중이 높은 시나리오 최적화 |
| reentrant-lock | ReentrantLock으로 타임아웃, 인터럽트 가능, 공정 락, Condition을 사용한 세밀한 동기화 제어 |
| semaphore | Semaphore로 동시 접근 수를 제한하여 자원 풀, 속도 제한, 동시 접속 제어를 구현하는 패턴 |
| synchronized-keyword | 메서드/블록 수준 동기화, 모니터 락을 통한 상호 배제, 재진입 가능 특성 |
| thread-basics | Thread 클래스 상속, Runnable 구현, start()와 run()의 차이를 통한 스레드 생성과 실행 |
| thread-lifecycle | NEW, RUNNABLE, BLOCKED, WAITING, TIMED_WAITING, TERMINATED 상태 전이와 각 상태의 의미 |
| thread-safety-patterns | 불변 객체, ThreadLocal, 동기화 래퍼, 스레드 안전 싱글턴 등 스레드 안전성을 확보하는 핵심 패턴 |
| virtual-threads-detail | Java 21 가상 스레드의 핀닝(pinning) 문제, 스케줄링 메커니즘, 기존 코드 마이그레이션 전략 |
| volatile-keyword | volatile로 변수의 가시성(visibility)을 보장하고 happens-before 관계를 설정하는 메커니즘 |
| wait-notify | Object의 wait/notify를 사용한 스레드 간 협력, 생산자-소비자 패턴, spurious wakeup 처리 |
java.lang/util 핵심 API (15개)
| 항목 | 설명 |
|---|---|
| base64 | Java 8+ Base64 클래스를 이용한 인코딩/디코딩 - 기본, URL-safe, MIME |
| big-decimal | BigDecimal을 이용한 정밀 소수점 연산 - 생성, 사칙연산, 반올림 모드, 금융 계산 |
| big-integer | BigInteger를 이용한 큰 정수 연산 - 기본 연산, 소수 판별, 비트 연산, 팩토리얼 |
| date-time-basics | Java 8 날짜/시간 API의 기본 클래스 - LocalDate, LocalTime, LocalDateTime 생성과 조작 |
| date-time-calc | 날짜/시간 간의 차이 계산 - Period(날짜 차이), Duration(시간 차이), ChronoUnit |
| date-time-format | DateTimeFormatter를 이용한 날짜/시간 포맷팅과 파싱 - 사전정의 포맷, 커스텀 패턴 |
| date-time-legacy | 레거시 날짜 API(Date, Calendar, SimpleDateFormat)와 java.time 상호 변환 |
| date-time-zone | 시간대(TimeZone) 처리 - ZonedDateTime, ZoneId, Instant, OffsetDateTime, UTC 변환 |
| math-class | Math 클래스의 주요 수학 메서드 - abs, pow, sqrt, ceil, floor, round, random, max, min |
| objects-utility | Objects 클래스의 유틸리티 메서드 - requireNonNull, equals, hash, toString, checkIndex |
| random-class | 다양한 난수 생성기 - Random, ThreadLocalRandom, SecureRandom, Java 17 RandomGenerator |
| runtime-class | Runtime.getRuntime()을 통한 JVM 메모리 정보, 외부 프로세스 실행, shutdown hook 등록 |
| string-builder | 문자열 가변 조작을 위한 StringBuilder와 StringBuffer의 차이, 성능 비교, 메서드 체이닝 |
| system-class | System 클래스의 유틸리티 - currentTimeMillis, nanoTime, getenv, getProperty, arraycopy, exit |
| uuid | UUID 생성, 버전 차이, 문자열 변환, 고유 키 생성 패턴 |
CSV/JSON, Jackson, 정렬/그룹화 (15개)
| 항목 | 설명 |
|---|---|
| connection-pool | HikariCP 설정과 최적화. 커넥션 풀 크기 계산, 모니터링, 트러블슈팅 |
| csv-opencsv | OpenCSV로 CSV 읽기/쓰기. CSVReader/Writer, Bean 매핑으로 객체 변환 |
| docker-java | Java 애플리케이션을 위한 Dockerfile 작성. 멀티스테이지 빌드, JVM 메모리 최적화 |
| excel-poi | Apache POI로 엑셀 파일 읽기/쓰기. XSSF(xlsx), 스타일링, 수식, 대용량 처리(SXSSF) |
| gradle-basics | build.gradle 구조, 태스크 정의, 의존성 관리, 플러그인, 멀티 프로젝트 |
| http-client-patterns | RestTemplate, WebClient, HttpClient 비교. 재시도, 타임아웃, 에러 처리 패턴 |
| maven-basics | pom.xml 구조, 의존성 관리, 빌드 라이프사이클, 프로필, 멀티 모듈 |
| pagination-patterns | 오프셋 vs 커서 기반 페이지네이션. Keyset 방식, 무한 스크롤 구현 |
| search-patterns | 전문 검색 개념, LIKE 쿼리의 한계, Elasticsearch 연동, 자동완성 구현 |
| template-engine | 동적 문자열 생성을 위한 템플릿 엔진 패턴. 직접 구현, Mustache/Thymeleaf 개념 |
| validation-patterns | Bean Validation 커스텀 어노테이션, 크로스 필드 검증, 검증 그룹 |
| xml-dom | DOM 방식으로 XML을 메모리에 트리 구조로 로드하여 처리. DocumentBuilder, XPath, 노드 순회 |
| xml-jaxb | Java 객체와 XML 간 자동 변환. @XmlRootElement 어노테이션, 마샬링/언마샬링 |
| xml-sax | 이벤트 기반 스트리밍 방식으로 XML을 순차 처리. ContentHandler 콜백, 대용량 XML에 적합 |
| yaml-snakeyaml | SnakeYAML로 YAML 파일 파싱/생성. 커스텀 타입 매핑, 복잡한 구조 처리 |
GoF 23개 디자인 패턴 (25개)
| 항목 | 설명 |
|---|---|
| abstract-factory | 관련된 객체 제품군을 일관되게 생성하는 패턴. 클라이언트는 구체적인 제품 클래스를 몰라도 됨 |
| adapter | 호환되지 않는 인터페이스를 가진 클래스들을 함께 동작하도록 변환하는 패턴. 레거시 코드 통합에 유용 |
| bridge | 추상화와 구현을 분리하여 각각 독립적으로 확장할 수 있게 하는 패턴 |
| builder-pattern | 복잡한 객체를 단계적으로 구성하는 패턴. Effective Java 스타일의 체이닝, 필수/선택 파라미터 구분 |
| chain-of-responsibility | 요청을 처리할 수 있는 핸들러 객체의 체인을 구성하여 요청을 전달하는 패턴. 필터/미들웨어 구현에 활용 |
| command | 요청을 객체로 캡슐화하여 매개변수화, 큐잉, 로깅, Undo/Redo를 지원하는 패턴 |
| composite | 객체를 트리 구조로 구성하여 개별 객체와 복합 객체를 동일하게 다루는 패턴. 파일 시스템이 대표 예시 |
| decorator | 객체에 동적으로 새로운 기능을 추가하는 패턴. Java I/O 스트림이 대표적인 데코레이터 패턴 활용 사례 |
| dependency-injection | 객체가 필요로 하는 의존성을 외부에서 주입받는 패턴. 생성자 주입, 인터페이스 분리 원칙 적용 |
| dto-pattern | 레이어 간 데이터를 전달하기 위한 단순 객체. Java record를 활용한 현대적 구현 |
| event-sourcing-basics | 상태를 직접 저장하는 대신, 상태 변경 이벤트를 순서대로 저장하고 재생하여 현재 상태를 복원하는 패턴 |
| facade | 복잡한 서브시스템에 대한 단순화된 인터페이스를 제공하는 패턴. 클라이언트가 내부 복잡성을 알 필요 없음 |
| factory-method | 객체 생성을 서브클래스에서 결정하게 하여, 클라이언트가 구체 클래스를 알지 않고 객체를 생성하는 패턴 |
| iterator | 컬렉션의 내부 구조를 노출하지 않고 요소를 순차적으로 접근하는 패턴. Iterable/Iterator 구현, 커스텀 반복자 |
| mediator | 객체 간의 직접적인 통신을 중재자를 통해 중앙화하여, 결합도를 낮추는 패턴 |
| null-object | null 대신 '아무것도 하지 않는' 기본 동작을 가진 객체를 사용하여 NPE를 방지하는 패턴. Optional과 비교 |
| observer | 객체의 상태 변화를 관찰하고 자동으로 통지받는 패턴. 이벤트 리스너, PropertyChangeSupport 활용 |
| prototype | 기존 객체를 복사하여 새 객체를 생성하는 패턴. Cloneable 인터페이스, 깊은 복사(deep copy)와 얕은 복사(shallow copy) 비교 |
| proxy | 다른 객체에 대한 대리인을 제공하여 접근 제어, 지연 로딩, 로깅 등을 수행하는 패턴. 동적 프록시(Proxy.newProxyInstance) 포함 |
| repository-pattern | 데이터 접근 로직을 추상화하여 도메인 계층에서 데이터 소스의 세부사항을 숨기는 패턴 |
| singleton | 인스턴스를 하나만 생성하고 전역 접근점을 제공하는 패턴. enum 방식, double-checked locking, holder 패턴 비교 |
| specification | 비즈니스 규칙을 재사용 가능한 객체로 캡슐화하고 논리 연산(AND, OR, NOT)으로 조합하는 패턴. Predicate 활용 |
| state | 객체의 내부 상태에 따라 행동이 달라지는 패턴. 상태 전이를 객체화하여 조건문 없이 상태 머신 구현 |
| strategy | 알고리즘군을 정의하고 캡슐화하여 런타임에 교체할 수 있게 하는 패턴. Comparator가 대표 예시 |
| template-method | 알고리즘의 골격을 정의하고, 일부 단계를 서브클래스에서 재정의하게 하는 패턴. 훅 메서드(hook method) 포함 |
변수, 제어문, 배열, String, 예외, enum (24개)
| 항목 | 설명 |
|---|---|
| annotations-basics | @Override, @Deprecated, @SuppressWarnings, 커스텀 어노테이션 만들기 |
| array-basics | 1차원/2차원 배열, 선언/초기화/순회, Arrays 유틸리티 클래스 |
| enum-advanced | enum에 추상 메서드 정의, 인터페이스 구현, 전략 패턴 구현 |
| enum-basics | enum 선언, 필드/메서드 추가, EnumSet, 싱글턴 패턴 |
| exception-hierarchy | Checked vs Unchecked 예외, Error vs Exception, 커스텀 예외 만들기 |
| for-loops | 전통 for, enhanced for-each, 무한루프, 레이블 break/continue |
| if-else-switch | if-else 조건문과 Java 14+ switch expression (yield, arrow syntax) |
| method-overloading | 오버로딩 규칙, 매개변수 타입/개수에 따른 메서드 선택, 모호성 문제 |
| operators | 산술, 비교, 논리, 비트, instanceof, 삼항 연산자와 우선순위 |
| pattern-matching-switch | Java 21 switch 패턴 매칭: 타입 패턴, guarded pattern, record pattern |
| primitive-types | Java의 8가지 원시 데이터 타입과 크기, 범위, 기본값 |
| regex-advanced | Named groups, lookahead/lookbehind, 실무 패턴 (이메일, 전화번호) |
| regex-basics | Pattern, Matcher 사용법, 자주 쓰는 정규식 패턴 |
| scanner-input | Scanner를 사용한 콘솔 입력 처리, 다양한 타입 읽기 |
| string-basics | String 생성, 불변성(immutability), intern pool, == vs equals 차이 |
| string-formatting | printf, String.format, MessageFormat, Java 15+ 텍스트 블록 |
| string-methods | substring, indexOf, replace, split, format, strip, chars 등 자주 사용하는 String 메서드 |
| system-out | System.out의 다양한 출력 메서드, PrintWriter, 출력 포매팅 |
| try-catch-finally | 예외 처리 기본, multi-catch, try-with-resources (Java 7+) |
| type-casting | 자동 형변환(widening)과 명시적 형변환(narrowing), 정보 손실 주의사항 |
| var-keyword | Java 10부터 도입된 지역 변수 타입 추론 (var) |
| varargs | 가변인자(Type... args) 사용법, 배열과의 차이, 제약 사항 |
| while-do-while | while과 do-while의 차이점, 활용 패턴 |
| wrapper-classes | Integer, Long, Double 등 원시 타입의 래퍼 클래스, 오토박싱/언박싱, 캐시 |
면접 단골 주제 (15개)
| 항목 | 설명 |
|---|---|
| classloader-demo | 클래스로더 계층 구조와 부모 위임 모델을 코드로 확인 |
| concurrent-modification | ConcurrentModificationException 발생 원인과 3가지 해결 방법을 코드로 시연 |
| deadlock-demo | 데드락 발생 코드와 3가지 해결법(순서 지정, tryLock, 타임아웃)을 시연 |
| equals-hashcode-contract | equals/hashCode 계약을 위반하면 HashMap에서 무슨 문제가 생기는지 코드로 증명 |
| functional-interface-lambda | @FunctionalInterface가 왜 하나의 추상 메서드만 허용하는지, 그리고 람다와의 관계를 증명 |
| gc-behavior | WeakReference, finalize, System.gc()를 사용하여 GC 동작을 관찰하는 코드 |
| generic-type-erasure | 제네릭 타입 소거를 코드로 확인하고 instanceof 실패, 해결법을 시연 |
| hashmap-internal | 버킷 배열, 해시 충돌, 체이닝, 리사이징을 직접 구현하여 HashMap 원리를 이해 |
| immutable-class-complete | final 클래스, 방어적 복사, 검증까지 포함한 완전한 불변 클래스를 구현 |
| memory-leak-demo | Java에서 발생하는 메모리 누수 패턴 3가지를 코드로 보여주고 해결 |
| proxy-dynamic | JDK Dynamic Proxy로 AOP의 원리를 직접 구현하여 프록시 패턴을 이해 |
| serialization-gotchas | 직렬화의 버전 호환, transient, 싱글턴 깨짐 문제를 코드로 시연 |
| stream-lazy-eval | Stream의 지연 평가를 peek()으로 증명하고, 중간 연산과 최종 연산의 실행 시점을 확인 |
| string-immutability-proof | String이 불변인 이유와 결과를 hashCode, intern, StringBuilder 비교로 코드로 증명 |
| thread-safety-demo | 스레드 안전하지 않은 코드에서 synchronized → Lock → AtomicInteger로 순차 개선 |
File/Stream/Path/NIO (15개)
| 항목 | 설명 |
|---|---|
| buffered-io | BufferedInputStream/BufferedOutputStream으로 I/O 성능 최적화 - 버퍼 크기와 성능 비교 |
| charset-encoding | Charset 클래스를 이용한 문자 인코딩 처리 - UTF-8, 인코딩 변환, BOM 처리 |
| csv-parsing | CSV 파일 수동 파싱과 처리 - 기본 파싱, 따옴표 처리, TSV, 데이터 변환 |
| file-nio-files | Files 클래스의 편리한 파일 조작 - readString, writeString, readAllLines, copy, move, delete |
| file-nio-path | NIO.2 Path 인터페이스 - 경로 생성, 조합(resolve), 상대경로(relativize), 정규화(normalize) |
| file-nio-walk | 디렉토리 트리 순회 - Files.walk, Files.find, Files.list, 파일 검색과 필터링 |
| file-nio-watch | WatchService를 이용한 파일 시스템 변경 감시 - 파일 생성/수정/삭제 이벤트 모니터링 |
| file-read-write | 전통적인 파일 읽기/쓰기 - FileReader, FileWriter, BufferedReader, BufferedWriter, try-with-resources |
| json-gson | Google Gson을 이용한 JSON 처리 - 직렬화/역직렬화, TypeToken, 커스텀 직렬화 |
| json-jackson | Jackson ObjectMapper를 이용한 JSON 직렬화/역직렬화 - 어노테이션, 제네릭, 커스텀 설정 |
| network-socket | Java 소켓 프로그래밍 - ServerSocket, Socket, 간단한 에코 서버/클라이언트 구현 |
| object-serialization | Serializable 인터페이스를 이용한 객체 직렬화/역직렬화 - serialVersionUID, transient, 커스텀 직렬화 |
| properties-file | Properties 클래스로 .properties 파일 로드/저장 - 설정 관리, 기본값, XML 형식 |
| stream-io | 바이트 스트림 기반 입출력 - InputStream, OutputStream, transferTo(Java 9+), 바이트 배열 처리 |
| zip-gzip | ZipOutputStream/InputStream과 GZIPOutputStream으로 파일 압축/해제 |
JPA, Hibernate, 연관관계 매핑 (15개)
| 항목 | 설명 |
|---|---|
| jdbc-template | JdbcTemplate, NamedParameterJdbcTemplate, RowMapper를 사용한 직접적인 SQL 기반 데이터 접근 |
| jpa-auditing | @CreatedDate, @LastModifiedDate, @EnableJpaAuditing을 사용한 엔티티 생성/수정 시간 자동 관리 |
| jpa-bulk-operations | 벌크 업데이트/삭제 시 @Modifying 사용법과 영속성 컨텍스트 초기화의 중요성 |
| jpa-cascade | CascadeType별 동작과 orphanRemoval, persist/remove 전파 메커니즘 |
| jpa-entity | @Entity, @Id, @GeneratedValue, @Column, @Table을 사용한 JPA 엔티티 클래스 정의와 테이블 매핑 |
| jpa-fetch | LAZY vs EAGER 로딩, N+1 문제의 원인과 fetch join, @EntityGraph를 사용한 해결 방법 |
| jpa-jpql | JPQL(Java Persistence Query Language) 문법, 파라미터 바인딩, 프로젝션, 서브쿼리 |
| jpa-mapping-manytomany | @ManyToMany 관계와 중간 엔티티를 사용한 다대다 분해 패턴 |
| jpa-mapping-onetomany | @OneToMany, @ManyToOne을 사용한 일대다/다대일 관계 매핑과 연관관계 주인 개념 |
| jpa-mapping-onetoone | @OneToOne 단방향/양방향 관계 매핑과 외래키(FK) 위치에 따른 장단점 |
| jpa-optimistic-lock | @Version을 사용한 낙관적 락(Optimistic Lock)과 OptimisticLockException 처리, 재시도 패턴 |
| jpa-pagination | Pageable, Page, Slice, Sort를 사용한 오프셋 기반 페이징과 커서(키셋) 기반 페이징 |
| jpa-query-method | 메서드 이름으로 쿼리를 자동 생성하는 Spring Data JPA의 쿼리 메서드 명명 규칙 |
| jpa-querydsl | QueryDSL을 사용한 타입 안전한 동적 쿼리 작성과 BooleanExpression 조합 패턴 |
| jpa-soft-delete | 물리 삭제 대신 삭제 플래그를 사용하는 소프트 딜리트 패턴과 @Where, @SQLDelete 활용 |
JVM 메모리, GC, 클래스 로더 (15개)
| 항목 | 설명 |
|---|---|
| annotation-processing | 커스텀 어노테이션 정의, @Retention/@Target 정책, 런타임 어노테이션 처리 |
| bytecode-basics | javap로 바이트코드 읽기, 스택 기반 연산, invokedynamic 이해 |
| classloader | Bootstrap, Extension(Platform), Application ClassLoader의 위임 모델과 커스텀 클래스 로더 |
| gc-algorithms | Serial, Parallel, CMS, G1, ZGC, Shenandoah 가비지 컬렉터의 특성과 비교 |
| gc-basics | 가비지 컬렉션 기본 동작, Young/Old Generation 구조, Minor/Major GC 개념 |
| gc-tuning | GC 로그 분석, -Xms/-Xmx 설정, GC 선택 가이드와 실전 튜닝 전략 |
| java-memory-model | happens-before 관계, 가시성, 순서 보장, double-checked locking 문제와 해결 |
| jit-compilation | JIT 컴파일 원리, C1/C2 컴파일러, 핫스팟 감지, 인라이닝 최적화 |
| jmx-monitoring | MBean, JMX를 활용한 메모리 모니터링, 런타임 정보 조회, 커스텀 MBean 등록 |
| jvm-memory-structure | 힙, 스택, 메서드 영역, PC 레지스터, 네이티브 메서드 스택의 구조와 역할 |
| reflection-advanced | 동적 프록시 생성, 어노테이션 스캐닝, 프레임워크에서의 리플렉션 활용 패턴 |
| reflection-basics | Class.forName, getMethod, invoke를 통한 런타임 클래스 정보 접근과 동적 메서드 호출 |
| string-pool | String intern pool 메커니즘, 메모리 구조, == vs equals 내부 동작 |
| troubleshooting | jstack, jmap, jstat, heap dump 분석, OOM 디버깅 등 운영 환경 문제 해결 |
| weak-soft-phantom | WeakReference, SoftReference, PhantomReference, ReferenceQueue의 동작과 활용 |
var, record, sealed, pattern matching, virtual thread (20개)
| 항목 | 설명 |
|---|---|
| collection-factory | List.of(), Set.of(), Map.of(), Map.ofEntries()를 사용한 불변 컬렉션 간편 생성 |
| foreign-function | Project Panama의 FFM API로 네이티브 코드 호출과 오프힙 메모리 관리를 안전하게 수행 |
| http-client | java.net.http.HttpClient를 사용한 동기/비동기 HTTP 요청, HTTP/2 지원, JSON 처리 |
| instanceof-pattern | instanceof 검사와 동시에 바인딩 변수로 캐스팅하여 코드 간결화 |
| jshell | JShell을 사용한 대화형 Java 코드 실행, 프로토타이핑, 스니펫 관리 |
| modules-intro | module-info.java를 통한 모듈 선언, exports/requires를 사용한 패키지 접근 제어와 모듈 간 의존성 관리 |
| process-api | ProcessHandle을 사용한 운영체제 프로세스 정보 조회, 프로세스 트리 탐색, 종료 감지 |
| record-basics | record를 사용한 불변 데이터 클래스 정의, compact constructor, 커스텀 메서드 |
| record-pattern | record의 컴포넌트를 디스트럭처링하여 추출하는 패턴, 중첩 패턴으로 깊은 구조 분해 |
| scoped-values | ScopedValue로 스레드 내 불변 데이터를 안전하게 전파, ThreadLocal의 현대적 대체 |
| sealed-classes | sealed/permits로 상속 계층을 제한하고, non-sealed로 부분 개방하며, 패턴 매칭과 결합하여 타입 안전성 보장 |
| sequenced-collections | SequencedCollection, SequencedSet, SequencedMap 인터페이스로 순서가 있는 컬렉션의 통일된 접근 |
| stream-gatherers | Stream.gather()로 커스텀 중간 연산을 정의하여 기존 Stream API의 한계를 극복 |
| string-templates | STR, FMT 등 템플릿 프로세서를 사용한 문자열 보간과 안전한 문자열 조합 |
| structured-concurrency | StructuredTaskScope로 여러 동시 작업을 구조화하여 관리, 에러 전파와 취소의 안전한 처리 |
| switch-expressions | switch를 표현식(expression)으로 사용하여 값을 반환, arrow 문법, yield 키워드 |
| switch-pattern | switch에서 타입 패턴, guarded pattern(when), null 처리를 사용한 강력한 분기 처리 |
| text-blocks | 삼중 따옴표(""")를 사용한 여러 줄 문자열, 자동 들여쓰기 제거, 이스케이프 처리 |
| unnamed-patterns | 밑줄(_)을 사용하여 미사용 변수나 불필요한 패턴 바인딩을 명시적으로 표시 |
| virtual-threads | Thread.ofVirtual()로 생성하는 경량 스레드, 대량 동시성 처리, 기존 스레드와의 차이 |
캡슐화, 상속, 다형성, 인터페이스 (20개)
| 항목 | 설명 |
|---|---|
| abstract-class | 추상 클래스와 추상 메서드, 인터페이스와의 차이, 템플릿 메서드 패턴 |
| access-modifiers | public, protected, default(package-private), private 접근 범위 |
| class-basics | 클래스 선언, 필드, 생성자, 메서드, this 키워드 |
| comparable-comparator | 자연 순서(Comparable)와 커스텀 정렬(Comparator), Comparator.comparing 체이닝 |
| constructor-patterns | 기본/매개변수/복사 생성자, 생성자 체이닝, 빌더 패턴과의 관계 |
| encapsulation | getter/setter, 방어적 복사, 불변 객체 만들기, 정보 은닉 |
| final-keyword | final 변수, 메서드, 클래스, effectively final 개념 |
| generics-advanced | 재귀 타입 바운드, 타입 토큰, 제네릭 배열 제한 |
| generics-basics | 제네릭 클래스, 제네릭 메서드, 타입 파라미터, 다이아몬드 연산자 |
| generics-wildcards | ?, extends, super 와일드카드, PECS 원칙, 타입 소거 |
| immutable-objects | 불변 객체 설계: final 필드, 방어적 복사, Collections.unmodifiable, record |
| inheritance | extends로 상속, super 키워드, 메서드 오버라이딩, 다이아몬드 문제 |
| inner-classes | 내부/정적내부/지역/익명 클래스, 람다와의 관계 |
| interface-basics | 인터페이스 선언, default 메서드, static 메서드, 다중 구현 |
| interface-evolution | Java 8 default/static, Java 9 private, sealed interface (Java 17+) |
| java-oop--sealed-classes | Java 17 sealed/permits, 허용된 하위 타입만 상속 가능, 패턴 매칭 조합 |
| object-methods | equals, hashCode, toString, clone의 계약(contract)과 올바른 구현 |
| polymorphism | 업캐스팅, 다운캐스팅, instanceof, 다형성의 실제 활용 |
| record-class | Java 16 record 클래스, compact constructor, 커스터마이징 |
| static-members | static 필드, 메서드, 초기화 블록, 내부 클래스, 메모리 구조 |
계층형, 헥사고날, 클린 아키텍처 (15개)
| 항목 | 설명 |
|---|---|
| auth-flow | 로그인 → 토큰 발급 → 검증 → 리프레시까지 인증 흐름을 구현 |
| cache-service | Cache-Aside 패턴, TTL, 캐시 무효화, 이중 캐시(L1/L2)를 구현 |
| config-system | 환경별 설정 분리, 프로퍼티 바인딩, 동적 리로드를 구현한 설정 시스템 |
| crud-service | Entity → Repository → Service → DTO 변환까지 완전한 CRUD 서비스 레이어 구현 |
| data-migration | 배치 읽기, 변환, 검증, 저장, 롤백을 포함한 데이터 마이그레이션 전체 흐름 구현 |
| domain-model | 주문→주문항목→상품 관계와 비즈니스 로직 캡슐화를 도메인 모델로 구현 |
| error-handling-global | 예외 계층 설계, ControllerAdvice 패턴, 에러 응답 표준화를 구현 |
| event-system | EventBus, Event, Handler를 직접 구현하여 이벤트 기반 아키텍처의 원리를 학습 |
| file-upload-service | 파일 검증, 저장, 메타데이터 관리, 다운로드까지 파일 업로드 서비스 전체 구현 |
| layered-architecture | Presentation → Business → Data 계층으로 분리된 전체 흐름을 구현 |
| logging-system | AOP 기반 요청/응답 로깅, MDC 컨텍스트, 민감정보 마스킹을 구현 |
| notification-system | 전략 패턴으로 Email/SMS/Push 알림을 분기하는 시스템 구현 |
| pagination-api | 요청 파싱 → 쿼리 → 응답 래핑 → 메타데이터까지 페이지네이션 전체 구현 |
| rest-controller-full | Controller → Service → Response 래핑 → 에러 처리까지 REST API의 전체 구조를 구현 |
| scheduler-service | 작업 등록, 실행, 이력 관리, 분산 락을 포함한 스케줄링 서비스 구현 |
Reactor, Flux/Mono, WebFlux (15개)
| 항목 | 설명 |
|---|---|
| api-gateway-pattern | API 게이트웨이의 라우팅, 필터링, 인증, Rate Limiting 등 핵심 기능을 직접 구현 |
| caching-patterns | Cache-Aside, Write-Through, TTL 기반 만료 등 캐시 전략을 직접 구현 |
| circuit-breaker | CLOSED, OPEN, HALF_OPEN 상태를 가진 서킷 브레이커 패턴을 직접 구현하여 장애 전파 차단 |
| cqrs-basics | Command Query Responsibility Segregation - 명령(쓰기)과 조회(읽기) 책임을 분리하는 패턴 |
| graphql-basics | GraphQL의 스키마 개념, Query/Mutation 구조를 순수 Java로 시뮬레이션하여 REST와의 차이 시연 |
| message-queue | Producer-Consumer 패턴의 메시지 큐를 직접 구현하고 멱등성 보장 전략 시연 |
| rate-limiter | 토큰 버킷 알고리즘으로 Rate Limiter를 직접 구현하여 API 호출량 제한 |
| reactor-error | onErrorReturn, onErrorResume, retry, timeout 등 리액티브 스트림의 에러 처리 전략을 순수 Java로 구현 |
| reactor-mono-flux | 리액티브 스트림의 핵심인 Mono(0 |
| reactor-operators | map, flatMap, filter, zip, merge, concat, switchIfEmpty 등 주요 리액티브 연산자를 순수 Java로 구현 |
| rest-api-design | RESTful 설계 원칙, HTTP 상태 코드, 응답 래핑, API 버저닝 구조를 직접 구현 |
| retry-pattern | 지수 백오프, 최대 재시도, 재시도 조건 등 다양한 재시도 전략을 직접 구현 |
| saga-pattern | 분산 트랜잭션을 위한 Saga 패턴, 보상 트랜잭션, 코레오그래피 방식을 직접 구현 |
| webclient | WebClient의 비동기 HTTP 호출, exchangeToMono, 에러 처리, 요청/응답 변환 구조를 순수 Java로 시뮬레이션 |
| webflux-basics | Spring WebFlux의 @RestController와 Mono/Flux 반환, WebClient 구조를 순수 Java로 시뮬레이션 |
해싱, 암호화, JWT, Spring Security (10개)
| 항목 | 설명 |
|---|---|
| aes-encryption | AES 대칭 키 암호화, CBC/GCM 모드, IV(초기화 벡터) 관리 |
| bcrypt-password | BCrypt 알고리즘으로 비밀번호 해싱, 검증, 라운드 설정과 보안 원리 |
| hashing | MessageDigest를 사용한 SHA-256, SHA-512, MD5 해싱과 솔트를 활용한 안전한 해싱 |
| hmac | HMAC-SHA256을 사용한 메시지 인증 코드 생성, API 서명, 무결성 검증 |
| input-validation | SQL Injection, XSS 방지, OWASP Top 10 대응 패턴과 입력 검증 전략 |
| jwt-basics | JWT(JSON Web Token)의 구조, Header.Payload.Signature 생성과 파싱, 검증 |
| keystore | Java KeyStore를 사용한 키/인증서 관리, SSL/TLS 설정, 키 저장과 로드 |
| rsa-encryption | RSA 공개키/개인키 생성, 비대칭 암호화, 디지털 서명과 검증 |
| secure-coding | 안전한 직렬화, 방어적 복사, 접근 제어 등 Java 보안 코딩 실천 가이드 |
| secure-random | SecureRandom을 활용한 암호학적 난수 생성, 토큰 생성, OTP 구현 |
DI, AOP, Spring MVC, Boot (15개)
| 항목 | 설명 |
|---|---|
| spring-aop | @Aspect, @Before, @After, @Around를 사용한 횡단 관심사 분리 - 로깅, 트랜잭션, 보안 등의 공통 로직 처리 |
| spring-bean-scope | Spring Bean의 생명주기 범위 - singleton, prototype, request, session 스코프와 각각의 사용 시나리오 |
| spring-boot-starter | Spring Boot의 자동 설정(Auto-configuration) 메커니즘과 application.yml을 통한 외부 설정 관리 |
| spring-configuration | @Configuration, @Bean, @ConfigurationProperties, @Value를 사용한 설정 클래스와 외부 설정값 바인딩 |
| spring-di | 생성자 주입, 필드 주입, @Autowired, @Qualifier, @Primary를 사용한 의존성 주입 패턴과 모범 사례 |
| spring-exception-handler | @ExceptionHandler, @ControllerAdvice를 사용한 전역 예외 처리와 일관된 에러 응답 구조 설계 |
| spring-interceptor | HandlerInterceptor의 preHandle/postHandle/afterCompletion과 Filter와의 차이, 사용 시나리오 |
| spring-ioc | Spring IoC(Inversion of Control) 컨테이너가 객체(Bean)의 생성, 의존성 주입, 생명주기를 관리하는 핵심 메커니즘 |
| spring-profile | @Profile과 application-{profile}.yml을 사용한 환경(개발/스테이징/운영)별 설정 분리 |
| spring-request-params | @PathVariable, @RequestParam, @RequestBody, @RequestHeader 등을 사용한 HTTP 요청 데이터 바인딩 |
| spring-rest-controller | @RestController, @GetMapping, @PostMapping, ResponseEntity를 사용한 RESTful API 엔드포인트 구현 |
| spring-security-basics | SecurityFilterChain 설정, 인증(Authentication)/인가(Authorization), PasswordEncoder를 사용한 보안 구성 |
| spring-service-layer | @Service, @Transactional을 사용한 비즈니스 로직 계층 분리와 트랜잭션 관리 |
| spring-test | @SpringBootTest, @WebMvcTest, MockMvc, TestRestTemplate을 사용한 통합 테스트와 슬라이스 테스트 |
| spring-validation | @Valid, @NotNull, @Size 등 Bean Validation 어노테이션과 커스텀 Validator를 사용한 입력값 검증 |
Stream API, lambda, Collectors (20개)
| 항목 | 설명 |
|---|---|
| lambda-basics | 람다 표현식의 문법, 함수형 인터페이스와의 관계, 타입 추론, 변수 캡처 규칙 |
| lambda-composition | Function.andThen/compose, Predicate.and/or/negate, Comparator 체이닝을 통한 함수 합성 패턴 |
| lambda-functional-interfaces | java.util.function 패키지의 Function, Predicate, Consumer, Supplier, BiFunction, UnaryOperator 등 표준 인터페이스 |
| lambda-method-reference | 4가지 형태의 메서드 참조: 정적 메서드, 인스턴스 메서드(특정 객체/임의 객체), 생성자 참조 |
| stream-collect-advanced | Collectors.toUnmodifiableList, teeing, collectingAndThen, reducing 등 고급 수집기 |
| stream-collect | Collectors.toList, toSet, toMap, joining, groupingBy, partitioningBy를 활용한 스트림 수집 |
| stream-creation | Stream.of, Collection.stream, Arrays.stream, Stream.generate/iterate 등 다양한 스트림 생성 방법 |
| stream-filter | filter, distinct, limit, skip, takeWhile, dropWhile을 활용한 스트림 요소 필터링 |
| stream-flatmap-patterns | 중첩 컬렉션 평탄화, Optional flatMap, 1:N 변환 등 flatMap의 다양한 실무 활용 패턴 |
| stream-foreach | forEach, forEachOrdered의 차이와 peek를 활용한 디버깅 기법 |
| stream-grouping | groupingBy 다중 레벨 그룹핑과 downstream으로 counting, summing, averaging, mapping 활용 |
| stream-map | map으로 요소를 1:1 변환하고, flatMap으로 중첩 구조를 평탄화하며, mapToInt/Long/Double로 기본형 스트림 변환 |
| stream-match | anyMatch, allMatch, noneMatch로 조건 검사하고, findFirst, findAny로 요소를 검색하는 단락(short-circuit) 연산 |
| stream-numeric | 박싱 오버헤드 없이 수치 연산을 수행하는 기본형 스트림과 range, sum, average, summaryStatistics |
| stream-optional-advanced | Optional.stream, or, isEmpty 등 Java 9~11에서 추가된 Optional 기능과 실무 패턴 |
| stream-optional | Optional 생성, map, flatMap, orElse, orElseGet, orElseThrow, ifPresent 등 null 안전 처리 |
| stream-parallel | parallelStream의 동작 원리, ForkJoinPool, 성능 트레이드오프, 주의사항 |
| stream-reduce | reduce 연산으로 스트림 요소를 하나의 값으로 집계하는 방법: identity/accumulator/combiner 패턴 |
| stream-sorted | sorted, Comparator.comparing, thenComparing, reversed를 활용한 스트림 다중 조건 정렬 |
| stream-tomap | Collectors.toMap의 키 충돌 처리, 정렬된 Map 수집, groupingBy와의 비교 |
JUnit 5, Mockito, AssertJ (15개)
| 항목 | 설명 |
|---|---|
| assertj-basics | assertThat() 체이닝 어서션, isEqualTo, contains, hasSize 등 풍부한 AssertJ 어서션 활용 |
| junit5-assertions | assertTimeout, assertDoesNotThrow, assertIterableEquals 등 고급 어서션 메서드 활용 |
| junit5-basics | @Test, assertEquals, assertNotNull, assertThrows, assertAll 등 JUnit 5 핵심 어서션과 테스트 작성 기본기 |
| junit5-display | @DisplayName, @Tag, @Disabled 어노테이션을 사용한 테스트 이름 지정, 분류, 필터링 |
| junit5-lifecycle | @BeforeEach, @AfterEach, @BeforeAll, @AfterAll 어노테이션을 사용한 테스트 생명주기 관리와 실행 순서 |
| junit5-nested | @Nested 어노테이션으로 계층적 테스트 구조를 만들어 관련 테스트를 논리적으로 그룹화 |
| junit5-parameterized | @ParameterizedTest, @ValueSource, @CsvSource, @MethodSource를 사용하여 다양한 입력값으로 동일한 테스트 로직을 반복 실행 |
| mockito-advanced | spy(), doReturn(), InOrder, @InjectMocks, Answer 인터페이스를 활용한 고급 모킹 기법 |
| mockito-basics | mock(), when().thenReturn(), verify(), ArgumentCaptor를 사용한 의존성 격리 테스트 |
| mockito-bdd | BDDMockito의 given/when/then 스타일로 테스트 의도를 명확하게 표현하는 방법 |
| tdd-practice | TDD Red-Green-Refactor 사이클을 단계별로 실습하는 간단한 예제 |
| test-coverage | 코드 커버리지의 종류(라인/브랜치/조건)와 JaCoCo 기본 설정, 의미 있는 커버리지를 달성하는 방법 |
| test-doubles | Stub, Mock, Spy, Fake, Dummy의 차이점과 각각의 적절한 사용 시나리오 |
| test-fixtures | 테스트 데이터 관리, ObjectMother 패턴, TestDataBuilder 패턴으로 재사용 가능한 테스트 데이터 생성 |
| test-patterns | AAA (Arrange-Act-Assert), Given-When-Then 패턴, 테스트 네이밍 규칙으로 읽기 쉬운 테스트 작성 |
메타클래스, 디스크립터, async, 데코레이터 고급 (15개)
| 항목 | 설명 |
|---|---|
| ast-manipulation | ast 모듈로 Python 코드 분석, 변환, 자동 코드 생성 |
| caching | functools.lru_cache, TTL 캐시, 메모이제이션, Redis 패턴 |
| connection-pool | DB 커넥션 풀 구현, SQLAlchemy pool, 비동기 풀, 리소스 관리 |
| cryptography | Fernet 대칭 암호화, RSA 비대칭 암호화, 디지털 서명/검증 |
| ctypes-basics | ctypes로 C 공유 라이브러리 호출, 구조체 정의, 콜백 함수 |
| debugging | pdb, breakpoint(), 조건부 브레이크포인트, 사후 디버깅, 로깅 |
| descriptor-advanced | 디스크립터 프로토콜, 지연 로딩, 타입 검증, 캐시 디스크립터 |
| gc-python | gc 모듈, 순환 참조, 세대별 GC, 메모리 누수 진단 |
| hashlib-security | hashlib, SHA-256, 솔트 해싱, PBKDF2, bcrypt 비밀번호 해싱 |
| import-system | importlib, 동적 임포트, 패키지 구조, all, 플러그인 로딩 |
| jwt-python | PyJWT로 JWT 토큰 생성/검증, 만료 처리, 커스텀 클레임 |
| memory-optimization | slots, array 모듈, 제너레이터, 약한 참조로 메모리 절약 |
| metaclass-advanced | 메타클래스로 ORM 모델 자동 생성, 클래스 등록 패턴, 싱글톤 구현 |
| profiling | cProfile, line_profiler, memory_profiler로 CPU/메모리 병목 분석 |
| rate-limiting | 레이트 리미팅 구현, 토큰 버킷, 슬라이딩 윈도우, 데코레이터 |
코딩 테스트 기법 (15개)
| 항목 | 설명 |
|---|---|
| binary-search-answer | 답의 범위에서 이진 탐색으로 조건을 만족하는 최솟값/최댓값 찾기 |
| bit-manipulation | XOR 트릭, 비트 카운트, 비트마스크로 부분집합 표현, 비트마스크 DP |
| dp-interval | 구간 DP로 행렬 연쇄 곱셈 최소 비용과 최적 BST 구현 |
| dp-string | 최장 공통 부분 수열(LCS), 편집 거리, 최장 팰린드롬 부분 문자열을 DP로 해결 |
| input-fast | sys.stdin을 활용한 빠른 입력, split/map 패턴, 다양한 입력 형태 처리 |
| mst | 크루스칼(Union-Find) + 프림(heapq)으로 MST 구현, 간선 수 = V-1 검증 |
| prefix-sum | 1D/2D 누적합으로 구간 합을 O(1)에 구하기, 부분합이 k인 구간 개수 |
| segment-tree | 세그먼트 트리로 구간 쿼리(합, 최소)와 점 업데이트를 O(log n)에 처리 |
| shortest-path | 세 가지 최단 경로 알고리즘의 구현과 비교 - 양수 가중치, 음수 가중치, 모든 쌍 |
| simulation | 2D 격자 탐색, 방향 배열, BFS 최단 경로, 뱀 게임 시뮬레이션 |
| sliding-window | 고정/가변 크기 슬라이딩 윈도우로 부분 배열 문제 해결 - 최대합, 최소 길이, 중복 없는 부분 문자열 |
| topological-sort | DAG에서 위상 정렬 구현, 사이클 감지, 선수 과목 문제 |
| trie | 트라이 삽입/검색/접두사, 자동완성, 사전 검색 구현 |
| two-sum | 두 수의 합이 목표값이 되는 쌍 찾기 - 해시맵 O(n)과 정렬+투포인터 O(n log n) 비교 |
| union-find | 경로 압축과 랭크 기반 합치기로 최적화된 Union-Find, 사이클 감지, 연결 요소 |
threading, multiprocessing, asyncio (15개)
| 항목 | 설명 |
|---|---|
| asyncio-event-loop | asyncio 이벤트 루프의 내부 동작, run, create_task, gather를 이용한 비동기 프로그래밍 |
| asyncio-queue | asyncio.Queue로 비동기 환경의 생산자-소비자 패턴을 구현하고 작업을 분배 |
| asyncio-semaphore | asyncio.Semaphore로 비동기 환경에서 동시 요청 수를 제한하고 Rate Limiting을 구현 |
| asyncio-stream | asyncio.StreamReader/StreamWriter를 이용한 비동기 TCP 서버와 클라이언트 구현 |
| asyncio-timeout | asyncio.wait_for, timeout, TaskGroup(3.11+)을 이용한 타임아웃 제어와 구조적 동시성 |
| concurrent-futures | concurrent.futures.Future 객체의 상태 관리, 콜백 등록, 예외 처리, 타임아웃 패턴 |
| multiprocessing-queue | multiprocessing.Queue와 Pipe를 이용한 프로세스 간 통신(IPC) |
| multiprocessing-shared | multiprocessing.Value, Array, Manager를 이용한 프로세스 간 데이터 공유 |
| process-pool | concurrent.futures.ProcessPoolExecutor로 CPU 바운드 작업을 멀티프로세스로 병렬 처리 |
| thread-pool | concurrent.futures.ThreadPoolExecutor로 스레드 풀을 관리하고 I/O 바운드 작업을 병렬 처리 |
| threading-barrier | threading.Barrier로 모든 스레드가 특정 지점에 도달할 때까지 대기하는 단계별 동기화 |
| threading-condition | threading.Condition으로 wait/notify/notify_all을 이용한 생산자-소비자 패턴 구현 |
| threading-event | threading.Event로 스레드 간 신호를 보내고 대기하는 동기화 메커니즘 |
| threading-lock | threading.Lock과 RLock으로 임계 구역을 보호하고 경쟁 조건을 방지하는 동기화 기법 |
| threading-semaphore | Semaphore와 BoundedSemaphore로 동시 접근 수를 제한하는 자원 풀 패턴 |
numpy, pandas, matplotlib (15개)
| 항목 | 설명 |
|---|---|
| image-processing | Pillow, 리사이즈, 필터, 텍스트 오버레이 |
| linear-algebra | numpy.linalg, 행렬 곱, 역행렬, 고유값, SVD |
| plotly-interactive | Plotly, 인터랙티브 차트, 대시보드 기초 구조 |
| probability | 확률 기본, 베이즈 정리, 몬테카를로 시뮬레이션 (random 모듈) |
| regex-advanced | 룩어헤드/비하인드, 명명 그룹, re.VERBOSE, 고급 패턴 |
| scipy-interpolate | 보간법, interp1d, 스플라인, 다차원 보간 (scipy.interpolate) |
| scipy-optimize | 최적화 문제, minimize, curve_fit, 근 찾기 (scipy.optimize) |
| scipy-stats | 확률 분포, t-검정, 카이제곱 검정, 상관 분석 (scipy.stats) |
| seaborn-plots | Seaborn, heatmap, pairplot, boxplot, violinplot 구조 |
| sklearn-basics | scikit-learn, 분류/회귀, train_test_split, 평가 개념 |
| sklearn-models | LinearRegression, DecisionTree, RandomForest 개념과 코드 |
| sklearn-preprocessing | StandardScaler, LabelEncoder, OneHotEncoder, Pipeline 구조 |
| statistics-module | 평균, 중앙값, 분산, 표준편차, 상관계수 (표준라이브러리) |
| sympy-basics | 기호 수학, 방정식 풀기, 미분, 적분, 단순화 (sympy) |
| time-series | 시계열 기본, 이동 평균, 분해, ARIMA 개념 |
collections, heapq, 직접 구현 자료구조 (20개)
| 항목 | 설명 |
|---|---|
| backtracking | 백트래킹으로 N-Queen, 순열, 조합, 부분집합 문제 해결 |
| binary-search | 이진 탐색의 직접 구현과 bisect 활용. lower/upper bound, 매개변수 탐색 |
| binary-tree | 이진 트리 구현과 4가지 순회 (전위/중위/후위/레벨). 재귀와 반복 방식 |
| bisect | 정렬된 리스트에서 이진 탐색과 삽입 위치 결정. bisect_left/right, insort 활용 |
| collections-chainmap | 여러 딕셔너리를 하나의 뷰로 묶는 컨테이너. 설정 계층, 스코프 체인 구현에 활용 |
| collections-counter | 요소의 개수를 세는 해시맵 기반 컨테이너. most_common, 산술 연산, elements 활용 |
| collections-defaultdict | 존재하지 않는 키에 대해 기본값을 자동 생성하는 딕셔너리. 그룹핑, 중첩 구조에 활용 |
| collections-deque | 양방향 큐로 양쪽 끝에서 O(1) 삽입/삭제. BFS, 슬라이딩 윈도우, 회전에 활용 |
| collections-ordereddict | 삽입 순서를 보장하는 딕셔너리. LRU 캐시 구현, move_to_end 활용 |
| dynamic-programming | DP 기초 패턴 (피보나치, 계단 오르기), 탑다운/바텀업, @lru_cache 메모이제이션 |
| graph | 인접 리스트 그래프, BFS, DFS, 사이클 감지, 위상 정렬 |
| greedy | 탐욕적 선택으로 최적해를 구하는 알고리즘. 활동 선택, 거스름돈, 구간 스케줄링 |
| hash-patterns | 해시맵을 활용한 코딩 패턴: 투섬, 아나그램, 빈도수, 그룹핑 |
| heapq | 최소 힙 기반 우선순위 큐. heappush/pop, nlargest/nsmallest, 힙 정렬 구현 |
| linked-list | 단일/이중 연결 리스트 구현, 역전, 중간 노드 찾기, 사이클 감지 |
| recursion | 재귀 함수, 꼬리 재귀, 분할 정복, sys.setrecursionlimit 활용 |
| sorting | Python 내장 정렬의 key 함수, operator 모듈, 다중 기준 정렬, 안정 정렬 활용 |
| stack-queue | 리스트와 deque로 스택/큐 구현. LifoQueue, 괄호 매칭, 모노톤 스택 |
| string-algorithms | KMP 패턴 매칭, 아나그램, 팰린드롬, 문자열 처리 기법 |
| two-pointers | 투 포인터, 슬라이딩 윈도우, 부분합 기법으로 O(n) 문제 해결 |
변수, 자료형, 제어문, 함수, 예외 (25개)
| 항목 | 설명 |
|---|---|
| closures | 클로저, nonlocal, 함수 팩토리, 데코레이터 기초 |
| comprehensions | 리스트/딕셔너리/셋/제너레이터 컴프리헨션과 중첩, 조건 |
| context-managers | with문, enter/exit, contextlib, @contextmanager |
| decorators | 함수/클래스 데코레이터, @wraps, 매개변수 있는 데코레이터 |
| dicts | 키-값 쌍의 자료구조, 다양한 생성/접근/병합 방법 |
| exceptions | try/except/else/finally, raise, 커스텀 예외, ExceptionGroup |
| for-loops | for/else, enumerate, zip, range, 언패킹 반복 |
| functions | def, 기본값, *args, **kwargs, 반환값, 타입 힌트 |
| functools | lru_cache, partial, reduce, wraps, total_ordering, singledispatch |
| generators | yield, yield from, 제너레이터 표현식, send(), 파이프라인 |
| if-else | 조건문, 삼항 연산자, match-case, walrus operator |
| itertools | chain, product, permutations, combinations, groupby, islice, starmap |
| lambda | 람다 함수, map/filter/reduce, sorted key 활용 |
| lists | Python의 가장 기본적인 가변 순서형 자료구조 |
| numbers | int, float, complex 타입과 산술 연산, math 모듈 활용 |
| scope-rules | LEGB 규칙, global, nonlocal, 네임스페이스 |
| sets | 집합 연산(합/교/차/대칭차), frozenset, 중복 제거 |
| string-formatting | f-string, format(), % 포매팅, Template, 정렬과 패딩 |
| strings | f-string, 슬라이싱, 주요 문자열 메서드 활용 |
| tuples | 불변 순서형 자료구조, 패킹/언패킹과 namedtuple 활용 |
| type-hints | 타입 힌트, Optional, Union, TypeAlias, TypeVar, Generic |
| unpacking | *, ** 언패킹, 확장 언패킹, 딕셔너리 병합 |
| variables-types | 변수 선언, 동적 타이핑, type()과 isinstance() 활용 |
| walrus-operator | := 연산자의 패턴과 활용 사례 (Python 3.8+) |
| while-loops | while/else, break/continue, 무한루프 패턴 |
면접 단골 주제 (15개)
| 항목 | 설명 |
|---|---|
| async-vs-thread | IO bound 작업에서 asyncio와 threading의 성능을 실제 측정하여 비교 |
| context-manager-internal | __enter__와 __exit__의 호출 순서, 예외 처리, contextlib 활용 |
| decorator-execution-order | 다중 데코레이터의 적용 순서와 실행 순서를 코드로 추적하여 이해 |
| descriptor-protocol | get, set, __delete__으로 속성 접근을 제어하는 디스크립터 프로토콜 |
| generator-memory | 제너레이터와 리스트의 메모리 사용량을 sys.getsizeof로 비교하여 효율 증명 |
| gil-demo | GIL이 CPU bound와 IO bound 작업에 미치는 영향을 threading과 multiprocessing으로 비교 |
| hash-equality | __hash__와 __eq__의 관계, dict/set에서의 동작을 코드로 증명 |
| import-circular | 순환 임포트가 발생하는 원리와 3가지 해결 방법을 코드로 시연 |
| late-binding-closure | 루프와 람다/클로저에서 발생하는 지연 바인딩 문제와 해결 방법 |
| memory-management | 참조 카운팅, 순환 참조, gc 모듈로 Python 메모리 관리 메커니즘 확인 |
| metaclass-creation | 메타클래스가 클래스를 생성하는 과정(new, init, init_subclass)을 단계별로 추적 |
| mutable-default-trap | 함수 인자의 가변 기본값(리스트, 딕셔너리)이 공유되는 문제와 해결 패턴 |
| shallow-deep-copy | copy와 deepcopy의 차이를 중첩 리스트와 객체로 확인하고, id로 추적 |
| slot-performance | __slots__가 메모리와 속성 접근 속도에 미치는 영향을 timeit으로 측정 |
| walrus-practical | 왈러스 연산자(:=)의 실전 활용 패턴 - while, if, 컴프리헨션에서의 사용법 |
requests, BeautifulSoup, pandas 등 외부 라이브러리 (15개)
| 항목 | 설명 |
|---|---|
| celery-basics | Celery 태스크 정의, delay, 결과 조회, 주기적 태스크 개념 |
| click-cli | @click.command, @click.option, @click.argument, 그룹 명령어 |
| fastapi-advanced | Depends, middleware, BackgroundTasks, WebSocket 등 고급 기능 |
| fastapi-basics | FastAPI 앱 생성, @app.get/post, Path/Query 파라미터, Pydantic 모델 |
| httpx | httpx 비동기/동기 클라이언트, 스트리밍, HTTP/2 지원 |
| matplotlib-basics | plot, scatter, bar, hist, subplot, 스타일링 |
| numpy-basics | ndarray, shape, dtype, 인덱싱, broadcasting 기초 |
| numpy-operations | 행렬 연산, 통계, where, reshape, 벡터화 연산 |
| pandas-basics | DataFrame 생성, 인덱싱, loc/iloc, 컬럼 조작 |
| pandas-operations | groupby, merge, pivot, apply, 결측치 처리 등 데이터 조작 |
| requests-advanced | timeout, retry, auth, 파일 업로드, 에러 처리 등 실무 패턴 |
| requests-basics | requests.get/post, headers, params, json(), status_code, session 사용법 |
| rich-output | Rich console, table, progress bar, 트리, 마크다운 출력 |
| sqlalchemy-basics | engine, Session, declarative_base, 기본 CRUD 작업 |
| sqlalchemy-relationships | 1:N, N:M 관계, lazy loading, eager loading 전략 |
socket, HTTP, websocket, asyncio 네트워크 (15개)
| 항목 | 설명 |
|---|---|
| async-server | asyncio로 비동기 TCP 서버, 동시 클라이언트 처리, 이벤트 루프 |
| binary-protocol | struct 모듈로 바이너리 데이터 팩/언팩, 패킷 구조 파싱 |
| dns-lookup | socket.getaddrinfo로 DNS 조회, 커스텀 리졸버 패턴 |
| docker-python | Python용 Dockerfile 작성, 멀티스테이지 빌드, 이미지 최적화 기법 |
| environment | os.environ, dotenv, 환경 변수 관리 패턴, 12-Factor 원칙 |
| file-monitoring | 파일 시스템 변경 감지, 이벤트 핸들러, 디렉토리 감시 |
| ftp-sftp | ftplib으로 FTP 파일 전송, paramiko 개념으로 SFTP 접근 |
| http-server | http.server로 정적 파일 서빙과 간단한 REST API 라우팅 구현 |
| process-management | subprocess로 외부 프로세스 실행, 파이프, 시그널 처리 |
| smtp-email | smtplib으로 이메일 전송, MIME 구조, 첨부 파일 개념 |
| socket-tcp | TCP 소켓으로 echo 서버와 멀티 클라이언트 처리 구현 |
| socket-udp | UDP 소켓 통신, 브로드캐스트, TCP와 차이점 |
| ssh-remote | paramiko로 SSH 연결, 원격 명령 실행, 터널링 개념 |
| system-info | platform, os 모듈로 시스템 정보 조회, psutil 패턴으로 CPU/메모리/디스크 모니터링 |
| url-parsing | urllib로 URL 분해/조합, 인코딩/디코딩, 쿼리스트링 빌드 |
클래스, 상속, dunder, dataclass, ABC (20개)
| 항목 | 설명 |
|---|---|
| abstract-classes | ABC, @abstractmethod, 인터페이스 패턴 |
| attrs-basics | attrs, @define, field(), 비교, 직렬화 |
| class-basics | 클래스 정의, init, self, 인스턴스/클래스 변수 |
| class-decorators | 클래스 데코레이터, 싱글턴, 등록 패턴 |
| class-methods | @classmethod, @staticmethod, 팩토리 메서드 패턴 |
| copy-deep | copy, deepcopy, copy/deepcopy 커스터마이징 |
| dataclasses | @dataclass, field(), post_init, frozen, slots |
| descriptors | get, set, delete, 디스크립터 프로토콜 |
| enum-class | Enum, IntEnum, Flag, auto(), 멤버 메서드 |
| inheritance | 단일/다중 상속, super(), MRO (C3 선형화) |
| magic-methods-basic | str, repr, len, bool, del |
| magic-methods-container | getitem, setitem, contains, iter, 커스텀 컨테이너 |
| magic-methods-context | enter, exit, 커스텀 컨텍스트 매니저 구현 |
| magic-methods-operators | add, eq, lt, hash, 연산자 오버로딩 |
| metaclasses | type(), new, init_subclass, 메타클래스 기초 |
| mixins | 믹스인 패턴, 다중 상속 활용, 실무 예시 |
| properties | @property, getter/setter, 유효성 검사, 계산된 속성 |
| protocols | typing.Protocol, 구조적 서브타이핑 (3.8+), @runtime_checkable |
| pydantic-basics | Pydantic BaseModel, Field, validator, 데이터 검증 |
| slots | __slots__를 이용한 메모리 절약과 속성 제한 |
파이썬식 디자인 패턴 (20개)
| 항목 | 설명 |
|---|---|
| builder | 빌더 패턴, 메서드 체이닝, dataclass 활용 |
| clean-code | 네이밍 컨벤션, PEP 8, 함수 설계 원칙, 단일 책임 |
| concurrency-patterns | asyncio 패턴, producer-consumer, fan-out/fan-in |
| config-management | 환경변수, dotenv, pydantic-settings, 12-factor 원칙의 설정 관리 |
| data-validation | Pydantic v2의 BaseModel, Field, validator, 커스텀 타입, JSON Schema |
| decorator-pattern | GoF 데코레이터 패턴과 Python 데코레이터 문법의 차이와 활용 |
| dependency-injection | DI 패턴, 생성자 주입, 컨테이너 개념으로 결합도 낮추기 |
| error-handling | 예외 처리 패턴, 커스텀 예외 계층, Result 패턴 |
| factory | 팩토리 함수, 클래스 팩토리, 등록 패턴으로 객체 생성 분리 |
| logging-patterns | 구조화된 로깅, JSON 로그, 컨텍스트 전파, 실무 로깅 설정 |
| observer | 옵저버 패턴, 이벤트 시스템, 콜백 구현 |
| packaging | pyproject.toml, 패키지 구조, setup, 배포(PyPI) 과정 |
| performance | 프로파일링(cProfile, timeit), 메모리 최적화, slots 활용 |
| pythonic-code | EAFP vs LBYL, 덕 타이핑, unpacking, 언더스코어 관행 등 Python다운 코드 |
| repository | 리포지토리 패턴, 추상 저장소, 의존성 역전으로 데이터 접근 분리 |
| singleton | 모듈 싱글턴, new, 데코레이터, metaclass 방식의 싱글턴 구현 |
| strategy | 전략 패턴의 함수 기반, 클래스 기반 구현과 callable 활용 |
| testing-patterns | pytest fixture, mock, 테스트 더블, 파라미터화, conftest 활용 |
| type-checking | mypy, pyright, reveal_type, 점진적 타이핑 전략 |
| virtual-env | venv, pip, requirements.txt, poetry, pip-tools로 의존성 관리 |
패키지 레이아웃, pyproject, 아키텍처 (15개)
| 항목 | 설명 |
|---|---|
| api-client | HTTP 클라이언트에 재시도, 인증, 에러 래핑, 타입을 갖춘 API 클라이언트 |
| auth-system | 비밀번호 해싱, JWT 토큰 발급/검증, 미들웨어 인증 검사를 포함한 인증 시스템 |
| batch-processor | 청크 분할, 병렬 처리, 진행률 추적, 에러 수집을 갖춘 배치 프로세서 |
| cli-application | argparse 기반 명령어 체계, 설정 관리, 컬러 출력을 갖춘 CLI 애플리케이션 |
| crud-fastapi | FastAPI로 모델, 스키마, 라우터, 에러 처리를 포함한 완전한 CRUD API 구현 |
| data-pipeline | ETL(추출-변환-로드) 파이프라인으로 데이터 처리, 에러 핸들링, 로깅 구현 |
| event-system | EventBus, async 핸들러, 데코레이터 등록 방식의 이벤트 기반 아키텍처 |
| middleware-chain | 로깅, 인증, 에러처리, 응답 래핑을 체인으로 연결하는 미들웨어 패턴 |
| notification-service | 전략 패턴으로 Email/Slack/Webhook 채널, 템플릿, 큐를 구현한 알림 서비스 |
| plugin-system | Protocol 기반 플러그인 인터페이스, 동적 로딩, 등록 및 실행 |
| python-project-structures--config-management | 환경변수, pydantic-settings, 검증, 주입을 포함한 설정 관리 시스템 |
| repository-pattern | 추상 리포지토리 인터페이스와 SQLAlchemy, 인메모리 구현체로 데이터 접근 계층 분리 |
| service-layer | 비즈니스 로직을 서비스 계층으로 분리하고, 의존성 주입과 트랜잭션 관리 구현 |
| task-queue | Producer, Queue, Worker, 결과 저장을 포함한 비동기 태스크 큐 시스템 |
| web-scraper | HTTP 요청, HTML 파싱, 데이터 저장, 재시도 로직, Rate Limit을 포함한 웹 스크레이퍼 |
해싱, 암호화, JWT, 입력 검증 (10개)
| 항목 | 설명 |
|---|---|
| bcrypt-password | bcrypt로 비밀번호를 안전하게 해싱하고 검증하며, 라운드(cost factor) 설정으로 보안 수준을 조절 |
| fernet-encryption | cryptography.Fernet으로 데이터를 대칭 암호화하고 키 관리, 키 로테이션을 구현 |
| hashlib-basics | hashlib로 SHA-256, SHA-512, MD5 해시를 생성하고 파일 해시 검증, 솔트 해싱을 수행 |
| hmac-signing | hmac 모듈로 메시지 인증 코드를 생성하고 API 서명, 웹훅 검증을 구현 |
| input-validation | SQL Injection, XSS 등 주요 취약점을 방지하는 입력 검증과 안전한 코딩 패턴 |
| jwt-creation | PyJWT로 JSON Web Token을 생성, 검증하고 만료, 커스텀 클레임, 리프레시 토큰 패턴을 구현 |
| rsa-encryption | RSA 키 생성, 공개키 암호화/복호화, 디지털 서명/검증을 구현 |
| secrets-module | secrets 모듈로 암호학적으로 안전한 토큰, URL 안전 문자열, 비교를 수행 |
| secure-coding | 환경 변수 관리, 비밀 관리, 안전한 파일 권한, OWASP Top 10 대응 패턴 |
| ssl-tls | ssl 모듈로 인증서 검증, HTTPS 연결, 보안 소켓을 구성하고 인증서 정보를 확인 |
os/sys/json/datetime/re 등 표준 라이브러리 (20개)
| 항목 | 설명 |
|---|---|
| abc-module | ABC, abstractmethod, register, __subclasshook__으로 인터페이스 정의 |
| asyncio-advanced | aiohttp, 비동기 제너레이터, Semaphore, timeout, 실무 비동기 패턴 |
| asyncio-basics | async def, await, asyncio.run, gather, create_task로 비동기 프로그래밍 |
| csv-module | CSV 파일 읽기/쓰기, DictReader/DictWriter, 인코딩 처리 |
| dataclasses-advanced | post_init, field(default_factory), asdict, slots, 상속, 불변 dataclass |
| datetime | datetime, date, time, timedelta, 포맷팅(strftime/strptime), timezone 처리 |
| enum-module | Enum, auto, StrEnum (3.11+), Flag, IntFlag로 상수 그룹 정의 |
| file-io | 파일 읽기/쓰기, with문, 모드(r/w/a/b), encoding, 라인 단위 처리 |
| json-module | JSON 직렬화/역직렬화, 커스텀 인코더/디코더, indent, default 활용 |
| logging | logging 모듈 기본, 레벨, 핸들러, 포매터, 로거 계층 구조 |
| multiprocessing | Process, Pool, Queue, shared memory, ProcessPoolExecutor로 CPU 바운드 병렬 처리 |
| os-path | os.path와 pathlib.Path를 이용한 파일 경로 조작, 존재 확인, 디렉토리 탐색 |
| pathlib | Path 객체로 파일/디렉토리 경로를 객체지향적으로 다루기. glob, read_text, mkdir 등 |
| pytest-basics | pytest의 assert, fixture, parametrize, mark로 효율적인 테스트 작성 |
| re-module | re.match/search/findall/sub, 그룹, 컴파일, 실무 정규표현식 패턴 |
| struct-pack | struct.pack/unpack으로 바이너리 데이터 처리, 네트워크 프로토콜, 파일 포맷 파싱 |
| subprocess | subprocess.run, Popen, 파이프, timeout, 외부 명령 실행과 보안 고려사항 |
| threading | Thread, Lock, Event, ThreadPoolExecutor, GIL 이해와 I/O 바운드 병렬 처리 |
| typing-advanced | TypedDict, Literal, Annotated, ParamSpec, TypeVarTuple 등 고급 타입 힌트 |
| unittest | TestCase, assert 메서드, setUp/tearDown, mock.patch로 단위 테스트 작성 |
pytest 심화, fixture, mock (15개)
| 항목 | 설명 |
|---|---|
| best-practices-architecture | 레이어 분리, 의존성 역전, 인터페이스 설계를 통한 유지보수 가능한 Python 아키텍처 |
| best-practices-code | PEP 8을 넘어서는 코드 품질 기준: 함수 크기, 네이밍, 타입 힌트, 린터 활용 |
| best-practices-performance | cProfile, timeit, line_profiler로 병목을 찾고, 프로파일링 결과 기반으로 최적화하는 실전 기법 |
| coverage | pytest-cov로 라인/브랜치 커버리지를 측정하고 제외 패턴과 목표를 설정 |
| integration-test | DB 통합 테스트, testcontainers 개념, 트랜잭션 롤백을 이용한 테스트 격리 |
| property-testing | hypothesis로 무작위 데이터를 자동 생성하여 속성(property)을 검증하고 엣지 케이스를 발견 |
| pytest-async | pytest-asyncio로 async 함수, async fixture, 비동기 코드를 테스트 |
| pytest-conftest | conftest.py 계층 구조, 플러그인, 훅 함수를 이용한 pytest 확장과 공유 설정 |
| pytest-fixtures | fixture scope, autouse, yield, 의존성 주입을 통한 테스트 설정과 정리 |
| pytest-markers | mark.skip, mark.xfail, 커스텀 마커, -m 필터를 이용한 선택적 테스트 실행 |
| pytest-mock | unittest.mock의 patch, MagicMock, PropertyMock, side_effect로 외부 의존성을 격리하는 테스트 |
| pytest-parametrize | @pytest.mark.parametrize로 여러 입력 조합을 테스트하고, 간접 파라미터와 ids로 가독성 향상 |
| tdd-practice | Test-Driven Development의 Red-Green-Refactor 사이클을 실전 예제로 전체 과정 시연 |
| test-doubles | Stub, Mock, Spy, Fake, Dummy의 차이와 각각의 구현 방법 및 적절한 사용 시나리오 |
| test-patterns | AAA, Given-When-Then, 테스트 격리, 테스트 피라미드 등 테스트 설계 패턴 |
Flask/FastAPI/Django 기초 (15개)
| 항목 | 설명 |
|---|---|
| beautifulsoup | BeautifulSoup으로 HTML 파싱, find/find_all, CSS 선택자, 데이터 추출 |
| cors-csrf | CORS 설정, CSRF 보호, 보안 헤더 적용 |
| django-forms | Form, ModelForm, 유효성 검사, 커스텀 위젯, 폼셋 |
| django-models | Model 정의, 필드 타입, 관계(ForeignKey, ManyToMany), Meta 옵션, migration 개념 |
| django-orm | QuerySet API, filter, annotate, aggregate, Q객체, F객체 활용 |
| django-rest | DRF Serializer, ViewSet, Router, 인증, 페이지네이션 |
| django-views | FBV(함수 기반), CBV(클래스 기반), generic views, 리다이렉트, 에러 처리 |
| flask-api | Flask-RESTful, marshmallow 스키마, JWT 인증, API 구축 패턴 |
| flask-basics | Flask 앱 구조, 라우트, Jinja2 템플릿, 요청/응답, Blueprint 모듈화 |
| graphql-python | Python에서 GraphQL 스키마 정의, Query/Mutation, 리졸버 구현 |
| jinja2 | Jinja2 템플릿 문법, 필터, 매크로, 상속, 자동 이스케이프 |
| oauth-jwt | OAuth2 흐름, JWT 생성/검증, python-jose, 토큰 관리 |
| scrapy-basics | Scrapy Spider, Item, Pipeline, 선택자, 대규모 크롤링 |
| selenium | Selenium으로 브라우저 제어, 요소 대기, 조작, 스크린샷 |
| websocket | websockets 라이브러리로 서버/클라이언트 구현, 채팅 예제 |
인증, 캐싱, websocket, 메시지 큐 등 심화 (15개)
| 항목 | 설명 |
|---|---|
| api-pagination | Offset, Cursor, Keyset 페이지네이션 구현과 비교, 응답 구조 |
| api-rate-limit | 토큰 버킷, 슬라이딩 윈도우 알고리즘으로 API 속도 제한, 429 응답 |
| api-versioning | URL, 헤더, 미디어 타입 기반 API 버저닝 구현과 비교 |
| django-admin | ModelAdmin 커스터마이징, list_display, filter, action, inline |
| django-cache | per-view 캐시, template fragment 캐시, low-level 캐시 API |
| django-celery | Celery 연동, 비동기 태스크 정의/실행, 주기적 태스크 |
| django-middleware | 요청/응답 처리 미들웨어, 인증 미들웨어, 로깅 미들웨어 구현 |
| django-queryset | select_related, prefetch_related로 N+1 쿼리 해결, QuerySet 최적화 기법 |
| django-signals | post_save, pre_delete 시그널, 커스텀 시그널 정의, 디커플링 |
| django-testing | Django TestCase, Client, factory_boy, pytest-django 활용 |
| django-websocket | Django Channels로 WebSocket consumer, 실시간 채팅, 그룹 메시징 |
| flask-auth | Flask-Login 세션 인증, JWT 토큰 인증, 데코레이터 보호 |
| flask-blueprint | Blueprint로 모듈화, 앱 팩토리 패턴, 대규모 프로젝트 구조 |
| flask-sqlalchemy | Flask-SQLAlchemy 모델 정의, 관계(1:N, M:N), 마이그레이션 |
| flask-testing | pytest + Flask test_client, fixture, Mock, API 테스트 |
정렬, 탐색, 그래프, DP 등 (15개)
| 항목 | 설명 |
|---|---|
| backtracking | 백트래킹으로 N-Queen, 순열, 조합 문제 풀기 |
| bfs-dfs | 인접 리스트 기반 그래프에서 너비 우선 탐색(BFS)과 깊이 우선 탐색(DFS) |
| binary-search | 정렬된 슬라이스에서 O(log n)으로 원소를 탐색. 반복/재귀 구현과 lower/upper bound 변형 |
| binary-tree | Box 기반 이진 탐색 트리. 삽입, 검색, 전위/중위/후위 순회 |
| dijkstra | BinaryHeap을 이용한 다익스트라 최단 경로 알고리즘 |
| dynamic-programming | DP 기초: 피보나치, 계단 오르기, 0/1 배낭 문제 |
| hash-patterns | HashMap을 활용한 카운팅, 그룹핑, Two Sum, 빈도 분석 패턴 |
| heap-impl | 최소 힙 직접 구현과 표준 BinaryHeap 활용법 |
| linked-list | Box 기반 단일 연결 리스트. push, pop, peek, 반복자 구현 |
| sorting | 버블/선택/삽입/퀵/머지 정렬 직접 구현과 Rust sort vs sort_unstable 비교 |
| stack-queue | Vec으로 스택, VecDeque으로 큐 구현. 괄호 매칭 등 실전 활용 |
| string-algorithms | 문자열 매칭(KMP), 아나그램 판별, 팰린드롬 검사 |
| trie | HashMap 기반 트라이 구현. 삽입, 검색, 접두사 검색, 자동완성 |
| two-pointers | 투 포인터 기법과 슬라이딩 윈도우로 배열/문자열 문제를 O(n)에 해결 |
| union-find | 경로 압축과 랭크 기반 합치기를 적용한 Union-Find 구현 |
Vec, HashMap, BTreeMap 등 컬렉션 (15개)
| 항목 | 설명 |
|---|---|
| binaryheap | BinaryHeap, 최대힙, 최소힙 트릭(Reverse), peek_mut, into_sorted_vec |
| btreemap | BTreeMap, 정렬된 맵, range 검색, 범위 쿼리, HashMap과 비교 |
| collect-patterns | collect::, collect::, collect::, Result 컬렉트 패턴 |
| cow-string | Cow, 필요시만 복사, 함수 인터페이스 설계, 성능 최적화 |
| custom-collection | 커스텀 컬렉션 구현, IntoIterator, FromIterator, Index 트레이트 |
| entry-api | Entry API 패턴, Vacant/Occupied, 카운팅, 그룹핑, 캐시 패턴 |
| hashmap-advanced | HashMap 내부 구조, entry API, or_insert_with, 커스텀 해셔 |
| hashset-btreeset | HashSet vs BTreeSet, 집합 연산 union, intersection, difference, symmetric_difference |
| iterator-adapters | map, filter, flat_map, chain, zip, enumerate, peekable, take, skip |
| iterator-advanced | scan, inspect, by_ref, fuse, 커스텀 이터레이터 구현 (Iterator trait) |
| iterator-consumers | collect, fold, for_each, sum, product, any, all, find, position, count |
| linkedlist | LinkedList, 사용 시나리오, Vec과의 비교, 거의 항상 Vec이 나은 이유 |
| slice-patterns | 슬라이스 패턴 매칭, windows, chunks, split, 이진 탐색 |
| vec-advanced | Vec 내부 구조, len vs capacity, reserve, shrink_to_fit, drain, retain |
| vecdeque | VecDeque, push_front/back, 원형 버퍼 구조, BFS 활용 |
Result, panic, thread, async, Mutex (20개)
| 항목 | 설명 |
|---|---|
| anyhow | anyhow 크레이트 패턴, Context, bail!, ensure! |
| arc-mutex | Arc<Mutex>, 멀티스레드 공유 상태 |
| async-basics | async fn, .await, tokio::main, Future 트레이트 |
| async-patterns | 비동기 스트림, timeout, retry, 동시 요청 제한 |
| async-tokio | tokio::spawn, select!, join!, 비동기 채널 |
| atomic | AtomicBool, AtomicUsize, Ordering, lock-free 프로그래밍 |
| condvar | Condvar, wait/notify, 생산자-소비자 패턴 |
| crossbeam | crossbeam 채널, scope, 락프리 자료구조 개념 |
| error-handling | 커스텀 에러 타입, From 구현, 에러 전파 체인 |
| mutex | Mutex, lock(), MutexGuard, 데드락 방지 |
| panic-recovery | panic!, catch_unwind, 패닉 vs 에러 사용 기준 |
| parallel-patterns | 맵리듀스, 파이프라인, 팬아웃/팬인 |
| rayon | rayon, par_iter, 병렬 이터레이터, 데이터 병렬성 |
| result-option | Result<T,E>, Option, unwrap, expect, ? 연산자 |
| rwlock | RwLock, read/write, 사용 시나리오 |
| send-sync | Send, Sync 마커 트레이트, 스레드 안전 보장 |
| thiserror | thiserror 크레이트 패턴, #[error], #[from] 속성 |
| thread-basics | std::thread::spawn, join, move 클로저 |
| thread-messaging | mpsc 채널, tx/rx, 다중 생산자 |
| thread-pool | 스레드 풀 직접 구현, Worker, Job, 종료 처리 |
변수, 자료형, 제어문, 함수, 표현식 (20개)
| 항목 | 설명 |
|---|---|
| attributes | #[derive], #[cfg], #[test], #[allow], 조건부 컴파일 등 속성 시스템 |
| cargo-basics | Cargo.toml, 의존성 관리, features, 워크스페이스 개념 |
| closures | 클로저 문법, Fn/FnMut/FnOnce 트레이트, move, 캡처 방식 |
| collections-hashmap | HashMap 생성, entry API, or_insert, 카운팅 패턴 |
| collections-string | String 심화 조작: push_str, + 연산자, chars(), bytes() 등 |
| collections-vec | Vec 생성, 수정, 인덱싱, 이터레이터, 슬라이스 변환 |
| compound-types | 튜플, 배열, 슬라이스, 디스트럭처링을 통한 복합 데이터 표현 |
| const-static | const vs static, const fn, 컴파일 타임 계산 |
| control-flow | if/else, loop, while, for, match, if let, while let 등 제어 흐름 구조 |
| enums | enum 정의, 데이터를 포함하는 enum, Option, Result<T,E> |
| functions | 함수 정의, 매개변수, 반환값, 표현식과 문장의 차이, 클로저 기초 |
| iterators | Iterator 트레이트, map, filter, fold, collect, enumerate, zip 활용 |
| macros-basics | println!, vec!, macro_rules! 기초, 반복 패턴 |
| modules | mod, pub, use, 파일 구조, 가시성 규칙, re-export |
| pattern-matching | match 심화, 패턴 문법, 가드, @ 바인딩, 이름 무시 패턴 |
| scalar-types | 정수, 부동소수점, 불리언, 문자 등 기본 스칼라 타입과 오버플로우 |
| strings | String과 &str의 차이, 생성, 슬라이싱, 포맷, UTF-8 처리 |
| structs | struct 정의, 메서드(impl), 연관 함수, 튜플 구조체 |
| type-alias | type 별칭, 뉴타입 패턴, PhantomData 활용 |
| variables-mutability | let, let mut, const, 섀도잉, 타입 추론의 기본 개념 |
File, Path, BufReader, serde (15개)
| 항목 | 설명 |
|---|---|
| args-parsing | std::env::args, 수동 파싱, clap 구조 패턴 |
| binary-io | 바이너리 읽기/쓰기, 엔디안 처리, 간단한 프로토콜 파싱 |
| bufread-bufwrite | BufReader, BufWriter, lines(), 성능 차이, 대용량 파일 처리 |
| directory-walk | fs::read_dir, 재귀 순회, walkdir 크레이트 패턴 |
| env-vars | std::env, 환경변수 읽기, dotenv 패턴, 설정 관리 |
| error-io | io::Error, io::ErrorKind, 커스텀 에러와 IO 에러 통합 |
| file-read-write | std::fs::read_to_string, write, File::create, 에러 처리 |
| path-operations | Path, PathBuf, 경로 조작, 존재 확인, 메타데이터 조회 |
| serde-basics | Serialize, Deserialize, #[derive], 필드 어트리뷰트 기초 |
| serde-csv | csv 크레이트 패턴, Reader/Writer, 헤더, 구조체 매핑 |
| serde-custom | 커스텀 Serialize/Deserialize, #[serde(rename)], skip, default, with |
| serde-json | serde_json, to_string/from_str, Value, 동적 JSON 처리 |
| serde-toml | toml 크레이트, 설정 파일 파싱, 구조체 매핑 |
| stdin-stdout | std::io::stdin, BufRead, 입력 파싱, 출력 버퍼링 |
| tempfile | 임시 파일/디렉토리 생성, 자동 정리, tempfile 크레이트 패턴 |
소유권, 빌림, 라이프타임 (20개)
| 항목 | 설명 |
|---|---|
| borrowing-immutable | 불변 참조 &T, 여러 불변 참조 동시 가능 |
| borrowing-mutable | 가변 참조 &mut T, 하나만 허용, 데이터 레이스 방지 |
| borrowing-rules | 빌림 규칙 종합, 동시에 불변+가변 불가, 컴파일러 에러 읽기 |
| cow | Cow, 필요 시 복사, 성능 최적화 패턴 |
| deref-trait | Deref/DerefMut, 역참조 강제, 스마트 포인터 투명성 |
| drop-trait | Drop 트레이트, 커스텀 정리 로직, std::mem::drop |
| interior-mutability | Cell, RefCell, 내부 가변성 패턴 비교 |
| lifetime-basics | 라이프타임 어노테이션 'a, 함수 시그니처, 의미 |
| lifetime-elision | 라이프타임 생략 규칙 3가지, 컴파일러의 자동 추론 |
| lifetime-static | 'static 라이프타임, 문자열 리터럴, 전역 참조 |
| lifetime-structs | 참조를 가진 구조체의 라이프타임 어노테이션 |
| memory-layout | 메모리 레이아웃, std::mem::size_of, 정렬, repr |
| ownership-basics | Rust의 소유권 시스템 3가지 규칙과 이동/복사 개념 |
| ownership-functions | 함수에 값 전달 시 소유권 이동, 반환으로 돌려받기 |
| pin-unpin | Pin, Unpin, 자기 참조 구조체, async와의 관계 |
| slice-type | &[T], &str 슬라이스 패턴, 범위 인덱싱 |
| smart-pointer-arc | Arc, 멀티스레드 참조 카운팅, Arc + Mutex 패턴 |
| smart-pointer-box | Box, 힙 할당, 재귀 타입, Deref |
| smart-pointer-rc | Rc, 참조 카운팅, Rc::clone, Weak |
| smart-pointer-refcell | RefCell, 내부 가변성, borrow/borrow_mut, 런타임 빌림 검사 |
newtype, Builder, RAII, type-state 등 (15개)
| 항목 | 설명 |
|---|---|
| builder-pattern | 빌더 패턴으로 복잡한 객체를 메서드 체이닝으로 구성. 필수/선택 필드 분리, 타입 안전 빌더 |
| command-pattern | 커맨드 패턴으로 Undo/Redo 구현. 트레이트 객체로 명령 캡슐화 |
| enum-dispatch | enum 디스패치와 trait object 비교. 성능과 사용성 트레이드오프 |
| error-chain | 에러를 래핑하고 컨텍스트를 추가하여 디버깅 정보를 풍부하게 하는 에러 체인 패턴 |
| extension-trait | 외부 타입에 메서드를 추가하는 확장 트레이트 패턴 |
| iterator-patterns | 이터레이터 어댑터 조합, 커스텀 이터레이터, 지연 평가 활용 |
| newtype-pattern | 뉴타입 패턴으로 기존 타입을 래핑하여 타입 안전성 확보. 단위 혼동 방지, 의미 부여 |
| observer-pattern | 옵저버 패턴, 콜백 기반 이벤트 시스템, 발행-구독 패턴 |
| option-combinators | Option 체이닝: map, and_then, unwrap_or, filter, zip 등 콤비네이터 활용 |
| raii | RAII(Resource Acquisition Is Initialization)로 Drop 트레이트를 이용한 리소스 자동 관리 |
| result-combinators | Result 체이닝: map, map_err, and_then, or_else, ? 연산자와 조합 |
| state-machine | enum + match로 구현하는 타입 안전 상태 머신. 명시적 상태 전이 |
| strategy-pattern | 전략 패턴을 클로저와 트레이트 객체로 구현. 런타임 알고리즘 교체 |
| typestate-pattern | 타입 시스템으로 상태 전이를 인코딩하여 잘못된 상태 전이를 컴파일 타임에 방지 |
| zero-cost-abstraction | Rust의 제로 비용 추상화 원칙. 인라이닝, 모노모피제이션, 컴파일 타임 계산 |
clap, reqwest, axum, sqlx 등 실용 (15개)
| 항목 | 설명 |
|---|---|
| cargo-workspace | 워크스페이스 구조, 멀티 크레이트 프로젝트, 공유 의존성 관리 |
| cli-clap | clap 크레이트로 커맨드라인 인터페이스 구축. Args derive, 서브커맨드, 옵션 파싱 |
| config | config 크레이트 패턴, 환경변수, TOML 파일, 계층 설정, 타입 안전 설정 |
| database-sqlx | sqlx로 비동기 DB 접근. 쿼리 매크로, 타입 안전 쿼리, 트랜잭션 패턴 |
| file-io | std::fs로 파일 읽기/쓰기. BufReader/BufWriter, 경로 처리, 디렉토리 탐색 |
| http-reqwest | reqwest로 HTTP 요청. GET/POST, JSON 바디, 헤더, 에러 처리 패턴 |
| logging | log, env_logger, tracing을 이용한 구조화된 로깅 패턴 |
| procedural-macros | 프로시저 매크로 개념, derive 매크로 구조, 선언적 매크로와 비교 |
| regex-rust | regex 크레이트 패턴 매칭, 캡처 그룹, 교체, 분할 |
| rust-practical--serde-json | serde로 구조체 직렬화/역직렬화. serde_json, 커스텀 직렬화, 필드 속성 |
| testing | #[test] 속성, assert 매크로, 단위/통합 테스트, mock 패턴, 테스트 구조화 |
| unsafe-basics | unsafe 블록, 원시 포인터, FFI 기초, 안전한 추상화 래퍼 작성법 |
| wasm-basics | wasm-bindgen으로 Rust -> WebAssembly 컴파일, JavaScript 연동 기초 |
| web-actix | actix-web 서버 구조: 라우팅, 핸들러, 상태 공유, 미들웨어 패턴 |
| web-axum | axum 웹 프레임워크: Router, 핸들러, 추출자(Extractor), 미들웨어 패턴 |
Cargo workspace, 모듈, 헥사고날 (15개)
| 항목 | 설명 |
|---|---|
| async-worker | tokio 패턴의 비동기 워커: 채널, 작업 큐, graceful shutdown |
| auth-jwt | JWT 토큰 생성, 검증, 미들웨어 패턴 |
| builder-api | Builder 패턴과 Fluent API로 복잡한 객체를 단계적으로 구성 |
| cli-application | clap 패턴의 CLI 앱: 서브커맨드, 인자 파싱, 진행률 표시 |
| config-management | 환경변수, TOML 파일, 기본값을 조합한 설정 관리 구조 |
| crud-service | Entity -> Repository -> Service 3계층 CRUD 서비스 패턴 |
| error-handling-app | thiserror + anyhow 패턴으로 앱 전체의 에러 처리를 체계적으로 구성 |
| event-driven | EventBus, Handler 등록, 비동기 이벤트 처리 패턴 |
| logging-tracing | tracing 크레이트 패턴으로 구조화된 로깅과 성능 추적 |
| middleware-tower | Tower Service/Layer 패턴: 요청 로깅, 인증, 타임아웃 미들웨어 |
| plugin-system | trait object 기반 플러그인 구조, 동적 등록, 이벤트 처리 |
| rest-api-axum | axum 기반 REST API: 라우팅, 핸들러, 미들웨어, 에러 처리 |
| rust-project-structures--database-sqlx | sqlx 패턴의 데이터베이스 접근: 쿼리, 트랜잭션, 마이그레이션 개념 |
| testing-patterns | #[test], mock, 통합 테스트, 프로퍼티 기반 테스트 패턴 |
| wasm-component | wasm-bindgen으로 Rust를 WebAssembly로 컴파일, JS와 연동 |
unsafe, FFI, atomic, no_std (15개)
| 항목 | 설명 |
|---|---|
| benchmarking | std::time으로 간단한 벤치마크, criterion 크레이트 패턴, 성능 측정 기법 |
| bitwise | 비트 연산, 비트플래그 패턴, 비트마스크 활용 |
| custom-allocator | GlobalAlloc 트레이트로 커스텀 메모리 할당자 구현. 할당 추적 예제 |
| ffi-c-calling | extern "C"로 C 함수 호출, libc, CStr/CString 문자열 변환 |
| ffi-c-struct | #[repr(C)] 구조체 매핑, C 콜백 함수 패턴 |
| global-state | OnceLock, LazyLock, static Mutex로 전역 상태를 안전하게 관리 |
| inline-asm | core::arch::asm! 매크로로 인라인 어셈블리 작성 (x86_64) |
| memory-alignment | align_of, size_of, #[repr(packed)], #[repr(align)], 메모리 레이아웃 |
| mmap | 메모리 매핑 파일(mmap) 개념과 memmap2 크레이트 패턴 |
| no-std | no_std 환경에서의 Rust 프로그래밍, alloc 크레이트, 임베디드 기초 패턴 |
| signal-handling | ctrlc 크레이트 패턴으로 Ctrl+C 등 시그널을 안전하게 처리 |
| simd-basics | std::simd(nightly) 및 std::arch를 이용한 벡터화 연산 개념 |
| unsafe-functions | unsafe fn 선언, unsafe 트레이트, 안전한 추상화 래퍼 패턴 |
| unsafe-raw-pointers | *const T와 *mut T 원시 포인터의 생성, 역참조, 안전한 사용 패턴 |
| zero-copy | 빌림으로 복사를 회피하는 제로 카피 패턴, &str 기반 파싱 |
#[test], mock, fuzz, 보안 (15개)
| 항목 | 설명 |
|---|---|
| benchmark | criterion, 벤치마크 작성, 비교, 통계적 성능 측정 |
| doc-test | 문서 테스트, ```rust 코드 블록, 컴파일 보장, 예제 검증 |
| encryption | AES-GCM 패턴, 대칭 암호화, 키 생성, nonce 관리 |
| hashing | SHA-256, HMAC, 해시 계산, 파일 체크섬 패턴 |
| input-sanitization | 입력 검증, SQL 파라미터화, 경로 순회 방지, XSS 방지 |
| integration-test | tests/ 디렉토리, 통합 테스트, 공용 모듈, 크레이트 외부 관점 테스트 |
| jwt-rust | jsonwebtoken 크레이트 패턴, Claims, 토큰 서명/검증 |
| password-hashing | argon2, bcrypt 패턴, 비밀번호 해싱/검증, 솔트 |
| proptest | 프로퍼티 기반 테스트, 전략, shrinking, 무작위 입력 검증 |
| test-fixtures | setup/teardown 패턴, 빌더로 테스트 데이터 생성, RAII 정리 |
| test-mocking | trait object 기반 mock, mockall 크레이트 패턴, 의존성 주입 |
| test-organization | tests 모듈, #[cfg(test)], 헬퍼 함수, 공용 테스트 유틸 |
| tls-rustls | rustls 패턴, 인증서, HTTPS 개념, 안전한 통신 |
| unit-test | #[test], assert 매크로, should_panic, 모듈 테스트 |
| unsafe-audit | unsafe 코드 감사, Miri, 안전한 추상화 패턴, unsafe 최소화 |
trait, 정적/동적 디스패치, 제네릭 (15개)
| 항목 | 설명 |
|---|---|
| associated-types | 연관 타입, 제네릭 파라미터와의 차이 |
| blanket-implementations | 블랭킷 구현, T: Display에 대한 ToString 등 |
| generics-enums | Option, Result<T,E>, 커스텀 제네릭 enum |
| generics-functions | 제네릭 함수, 타입 파라미터, 모노모피제이션 |
| generics-structs | 제네릭 구조체, 제네릭 impl, 특정 타입 impl |
| operator-overloading | Add, Sub, Mul, PartialOrd, 연산자 오버로딩 |
| phantom-data | PhantomData, 타입 상태 패턴, 제로 사이즈 타입 |
| supertraits | 슈퍼트레이트, 트레이트 상속, 복합 바운드 |
| trait-basics | 트레이트 정의, 구현, 기본 메서드 |
| trait-bounds | 트레이트 바운드, where 절, 다중 바운드, + 구문 |
| trait-common | Display, From, Into, AsRef, Deref, Default 등 자주 쓰이는 표준 트레이트 |
| trait-derive | #[derive] 매크로, Debug, Clone, PartialEq, Hash 등 자동 구현 |
| trait-from-into | From/Into 변환, TryFrom/TryInto, 에러 변환 패턴 |
| trait-iterator | Iterator 트레이트 구현, 커스텀 이터레이터 |
| trait-objects | dyn Trait, 동적 디스패치 vs 정적 디스패치 |
- docs/plan.md: 이 자료를 만들 때의 계획서
- docs/comment-progress.md: 카테고리별 작성 추적표