[1~3장] 프로그래밍 - 모던 자바스크립트 Deep Dive

모던 자바스크립트 Deep Dive를 읽은 후 정리한 내용입니다.

다른 프로그래밍 언어와 비슷한 부분들은 생략하였습니다.

 

 

1. 프로그래밍

프로그래밍이란?

컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션

⇒ 해결해야 할 문제(요구사항)을 명확히 이해한 후 적절한 해결 방안을 정의하는 게 중요

복잡한 “문제”를 단순하게 분해하고, 자료를 정리하고 구분 ⇒ 순서에 맞게 배열

언어의 의미는 문맥에 있는 것이지 문법에 있는 것이 아니다.

const number = 'string';
console.log(number * number); //NaN

문법적으로는 전혀 문제가 없지만 , 의미도 없음

⇒ 코드는 해결 방한을 구현물!! 문법에 부합한 것은 물론이고, 수행하고자 하는 바를 정확히 수행해야 의미가 있다

 

 

2. 자바스크린트란?

현재 자바스크립트는 모든 브라우저의 표준 프로그래밍 언어

자바스크립트의 표준화

마소가 Jscript라는 걸 만들고, 인터넷 익스플로러에 탑재

Jscript와 JavaScript가 완벽 호환되지는 않았, 또 마소에서 Jscript 점유율 올리려고 익스플로러에서만 호환되는 기능들을 추가

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

⇒ 자바스크립트의 표준화 요청으로 ECMAScript 등장

자바스크립트의 역사

기존에는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로만 사용 (내부 로직은 모두 웹 서버에서)

💡 랜더링 HTML, CSS, JS로 작성된 문서를 해석해서 브라우저에 시각적으로 출력하는 것

 

1. Ajax이전에는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML 전체를 받아서 랜더링또 화면이 전환되며 순간적으로 깜박이는 현상 발생 ⇒ 어쩔 수 없는 한계라고 여겨졌음⇒ 웹 브라우저에서도 데스크탑 애플리케이션과 유사한 빠른 성능과 부드러운 화면 전환이 가능해졌따!!!
2. 하지만 Ajax가 등장함으로써 변경할 필요가 없는 부분은 다시 랜더링하지 않고, 서버로부터 필요한 데이터만 전송받아 변경이 필요한 부분만 랜더링
3. 이러한 방식은 변경할 필요가 없는 부분까지 포함된 HTML 코드를 서버로부터 다시 전송 받기 떄문에 불필요한 데이터 통신 발생 ⇒ 성능면에서 불리
4. 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능
5. JQuery
6. DOM을 더 쉽게 제어하고, 크로스 브라우징 이슈도 어느정도 해결 ㅋ
7. V8 자바스크립트 엔진
8. 과거 웹 서버에서 수행되던 로직들이 대거 클라이언트로 이동!
9. Node.jsJS ⇒ 원래 브라우저의 자바스크립트 엔진에서만 동작
   • 비동기 I/O 지원, 단인 스레드 이벤트 루트 기반 이벤트 동작 ⇒ 요청 처리 성능 좋당
   • 권장
   • 데이터를 실시간으로 처리하기 위해서 I/O가 빈번한 SPA
   • 비권장
   • CPU 사용률이 높은 애플리케이션
   Node.js 등장으로 JS는 브라우저에서 벗어나 서버 사이드 애플리케이션 개발에도 사용되는 범용 프로그래밍 언어가 됨
10. 브라우저 이외의 환경에서도 동작할 수 있도록 자바스크립트 엔진을 독립시킨, 실행 환경이당!
11. 자바스크립트 런타임 환경
12. SPA 프레임워크⇒ 개발 규모, 복잡도 상승⇒ 개발에 도움이 되었지만, 변경에 유연하면서 확장하기 쉬운 아키텍쳐 구축을 어렵게 함
13. ⇒ CBD(Component Based Development) 방법론을 기반으로하는 SPA 대중화
14. ⇒ 다양한 패턴과 라이브러리 출현
15. 이제 웹도 애플리케이션과 비교해서 손색없는 사용자 경험, 성능을 제공해야 하게 됨..

자바스크립트와 ECMAScript

각 브라우저 제조사는 ECMAScript 사양을 준수해서 자바스크립트 엔진을 구현한당

자바스크립트는 프로그래밍 언어로서 ECMAScript와 브라우저가 별도로 지원하는 클라이언트 사이드 Web API를 아우르는 개념임!

💡 Web API DOM,Canvas,fetch,SVG 등…

 

자바스크립트의 특징

자바스크립트는 웹 브라우저에서 동작하는 유일한 프로그래밍 언어!

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

대부분의 자바스크립트 엔진은 인터프리터와 컴파일러의 장점을 결합

⇒ 비교적 처리 속도가 느린 인터프리터의 단점을 해결

인터프리터 언어의 특징

• 런타임 단계에서 한 줄씩 바이트코드로 변환 후 실행
• 실행 단계와 인터프리트 단계가 분리되어 있지 않음

컴파일러 언어의 특징

• 컴파일과 실행 단계가 분리되어 있어서 코드 실행속도가 빠르다 ( 컴파일하는데 시간이 걸리고, 실행이 빠른거 ㅋ)
• 실행에 앞서서 컴파일은 단 한번 수행

대부분의 브라우저에서 사용되는 인터프리터는 일부 소스코드를 컴파일하고 ⇒ 실행

자바스크립트는 런타임에 컴파일 + 실행 파일 생성 ㄴㄴ ⇒ 컴파일러 언어라고 할 수 없음

자바스크립트

• 명령형
• 함수형
• 프로토타입 기반
• 객체지향 프로그래밍

을 지원하는 멀티 패러다임 프로그래밍 언어

ES6를 지원하지 않는 구형 브라우저들이 아직 존재하기 때문에

⇒ 바벨과 같은 트랜스파일러를 사용해서 ES5 이하의 사양으로 다운그레이드 해야함

 

 

3. 자바스크립트 개발 환경과 실행 방법

실행 환경

모든 브라우저에서는 자바스크립트를 해석, 실행하는 엔진을 내장하고 있음

Node.js도 자바스크립트 엔진을 내장하고 있음

⇒ 둘이 동일하게 동작한당

⇒ 하지만 둘의 용도가 다름!

브라우저 ⇒ 웹 페이지 화면에 랜더링하는 것이 주 목적

Node.js ⇒ 브라우저 외부에서 자바스크립트 실행 환경을 만드는 것이 주 목적

ECMAScript만 호환이 가능하고, 그 외 기능은 호환되지 않는다!

두 환경의 목적이 다르기 때문에, 사용가능한 API들이 다르당

💡 웹 크롤링 HTML을 가져온 후 필요한 데이터만 추출 서버 환경에서는 DOM API를 사용할 수 없어서 cheerio 같은 DOM 라이브러리 사용

 

브라우저 → DOM API 제공

Node.js → 파일을 생성하고 수정할 수 있는 파일 시스템을 기본 제공

브라우저로 다운 받아서 실행되는 자바스크립트가 사용자 컴퓨터 로컬 파일을 삭제/수정할 수 있다면… 사용자는 악성 코드에 그대로 노출될 것! ⇒ 보안상의 이유로 브라우저에서는 파일 시스템을 제공하지 ㄴㄴ

브라우저는 앞에서 말한 클라이언트 사이드 Web API 지원

Node.js는 Node의 고유 API 지원

Node.js

브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있게 만드는 실행 환경

npm

• Node.js에서 사용할 수 있는 모듈들을 패키지화한 저장소
• 패키지 설치 및 관리를 위한 CLI(Command line interface) 제공

alert ⇒ Web API ㅋㅋ