희연's 개발 일기장

var const let 차이

var

- 중복 선언이 가능하다.

- var는 function scope 생성

let, const

- ES6에 도입

- const는 재할당 불가능

1) 중복 선언이 되지 않는다.

2) Block level Scope

- 블록 안에서만 사용 가능하다.

3) let을 이용하면 호이스팅이 되지 않는 것 처럼 동작한다.

4) let으로 변수를 선언하면 변수를 일시적으로 사용할 수 없는 구간인 일시적 데드존 TDZ(Temporal Dead Zone)이 생긴다.

Primitive Value의 불변한(immutable) 특성

- var scope를 선언하고, scope에 80을 할당하면 아래 그림과 같이 생각할 수 있다.

- 하지만 primitive value는 불변의 특성을 가지고 있기 때문에, 값이 바뀌는 것이 아니라 주소 값이 바뀐다.

- 그리고 원래 사용되지 않는 주소 값들은 가비지컬렉터를 사용해서 메모리를 할당 해제(가비지 컬렉션 GC)한다.

템플릿 문자열

- 백틱(`)을 사용해서 새로운 문자열 생성 가능

var string = num1 + ' + ' + num2 + ' = ' + result;

const string = `${num1} + ${num2} = ${result}`;

메모리(Memory)

- 데이터를 저장할 수 있는 메모리 셀(Memory Cell)의 집합체

변수(Variable)

- 애플리케이션서 값에 상징적인 이름으로 변수를 사용한다.

- 변수명 = 식별자

식별자(Identifier)

- 코드 내의 변수, 함수 혹은 속성을 식별하는 문자열

- 식별자가 실제로 갖고 있는 값은 메모리 값이다.

- Naming rule : $, - 사용 가능, 숫자 시작 불가능, 특수 문자 불가능

- CPU(Central Processing Unit) 중앙 처리 장치 : 연산에 사용

- memory 주소를 알아야 variable을 이용해서 해당 메모리 사용 가능

- 메모리에 대한 직접 접근을 막고있기 때문에 변수 선언을 해주어야 한다.

변수 생성 방법 

- ES6 이전

- function level scope 함수 기준 스코프

(1) var 

- ES6 이후

- block level scope 블록 기준 스코프

(1) let

(2) const

ex. var score;

scope = 80;

scope = 100;

실행 컨텍스트(Execution Context)

- 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념

- 코드를 실행하기 위해서는 해당 코드에 대한 정보를 가지고 있어야 한다.

ex. score가 0x2763을 가르킨다는 것은 어떻게 알 수 있는지??

-> 실행 컨텍스트가 정보를 가지고 있다.

- 전역 컨텍스트(Global Context)

- 함수 컨텍스트(Functional Context)

undefined

- primitive value(원시 값)중 하나

- JS Engine에 의해 사용된다.

- 개발자가 직접 사용하는 것은 지양한다.

- 변수를 초기화할 때 사용한다.

변수 호이스팅(Variable hoisting)

- 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위(Scope)의 최상단에 선언하는 것

- 자바 스크립트의 특징

- var 변수 선언과 함수 선언문에만 호이스팅이 일어난다. (function scope)

- 자바 스크립트는 식별자를 먼저 확인한다.

- 변수 선언을 runtime 이전에 수행하고, 함수 위로 끌어올려준다.

- 자바 스크립트에 나오는 모든 식별자들은 호이스팅된다.

function getX() {
  console.log(x); // undefined
  var x = 100; // var x 호이스트
  console.log(x); // 100
}
getX();


foo( );
var foo = function( ) {
  console.log(‘hello’);
};
// type error

• 1. 함수 선언문은 항상 자바스크립트 엔진 구동시 가장 최우선으로 해석되어 호이스팅된다.
  • 함수 선언을 호이스팅해서 global 객체에 등록시키기 때문에 출력
• 2. 함수 표현식은 런타임 과정에서 이루어지기 때문에 호이스팅 X
  • 함수 리터럴을 할당하기 때문에 런타임 환경에서 type error

타입스크립트(TypeScript)
- 2012년 MS에서 구현한 JavaScript의 슈퍼셋(Superset) 프로그래밍 언어 // ECMAScript의 super.set

- 클래스 기반 객체지향언어

- 확장자 .ts

- 컴파일의 결과물로 JavaScript 코드 출력이라고 할 수 있지만, 컴파일은 "기계어로 번역하는 과정"을 뜻한다.

- TypeScript -> Compile(X) Transpile(변환) -> JavaScript

- JavaScript에는 추상 클래스가 없다. TypeScript를 가지고 추상 클래스로 구현하면 JavaScript에서 같은 기능을 내줄 수 있다.

- NPM이 필요하다. -> Node.js 설치 필요

타입스크립트의 장점

- 정적 타입을 명시할 수 있다.

- 생산성 향상 : 자바스크립트에 비해 변수나 함수 등의 목적을 더욱 명확하게 전달할 수 있다.

Node.js

- 오픈소스 JavaScript 엔진인 크롬 V8에 비동기 이벤트 처리 라이브러리인 libuv를 결합한 플랫폼

- Javascript으로 브라우저 밖에서 서버를 구축하는 등의 코드를 실행할 수 있게 해주는 런타임 환경

- NPM을 통해서 Node.js의 패키지를 관리할 수 있다.

- Transpiler : TypeScript

- 자동화 도구 : Build, Test, Deploy를 자동화 -> gulp

- 모듈화 : webpack

- 프레임워크 : Angular, React, Vue.js

- V8 엔진 사용(Chrome)

NPM(Node Package Manager)

- Node.js의 패키지를 관리해주는 도구

- Node.js 설치시 자동으로 설치된다.

- TypeScript를 사용할 때 필요하다.

자바스크립트(Javascript)

- 객체기반의 스크립트 프로그래밍 언어

- 웹 브라우저 내에서 주로 사용

- 웹 브라우저로만 동작하는 것이 아닌, 서버로도 이용이 가능하다. -> Host API 필요

- 웹에서 사용 가능한 언어를 만들기 위해 프로토타입 기반의 함수형 언어로 만든 언어

- 모카(mocha) -> 라이브스크립트(LiveScript) -> 자바스크립트(Javascript)

-> 표준화 진행 -> 비영리표준기구(ECMA) -> ECMAScript 이름으로 표준화

JavaScript와 ECMAScript는 같지 않다

- JavaScript = ECMAScript + Client Side Web API(ex.DOM) [FRONT]

                                              + Host API                                   [SERVER]

ECMAScript

- ECMAScript 2015(버전) = ES6(배포판)

- ES6을 쓰는 이유? : 5에서 6으로 많은 변화가 있었기 때문이다. 그 이후로는 언어가 변한 것 보다는 기능의 추가 정도가 이루어졌다.

자바스크립트의 단점 -> fragmentation 현상 

(1) 언어의 모호성

(2) 구현의 어려움

제이쿼리(jQuery)

- 오픈 소스 기반의 자바스크립트 라이브러리

- 브라우저와 상관없이 동일하게 동작시킬 수 있다는 장점으로, JavasScript가 인기가 많아진 이유중 하나이다.

- 문제점 : 프레임워크가 아닌, 라이브러리라는 한계 -> 라이브러리를 통해 유지 보수하기 어렵다는 문제점

HTML(HyperText Markup Language) 하이퍼텍스트 마크업 언어

- 프로그래밍 언어 X

- 웹페이지가 어떻게 구조화되어 있는지 브라우저로 알 수 있게 해주는 마크업 언어

- W3C(World Wide Web Consortium)에서 표준 제정

- HTML의 한계인 정형성과 확장성 문제로, 한동안 HTML4.01에서 업데이트를 하지 않았다.

(1) 정형성 : 정답이 없기 때문에 정형성이 없고, 올바르지 않은 코드도 실행이 되기 때문에 유지 보수의 문제점 발생

(2) 확장성 : 정해진 태그로 확장하기 힘들다는 단점

HTML의 확장성과 정형성 문제 해결

(1) HTML + XML -> XHTML1.0

(2) HTML 보완 -> HTML5 

- HTML5 2014년 표준화

HTML5

- HTML의 새로운 버전으로 Client Side Technology 기술의 중심이 되는 마크업 언어

- JavaScript의 인기가 많아지기 시작했다.