Wanna be a thinker

등장 배경

초기의 자바스크립트는 규모가 작고, 기능이 단순하여 모듈의 개념이 필요없었다.

하지만 현재, 자바스크립트를 이용한 애플리케이션의 규모가 커지면서 파일을 분할할 필요가 생겼다.

분할 파일 그 자체로 모듈이며, 모듈은 대개 클래스 하나 혹은 특정 목적을 가진 복수의 함수로 구성된 라이브러리이다.

개요

JavaScript에서의 모듈이란, ES2015(ES6) 이후부터 제공하는 import / export 키워드를 통해 스크립트의 변수나 함수를 타 스크립트에서 이용할 수 있도록 기능을 공유하는 것이다.

모듈의 핵심 기능

1) '엄격 모드(use strict)'로 실행되어 올바르지 않은 문법을 사전에 검출하여 에러를 발생시킨다.

2) 모듈은 자신만의 스코프가 있어 import / export를 사용하지 않고는 기능을 주고 받을 수 없다.

3) 동일한 모듈이 여러 곳에서 사용되더라도 모듈은 최초 호출 시 단 한 번만 실행된다.
   실행 후 결과는 이 모듈을 가져가려는 모든 모듈에 내보내 진다.

4) import.meta 객체는 현재 모듈에 대한 정보를 제공한다.

   실행 환경에 따라 다른 정보를 제공한다.

   ex) 브라우저 : 현재 실행 중인 웹페이지의 URL 정보

5) HTML에 type="module" 속성을 부여한 script(이하, 모듈 스크립트)에서의 'this'는 undefined이다.

   일반 스크립트에서의 this는 전역 객체인 것과 대조된다.

브라우저의 특정 기능

1) 모듈 스크립트는 HTML 문서가 완전히 렌더링 된 후에 실행된다.

   이러한 특징 덕분에 항상 완전한 HTML 페이지를 볼 수 있고, 문서 내 요소에도 접근할 수 있다.

2) 모듈 스크립트에 async 속성을 부여하면, 모듈을 import한 직후 HTML 문서의 렌더링 완료에 관계 없이 실행된다.

3) src 속성 값이 동일한 모듈 스크립트는 중복 실행되지 않는다.

4) 외부 사이트의 모듈 스크립트를 호출하기 위해서는 외부 사이트에서 CORS 헤더(Access-Control-Allow-Origin: *)를

   제공해야 한다.

5) 브라우저 환경에서 모듈을 import할 시, URL을 지정해야 한다.

   Node.js나 번들링 툴은 별도로 해당 모듈을 찾는 방법이 존재하기 때문에 경로가 없는 모듈을 사용할 수 있다.

6) 구식 브라우저와의 호환성을 위해 nomodule 속성을 정의한 스크립트로 모듈 스크립트가 실행되지 않을 때의

   예외처리를 정의할 수 있다.

출처 :

uwostudy.tistory.com/55

ko.javascript.info/modules-intro#ref-93

개요

'스코프(Scope)'는 변수의 범위를 의미한다.

Scope의 종류

1. 전역(Global)

2. 지역(Local)

  2.1. 함수(function)

  2.2. 블록(block)

Scope의 예제

// 전역
const a = 111;

// 지역(함수)
function sayNumber() {
    const a = 1;
    console.log(a);
}

sayNumber();	// 출력 : 1

console.log(a);	// 출력 : 111

자신의 지역 내에 변수가 없는 경우 ScopeChain을 통해 해당하는 변수를 전역 스코프에서 찾는다.

// 전역
const a = 111;

// 지역(함수)
function sayNumber() {
    console.log(a);
}

sayNumber();	// 출력 : 111

기존 var의 경우, 함수 스코프를 가졌기 때문에 함수 내에서만 지역 변수가 유지되는 문제가 있었다.

하지만, ES2015(ES6)에서 let, const 키워드의 추가로 함수가 아닌 일반 블록에서도 지역변수를 선언할 수 있게 되었다.

// 전역
const a = 111;

// 지역(블록)
{
    const a = 1;
    console.log(a);	// 출력 : 1
}

console.log(a);	// 출력 : 111

출처 : medium.com/@yeon22/javascript-%EC%8A%A4%EC%BD%94%ED%94%84-scope-%EB%9E%80-bc761cba1023

■Javascript

1. 개요
- 동적으로 반응하는 웹 페이지를 만들기 위한 스크립트 언어.

2. 등장 배경
- www의 일반인 사용의 증가로 상대에 따라 다르게 반응하는 웹 페이지가 필요.
- 1995. HTML 페이지에 움직임을 주고 싶었던 NetScape사의 의뢰로 Branden Erich가 제작.
  → 웹 문서의 내용을 동적으로 변경하거나 이벤트를 적용할 수 있게 됨.

3. 등장 후 흐름
- 타 브라우저 회사에서 유사 언어를 출시, 개발자들은 각 브라우저의 호환성으로 인해 고생.
  → NetScape사는 표준화 단체인 ECMA International에 표준화를 요청, 1997.7에 표준 완성.
  → 당시, SUN사가 'JAVA'라는 이름을 상표로 등록해놓았기 때문에, 표준 언어 이름을 'ECMA Script'로 결정.

- 1997. 페이지의 DOM을 다뤄 컨텐츠, 스타일을 변화하고 요소를 보여주거나 숨기는 동적 HTML이 등장함.
- 1999. IE5에서 소개된 XMLHttpRequest API가 나와 Client측 Script를 HTTP(S)로 서버에 요청하고, 텍스트 형식으로
  데이터를 받을 수 있게 됨.

- 2001. Douglas Crockford가 텍스트 형식으로 데이터를 저장하는 자바스크립트 문법을 'JSON'이라고 명명하여 문서로 만들음.
- 2004. 규모가 큰 자바스크립트 프로그래밍을 위한 프레임워크인 Dojo Toolkit이 등장함.
- 2005. Ajax를 이용해 구글이 구글Maps를 소개, 이후 Ajax의 인기가 상승하고, XML 대신 JSON의 사용이 증가함.

- 2006. 크로스 브라우징을 위해 고생하는 개발자를 위해 jQuery가 등장하여 브라우저의 차이를 넘어선 추상화와
  DOM을 손쉽게 쿼리 및 수정하기 위한 API를 제공.
  * jQuery는 같은 코드로 여러 브라우저에서 같은 동작을 하게 해주고, CSS 형식의 선택자로 

    DOM을 쉽게 선택, 제어하는 방법을 제공.

- 2008. V8이라는 빠른 자바스크립트 엔진이 탑재된 구글 크롬이 등장하여 자바스크립트가 느리다는 인식을 바꿈.

- 2009. Ryan Dahl에 의해 Node.js가 개발되어 자바스크립트의 영역을 서버 사이드로 넓힐 수 있게 됨.

  클라이언트, 서버 둘 다 자바스크립트로 프로그래밍 할 수 있었기 때문에 풀스택 개발자가 증가함.

- 이후, 클라이언트 사이드에도 MVC 패턴을 활용하려는 움직임이 증가하여 여러 자바스크립트 프레임워크가 탄생함.

  Backbone.js, Ember.js, javascriptMVC, knockout.js, AngularJS

  * AngularJS는 구글 팀에 의해 등장하여 MVW(Model-View-Whatever)를 표방하고

    View와 Model간 양방향 바인딩, SPA, Promise/A 스펙 비동기를 지원함.

출처 : edu.goorm.io/learn/lecture/557/%ED%95%9C-%EB%88%88%EC%97%90-%EB%81%9D%EB%82%B4%EB%8A%94-node-js/lesson/174353/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EC%97%AD%EC%82%AC