Modern JavaScript 핵심 정리

ES6+ 문법부터 DOM, 이벤트, 비동기 처리까지

1. JavaScript의 역할과 표준화 배경

JavaScript는 초기에는 단순한 브라우저 스크립트 언어로 출발했지만, 현재는 웹 프론트엔드뿐 아니라 서버(Node.js), 모바일, 데스크톱 애플리케이션까지 확장된 범용 프로그래밍 언어로 자리 잡았습니다.

JavaScript 언어 사양은 "ECMAScript(ES)"라는 표준으로 정의되며, 우리가 흔히 말하는 ES6는 ECMAScript 2015를 의미합니다. ES6 이후부터는 매년 새로운 표준이 추가되며, 언어의 안정성과 생산성이 크게 향상되었습니다.

JavaScript: 구현체(브라우저, Node.js)
ECMAScript: 언어 표준 명세

2. ES6+ 핵심 문법과 변화의 의미

2.1 let, const와 블록 스코프

기존 var는 함수 스코프를 가지며 호이스팅으로 인해 예측하기 어려운 동작을 유발했습니다.
ES6에서는 이를 개선하기 위해 블록 스코프를 가지는 let, const가 도입되었습니다.

let: 재할당 가능
const: 재할당 불가 (객체의 내부 변경은 가능)

이는 코드 안정성과 가독성을 크게 향상시킵니다.

2.2 화살표 함수(Arrow Function)

화살표 함수는 간결한 문법을 제공할 뿐 아니라 자체적인 this를 가지지 않는다는 중요한 특징이 있습니다.

콜백 함수에서 this 혼란 감소
함수 표현식 위주 설계에 적합

이는 이벤트 처리, 비동기 코드에서 특히 효과적입니다.

2.3 구조 분해 할당과 Spread 문법

구조 분해 할당: 객체/배열에서 값 추출
Spread / Rest: 불변성 유지 및 가변 인자 처리

이 문법들은 상태 변경을 명확히 하고 함수형 프로그래밍 스타일을 가능하게 합니다.

2.4 모듈 시스템 (import / export)

ES6부터 JavaScript는 표준 모듈 시스템을 지원합니다.

전역 오염 방지
의존성 명확화
빌드 도구 및 트리 쉐이킹 최적화 가능

3. DOM(Document Object Model) 조작의 이해

DOM은 HTML 문서를 트리 구조의 객체로 표현한 모델입니다.
브라우저는 HTML을 파싱하여 DOM을 생성하고, JavaScript는 이를 통해 화면을 제어합니다.

3.1 주요 DOM API

querySelector, querySelectorAll
classList
append, remove
setAttribute

DOM 조작은 강력하지만, 빈번한 접근은 성능 저하를 유발할 수 있습니다.
이러한 한계를 해결하기 위해 React, Vue 같은 프레임워크는 DOM을 추상화합니다.

4. 이벤트 처리와 이벤트 모델

4.1 이벤트 흐름(Event Flow)

브라우저의 이벤트는 다음 순서로 처리됩니다.

Capturing 단계
Target 단계
Bubbling 단계

이를 이해하지 못하면 이벤트 중복 실행, 의도치 않은 동작이 발생할 수 있습니다.

4.2 이벤트 위임(Event Delegation)

여러 자식 요소에 개별 이벤트를 등록하는 대신,
부모 요소에서 이벤트를 처리하는 방식입니다.

메모리 사용 감소
동적 요소 처리에 유리

실무에서 매우 중요한 패턴입니다.

5. JavaScript 비동기 처리 모델

JavaScript는 Single Thread 언어이지만 비동기 처리를 지원합니다.
이는 Event Loop 구조 덕분입니다.

5.1 핵심 구성 요소

Call Stack
Web APIs
Task Queue
Microtask Queue
Event Loop

비동기 작업은 즉시 실행되지 않고, 스택이 비워진 후 큐에서 처리됩니다.

5.2 비동기 방식의 진화

Callback
- 가독성 저하, 콜백 지옥 문제
Promise
- 상태 기반 비동기 제어
async / await
- 동기 코드처럼 작성 가능

async/await는 Promise의 문법적 확장일 뿐, 새로운 비동기 모델은 아닙니다.

6. JavaScript를 잘 사용하기 위한 관점

동기/비동기 흐름을 명확히 구분할 것
전역 스코프 사용 최소화
DOM 접근은 최소화하고 상태 중심 설계
프레임워크 사용 시에도 JavaScript 실행 모델은 동일함

JavaScript를 “프레임워크 문법”이 아니라
“언어와 실행 환경” 관점에서 이해하는 것이 중요합니다.

7. 마무리

Modern JavaScript는 단순한 스크립트 언어가 아니라,
명확한 표준과 실행 모델을 가진 완성도 높은 프로그래밍 언어입니다.

ES6+ 문법, DOM, 이벤트, 비동기 처리를 정확히 이해하면
어떤 프레임워크를 사용하더라도 코드의 품질과 디버깅 능력은 확연히 달라집니다.

SuldenLion의 블로그