[모던 자바스크립트 DeepDive] 1일차 - 프로그래밍, 자바스크립트

본 문서는 "모던 자바스크립트 DeepDive]를 데일리로 학습하며 기억할 부분과 추가학습한 부분을 공유한다.

 

1. 프로그래밍 언어

• 표현식(expression) : 값을 만드는 코드 전체 (할당, 값 등 모두 해당)
• 프로그래밍 언어의 흐름제어(control flow) 
  • 기본 흐름 : 위 -> 아래
  • 순차적 흐름만으로 부족해, 조건에따라 실행을 건너뛰거나 반복하거나 멈출 수 있는 "흐름제어 문법" 필요
  • ex. if, else, switch.. 

=> 프로그래밍 : 요구사항 집합을 분석하여, 적절한 자료구조와 함수 집합으로 변환하고, 그 흐름을 제어하는 것이다.

 

2.자바스크립트

• 초기 : 크로스 브라우징 이슈
  • 자바스크립트 / Jscript 표준화안됨 -> 크로스 브라우징 이슈 발생
  • 2015년 ES6공개
• 성장
  • 기존 : 웹페이지 보조기능, 웹 서버에서 실행, 서버에서 받은 HTML, CSS 단순 랜더링
  • Ajax(Asynchronous JavaScript and XML)
    • 웹페이지를 새로고침하지 않고도 서버와 데이터를 주고받을 수 있는 기술
    • 화면 유지 -> 서보 요청 -> 응답을 페이지에서 동적으로 변환.  => "비동기" 작업

 

3. 자바스크립트 엔진 : V8

• 구글에서 만든 오픈소스 자바스크립트 엔진으로, Google Chrome / Edge / Node.js 사용
• 인터프리터 언어 -> JIT(Just-In-Time) 컴파일 방식을 사용해 속도를 높인다.
• 초적화 : 코드실행중 자주 실행되는 패턴을 감지해 컴파일
• 브라우저 밖에서도 자바스크립트가 실행됨 => Node.js 
• 크로스 브라우징 이슈
  • 원인
    • 브라우저별 사용 현황
      

      Chrome	V8
      Firefox	SpiderMonkey
      Safari	JavaScriptCore (또는 Nitro)
      Edge (Chromium 기반 이후)	V8
      예전 IE	JScript (매우 고전적이고 비표준적)

    • 엔진마다 EXMAScript 해석, 버그, 최적화가 다름
    • HTML, CSS 그리는 방식 다름
    • 웹표준 적용 정도, 자체확장기능, 일부 브라우저만 지원하는 기능등도 있음
  • 해결
    • 되도록 표준 API를 사용한다.
    • Polyfill을 사용해 브라우저가 지원하지 않는 기능을 흉내낸다.
    • CSS Vendor Prefix : -webkit(chrome, safari), -moz(firefox)
    • Babel 사용 : transfile