스터디/모던 자바스크립트 Deep Dive(24.02-24.06)

2장. 자바스크립트란?

minseokiim 2024. 2. 22. 20:18

#2.1 : 자바스크립트의 탄생
넷스케이프 커뮤니케이션즈에서 웹페이지의 보조적 기능을 수행하기 위해 도입,
브렌던 아이크가 개발한 자바스크립트

1996.03 넷스케이프의 내비게이터2에 '모카'라는 이름으로 탑재,

모카 -> 라이브스크립트 -> 자바스크립트


#2.2 : 자바스크립트의 표준화
자사 브라우저의 시장점유율을 높이기 위해서 JScript와 자바스크립트 각각에서만 동작하는 기능 -> 크로스브라우징 이슈 발생

(* 크로스브라우징 : 최대한 많은 종류의 웹 브라우저에서 같은 코드로  동일한 동작을 하는 웹페이지를 만드는 방법론, W3C(World Wide Web Consortium)에서 채택된 웹표준 기술)

 

1996.11 ECMA 인터내셔널에 자바스크립트 표준화 요청

1997.07 ECMA-262(표준화된 자바스크립트 초판 사양) 완성

2015 ECMAScript 6 : let/const, 클래스, 화살표 함수, 디스트럭처링 (구조 분해 할당), 스프레드 문법, 제너레이터 ...등장

 

 

#2.3: 자바스크립트의 성장의 역사

초창기 자바스크립트 -> 웹페이지 보조적 기능 수행, 대부분의 로직은 웹서버에서 실행

(* 웹서버 : HTTP/HTTPS를 통해 웹 브라우저에서 요청하는 HTML 문서나 오브젝트(이미지 파일 등)을 전송해주는 서비스 프로그램 )

 

1) Ajax(Asynchronous Javascript And Xml)

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

브라우저가 가지고있는 XMLHttpRequest 객체를 이용 -> 변경할 필요 없는 부분은 다시 렌더링하지 않고, 서버로부터 필요한 정보만 전송받아 한정적으로 렌더링 -> 빠른 성능

 

 

2) jQuery

: 코드가 브라우저의 영향을 받아 작동하지 못하는 문제를 해결하기 위해 개발, DOM을 보다 쉽게 제어

 

장점) 1. DOM 구조 탐색
          2. 크로스브라우징 : 모든 브라우저를 지원하고 있어, 코드가 깨지지 않고 동작

단점) 1. 느린 구현 속도 : 순수 자바 스크립트를 이용해 구현한 코드보다 속도가 현저히 느림
         2. 코드 관리 : 간결한 코드로 오히려 관리가 힘들어짐

 

 

3) V8 자바스크립트 엔진

: 웹 브라우저를 만드는 데 기반을 제공하는 오픈 소스 자바스크립트 엔진

이를 통해, 웹서버에서 수행되던 로직들이 클라이언트로 이동

 

 

4) Nodejs

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

서버사이드 애플리케이션 개발에 주로 사용.

(* 서버사이드 애플리케이션 : 클라이언트의 요청에 따라 데이터를 처리하고, 그 결과를 클라이언트에게 전송하는 역할)

 

 

5) SPA 프레임워크

CBD 방법론을 기반으로 하는 SPA 대중화로 SPA 프레임워크/라이브러리 생태계 커짐.

(* CBD 방법론 : 여러 개의 독립적인 컴포넌트들을 결합하여 하나의 애플리케이션을 구성하는 개발 방법론 )

(* SPA (Single Page Application) : 사용자와 상호작용하는 동안 새로운 페이지를 로딩하지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자에게 웹 애플리케이션 또는 웹사이트를 제공
사용자가 다른 페이지로 이동하더라도, 실제로 페이지 전체를 새로 로딩하는 것이 아니라 필요한 부분만 업데이트하거나 추가로 가져옴 -> 새로고침하지 않고도 페이지의 일부분만 변경할 수 있음)

 

 

#2.4: 자바스크립트와 ECMAScript

ECMAScript는 자바스크립트의 표준사양인 ECMA-262를 의미,

자바스크립트는 ECMAScript와 브라우저가 별도로 지원하는 클라이언트 사이드 Web API등을 아우르는 개념.

(* 클라이언트 사이드 Web API : W3C에서 별도의 사양으로 관리, ex. DOM, BOM, fetch, Canvas ..)

 

 

#2.5: 자바스크립트의 특징

HTML, CSS와 함께 웹을 구성하는 요소 중 하나, 웹 브라우저에서 동작하는 유일한 프로그래밍 언어

개발자가 별도의 컴파일 작업을 하지 않는 인터프리터 언어

(* 인터프리터 언어 : 코드 실행 전 한번에 변환 후 실행, 컴파일은 한번만. VS 컴파일러 언어 : 코드 실행될때 한 줄 씩 변환 후 실행, 코드 실행마다 반복 수행)

 

-> 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어

 

 

#2.6: ES6 브라우저 지원 현황

구형 브라우저를 고려한다면 바벨 같은 트랜스파일러 사용 -> 다운그레이드

(* 바벨: 자바스크립트 컴파일러이며, 현재, 이전의 브라우저 또는 환경에서 ES6코드를 이전버전의 자바스크립트로 변환하는데 주로 사용되는 도구체인)

'스터디 > 모던 자바스크립트 Deep Dive(24.02-24.06)' 카테고리의 다른 글

7장. 연산자  (0) 2024.03.14
6장. 데이터 타입  (1) 2024.03.14
5장. 표현식과 문  (0) 2024.03.04
4장. 변수  (0) 2024.03.04
3장. 자바스크립트 개발 환경과 실행방법  (0) 2024.03.04