강좌
12개의 강좌 · 목차와 위키는 로그인 없이 열람할 수 있습니다
Vue
Vue는 오픈소스 프론트엔드 프레임워크(Framework)로, 화면을 컴포넌트(Component) 단위로 나누고 반응성(Reactivity) 시스템으로 상태와 화면을 자동으로 동기화합니다. 필요한 만큼만 도입할 수 있는 점진적 프레임워크(Progressive Framework)라는 점이 특징입니다. 이 강좌는 Vue 3.5 버전을 기준으로, `create-vue`로 프로젝트를 만들고 템플릿 문법과 디렉티브(Directive)로 화면을 그리고, 컴포넌트와 폼으로 상호 작용을 완성한 뒤, 슬롯(Slot)·텔레포트(Teleport) 같은
UX 디자인
이 강좌는 roadmap.sh의 UX 디자인 로드맵을 따라 사용자 경험(User Experience; UX) 설계의 전체 과정을 다룹니다. 인간의 의사결정 방식과 행동 변화 전략에서 출발해 제품과 사용자 이해, 비즈니스 모델, 개념 설계, 프로토타이핑, UX 모범 사례, 영향 측정에 이르기까지, 화면을 그리기 전에 정해야 할 판단 기준과 각 단계에서 만들어야 할 산출물을 익히고 실습으로 확인합니다. 개발자와 디자이너가 협업할 때 서로의 작업을 이해하는 데 필요한 수준까지, UX 용어와 프레임워크를 실제 작업에 적용할 수 있게 설명합
TypeScript
TypeScript는 JavaScript의 상위 집합(Superset)으로, 값의 타입을 코드에 명시하고 컴파일 시점에 검사하는 정적 타입(Static Type) 언어입니다. 이 강좌는 TypeScript가 왜 필요한지에서 시작해, 기본 타입과 타입 추론(Type Inference), 유니언 타입(Union Type)과 타입 좁히기(Narrowing), 함수·인터페이스·클래스의 타입 표기, 제네릭(Generic)과 유틸리티 타입(Utility Type), 매핑된 타입(Mapped Type) 같은 고급 타입 기법, 모듈과 개발 생태계
React
React는 사용자 인터페이스(User Interface; UI)를 컴포넌트(Component) 단위로 구성하는 JavaScript 라이브러리(Library)입니다. 이 강좌는 roadmap.sh의 React 로드맵을 따라, Vite로 프로젝트를 만들고 컴포넌트와 JSX로 화면을 구성하고, 훅(Hooks)으로 상태와 부수 효과를 관리하고, 라우터와 상태 관리 라이브러리로 애플리케이션 구조를 확장하는 과정을 순서대로 익힙니다. 마지막 레슨에서는 테스트 도구와 Next.js·React Native 같은 확장 프레임워크까지 살펴봅니다.
Next.js
Next.js는 React 위에 라우팅(Routing), 렌더링(Rendering), 데이터 불러오기(Data Fetching) 같은 결정을 프레임워크 차원에서 제공하는 풀스택 프레임워크(Framework)입니다. 이 강좌는 roadmap.sh의 Next.js 로드맵을 따라, create-next-app으로 프로젝트를 만들고 파일 기반 라우팅과 레이아웃으로 화면 구조를 잡고, 동적 라우트와 오류·로딩 상태를 다루고, 서버·클라이언트 데이터 불러오기와 서버 액션(Server Action)으로 데이터 흐름을 완성하고, 스타일링·메타데이
JavaScript
JavaScript는 웹 브라우저에서 동작하는 스크립트 언어(Scripting Language)입니다. HTML이 문서의 구조를, CSS가 시각적 표현을 담당한다면, JavaScript는 페이지에 동작을 추가합니다. 이 강좌는 roadmap.sh의 JavaScript 로드맵을 따라 언어의 기초부터 시작해 변수와 데이터 타입, 데이터 구조, 제어 흐름, 함수, 비동기 프로그래밍, 클래스와 모듈까지 순서대로 익힙니다. 각 레슨의 실습은 Node.js로 실행해 결과를 직접 확인합니다. 다루지 않는 것은 다음과 같습니다. 브라우저의 문서
HTML
HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 마크업 언어(Markup Language)입니다. 이 강좌는 HTML을 처음 배우는 독자가 문서의 뼈대를 스스로 만들 수 있게 되는 것을 목표로 합니다. 마크업 언어의 개념과 문서의 기본 구조에서 시작해, 텍스트·링크·미디어·레이아웃·표·목록·폼을 다루는 태그(Tag)를 순서대로 익히고, 마지막으로 스타일·스크립트 연동, 접근성(Accessibility), SEO 기초까지 살펴봅니다. 로드맵 분석 자료(`docs/SW-Developer-Roadm
프론트엔드 입문 로드맵
이 강좌는 roadmap.sh의 프론트엔드 초보자용 로드맵을 따라 프론트엔드 개발의 핵심 흐름을 한 바퀴 도는 입문 과정입니다. HTML로 문서의 뼈대를 만들고, CSS로 스타일을 입히고, JavaScript로 동작을 붙인 뒤, Git·GitHub으로 변경 이력을 관리하고, npm과 Vite로 React 앱을 만들고, Tailwind로 스타일링하고 Vitest로 테스트하는 순서로 진행합니다. 각 단계를 작은 실습으로 직접 확인하며, 과정을 마치면 주니어 프론트엔드 개발자로 성장하기 위한 기초 지형이 그려집니다. 다루지 않는 것은
프론트엔드 개발자 로드맵
이 강좌는 roadmap.sh의 상세 프론트엔드 로드맵을 따라 프론트엔드 개발의 전체 지형을 조망합니다. 인터넷과 웹의 동작 원리에서 출발해 HTML·CSS·JavaScript의 세 축, 버전 관리와 패키지 매니저, 프레임워크와 빌드 도구, 그리고 테스트·웹 보안·성능·서버 사이드 렌더링·프로그레시브 웹 앱 같은 심화 영역까지, 각 단계에서 꼭 알아야 할 개념을 익히고 작은 실습으로 확인합니다. 전용 강좌가 없는 기초 주제(인터넷, HTTP, 도메인 네임, 브라우저 동작 원리)는 이 강좌가 직접 다룹니다. 개별 기술 스택의 심화
디자인 시스템
디자인 시스템(Design System)은 제품 화면을 구성하는 색상·글꼴·간격 같은 디자인 요소와 버튼·카드 같은 컴포넌트, 그리고 이를 사용하는 규칙을 한데 묶은 체계입니다. 이 강좌는 디자인 시스템이 왜 필요한지에서 시작해, 기존 화면을 분석해 요소를 찾아내고, 디자인 토큰(Design Token)으로 값 체계를 정의하고, 토큰을 사용하는 핵심 컴포넌트를 만들고, 문서화와 거버넌스(Governance)로 운영하는 전 과정을 다룹니다. 실습은 HTML과 CSS만으로 진행하며, 브라우저에서 실제로 동작하는 토큰과 컴포넌트를 직접
CSS
CSS(Cascading Style Sheets)는 HTML 문서의 시각적 표현을 정의하는 스타일시트 언어입니다. 이 강좌는 HTML로 만든 문서 구조에 스타일을 입히는 전 과정을 다룹니다. 선택자로 요소를 지정하는 문법에서 시작해, 폰트·색상·배경 같은 디자인 요소, 박스 모델과 단위, Flexbox와 Grid를 활용한 레이아웃, 미디어 쿼리 기반 반응형 디자인과 트랜지션·애니메이션까지 순서대로 익힙니다. 다루지 않는 것은 다음과 같습니다. 페이지의 동작을 제어하는 DOM 조작과 이벤트 처리는 [JavaScript 강좌](../
Angular
Angular는 구글(Google)이 개발한 오픈소스 프론트엔드 프레임워크(Framework)입니다. TypeScript를 기반으로 컴포넌트(Component), 의존성 주입(Dependency Injection), 라우팅(Routing), 폼(Form), HTTP 클라이언트까지 애플리케이션 개발에 필요한 도구를 한 묶음으로 제공하는 완결형 프레임워크입니다. 이 강좌는 Angular 22 버전을 기준으로, CLI로 프로젝트를 만들고 컴포넌트와 템플릿(Template)으로 화면을 구성하고, 서비스와 HTTP 통신으로 데이터를 다루고,