Frontend Developer - Roadmaps

프론트엔드 개발자를 위한 프레임워크, 시각화, 성능 최적화, 개발 도구 등의 학습 로드맵입니다.
각 로드맵을 클릭하여 상세 내용과 학습 리소스를 확인하세요.
로드맵은 roadmap.sh에서 AI를 통해 생성했기 때문에 모든것을 담지는 못합니다.
개념을 이해하는 목적으로 사용해 주시고 깊은 학습은 개인의 몫입니다.

Basic Technologies

Basic Technologies

JavaScript

자바스크립트의 기초부터 고급 개념까지, 실전에서 필요한 모든 내용을 다룹니다.

로드맵 보기
Basic Technologies

TypeScript

TypeScript의 기본 타입 시스템부터 고급 타입 기능, 프레임워크 통합까지 모든 내용을 다룹니다.

로드맵 보기

Frameworks

Frameworks

React & Next.js

현대적인 프론트엔드 개발에 필요한 전반적인 기술 스택과 베스트 프랙티스를 다룹니다.

로드맵 보기
Frameworks

Vue & Nuxt.js

Vue.js의 기초부터 고급 기능, Nuxt.js를 활용한 SSR 및 정적 사이트 생성까지 모든 내용을 다룹니다.

로드맵 보기

Visualization & Interaction

Visualization & Interaction

GSAP, Lenis, Locomotive

웹 애니메이션과 인터랙티브한 사용자 경험을 구현하기 위한 기술들을 다룹니다.

로드맵 보기
Visualization & Interaction

Canvas

HTML5 Canvas를 활용한 2D/3D 그래픽, 게임, 데이터 시각화 등 다양한 기술을 다룹니다.

로드맵 보기
Visualization & Interaction

CSS, GSAP, Three.js

고급 CSS 기법과 GSAP 애니메이션, Three.js를 활용한 3D 웹 경험 구현 방법을 다룹니다.

로드맵 보기
Visualization & Interaction

SVG Animation

SVG를 활용한 벡터 그래픽 애니메이션 구현 방법과 다양한 기법을 다룹니다.

로드맵 보기

Performance & SEO

Performance & SEO

Web Performance

웹 애플리케이션의 로딩 속도와 실행 성능을 향상시키기 위한 다양한 기법과 도구를 다룹니다.

로드맵 보기
Performance & SEO

SEO

웹사이트의 검색 엔진 노출을 향상시키고 효과적인 디지털 마케팅 전략을 구현하는 방법을 다룹니다.

로드맵 보기

Development Tools

Development Tools

Chrome DevTools

Chrome DevTools를 활용한 웹 애플리케이션 디버깅, 성능 분석, 최적화 방법을 다룹니다.

로드맵 보기
Development Tools

Chrome Lighthouse

Lighthouse를 사용하여 웹사이트의 성능, 접근성, SEO, 모범 사례를 분석하고 개선하는 방법을 다룹니다.

로드맵 보기

Web Standards

Web Standards

Web Accessibility

모든 사용자가 웹 콘텐츠에 접근할 수 있도록 웹 접근성 표준과 구현 방법을 다룹니다.

로드맵 보기

Progressive Web Apps

Progressive Web Apps

PWA

프로그레시브 웹 앱(PWA)을 개발하여 네이티브 앱과 같은 사용자 경험을 제공하는 방법을 다룹니다.

로드맵 보기