Javascript - Warm Up

 

 

프로그래밍(Programming)

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

 

• 복잡하고 명확하지 않을 수 있는 문제(요구사항)에 대해 복잡함을 단순하게 분해(decomposition)하고 자료를 정리하고 구분(modeling)해야 하며 순서에 맞게 행위를 배열해야 한다.
• 문제 해결 방안을 고려할 때 컴퓨터의 입장에서 문제를 바라봐야 한다. 이때 필요한 것이 컴퓨팅 사고(Computational Thinking)다.

 

 

ECMAScript 버전별 특징

💡 ES5 → ES6로 업데이트하면서 많은 변화가 발생

 

ES1	...	1997
ES2	...	1998
ES3	정규 표현식, try - catch	1999
ES5	HTML5와 함께 출현한 표준안, JSON, strict mode, 접근자 프로퍼티 ,프로퍼티 어트리뷰트 제어, 향상된 배열 조작 기능(forEach, map, filter, reduce, some, every)	2009
ES6(ECMAScript 2015)	let/const, 클래스, 화살표 함수, 템플릿 리터럴, 디스트럭처링 할당, 스프레드 문법, rest 파라미터, 심벌, 프로미스, Map/Set, 이터러블 , for - of, 제너레이터, Proxy, 모듈 import/export	2015
ES7(ECMAScript 2016)	지수(**)연산자, Array.prototype.includes, String.prototype.includes	2016
ES8(ECMAScript 2017)	async/await, Object 정적 메서드 (Object.values, Object.entriesm Object.getOwnPropertyDescriptors)	2017
ES9(ECMAScript 2018)	...	2018
ES10(ECMAScript 2019)	...	2019
ES11(ECMAScript 2020)	...	2020

 

 

자바스크립트 발전과정

초기 자바스크립트
- 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로만 사용

• 대부분 로직은 웹 서버에서 실행
• 브라우저는 서버로부터 전달받은 HTML & CSS를 단순히 렌더링하는 수준

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

• XMLHttpRequest 라는 이름으로 등장
• Ajax 이전까지의 웹페이지는 HTML태그로 시작해서 HTML 태그로 끝나는 완전한 HTML 코드를 서버로부터 전송받아 웹페이지를 렌더링하는 방식으로 동작
  • 화면이 전환 → 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 리렌더링
  • 변경할 필요 없는 부분까지 리렌더링 → 불필요한 데이터 통신 발생 → 성능면에서도 불리 → 화면이 순간적으로 깜빡이는 현상이 발생
• Ajax 등장 이후
  • 변경할 필요가 없는 부분은 다시 리렌더링 하지 않고 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 한정적으로 렌더링하는 방식이 가능
  • 이로써, 웹 브라우저에서도 데스크톱 애플리케이션과 유사한 빠른 성능과 부드러운 화면 전환이 가능

JQuery
- DOM(Document Object Model)을 더욱 쉽게 제어할 수 있고, 크로스 브라우징 이슈도 어느 정도 해결해준 자바스크립트 라이브러리

V8 자바스크립트 엔진
- 자바스크립트가 데스크톱 애플리케이션과 유사한 사용자 경험(UX)을 제공할 수 있는 웹 애플리케이션 프로그래밍 언어로 정착되었음

• V8 자바스크립트 엔진으로 촉발된 자바스크립트의 발전
  • 과거 웹 서버에서 수행되던 로직들이 → 대거 클라이언트(브라우저)로 이동 → 웹 애플리케이션 개발에서 프론트엔드 영역이 주목받는 계기로 작용

 

 

자바스크립트와 ECMAScript

ECMAScript
- 자바스크립트 표준으로, 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 빌트인 객체 등 핵심 문법을 규정한 것

자바스크립트
- 프로그래밍 언어. 기본 뼈대는 ECMAScript를 준수하고 추가로 브라우저가 별도로 지원하는 클라이언트 사이드 Web API
(즉, DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker 등을 아우리는 개념)

• 자바스크립트는 명령형(Imperative), 함수형(Functional), 프로토타입 기반(Prototype-based) 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어
• 자바스크립트는 클래스 기반 객체지향 언어보다 효율적이면서 강력한 프로토타입 기반의 객체지향 언어

브라우저에서 자바스크립트 vs Node.js에서 자바스크립트

브라우저 & Node.js 둘 다 자바스크립트 엔진을 내장하곤 있다.
즉, 자바스크립트는 브라우저 환경 or Node.js 환경에서 실행할 수 있다.

❗ 한 가지 주의점 = 브라우저와 Node.js는 용도가 다름

• 브라우저 : HTML, CSS, JS를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것이 주 목적
• Node.js : 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주 목적

브라우저와 Node.js가 공통적인 ECMAScript를 실행할 수 있지만 ECMAScript 이외에
추가로 제공하는 기능은 호환을 하지 않는다.

ex) DOM API

• 브라우저 → DOM API를 제공
• Node.js → DOM API를 제공하지 않음 → 브라우저 외부 환경에서는 HTML 요소를 파싱(Parsing)해서 객관화한 DOM을 직접 다룰 필요가 없기 때문