강의

멘토링

커뮤니티

로드맵 썸네일

코딩은 처음이지 - 프론트앤드 개발자 도전하기

작성자 프로필 이미지

이지웹

HTML/CSS
JavaScript
TypeScript

초급 대상

0명 참여중

조회수

14

로드맵 코스

아래 로드맵은 코딩이 처음이신 분들도 프론트엔드 개발자에 도전하실 수 있도록 단계별로 구성된 학습 가이드입니다. 퍼블리싱 경험이 없으시거나, HTML·CSS 이후 어떤 기술을 학습해야 할지 고민하시는 분들을 기준으로 설계되었습니다.

첫 단계인 자바스크립트 기초 과정에서는 프론트엔드 개발의 핵심 언어인 JavaScript의 기본 문법과 동작 원리를 차근차근 학습하실 수 있습니다. 변수, 조건문, 반복문, 함수, 이벤트 처리 등을 통해 웹 페이지에 동적인 기능을 구현하는 방법을 이해하시게 되며, 이후 모든 프론트엔드 기술의 기초가 되는 사고방식을 익히실 수 있습니다.

다음으로 타입스크립트 입문 과정에서는 JavaScript에 타입 개념을 더해 보다 안정적이고 오류가 적은 코드를 작성하는 방법을 배우시게 됩니다. 타입스크립트를 통해 코드의 가독성과 유지보수성을 높이는 방법을 자연스럽게 이해하실 수 있으며, 실제 실무에서 요구되는 개발 방식에도 익숙해지실 수 있습니다.

이후 React + TypeScript TodoList 프로젝트 과정에서는 실제 애플리케이션을 직접 만들어 보며 컴포넌트 구조, 상태 관리, 타입 설계 등 실무에 가까운 개발 경험을 쌓으실 수 있습니다. 단순한 문법 학습을 넘어, 왜 이러한 구조로 개발하는지에 대한 이해를 목표로 합니다.

마지막으로 퍼블리셔를 위한 React 실전 가이드 과정에서는 기존의 마크업과 CSS 중심 사고방식을 React 컴포넌트 기반 개발로 확장하여, 프론트엔드 개발자로 한 단계 더 성장하실 수 있도록 돕습니다.
본 로드맵은 입문부터 실전 프로젝트까지 이어지는 현실적인 프론트엔드 개발 학습 경로를 제시해 드립니다.

로드맵 상세보기

4개 코스

로드맵에 포함된 강의 썸네일
인프런
웹프로그래밍의 꽃! 자바스크립트 기초
javascript를 통해 HTML의 요소를 선택하고 다양한 이벤트에 따라 요소의 스타일을 변경하거나 애니메이션 효과를 구현합니다. javascript의 기분문법에서 스타일 변경, 이벤트 설정 및 웹페이지 구현시 자주 사용되는 효과를 구현합니다.

14,300

로드맵에 포함된 강의 썸네일
타입 안정성과 코드 가독성을 높이는 TypeScript의 핵심 문법을 실습 위주로 익히는 입문 과정입니다. 프로젝트 환경 설정부터 인터페이스, 제네릭, 유틸리티 타입까지 실제 코드 사례로 학습합니다.

27,500

로드맵에 포함된 강의 썸네일
React + TypeScript를 활용하여 실무 감각으로 “할 일 관리 앱(ToDo List)”을 직접 만드는 프로젝트 중심 과정입니다.  단순히 문법을 배우는 데 그치지 않고, 컴포넌트 구조 설계 → 상태 관리 → 타입 적용 → 기능 구현 → 로컬 스토리지 연동 → 배포까지 실제 서비스 형태로 완성하면서 타입스크립트의 활용 감각을 익힐 수 있습니다. 

33,000

로드맵에 포함된 강의 썸네일
퍼블리셔를 위한 React 첫걸음!
기초 문법부터 반응형 쇼핑몰 웹사이트 제작·배포까지 한 번에 학습합니다.
단편적인 리엑트 예제의 종합이 아니라 실제 웹페이지 제작에 필요한 핵심 문법을 학습하고 적용합니다.

77,000

로드맵 코스 4