mason-log.

GitHub 로그인 중

mason.

안녕하세요. mason 입니다.

frontend

Frontend 로드맵.

프론트엔드 학습 플로우와 CS 기본기 정리.

참조: https://roadmap.sh/frontend

Frontend프론트엔드

Internet인터넷

How does the internet work?인터넷은 어떻게 동작하나 What is DNS?DNS란 What is Hosting?호스팅이란

What is HTTP?HTTP란 What is Domain Name?도메인이란

HTML마크업

Learn the basics기초 Forms and Validations폼과 유효성 검사 SEO BasicsSEO 기초

Semantic HTML시맨틱 HTML Accessibility접근성

CSS스타일

Learn the basics기초 Responsive Design반응형 디자인

Making Layouts레이아웃

JavaScript자바스크립트

Learn the basics기초Closure클로저 Execution Context실행 컨텍스트 Memory Leak메모리 누수 Promise / async-await프로미스 / async-awaitFetch API / Ajax데이터 요청

Event Loop이벤트 루프 Prototype프로토타입 Garbage Collection가비지 컬렉션 Debounce / Throttle디바운스 / 스로틀DOM / BOM문서, 브라우저 객체

Version Control버전 관리

GitHub깃허브

Package Managers패키지 매니저

npm / yarn / pnpm패키지 매니저 비교

Pick a Framework프레임워크 선택

React리액트

Rendering렌더링 Fiber파이버 Hydration하이드레이션 Server Components서버 컴포넌트 React.memo메모 컴포넌트 useMemo / useCallback메모이제이션 훅 Context API컨텍스트 API

Vue.js뷰

Reactivity반응성 Composition API컴포지션 API SFC싱글 파일 컴포넌트 Lifecycle라이프사이클 Pinia피니아 Vue Router뷰 라우터 Rendering렌더링

Rendering Strategies렌더링 전략

CSR / SSR / SSG / ISR렌더링 타입

Browser브라우저

Rendering Pipeline렌더링 파이프라인 Web Vitals웹 바이탈 Storage스토리지

Reflow / Repaint리플로우 / 리페인트 Lighthouse라이트하우스

TypeScript타입스크립트

TypeScript Basics타입스크립트 기초

Network네트워크

HTTP/2 vs HTTP/3HTTP 버전 비교 Cookie / Session / JWT쿠키 / 세션 / JWT REST API레스트 API

CORS교차 출처 WebSocket웹소켓

Data Fetching데이터 페칭

TanStack Query탠스택 쿼리

Caching Strategy캐싱 전략

Performance성능

Code Splitting코드 스플리팅 Image Optimization이미지 최적화 Service Worker / PWA서비스 워커 / PWA

Tree Shaking트리 셰이킹 CDN콘텐츠 전송 네트워크

Build Tools빌드 도구

ESM / CommonJS모듈 시스템 Vite비트

Webpack웹팩 Babel바벨

Testing테스팅

Jest / Vitest제스트 / 비테스트 Cypress / Playwright사이프레스 / 플레이라이트

Testing Library테스팅 라이브러리

docs 연결 (클릭 가능)

문서 없음 (로드맵 참고용)