정리
<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 차이와 선택 기준