mason
mason-log.
mason

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?도메인이란Browsers and how they work?브라우저는 어떻게 동작하나

Version Control버전 관리

Package Managers패키지 매니저

AI in Development개발에서의 AI

AI Assisted CodingAI 보조 코딩
Prompting Techniques프롬프팅 기법
Gemini제미니OpenAI오픈에이아이Anthropic앤트로픽
Agents에이전트
MCP모델 컨텍스트 프로토콜Skills스킬
Implementing AIAI 적용
Refactoring리팩터링Applications애플리케이션

CSS FrameworksCSS 프레임워크

Tailwind테일윈드

Rendering Strategies렌더링 전략

CSR / SSR / SSG / ISR렌더링 타입TanStack Start탠스택 스타트
Astro아스트로

TypeScript타입스크립트

Linters & Formatters린터와 포매터

ESLint이에스린트Biome바이옴
Prettier프리티어

Web Security웹 보안

HTTPSHTTPSOWASP RisksOWASP 위험
CSP콘텐츠 보안 정책

Auth Strategies인증 전략

Auth Basics인증 기초
OAuth / OIDCOAuth / OIDC

Data Fetching데이터 페칭

TanStack Query탠스택 쿼리
GraphQL그래프큐엘
Apollo아폴로Relay Modern릴레이

Web APIs웹 API

Web Components웹 컴포넌트Shadow DOM섀도 DOM
Custom Elements커스텀 엘리먼트

Build Tools빌드 도구

ESM / CommonJS모듈 시스템Vite비트esbuild이에스빌드SWC에스더블유씨Bun
Webpack웹팩Babel바벨Rollup롤업Rolldown롤다운

Design Systems디자인 시스템

Design Tokens디자인 토큰
Component Libraries컴포넌트 라이브러리

Deployment배포

Vercel버셀Cloudflare클라우드플레어
Netlify넷리파이GitHub Pages깃허브 페이지
docs 연결 (클릭 가능)
문서 없음 (로드맵 참고용)