[JS] 1. JavaScript의 역사

Mar 31, 2025

Contents

1️⃣ HTML, CSS, JavaScript의 관계 2️⃣ 브라우저마다 제공하는 기능 차이 3️⃣ 브라우저 점유율이 중요한 이유 4️⃣ 브라우저가 JavaScript의 새로운 기능을 제공하는 이유 5️⃣ 브라우저 시장 분할과 개발자의 어려움 6️⃣ JavaScript 표준화 → ECMA Script 등장 7️⃣ JavaScript 문법의 변화 8️⃣ Babel의 등장 9️⃣ JavaScript의 특성 🔟 JavaScript 엔진의 분리 → Node.js 등장 1️⃣1️⃣ 현재 JavaScript 활용 방식 1️⃣2️⃣ JavaScript 활용 계획 Nodejs등장 전 Nodejs등장 후

1️⃣ HTML, CSS, JavaScript의 관계

모든 브라우저에서 HTML, CSS, JavaScript의 문법은 동일.

HTML: 웹 페이지의 구조를 정의.

CSS: 디자인과 레이아웃을 담당.

JavaScript: 동적인 기능과 사용자 인터랙션을 구현.

JavaScript는 DOM(Document Object Model) 조작을 위해 등장함.

2️⃣ 브라우저마다 제공하는 기능 차이

CSS 및 JavaScript에서 제공되는 함수는 브라우저마다 다를 수 있음.

크로스 브라우징 문제 발생 → 동일한 코드라도 브라우저마다 동작이 다를 수 있음.

3️⃣ 브라우저 점유율이 중요한 이유

사용자가 많은 브라우저 기준으로 개발하는 것이 일반적.

크롬, 사파리, 파이어폭스 등 점유율이 높은 브라우저에 최적화하여 개발.

특정 브라우저에서만 동작하는 기능을 사용하면 크로스 브라우징 문제가 발생.

4️⃣ 브라우저가 JavaScript의 새로운 기능을 제공하는 이유

더 많은 개발자를 유치하고 시장을 장악하기 위해.

브라우저가 강력한 JavaScript 기능을 제공할수록 개발자들이 해당 브라우저를 선택.

이에 따라 브라우저 간 경쟁이 심화됨.

5️⃣ 브라우저 시장 분할과 개발자의 어려움

특정 기업이 시장을 독점하지 못하고 여러 브라우저가 공존하는 구조.

개발자는 각 브라우저에서 동일하게 동작하도록 여러 번 개발해야 함 → 개발 비용 증가.

6️⃣ JavaScript 표준화 → ECMA Script 등장

이러한 문제를 해결하기 위해 ECMA Script 표준이 등장.

*ECMAScript 6 (JS2015)**부터 최신 문법이 정리되고 일관된 방식으로 발전.

이후 지속적인 업데이트를 통해 새로운 기능이 추가됨.

7️⃣ JavaScript 문법의 변화

JavaScript는 2015년 이전(ES5)과 이후(ES6)로 크게 구분됨.

최신 JavaScript(ES6 이후)에서는 가독성, 성능 개선, 모듈화 등 다양한 기능이 추가됨.

하지만 일부 구형 브라우저는 최신 문법을 지원하지 않음.

8️⃣ Babel의 등장

최신 JavaScript(ES6 이후) 문법을 구형 브라우저에서도 사용할 수 있도록 변환하는 도구.

최신 코드 → 구버전 코드로 변환하여 실행 가능하도록 지원.

트랜스파일러(Transpiler) 역할 수행.

9️⃣ JavaScript의 특성

브라우저 기반 언어: 브라우저 내부에서 실행.

JavaScript 엔진: 브라우저 내에서 코드를 해석하여 실행 (예: Chrome의 V8 엔진).

JVM과 유사한 개념으로, 브라우저가 JavaScript 코드를 실행하는 환경을 제공.

인터프리터 언어: 코드를 한 줄씩 실행하여 동작.

모든 자료형이 참조형 자료형으로 동작.

🔟 JavaScript 엔진의 분리 → Node.js 등장

브라우저 없이 JavaScript를 실행할 수 있도록 만든 환경이 Node.js.

Node.js = JavaScript 런타임 환경 → 브라우저 없이도 실행 가능.

기존에는 HTML(Actor), Browser(무대), Script(대본)이 함께 있어야 실행 가능했음.

하지만 Node.js를 통해 JavaScript가 서버 개발에도 활용 가능해짐.

JavaScript의 활용 범위가 확장됨 (웹 프론트엔드 → 백엔드 → 데스크톱, 모바일 앱 등).

1️⃣1️⃣ 현재 JavaScript 활용 방식

현재 JavaScript는 단순한 웹 브라우저 스크립트 언어를 넘어,

프론트엔드(React, Vue, Angular)
백엔드(Node.js, Deno)
데스크톱 애플리케이션(Electron)
모바일 개발(React Native, Ionic) 등 다양한 분야에서 활용됨.

1️⃣2️⃣ JavaScript 활용 계획

이번 프로젝트에서는 JavaScript를 이용하여 DOM을 제어하는 것에 집중할 예정.

내가 정리한 글

브라우저마다 html, css, js 문법은 다 동일하다

js 는 dom 제어를 위해서 나옴

css, js 에 제공되는 함수는 다르다 (브라우저마다)

브라우저의 점유율이 중요하다 (사용자가 많은 브라우저를 기준으로 개발자가 개발하기 때문)

브라우저가 js의 새로운 함수들을 만들어서 제공하는 이유(많은 개발자들을 모아서 시장을 장악하기 위함)

독점 X, 시장 분할 된다

개발자들이 힘들다 (개발을 여러 번 해야 하기 때문)

표준이 만들어짐

ECMA6 - JS2015

이전 문법 체계와 달라짐

브라우저(a, b, c, d)
js2015이전, js2015이후

Babel 등장

2016으로 개발 → 2015로 코드를 변경 시키는 프로그램 개발

JavaScript

브라우저가 없으면 동작하지 않음(브라우저 안에 js엔진이 있음 == JVM)
브라우저와 html이 있어야 실행 가능 (Script → 기생언어)
인터프리터 언어 (타입 추론) (모든 자료형이 참조형 자료형이다)

자바스크립트 엔진 분리 시키자 nodejs 등장

Node.js → 자바스크립트 런타임 환경
브라우저 없이 개발도 하자
actor(html), 무대(browser), 대본(script) 같이 있어야 동작했다
이제 script가 단독으로 실행된다(nodejs)

js로 dom만 제어할 예정

Nodejs등장 전

html안에서만 동작함


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .red-box {
                border: 1px solid black;
                background-color: red;
                padding: 10px;
                color: white;
            }
        </style>
    </head>
    <body>
        <div class="red-box" id="name-box">홍길동</div>
        <button onclick="changeName()">이름변경</button>
        <script>
            let n1 = 1;
            // alert(n1);
            console.log(`n1: ${n1}`);

            function changeName() {
                let d1 = document.querySelector("#name-box");
                console.log(d1);
                d1.innerHTML = "임꺽정";
            }
        </script>
    </body>
</html>

Nodejs등장 후

js만 따로 생성 가능


let n1 = 10;

console.log(n1);

See more posts

[JS] 1. JavaScript의 역사

1️⃣ HTML, CSS, JavaScript의 관계

2️⃣ 브라우저마다 제공하는 기능 차이

3️⃣ 브라우저 점유율이 중요한 이유

4️⃣ 브라우저가 JavaScript의 새로운 기능을 제공하는 이유

5️⃣ 브라우저 시장 분할과 개발자의 어려움

6️⃣ JavaScript 표준화 → ECMA Script 등장

7️⃣ JavaScript 문법의 변화

8️⃣ Babel의 등장

9️⃣ JavaScript의 특성

🔟 JavaScript 엔진의 분리 → Node.js 등장

1️⃣1️⃣ 현재 JavaScript 활용 방식

1️⃣2️⃣ JavaScript 활용 계획

Nodejs등장 전

html안에서만 동작함

Nodejs등장 후

js만 따로 생성 가능

More articles

[JS] 3. 웹 페이지에 그림을 그릴 때

[JS] 2. JS 문법

[환경설정] 11. Node.js 설치

[GIT] 6. vim(vi에디터)