[모던 자바스크립트 Deep Dive] 01 - 03

23.03.07

📌 01. 프로그래밍

결국 프로그래밍은 요구사항의 집합을 분석해서 적절한 자료구조와 함수의 집합으로 변환한 후, 그 흐름을 제어하는 것이다.

대부분의 프로그래밍 언어 - 변수와 값, 키워드, 연산자, 표현식과 문, 조건문과 반복문에 의한 흐름제어, 함수, 자료구조(객체, 배열) 문법 제공

📌 02. 자바스크립트란?

넷스케이프 커뮤니케이션즈에서 웹페이지의 보조적 기능 수행을 위한 경량 프로그래밍 언어 도입 ➡️ 브렌던 아이크가 개발한 자바스크립트

이름 변경 : 모카 ➡️ 라이브스크립트 ➡️ 자바스크립트

 

🌱 자바스크립트 표준화

크로스 브라우징 이슈 발생 

ECMAScript라고 명명

ES3 try catch문

ES5 HTML5 함께 출현한 표준안, JSON, strict mode, 접근자 프로퍼티, 프로퍼티 어트리뷰트 제어, forEach, map, filter, reduce, some, every

ES6(2015) let, const, 클래스, 화살표 함수, 템플릿 리터럴, 디스트럭처링 할당, 스프레드 문법, rest 파라미터,  심벌, 프로미스, Map/Set, 이터러블, for...of, 제너레이터, Proxy, 모듈 import/export

ES8 async/await

ES11 BigInt, 옵셔널 체이닝 연산자

 

🌱 Ajax(Asynchronous Javascript and XML)

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

렌더링에 필요한 부분만 변경 

 

🌱 jQuery

DOM(Document Object Model)을 더 쉽게 제어, 크로스 브라우징 이슈 완화

 

🌱 V8 자바스크립트 엔진

자바스크립트 엔진

웹 서버에서 수행되던 많은 로직들이 브라우저로 이동하는 계기가 됨

 

🌱 Node.js

구글 V8자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경

브라우저 이외 환경에서도 동작할 수 있는 자바스크립트 실행 환경 

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

모듈, 파일 시스템, HTTP 등 빌트인 API 제공

비동기 I/O 지원, 단일 스레드 이벤트 루프 기반 동작, SPA에 적합, CPU 사용률이 높은 애플리케이션 부적합

 

🌱 SPA 프레임워크

CBD(Component Based Development) 방법론 기반 SPA(Single Page Application)

 

🌱 Javascript

ECMAScript 와 브라우저 별도 지원인 클라이언트 사이드 Web API(DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker)등 아우르는 개념

Web API는 W3C에서 별도 관리

 

특징

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

프로토타입 기반의 객체지향 언어

 

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

🌱 브라우저와 Node.js 용도가 다르기 때문에 제공되는 API가 다름

ex) Node.js에서는 Web API 제공 x

 

🌱 웹 크롤링(web crawling)

서버에서 웹사이트 콘텐츠 수집 위해 웹사이트에서 html문서 가져와 필요한 정보 추출

 

🌱 개발자 도구

단축키 

윈도우 F12 or Ctrl + Shift + I

macOS command + option + I

 

🌱 Node.js 

npm(node package manager), CLI(Command line interface)

Node.js가 제공하는 REPL(Read Eval Print Loop) 자바스크립트 결과 확인 가능

터미널

ex) 실행 파일 index.js라면

$ node index

Ctrl + C 두 번 입력하면 Node.js REPL 종료

 

🌱 VSC

내장 터미널 단축키

Ctrl + `

 

확장팩 code runner 단축키

윈도우 Ctrl + Alt + N

macOS control + option + N

참조 : 모던 자바스크립트 Deep Dive