모던 자바스크립트 Deep Dive 2장

자바스크립트란?

자바스크립트 탄생

웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어

자바스크립트 표준화

브라우저에 따라 웹 페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈 발생

이에 모든 브라우저에서 정상적으로 동작하는 표준화된 자바스크립트인 ECMAScript 출시

• ES6 : let/const, 클래스, 화살표 함수, 템플릿 리터럴, 디스트럭처링 할당 등

자바스크립트 성장의 역사

1. 초창기

• 브라우저는 서버로부터 전달받은 HTML, CSS만 렌더링
  

2. AJAX

• 자바스크립트를 이용해 서버와 브라우저간 비동기 방식으로 데이터 교환
• 새로운 HTML을 전송받는 것이 아닌 필요한 데이터만 전송받아 변경
• 부드러운 화면 전환 효과
  

3. JQuery

• DOM을 쉽게 제어

4. V8 자바스크립트 엔진

• v8자바스크립트 엔진으로 과거 웹 서버에서 수행되던 로직들이 브라우저에서 실행
  

5. Node.js

• 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경
• 주로 서버 사이드 애플리케이션 개발에 사용
• 비동기 I/O를 지원하며 단일 스레드 이벤트 루프 기반으로 동작
• 데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생하는 SPA에 적합

SPA 프레임워크

SPA란 싱글 페이지 어플리케이션으로 전체 페이지를 다시 표시하는 것이 아니라 필요한 영역만 변화를 주어 부드러운 화면 전환이 가능하도록 한다.

자바스크립트 특징

• 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어
• 코드가 실행되는 단계인 런타임에 문 단위로 바이트코드로 변환 후 실행

ES6 지원 현황

인터넷 익스플로러를 제외한 모던 브라우저는 대부분 지원한다. 하지만 익스플로러나 구형 브라우저는 지원하지 않는다.
그래서 바벨을 사용해 다운 그레이드할 필요가 있다.

비동기와 동기 차이는 무엇일까?

동기는 작업이 시작된 이후에 응답을 받을 때 까지 다른 모든 작업을 대기한다.
비동기는 작업이 시작된 이후에 응답을 받을 때 까지 다른 작업들을 수행할 수 있다.

스레드와 프로세스란?

스레드는 프로세스보다 더 작은 단위로 하나의 프로세스에서 여러 스레드를 만들 수 있다. 또한 스레드끼리 자원을 공유하고 작업을 동시에 수행한다.
프로세스는 메모리상에서 실행되는 작업 단위이다.

자바스크립트는 비동기 통신을 만나도 얼지 않는 이유

이벤트 루프 덕분이다. 자바스크립트의 fetch, axios와 같은 비동기 함수를 만나면 비동기 코드를 브라우저 Web API에 맡기고, 백그라운드 작업 결과를 콜백 함수 형태로 callback queue에 넣고 처리 준비가 되면 callstack에 넣어 마무리 작업을 하는 과정입니다.