
JavaScriptJavaScript
JavaScript(JS)는 웹의 동적 기능을 담당하는 인터프리터 기반 프로그래밍 언어다. HTML(구조)·CSS(스타일)와 함께 웹 표준 3계층을 이루며, 브라우저에서 콘텐츠를 동적으로 조작하고 사용자 상호작용에 반응한다. 서버 환경에서는 Node.js를 통해 실행된다.
웹의 3계층
| 계층 | 기술 | 역할 |
|---|---|---|
| 1계층 | HTML | 콘텐츠 구조화 (뼈대) |
| 2계층 | CSS | 스타일링·레이아웃 (외관) |
| 3계층 | JavaScript | 동적 기능·상호작용 (동작) |
JavaScript는 이 3계층의 마지막 층으로, 시의적절한 콘텐츠 업데이트·대화형 지도·2D/3D 애니메이션·폼 유효성 검사 등 페이지를 살아있게 만드는 모든 기능을 담당한다.
핵심 특징
| 특징 | 설명 |
|---|---|
| 인터프리터 언어 | 별도 컴파일 없이 브라우저가 소스 코드를 직접 해석·실행 |
| JIT 컴파일 | 모던 JS 엔진(V8 등)이 런타임에 바이트코드로 변환해 성능 최적화 |
| 동적 타입 | 변수 타입을 선언하지 않아도 되고, 런타임에 타입 변경 가능 |
| 이벤트 기반 | 클릭·입력·로드 등 이벤트에 반응하는 비동기 프로그래밍 모델 |
| 함수 일급 객체 | 함수를 변수에 저장·인자로 전달·반환값으로 사용 가능 |
| 프로토타입 기반 OOP | 클래스 문법(ES6+)을 지원하되 내부적으로 프로토타입 체인으로 동작 |
| 단일 스레드 | 이벤트 루프로 비동기 처리, 병렬 실행은 Web Worker로 수행 |
실행 환경
브라우저 (클라이언트 사이드)
각 브라우저 탭은 독립적인 실행 환경을 가진다.
- •탭 A의 코드는 탭 B에 영향을 줄 수 없음
- •한 웹사이트의 코드는 다른 도메인 리소스에 접근 불가 (동일 출처 정책)
- •이는 악성 코드로부터 사용자를 보호하는 핵심 보안 메커니즘
서버 (Node.js)
Node.js를 통해 서버·CLI·스크립트 환경에서 실행된다. 브라우저 API(DOM 등)는 사용 불가하지만, 파일 시스템·네트워크·데이터베이스 접근이 가능하다.
언어 특성
인터프리터 vs JIT
JIT 덕분에 JavaScript는 "인터프리터 언어"로 분류되면서도 컴파일 언어에 근접한 성능을 낼 수 있다.
동적 타입
타입 안전성이 필요한 경우 TypeScript(JS의 정적 타입 슈퍼셋)를 사용한다.
비동기 처리
브라우저 API
JavaScript 자체 외에 브라우저가 제공하는 내장 API를 통해 강력한 기능을 구현한다.
브라우저 내장 API
| API | 설명 | 예시 |
|---|---|---|
| DOM API | HTML·CSS를 동적으로 생성·수정·삭제 | document.querySelector(), element.textContent |
| Geolocation API | 사용자 위치 정보 획득 | navigator.geolocation.getCurrentPosition() |
| Canvas API | 2D 그래픽 드로잉 | canvas.getContext("2d") |
| WebGL API | GPU 가속 3D 그래픽 | canvas.getContext("webgl") |
| HTMLMediaElement | 오디오·비디오 재생 제어 | video.play(), audio.pause() |
| WebRTC API | 실시간 P2P 영상·음성 통신 | getUserMedia() |
| Fetch API | HTTP 요청·응답 처리 | fetch(url).then(res => res.json()) |
| Web Storage | 브라우저 로컬 데이터 저장 | localStorage, sessionStorage |
서드파티 API
브라우저에 내장되지 않은 외부 서비스 API. CDN이나 npm 패키지로 불러와 사용한다.
- •Google Maps API — 지도 삽입·경로 탐색
- •Twitter/X API — 최신 트윗 표시
- •Stripe API — 결제 처리
- •ethers.js / viem — 이더리움 블록체인 상호작용 (아래 참조)
HTML에 JavaScript 삽입하기
외부 파일 방식 (권장)
defer vs async 비교
| 속성 | 파싱 차단 | 실행 시점 | 순서 보장 | 적합한 경우 |
|---|---|---|---|---|
| 없음 | O | 즉시 | O | <body> 최하단 배치 시 |
async | X | 로드 완료 즉시 | X | 독립적 스크립트 (광고·분석) |
defer | X | HTML 파싱 완료 후 | O | DOM 의존 스크립트 (대부분) |
권장 패턴: 외부 파일 +
defer속성. DOM이 완전히 로드된 후 실행되므로DOMContentLoaded이벤트 래핑이 불필요하다.
블록체인에서의 JavaScript 활용
1. dApp 프론트엔드
사용자가 메타마스크 등 지갑을 통해 블록체인과 상호작용하는 웹 인터페이스를 구축.
2. 주요 블록체인 라이브러리
| 라이브러리 | 설명 |
|---|---|
| ethers.js | 이더리움 상호작용 표준 라이브러리 |
| web3.js | 이더리움 초기 표준 라이브러리 |
| viem | 타입 안전한 최신 이더리움 라이브러리 |
| @solana/web3.js | Solana 상호작용 라이브러리 |
3. 스마트 컨트랙트 개발 도구
Hardhat, Truffle 등 개발 프레임워크가 JavaScript(TypeScript) 기반으로 작동.
4. Solidity와의 관계
Solidity는 JavaScript와 유사한 문법을 가지며, JS 개발자가 비교적 쉽게 진입 가능.
Node.js와 TypeScript
Node.js: 브라우저 외부에서 V8 엔진으로 JS를 실행하는 런타임. 블록체인 백엔드 서버·스크립트·CLI 도구 개발에 사용된다.
TypeScript: Microsoft가 개발한 JS의 정적 타입 슈퍼셋. JS로 컴파일되며 대규모 프로젝트의 타입 안전성을 보장한다. 블록체인 백엔드·스크립트는 TypeScript로 작성하는 경우가 많다.
관련 개념
- •스마트 컨트랙트 — JavaScript로 상호작용하는 대상
- •TypeScript — JavaScript의 정적 타입 슈퍼셋
- •Solidity — JavaScript 문법의 영향을 받은 컨트랙트 언어
- •Ethereum — ethers.js, web3.js의 주 대상 체인
참고문헌
- 1.MDN Web Docs. (2024). JavaScript가 뭔가요?. Mozilla.
- 2.ethers.js 공식 문서
- 3.MDN JavaScript 가이드
- 4.Flanagan, D. (2020). JavaScript: The Definitive Guide (7th ed.). O'Reilly Media.

