자바스크립트 기초 30강 — 웹을 움직이는 언어

자바스크립트란

자바스크립트가 웹에서 하는 역할, 브라우저·콘솔 실행 환경, 그리고 이번 강좌 전체 학습 흐름을 소개합니다.

실행 환경과 콘솔

브라우저 개발자 도구 콘솔 활용법, 다양한 console 메서드, script 태그 심화, 외부 JS 파일 분리까지 실전 실행 환경을 완전히 익힙니다.

변수 — let·const

let·const·var의 차이와 스코프, 변수 선언·할당·재할당 규칙, 올바른 명명 규칙까지 변수의 모든 것을 깊이 있게 다룹니다.

자료형

숫자·문자열·불리언·null·undefined·Symbol까지 자바스크립트 7가지 기본 자료형과 typeof 연산자, 동적 타입 시스템, 형 변환을 완전히 이해합니다.

연산자

산술·비교·논리·할당 연산자 전체와 == vs === 차이, 단축 평가, 옵셔널 체이닝까지 자바스크립트 연산자를 완전히 정복합니다.

문자열 다루기

템플릿 리터럴 심화, length·indexOf·slice·split·replace·trim 등 핵심 문자열 메서드를 실전 예제와 함께 완전히 익힙니다.

조건문

if/else if/else, switch, 삼항 연산자를 활용해 프로그램 흐름을 제어하는 조건문 완전 정복. Truthy/Falsy 활용 패턴과 조건 중첩 설계까지 다룹니다.

반복문

for·while·do-while 반복문의 구조와 동작 원리, break·continue 흐름 제어, for...of와 for...in까지 반복문 전체를 실전 예제로 완전히 익힙니다.

함수 기초

함수 선언식·표현식의 차이, 매개변수와 기본값, 반환값, 함수 스코프와 클로저 입문까지 함수의 모든 기초를 실전 예제로 완전히 이해합니다.

화살표 함수

화살표 함수 문법 단계별 축약, 일반 함수와의 this 바인딩 차이, 콜백 함수 개념, 고차 함수 입문까지 현대 자바스크립트 함수 스타일을 완전히 익힙니다.

배열 기초

배열 생성과 인덱스 접근, push/pop/shift/unshift/splice, 배열 복사와 spread 연산자, for/for...of로 순회하는 배열 기초 완전 정복.

배열 메서드 ①

forEach·map·filter·find·findIndex를 화살표 함수와 결합해 배열 데이터를 선언적으로 처리하는 현대적인 방법을 실전 예제로 완전히 익힙니다.

배열 메서드 ②

reduce로 집계·변환, sort로 정렬, some·every로 조건 검사, includes·indexOf로 포함 여부 확인, flat·flatMap까지 실전 배열 메서드를 완성합니다.

객체

객체 생성·속성 접근·수정, 메서드 정의, 단축 속성명, 구조 분해 할당, Object.keys/values/entries, 스프레드 연산자로 불변 업데이트까지 완전 정복합니다.

객체와 배열 응용

배열 구조 분해, 객체 배열 CRUD 패턴, 중첩 데이터 처리, 얕은·깊은 복사 차이, JSON 변환까지 실전 복합 데이터 구조를 완전히 다룹니다.

DOM이란

DOM 트리 구조와 노드 개념, querySelector/querySelectorAll로 요소 선택, HTMLElement의 주요 속성과 메서드, NodeList 순회까지 DOM 조작의 첫걸음을 완성합니다.

DOM 내용·스타일 변경

textContent·innerHTML로 내용 변경, classList.add/remove/toggle로 클래스 조작, style 속성으로 인라인 스타일 적용, setAttribute로 HTML 속성 변경까지 DOM 요소를 자유자재로 수정합니다.

이벤트 처리

addEventListener로 이벤트 등록, 이벤트 객체의 target·key·preventDefault, 클릭·마우스·키보드 이벤트 종류, removeEventListener와 메모리 관리까지 사용자 상호작용의 모든 것을 배웁니다.

폼과 입력값

다양한 입력 요소(text·checkbox·radio·select)에서 값 읽기, submit 이벤트 처리, 클라이언트 사이드 유효성 검사, 실시간 피드백 패턴까지 폼 처리를 완성합니다.

요소 생성·삭제

createElement로 요소 생성, append·prepend·insertBefore로 삽입, remove·replaceWith로 삭제·교체, insertAdjacentHTML과 DocumentFragment로 성능 최적화, 데이터 기반 동적 리스트 렌더링까지 배웁니다.

이벤트 위임과 버블링

이벤트 버블링·캡처링 원리, event.target과 event.currentTarget 구분, 이벤트 위임 패턴으로 동적 요소 처리, closest()로 위임 대상 찾기, stopPropagation 올바른 사용법까지 배웁니다.

타이머

setTimeout으로 지연 실행, setInterval로 반복 실행, clearTimeout/clearInterval로 취소, 디바운스·스로틀 패턴, requestAnimationFrame으로 부드러운 애니메이션까지 타이머를 완전히 다룹니다.