2. Introduction 자바스크립트란?

https://poiemaweb.com/js-introduction 

Introduction | PoiemaWeb

 

 

 

 

정적인 HTML을 동적으로 표현하기 위해 경량의 프로그래밍 언어

“Mocha”로 명명되었다. 그해 9월 “LiveScript”로 이름이 변경되었고, 12월 “JavaScript”로 최종 명명

 

크로스 브라우징 이슈 : 브라우저에 따라 웹 페이지가 정상 동작하지 않음 

 

모든 브라우저에서 동일하게 동작하는 표준화된 자바스크립트에 대한 필요성이 제기

-> 상표권 문제로 자바스크립트는 ECMAScript로 명명

-> 1999년 ES3 을 거쳐  2009년 출시된 ECMAScript 5(ES5)는 HTML5와 함께 출현한 표준안이다.

 

2015년 ECMAScript 6(ECMAScript 2015)가 공개되었고 

범용 프로그래밍 언어로서 갖추어야 할 let/const 키워드, 화살표 함수, 클래스, 모듈 등과 같은 기능들을 대거 도입

 

 

---

 

3. 자바스크립트 성장 역사

 

이전의 웹 페이지는 서버로부터 완전한 HTML을 전송 받아 웹 페이지 전체를 렌더링하는 방식으로 동작

따라서 화면이 전환되면 서버로부터 새로운 HTML을 전송 받아 웹 페이지 전체를 처음부터 다시 렌더링하였다.

이는 변경이 없는 부분까지 포함된 HTML을 서버로부터 다시 전송 받기 때문에 불필요한 데이터 통신이 발생하고,

변경이 없는 부분까지 처음부터 다시 렌더링해야 하기 때문에 퍼포먼스 측면에서도 불리한 방식이다.

이로 인해 화면 전환시 화면이 순간적으로 깜박이는 현상이 발생하고 이는 웹 애플리케이션의 한계로 받아들여 졌다.

1999년, 자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 기능인 Ajax(Asynchronous JavaScript and XML)가 XMLHttpRequest이라는 이름으로 등장

 

웹 페이지의 변경이 필요 없는 부분은 다시 렌더링하지 않고, 서버로부터 필요한 데이터만을 전송 받아 변경이 필요한 부분만을 한정적으로 렌더링하는 방식이 가능해진 것이다.

 

2006년, jQuery의 등장

• 다소 번거롭고 논란이 있던 DOM(Document Object Model)을 보다 쉽게 제어
• 크로스 브라우징 이슈도 어느 정도 해결

 

2008년 V8 자바스크립트 엔진의 등장

• 데스크톱 애플리케이션과 유사한 사용자 경험(user experience)을 제공할 수 있는 웹 애플리케이션 개발 프로그래밍 언어로 정착
• 과거 웹 서버에서 수행되던 역할들이 클라이언트(브라우저)로 이동하였고, 이로써 웹 애플리케이션에서 프런트엔드 영역이 주목받는 계기가 되었다.

 

2009년 Node.js의 등장

• 자바스크립트 실행 환경으로 브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작
• 자바스크립트는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용되는 범용 프로그래밍 언어가 되었다

 

자바스크립트는 크로스 플랫폼을 위한 가장 중요한 언어로 주목받고 있다. (크로스 플랫폼 : 다양한 실행환경)

• 웹
• 모바일 하이브리드 앱(PhoneGap, Ionic)
• 서버 사이드(NodeJS), 데스크톱(Electron)
• 머신 러닝(TensorFlow.js)
• 로보틱스(Johnny-Five) 

 

높은 성능과 사용자 경험을 제공하기 위해 복잡해진 개발 과정

- 많은 패턴과 라이브러리가 출현

- 다양한 SPA 프레임워크/라이브러리 등장,  Angular, React, Vue.js 등

 

 

4. JavaScript와 ECMAScript

 

ECMAScript는 자바스크립트의 표준 명세인 ECMA-262를 의미하며 프로그래밍 언어의 타입, 값, 객체와 프로퍼티, 함수, 빌트인 객체 등 핵심 문법(core syntax)을 규정한다.

-> ECMAScript는 표준화된 자바스크립트

 

각 브라우저 제조사는 ECMAScript를 준수하여 브라우저에 내장되는 자바스크립트 엔진을 구현한다.

 

자바스크립트는 일반적으로 프로그래밍 언어로

ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이드 Web API 로 구성된다. 

 

 

클라이언트 사이드 Web API

• DOM, BOM, Canvas, XMLHttpRequest, Fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web worker 등
• 기본적으로 제공되는 API 이므로 설치할 필요는 없음. 
• 클라이언트 사이드 Web API는  World Wide Web Consortium (W3C)에서 별도의 명세로 관리하고 있다.
• 클라이언트 사이드 Web API의 자세한 내용은 MDN web docs: Web API를 참고하기 바란다.

 

https://www.w3.org/

W3C

 

https://developer.mozilla.org/ko/docs/Web/API

Web API | MDN

 

---

 

DOM(Document Object Model)

• XML, HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스이다.

 

BOM(Browser Object Model)

• 웹 브라우저의 창(window)과 프레임(frames)을 객체로 나타내는 모델을 의미합니다.
• 웹 페이지와는 별도로 브라우저의 기능을 제어하고 상호작용할 수 있는 API들의 집합을 제공합니다.

 

Canvas API

• HTML의 일부로서, 그래픽을 그리기 위한 풍부한 기능을 제공하는 웹 표준입니다.

 

XMLHttpRequest(XHR) 객체

• 서버와 상호작용하기 위해 사용됩니다. 전체 페이지의 새로 고침 없이도 URL를 통해 데이터를 전송하거나 받아 올 수 있습니다.
• 브라우저의 자바스크립트 API 중 하나로, Ajax 요청을 보내기 위해 사용됩니다.

 

Fetch 

• 웹 개발에서 네트워크 요청을 생성하고 응답을 처리하는 기능을 제공
• HTTP 요청을 보내고 응답을 받는 데 사용됩니다.

 

requestAnimationFrame

• 웹 브라우저에서 제공하는 자바스크립트 함수로, 애니메이션을 부드럽게 처리하기 위해 사용됩니다.
• 이 함수는 브라우저의 다음 리페인트(repaint) 시점에서 애니메이션을 업데이트할 수 있도록 스케줄링합니다.
• 주로 웹 페이지에서 CSS 애니메이션, 캔버스 그래픽, SVG 애니메이션 등을 구현할 때 활용됩니다.

 

SVG (Scalable Vector Graphics)

• 확장 가능한 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식입니다.
• SVG는 웹 페이지에서 그래픽 요소를 정의하고 표시하는 데 사용됩니다.
• 주로 그래픽 디자인, 데이터 시각화, 애니메이션 등 다양한 용도로 활용됩니다.

 

Web Storage

• 웹 브라우저에서 데이터를 클라이언트 측에 로컬로 저장할 수 있는 메커니즘을 말합니다.
• 주로 작은 데이터 집합을 저장하고 관리하는 데 사용됩니다.
• 이는 쿠키보다 훨씬 더 강력하고 효율적인 저장 옵션을 제공합니다.

 

Web Component

• 웹 개발에서 재사용 가능한 사용자 정의 HTML 요소를 만들기 위한 기술적 사양입니다.
• 특정 기능을 가진 커스텀 HTML 요소를 정의하고, 이를 웹 페이지에서 여러 번 재사용할 수 있도록 해줍니다.
• Web Component는 네이티브 HTML 요소처럼 동작하며, JavaScript, HTML, CSS를 사용하여 구성됩니다.

 

Web Worker

• 웹 애플리케이션에서 백그라운드 스레드에서 스크립트를 실행할 수 있게 해주는 브라우저 API입니다.
• 메인 스레드(main thread)와 별도로 동작하며, 병렬로 코드를 실행할 수 있는 기능을 제공합니다.
• 주로 CPU 집약적이거나 시간이 오래 걸리는 작업을 메인 스레드에서 분리하여 처리할 때 사용됩니다.

---

5. 자바스크립트의 특징
자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다. 

자바스크립트는 기존의 프로그래밍 언어에서 많은 영향을 받았다. 

기본 문법은 C, Java와 유사하고 Self에서는 프로토타입 기반 상속을, Scheme에서는 일급 함수의 개념을 차용했다.

 

현대 자바스크립트 엔진들은 JIT(Just-In-Time) 컴파일러를 사용하여 코드를 실행

 

• Ahead-of-Time (AOT) 컴파일러:
  • 전체 소스 코드를 한 번에 컴파일하여 기계어나 바이트코드로 변환합니다.
  • 변환된 코드는 실행 환경에서 별도의 인터프리터 없이 바로 실행될 수 있습니다.
  • 코드 실행 전에 모든 준비가 완료되어 있어, 초기 실행 속도가 빠르고 추가적인 최적화 과정 없이도 높은 성능을 보장할 수 있습니다.
• 인터프리터:
  • 소스 코드를 한 줄씩 읽어들이고 즉시 실행합니다.
  • 실행 중에는 코드를 실시간으로 변환하여 처리하므로, 초기 실행 속도는 빠르지만 반복적인 실행에서는 성능 저하가 발생할 수 있습니다.
• Just-In-Time (JIT) 컴파일러:
  • 인터프리터와 혼합하여 사용되며, 코드 실행 중에 필요한 부분을 실시간으로 컴파일하여 기계어로 변환합니다.
  • 실행 중에 최적화된 코드를 생성하여 성능을 개선하고, 반복적인 실행에서도 높은 성능을 유지할 수 있습니다.

 

https://perfectacle.github.io/2017/08/07/js-jit-compile/

(자알쓰) JIT 컴파일

 

---

 

자바스크립트는 명령형(imperative)함수형(functional), 프로토타입 기반(prototype-based) 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다.

 

 

1. 명령형 프로그래밍 (Imperative Programming):
   • 명령형 프로그래밍은 컴퓨터에게 정확한 단계와 순서대로 작업을 수행하도록 명령하는 방식입니다.
   • 자바스크립트에서는 변수를 사용하여 데이터를 저장하고, 조건문(if-else), 반복문(for, while 등)을 사용하여 프로그램의 흐름을 제어합니다.
   • 예를 들어, 변수를 선언하고 값을 할당하며, 조건에 따라 다른 동작을 수행하는 것이 명령형 프로그래밍의 예입니다.
2. 함수형 프로그래밍 (Functional Programming):
   • 함수형 프로그래밍은 함수의 개념을 중심으로 프로그래밍을 합니다. 함수를 일급 객체로 취급하며, 함수 조합과 고차 함수(higher-order functions)를 통해 작업을 수행합니다.
   • 자바스크립트에서는 함수를 변수에 할당하거나, 함수를 인자로 전달하거나 반환할 수 있습니다. 이러한 특성은 함수형 프로그래밍에서 매우 중요합니다.
   • 또한, 자바스크립트에서는 순수 함수(pure function)를 작성하고 불변성(immutable)을 유지하는 것이 함수형 프로그래밍의 주요 특징입니다.
3. 프로토타입 기반 객체지향 프로그래밍 (Prototype-based Object-Oriented Programming):
   • 자바스크립트는 클래스(class) 기반의 전통적인 객체지향 언어와는 다르게 프로토타입 기반의 객체지향 프로그래밍을 지원합니다.
   • 객체는 다른 객체로부터 직접 생성되며, 원본 객체(프로토타입)에 대한 링크를 가집니다. 이를 통해 객체는 다른 객체의 프로퍼티와 메서드를 상속받을 수 있습니다.
   • 자바스크립트에서는 객체 리터럴을 통해 쉽게 객체를 생성하고, 프로토타입 체인(prototype chain)을 통해 상속과 메서드 공유를 구현할 수 있습니다.
   • 클래스를 만들고 인스턴스를 생성하여 상속받는 방식이 아니라 객체(object)를 직접 생성하여 사용

 

 

      // 객체 리터럴을 사용하여 객체 생성

      let person = {

        name: 'John',

        age: 30,

        greet: function() {

          console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);

        }

      };

      // 새로운 객체 생성 (person 객체를 복제하여 만든 예시)

      let employee = Object.create(person);

      employee.name = 'Jane';

      employee.age = 25;

      // employee 객체의 greet 메서드 호출

      employee.greet(); // 출력: Hello, my name is Jane and I am 25 years old.

 

      // ES6 클래스를 사용하여 Person 클래스 정의

      class Person {

        // 생성자 메서드

        constructor(name, age) {

          this.name = name;

          this.age = age;

        }

        // 메서드 정의

        greet() {

          console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);

        }

      }

      // Person 클래스를 사용하여 객체 인스턴스 생성

      let person1 = new Person('John', 30);

      let person2 = new Person('Jane', 25);

      // 객체 인스턴스의 메서드 호출

      person1.greet(); // 출력: Hello, my name is John and I am 30 years old.

      person2.greet(); // 출력: Hello, my name is Jane and I am 25 years old.

 

 

---

 

5. ES6 호환성

 

 

https://caniuse.com/?search=es6

"es6" | Can I use... Support tables for HTML5, CSS3, etc

 

 

 

https://chatgpt.com/

 

---

 

자바스크립트란?

 

자바스크립트 컴파일 방식은 ?