본문으로 건너뛰기
Advertisement

1.1 JavaScript 개요 — 역사와 표준화

JavaScript란 무엇인가?​

JavaScript는 웹 브라우저에서 실행되는 프로그래밍 언어로 시작해, 현재는 서버, 모바일, 데스크탑, IoT까지 활용 범위가 확장된 세계에서 가장 많이 사용되는 프로그래밍 언어입니다.

Stack Overflow 개발자 설문(2024 기준)에서 12년 연속 가장 많이 사용되는 언어 1위를 기록하고 있습니다.

탄생: 10일 만에 만들어진 언어​

1995년, 브렌던 아이크​

1995년 넷스케이프(Netscape)의 개발자 **브렌던 아이크(Brendan Eich)**는 단 10일 만에 JavaScript의 초기 버전을 만들었습니다.

당시 배경:

  • 웹은 정적인 HTML 문서만 존재
  • 사용자 입력을 서버에 보내기 전 브라우저에서 검증할 방법이 필요
  • 넷스케이프는 웹 페이지에 생동감을 주는 스크립트 언어를 원했음

초기 이름은 Mocha → LiveScript → JavaScript 순으로 변경되었습니다. Java가 당시 유행하던 언어였기 때문에 마케팅 목적으로 "JavaScript"라는 이름을 채택했지만, Java와 JavaScript는 전혀 다른 언어입니다.

// 브렌던 아이크가 1995년 만든 첫 JavaScript의 정신은
// 여전히 현대 JavaScript에 살아있습니다
console.log("Hello, World!"); // 아직도 같은 방식으로 동작!

브라우저 전쟁과 파편화​

넷스케이프 vs 마이크로소프트​

JavaScript가 인기를 얻자 마이크로소프트는 Internet Explorer에 JScript라는 JavaScript 복제 버전을 탑재했습니다 (1996년). 이름을 다르게 한 이유는 넷스케이프의 상표권 때문이었습니다.

브라우저 전쟁의 문제점:

  • 같은 코드가 넷스케이프에서는 동작하지만 IE에서는 동작하지 않는 상황 발생
  • 개발자들은 브라우저별로 다른 코드를 작성해야 했음
  • "이 사이트는 넷스케이프에서 최적화되었습니다" 같은 경고 문구가 등장
// 브라우저 전쟁 시절의 코드 (이런 코드를 쓰지 마세요!)
if (document.getElementById) {
  // 모던 브라우저
  var el = document.getElementById('myId');
} else if (document.all) {
  // IE 4 이하
  var el = document.all['myId'];
} else if (document.layers) {
  // 넷스케이프 4
  var el = document.layers['myId'];
}

ECMAScript 표준화​

ECMA 인터내셔널과 TC39​

1996년, 넷스케이프는 JavaScript를 ECMA 인터내셔널이라는 표준화 기구에 제출했습니다. 이후 TC39(Technical Committee 39) 위원회가 언어 명세를 관리하게 됩니다.

공식 명칭은 ECMAScript이며, JavaScript는 ECMAScript의 가장 유명한 구현체입니다.

ECMAScript 버전 역사​

버전연도주요 변경사항
ES11997초기 표준
ES21998소규모 수정
ES31999정규표현식, try/catch
ES4중단너무 야심찬 계획으로 폐기
ES52009strict mode, JSON, Array 메서드
ES6 (ES2015)2015let/const, 화살표 함수, 클래스, 모듈, Promise
ES20162016** 지수 연산자, Array.includes
ES20172017async/await, Object.entries/values
ES20182018객체 스프레드, Promise.finally
ES20192019Array.flat, Object.fromEntries
ES20202020Optional Chaining ?., Nullish ??, BigInt
ES20212021String.replaceAll, Promise.any, WeakRef
ES20222022클래스 private #, Array.at, Error.cause
ES20232023Array.findLast, Array.toSorted/toReversed
ES20242024Promise.withResolvers, ArrayBuffer.resize

ES6(ES2015)가 중요한 이유​

ES6는 JavaScript 역사상 가장 큰 업데이트였습니다. 현대 JavaScript 코드의 대부분이 ES6+ 문법을 사용합니다.

// ES5 방식 (구식)
var add = function(a, b) {
  return a + b;
};
var greet = function(name) {
  return 'Hello, ' + name + '!';
};

// ES6+ 방식 (현대적)
const add = (a, b) => a + b;
const greet = (name) => `Hello, ${name}!`;

console.log(add(2, 3));      // 5
console.log(greet('World')); // Hello, World!

JavaScript의 현재 활용 범위​

JavaScript는 더 이상 브라우저에만 국한되지 않습니다.

1. 프론트엔드 (브라우저)​

// DOM 조작
document.querySelector('#btn').addEventListener('click', () => {
  document.querySelector('#result').textContent = '클릭됨!';
});

// Fetch API로 데이터 요청
const response = await fetch('https://api.example.com/data');
const data = await response.json();

2. 백엔드 (Node.js)​

// Express.js 서버
import express from 'express';
const app = express();

app.get('/api/hello', (req, res) => {
  res.json({ message: 'Hello from Node.js!' });
});

app.listen(3000);

3. 모바일 앱 (React Native)​

// React Native 컴포넌트
import { View, Text, TouchableOpacity } from 'react-native';

export default function App() {
  return (
    <View>
      <Text>Hello Mobile!</Text>
    </View>
  );
}

4. 데스크탑 앱 (Electron)​

// Electron 메인 프로세스
const { app, BrowserWindow } = require('electron');

app.whenReady().then(() => {
  const win = new BrowserWindow({ width: 800, height: 600 });
  win.loadFile('index.html');
});

5. 서버리스 함수 (Cloudflare Workers, Vercel Functions)​

// Cloudflare Worker
export default {
  async fetch(request) {
    return new Response('Hello from the Edge!', {
      headers: { 'Content-Type': 'text/plain' }
    });
  }
};

JavaScript vs Java: 이름만 비슷한 전혀 다른 언어​

비교JavaScriptJava
창시자브렌던 아이크 (넷스케이프)제임스 고슬링 (Sun Microsystems)
탄생1995년1995년
타입동적 타입정적 타입
실행 환경브라우저, Node.jsJVM
패러다임멀티 패러다임 (함수형, OOP)주로 OOP
컴파일인터프리터 (JIT)컴파일 → JVM 바이트코드

이름의 유사성은 순전히 마케팅 목적이었습니다.

TypeScript: JavaScript의 진화​

2012년 마이크로소프트는 TypeScript를 발표했습니다. TypeScript는 JavaScript의 상위 집합(superset)으로, 정적 타입을 추가한 언어입니다.

// TypeScript - 타입을 명시
function add(a: number, b: number): number {
  return a + b;
}

// 타입 오류를 컴파일 시점에 잡아줌
add("2", 3); // 오류: string은 number에 할당 불가

TypeScript는 JavaScript로 컴파일되어 실행됩니다. 현재 대규모 프로젝트에서는 TypeScript 사용이 표준이 되고 있습니다.

고수 팁​

TC39 제안 프로세스 이해하기​

새로운 JavaScript 기능이 언어에 추가되는 과정:

  • Stage 0 (Strawperson): 아이디어 제안
  • Stage 1 (Proposal): 공식 제안, 동기와 API 초안
  • Stage 2 (Draft): 명세 초안 작성
  • Stage 3 (Candidate): 명세 완성, 브라우저 구현 시작
  • Stage 4 (Finished): 다음 ECMAScript에 포함

Stage 3 이상의 제안은 바벨(Babel) 등으로 미리 사용 가능하며, 대부분 다음 표준에 포함됩니다.

// Stage 4가 된 기능들 (이미 사용 가능)
// Promise.withResolvers (ES2024)
const { promise, resolve, reject } = Promise.withResolvers();

setTimeout(() => resolve('완료!'), 1000);
console.log(await promise); // '완료!'

매년 새 버전이 나오는 이유​

ES6 이후 TC39는 매년 6월에 새 버전을 릴리즈하는 방식으로 전환했습니다. 이렇게 하면:

  • 큰 변화보다 작은 점진적 개선이 가능
  • 개발자들이 빠르게 새 기능을 사용 가능
  • ES4처럼 너무 많은 변화로 실패하는 것을 방지

현재 버전은 ECMAScript 2024(ES15)이며, 이 커리큘럼은 최신 표준을 기준으로 합니다.

Advertisement
Advertisement