자바스크립트란?

자바스크립트로 작성한 프로그램: 스크립트(script)
스크립트는 웹 페이지의 HTML 안에 작성이 가능, 웹 페이지를 불러올 때 스크립트가 자동으로 실행
자바스크립트는 컴파일 없이 보통의 문자 형태로 작성, 실행이 가능 = 인터프리터(interpreter) 언어

interpreter vs compiler
프로그램 언어를 해석하고 실행시키는 대표적인 방법 2가지: Compile, Interpret
Compile 컴파일 : 프로그래밍 언어를 런타임 이전에 기계어로 해석하는 작업 방식
런타임 이전에 어셈블리 언어로 변환하기 때문에 구동 시간이 오래걸리지만 구동된 이후에 하나의 패키지로 매우 빠르게 작동됨. 대표적인 언어 : C / C++, Java 등
Interpret 인터프리트 : 런타임 이후에 Row 단위로 해석하여 프로그램을 구동시키는 방식
컴파일 방식에 비해 낮은 퍼포먼스, 그러나 런타임에 실시간 디버깅 및 코드 수정이 가능
인터프리트 언어는 해석을 위한 Virtual Machine 을 두고 머신 위에서 인터프리트를 수행하게 됨. 대표적인 언어 : Javascript(JVM 머신 또는 Analyzer 머신)

자바스크립트는 브라우저뿐 아니라 서버에서도 실행 가능하며 그 외에도 자바스크립트 엔진이 들어있는 모든 디바이스에서 동작이 가능
브라우저ㄴ에는 자바스크립트 가상 머신이 들어가 있으며 대표적인 예는 아래에

• V8 Chrome, Opera 사용
• SpiderMonkey Firefox 사용

  엔진은 어떻게 동작하나요?

  1. 엔진이 스크립트를 읽는다 (파싱)
  2. 읽어들인 스크립트를 기계어로 전환한다 (컴파일)
  3. 기계어로 전환된 코드가 실행된다

브라우저가 보안 상 할 수 없게 막아논 일 중 대표적인 예

Same Origin Policy (동일 출처 정책)

브라우저는 같은 도메인, 프로토콜, 포트여야만 해당 페이지에 접근이 가능하다.
어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한한다.
타 사이트나 도메인에서 데이터를 받아오는 것은 원칙상 불가능하다.
Same Origin Policy 는 사용자의 보안을 위해 만들어졌다. A에서 받아온 페이지가 B에서 받아온 페이지 상의 정보에 접근해 중요한 개인정보를 훔치는 걸 막기 위함

CORS (Corss-Origin Resource Sharing)

교차 출처 리소스 공유 CORS는 HTTP 헤더를 사용하여 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제
Same Origin 정책을 지키기 어려운 경우(https://a.com 에서 https://b.com/flower.jpg 에 접근하거나 https://b.com/data.json에 사용 요청을 하는 경우)가 많기 때문에 리소스의 Origin이 다를 때 Cross-Origin HTTP 요청을 실행하게 된다.

보안상의 이유로 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한 (스크립트에서 보내는 요청 헤더는 언제든 수정이 가능하기 때문?)
Cross Origin 리소스를 불러오려면 그 Origin 에서 올바른 CORS 헤더를 포함한 응답을 반환해야 함 (서버에서 response header에 cors 허용을 함께 보내줘야 함)

자바스크립트를 위한 언어들

브라우저에서 실행도기 전 자바스크립트로 트랜스파일(transpile, 변환) 할 수 있는 언어들

• CoffeeScript: javascript's syntactic suger
• TypeScfript: 타입 체크가 없는 자바스크립트를 위한 데이터 타이핑을 집중해 만든 언어
• Flow: 타입을 강조하는 언어, made by facebook
• Dart: 크로스플랫폼 앱 프레임워크인 Flutter가 사용하는 언어, made by Google

inline script vs external script

인라인 스크립트

• 스크립트 코드가 동일한 페이지에 로드되기 때문에 다른 요청이 필요 없음, HTTP 요청 수가 줄어 성능이 좋음
  외부 스크립트
• 외부 스크립트 파일이 다운로드되면 브라우저는 이를 캐시에 저장하므로 다른 페이지에서 참조하는 경우 추가 다운로드가 필요하지 않음, 다운로드 시간이 단축

  HTML 파일은 캐싱이 안되나요?
  HTML 코드도 캐싱을 할 수 있으나 스크립트로 HTML 코드는 동적으로 변경되는 경우가 많기 때문에 보통 정적인 코드인 javascript, css, 또는 정적인 파일을 캐싱한다.

캐시 Cache
캐시(고속완충기)는 데이터나 값을 미리 복사해놓은 임시 저장소이다
캐시에 데이터를 미리 복사해 놓으면 계산이나 접근시간 없이 더 빠른 속도로 데이터에 접근 가능

브라우저 캐시, 웹 캐시
서버 지연을 줄이기 위해 웹 페이징, 이미지 등을 임시 저장하기 위한 정보 기술
동일한 서버에 다시 접근할 때 프록시 서버의 웹 캐시에 저장된 정보를 불러오므로 더 빠르게 열람이 가능
브라우저 캐시는 웹 캐시의 일종이며 일반적으로 static assets을 캐싱한다

다른 형을 가진 값 간의 비교

0 == "0" //true
0 === "0" //false
Boolean(0) //false
Boolean("0") //true

동등 비교 연산자 == 는 0과 false를 구별하지 못함
동등연산자는 형이 다른 피연산자를 비교할 때 피연산자를 숫자형으로 바꾸기 때문에 0도 false가 되고 따라서 0 == false 는 true가 나온다
그러나 일치 연산자 === 를 사용하면 형 변환 없이 값을 비교할 수 있다
일치연산사즌 엄격한 동등연산자라 자료형의 동등 여부까지 검사하기 때문에 형이 다를 경우 ===는 즉시 false를 반환한다

논리연산자

OR ||
첫번째 truthy 를 찾는 OR
가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가
각 피연산자를 불린형으로 변호나하며 변환 후 그 값이 true면 연산을 멈추고 해당 피연산자의 변환전 원래 값을 반환
AND &&
첫번째 falsy를 찾는 AND
각 피연산자를 불린형으로 변호나하며 변환 후 그 값이 false이면 연산을 멈추고 해당 피연산자의 변환전 원래 값을 반환

단락평가 short circuit evaluation

OR : truthy를 만나면 나머지 값은 더이상 평가하지 않는 것을 단락평가라 부른다

true || alert("not printed");
false || alert("printed");

&& 의 우선순위가 || 보다 높습니다

폴리필 polyfill

트랜스파일러는 명세서에 추가된 새로운 문법이나 내장함수를 사용한 코드를 구 표준을 준수하는 코드로 변경해준다
이렇게 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나 새롭게 구현한 함수의 스크립트를 폴리필(polyfill) 이라 부른다

바벨

바벨(Babel)은 트랜스파일러(transpiler)로 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 바꿔준다