자바스크립트란?

자바스크립트의 표준화

자바스크립트가 나온 초창기에는 자사 브라우저의 시장 점유율을 높이기 위해 자사 브라우저에만 동작하는 기능들을 추가했는데, 이로 인해 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생

이로 인해 비영리 표준화 기구인 ECMA 인터네셔널에서 자바스크립트 표준화 진행되어, 표준화된 자바스크립트 버전인 ECMAScript의 최초버전인 ES1이 등장

이후 ES2 버전에서는 ISO/IEC 16262 국제 표준과 동일한 규격을 적용하며 계속 버전업 되어왔음

자바스크립트 버전별 변천사

• ES3(1999) → 정규 표현식, try catch
• ES5(2009) → HTML5와 함께 등장 JSON, 배열조작(forEach, map 등), map, set
• ES6(2015) → let/const, 클래스, 화살표 함수, 프로미스
• ES7(2016) → prototype, **연산자
• ES8(2017) → async/await, Object 정적 메서드
• ES9(2018) → for await …of, async generator
• ES10(2019) → Object.fromEntries, Array.prototype.flatMap
• ES11(2020) → String. prototype. matchAll, BigInt, 옵셔널 체이닝 연산자 등

자바스크립트 성장의 역사

첫 자바스크립트는 웹 페이지의 보조기능을 수행하는 용도였고, 대부분의 로직이 웹 서버에서 실행되며 서버측에서 렌더링(Server Side Rendering)이 진행됨

Ajax

비동기(Asynchronous )방식으로 데이터를 교환할 수 있는 Ajax가 등장하며 렌더링을 Client측에서 직접 렌더링하기 시작했다

서버 측에서의 렌더링은 매번 데이터를 변경할 때마다 새로 페이지를 불러와 렌더링 해야하기에 성능상 문제가 있었고 사용자 입장에서도 좋지않은 경험이였다.

Ajax의 등장으로 변경되는 데이터만 특정하여 값을 변경해 부드러운 화면 전환 효과를 보게 되었다.

jQuery

jQuery는 자바스크립트의 까다롭고 복잡한 문제를 해결해주었고, 직관적인 jQuery로 인해 자바스크립트 환경이 더욱 개선되었다.

V8 자바스크립트 엔진

구글에서 개발한 V8엔진은 빠른 성능을 보여주었고, 데스크톱 애플리케이션과 유사한 사용자 경험을 제공할 수 있게 되었다.

이 이후 클라이언트 사이드 렌더링이 본격적으로 활성화되었고, 프론트엔드 영역이 주목받기 시작했다.

Node.js

브라우저에서만 동작하는 자바스크립트 엔진을 브라우저 이외의 환경에서도 동작할 수 있도록 브라우저에서 독립시킨 자바스크립트 실행 환경

Node.js가 생기며 프론트, 백 모두 자바스크립트를 사용해 개발할 수 있다는 동형성(동일한환경)이라는 *_장점이 있으며, *_비동기I/O, 단일스레드 이벤트 루프 기반으로 동작하기에 요청 처리성능이 좋으며 실시간으로 데이터를 처리하기 위해 I/O가 빈번하게 발생하는 SPA(Single Page Application)에 적합하다.

SPA 프레임워크

복잡해진 개발환경에서는 이전의 자바스크립트 환경에서는 수행하긴 하지만 변경에 유연해지며 CBD 방법론을 기반으로 하는 SPA(Single Page Application)가 대중화되었다.

SPA를 돕는 프레임워크/라이브러리로는 Angular, Reach, Vue.js, Svelte 등이 있다

자바스크립트와 ECMAScript

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

자바스크립트는 큰 범주로 JavaScript내에 ECMAScript가 들어있다.

ECMAScript는 자바스크립트에서 구현할 때의 뼈대라고 생각해야 한다. 이 뼈대는 문법과 기본 기능을 정의하며 ECMAScript를 기반으로 브라우저에서 자바스크립트가 동작하는 엔진을 구현하여 자바스크립트 실행 환경을 제공한다.

자바스크립트는 브라우저 엔진을 통해 만들어져 실제 웹 페이지와 상호작용하기 위해 사용되는 프로그래밍 언어이다.

자바스크립트의 특징

• 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다.
• 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다.
• 인터프리터 언어의 단점인 실행시간을 최적화하기 위해
  JIT(Just-In-Time) 컴파일 기술이 도입되어 자주 실행되는 코드를 컴파일해둔다
• 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다.

---

스터디 회고

자바스크립트가 ECMAScript를 아우른다는 것 추가설명

이 부분이 다음 주 주제와도 연결이 되다보니 이해가 중요한 부분이였는데, 제가 설명을 자세히 못 적었다고 생각이 드네요..!

다음번엔 이해하기 쉽도록 더 잘 정리해보겠습니다 ㅜㅜ

제가 이해할 때 도움됐던 부분을 조금 더 정보를 꺼내 부연 설명 드리자면, 크롬의 경우 우리가 자주 사용하는 확장프로그램을 예시로 들 수 있습니다.

확장프로그램은 ECMAScript 표준을 기반으로 작성되며, 브라우저 자체에서 제공하는 고유API와 모듈을 사용해 다른 기능과 상호작용합니다.

크롬 자체에서만 지원하는 API를 활용하기에 이는 JavaScript 라고 이해했었습니다!

  if (request.message === 'Tab updated') {
    console.log('Tab was updated');
  }
});

---

🤔 질문

자바스크립트에 대해 알게 된 좋은 글이었습니다! 감사합니다

올려주신 글 부분에서 Node.js 설명 중 궁금한 부분이 있습니다.
Node.js에서 단일 스레드 이벤트 루프 기반이라는데, 단일 스레드인 경우에는 여러 요청들이 몰리면 성능에 이슈가 생기는 것은 아닌가요?
단일 스레드라 요청 처리 성능이 좋다고 되어 있어서 궁금해져 여쭤봅니다!..

🖥️ 답변

저도 처음에 보고 당황해서 따로 검색을 했었는데, 명확히 이해하지 못했다 생각해 올리지는 않았었습니다..

제가 이해가 가능했던 부분까지 설명을 해보자면, 이벤트 루프에 대한 이해가 필요한데요.

간단하게 한 문장으로 표현하자면, 싱글스레드로 이벤트 루프 기능이 동작하고 있고, 상세 기능은 내부적으로 비동기요청들을 멀티스레드 처리생성해 로직 처리 후 콜백하는 형태입니다.

노드에서는 멀티스레드 처리하는 라이브러리를 libuv라고 부르며, 이 라이브러리가 스레드풀에 멀티스레드를 담은 후 요청들에 대한 처리를 진행 한다고 합니다.

때문에 싱글 스레드로 동작을 모니터링 후 동작 처리는 멀티스레드 라이브러리(libuv)에 비동기 요청으로 맡기는 식으로 동작한다고 합니다.

저도 완전한 이해를 기반으로 답변드리지 못하여 아쉽지만 생각보다 단번에 이해하기 어려워 큰 틀에서만 이해해둔 상태입니다..!

이는 이후 책 진도가 나가면 한번 더 깊게 다루도록 하겠습니다!!