Archive

Front-end Programming

3 min read

1. 과목 개요

  • 프론트엔드 개발의 기본(HTML/CSS/JavaScript)부터 React 기반 SPA까지 단계적으로 학습한다.
  • 브라우저 동작 원리, DOM 이벤트 처리, 비동기 통신, 컴포넌트 기반 UI 설계를 실습 중심으로 익힌다.

2. 학습 목표

  • 웹 페이지의 구조/스타일/동작을 분리하여 설계할 수 있다.
  • DOM 조작과 이벤트 처리로 사용자 상호작용을 구현할 수 있다.
  • AJAX/Node.js 기초를 통해 클라이언트-서버 흐름을 이해할 수 있다.
  • React, Hook, Router, TypeScript 기초를 사용해 단일 페이지 애플리케이션을 구성할 수 있다.

3. 주차별 로드맵

주차주제핵심 내용노트
1웹 기술 기초인터넷/WWW, 클라이언트-서버, URL/HTTP01 웹 기술 기초
2HTML5문서 구조, 주요 태그, 시맨틱 요소02 HTML5
3CSS3선택자, 박스 모델, 레이아웃/스타일링03 CSS3 Style Sheet
4JavaScript 기초문법, 함수, 동적 타이핑, 실행 위치04 JavaScript 기초
5JavaScript 객체와 배열객체 모델, 배열/메서드, JSON05 JavaScript 객체와 배열
6DOM요소 탐색/조작, 폼 값 읽기, 노드 구조06 DOM
7Event/BOM이벤트 모델, 전파, 유효성 검사, 정규식07 Event BOM 통신
8jQuery/AJAX선택자 단순화, 이벤트 바인딩, 비동기 통신08 jQuery & AJAX
9Node.js런타임 구조, npm, 모듈, 간단 서버09 Node.js
10React 기초JSX, 컴포넌트, 가상 DOM, 프로젝트 구성10 React 기초
11React Hook/EventuseState/useEffect/useRef, 상태 흐름11 React Hook & Event
12Router/TypeScript라우팅, SPA 구조, 타입 기반 개발 입문12 React Router & TypeScript

4. 실습 체크리스트

  • HTML/CSS만으로 정적 페이지 1개 구현
  • JavaScript로 DOM 조작/이벤트 처리 3가지 이상 구현
  • AJAX 기반 데이터 조회/렌더링 1회 이상 구현
  • Node.js로 로컬 API 서버 1개 실행
  • React + Router 기반 미니 SPA 제작

12건의 항목