정리

<aside>

CS

Frontend

Backend

Infra &DevOps

AI

Quality & Production

Tooling & Build

</aside>

메일메일

Untitled

프로젝트

프로젝트를 위한 순서

면접 질문들 수집

이력서 피드백

공부할거 체크리스트 (원문)

Step 1 — 인터넷 · 브라우저 동작 원리

• [ ] 인터넷 기초
  • [ ] DNS — 도메인 → IP 조회 과정
  • [ ] TCP / UDP — 연결 지향 vs 비연결, 3-way handshake
  • [ ] HTTP/1.1 vs HTTP/2 vs HTTP/3 — 멀티플렉싱, 헤더 압축, QUIC
  • [ ] HTTPS — TLS handshake, 인증서, Mixed Content
• [ ] 브라우저 동작
  • [ ] DOM / CSSOM → render tree — 파싱 순서, 블로킹 리소스
  • [ ] layout / paint / composite — 렌더링 파이프라인 단계
  • [ ] reflow / repaint — 트리거 조건
  • [ ] GPU 레이어 — transform / opacity 합성 레이어 분리
  • [ ] async / defer — 스크립트 로딩 차이, 적용 기준
  • [ ] critical rendering path — 최적화 포인트
  • [ ] 프로세스 vs 스레드 — 브라우저 멀티 프로세스 구조

Step 2 — HTML

• [ ] 시맨틱 태그 — header, main, section, article, nav, footer, aside
• [ ] 폼 설계 — input type, label 연결, validation, fieldset, datalist
• [ ] SEO — meta, og tag, canonical, title, structured data
• [ ] 크로스 브라우징 — 브라우저별 렌더링 차이, 폴리필, vendor prefix
• [ ] 웹 접근성 (WCAG 2.1)
  • [ ] aria-label, aria-role, aria-live, aria-hidden, tabindex
  • [ ] 키보드 내비게이션 — 포커스 흐름, focus trap, skip navigation
  • [ ] 마우스 없이 기능 사용 가능한지 직접 확인하는 습관

Step 3 — CSS

• [ ] box model — margin / padding / border / content, box-sizing
• [ ] position — static, relative, absolute, fixed, sticky
• [ ] stacking context — z-index, 쌓임 맥락 생성 조건
• [ ] flex — justify-content, align-items, flex-wrap, flex-grow, order
• [ ] grid — grid-template, auto-fit, minmax, grid-area, subgrid
• [ ] 반응형
  • [ ] mobile-first, media query, viewport 단위
  • [ ] 기기 분류가 아니라 레이아웃 깨지는 지점 기준으로 브레이크포인트 설정
  • [ ] 480 / 768 / 1024 기준 실습
• [ ] animation / transition — keyframes, timing function, will-change
• [ ] CSS architecture — BEM, CSS Modules, CSS-in-JS 차이와 선택 기준