[모던 자바스크립트 Deep Dive🦎] 1-3장 : 프로그래밍, 자바스크립트, 자바스크립트 개발 환경

📍 컴파일러/인터프리터란?

• 컴퓨터가 이해할 수 있는 기계어로 변환하는 일종의 번역기

 

📍자바스크립트란?

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

 

📍 자바스크립트 역사

• 초창기 자바스크립트
  • 대부분의 로직은 주로 웹 서버에서 실행됨
  • 브라우저는 서버로부터 전달받은 HTML과 CSS를 단순히 렌더링하는 수준
  🔅 렌더링 : HMTL, CSS, Javascript로 작성된 문서를 해석해서 브라우저에 시각적으로 출력하는 것, 서버에서 데이터를 HTML로 변환해서 브라우저에게 전달하는 과정을 의미

 

🔅 Ajax (XMLHttpRequest) : 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능

• Ajax 등장 이전 (1999년 이전)
  • html 태그로 시작해서 html 태그로 끝나는 완전한 HTML 코드를 서버로부터 전송받아 웹페이지 전체를 렌더링하는 방식
  • 화면이 전환되면 웹페이지를 처음부터 다시 렌더링해야하는 문제 ⇒ 화면 전환 시 화면 깜박이는 문제
• Ajax 등장 이후 (1999년 이후)
  • 웹페이지에서 변경할 필요가 없는 부분은 다시 렌더링하지 않음
  • 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 렌더링 ⇒ 부드러운 화면 전환

 

🔅 Node.js : 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경, 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경

• 서버 사이드 애플리케이션 개발에 주로 사용됨
• 개발 시 필요한 모듈, 파일 시스템, HTTP 등 빌트인 API를 제공
• 비동기 I/O를 지원하며 단일 스레드 이벤트 루프 기반으로 동작
  • ⇒ 요청 처리 성능이 좋음, 데이터를 실시간으로 처리하기 위해 I/O가 빈번히 발생하는 SPA에 적합
  • 🔅 Node.js는 단일 콜 스택(요청이 들어올 때마다 요청을 순차적으로 호출 스택에 담아 처리)이라는 측면에서는 단일 스레드(한번에 하나의 작업만 수행함)이지만, 넓은 측면에서는 무조건 단일 스레드라고 할 수 없음 (실제 자바스크립트가 구동되는 환경에서는 주로 멀티 스레드 사용됨)
  • 🔅 이벤트 루프는 libuv 라이브러리에 의해 제공됨

 

📍 자바스크립트 특징

• 웹 브라우저에서 동작하는 유일할 프로그래밍 언어
• 자바스크립트는 인터프리터 언어
  • 
    

    컴파일러 언어	인터프리터 언어
    컴파일 타임에 소스코드 전체를 한번에 머신 코드로 변환 후 실행	런타임에 문 단위로 한 줄씩 중간 코드인 바이트코드로 변환 후 실행
    실행 파일을 생성함	실행 파일을 생성하지 않음
    컴파일 단계와 실행 단계가 분리되어 있음	인터프리트 단계와 실행 단계가 불리되어 있지 않음, 인터프리터는 한 줄씩 바이트코드로 변환하고 즉시 실행
    컴파일은 단 한번 수행됨	코드가 실행될 때마다 인터프리트 과정이 반복 수행됨
    컴파일 및 실행 단계가 분리되어 코드 실행 속도 빠름	인터프리트 단계와 실행 단계가 분리되지 않아 반복 수행되므로 코드 실행 속도가 비교적 느림

• 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어
• 클래스 기반 객체지향 언어보다 효율적인 프로토타입 기반의 객체지향 언어

 

📍 자바스크립트 실행 환경

• 브라우저와 Node.js 모두 자바스크립트 엔진을 내장하고 있음

 

• 브라우저와 Node.js 차이
  • 브라우저
    • HTML, CSS, 자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것이 주된 목적
    • 클라이언트 사이드 Web API를 지원 (DOM, Web Storage 등)
    • 파일 시스템을 제공하지 않음 (보안상의 이유)
  • Node.js
    • 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주된 목적
    • 클라이언트 사이드 Web API를 지원하지 않음 (DOM API를 제공하지 않음 -브라우저 외부에서는 HTML 요소를 파싱해서 객체화한 DOM을 직접 다룰 필요가 없으므로)
    • 파일 시스템을 제공 (파일 생성 및 수정 가능)

 

📍 Node.js

• 프로젝트 규모가 커짐에 따라 React, Angular 같은 프레임워크나 라이브러리를 도입하거나 Babel과 같은 도구를 사용해야 하는데 이때 Node.js와 npm이 필요함

 

• npm이란?
  • 자바스크립트 패키지 매니저
  • Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI를 제공