JavaScript - IT > 프로그래밍 언어 | AI Insight Note

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 컴파일(모던):   소스 코드 → 런타임에 바이트코드 변환 → 실행
                    (V8, SpiderMonkey, JavaScriptCore 등)

JIT 덕분에 JavaScript는 "인터프리터 언어"로 분류되면서도 컴파일 언어에 근접한 성능을 낼 수 있다.

동적 타입

javascript

let x = 42;       // Number
x = "hello";      // String — 런타임에 타입 변경 가능
x = true;         // Boolean

// typeof로 런타임 타입 확인
console.log(typeof x); // "boolean"

타입 안전성이 필요한 경우 TypeScript(JS의 정적 타입 슈퍼셋)를 사용한다.

비동기 처리

javascript

// 콜백 → Promise → async/await 순으로 발전
async function fetchData(url) {
  try {
    const res = await fetch(url);        // 네트워크 요청 완료까지 대기
    const data = await res.json();
    return data;
  } catch (err) {
    console.error(err);
  }
}

브라우저 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 삽입하기

외부 파일 방식 (권장)

html

<!-- defer: HTML 파싱 완료 후 실행, 순서 보장 -->
<script src="script.js" defer></script>

<!-- async: 다운로드 완료 즉시 실행, 순서 미보장 -->
<script src="analytics.js" async></script>

defer vs async 비교

HTML 파싱:  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
기본:       ━━[██ JS로드·실행 ██]━━━━━━━━  ← 파싱 중단
async:      ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  파싱 계속
            [JS로드·━실행━]                  로드 완료 즉시 실행
defer:      ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  파싱 계속
                                     [실행]  파싱 완료 후 순서대로 실행

속성	파싱 차단	실행 시점	순서 보장	적합한 경우
없음	O	즉시	O	`<body>` 최하단 배치 시
`async`	X	로드 완료 즉시	X	독립적 스크립트 (광고·분석)
`defer`	X	HTML 파싱 완료 후	O	DOM 의존 스크립트 (대부분)

권장 패턴: 외부 파일 + defer 속성. DOM이 완전히 로드된 후 실행되므로 DOMContentLoaded 이벤트 래핑이 불필요하다.

블록체인에서의 JavaScript 활용

1. dApp 프론트엔드

사용자가 메타마스크 등 지갑을 통해 블록체인과 상호작용하는 웹 인터페이스를 구축.

javascript

import { ethers } from 'ethers';

// 지갑 연결 및 컨트랙트 호출
const provider = new ethers.BrowserProvider(window.ethereum);
const signer = await provider.getSigner();
const contract = new ethers.Contract(address, abi, signer);
await contract.transfer(recipient, amount);

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로 작성하는 경우가 많다.

참고문헌

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.

JavaScriptJavaScript