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

개요

ESLint란 ES(EcmaScript 즉, JavaScript)와 Lint(에러가 있는 코드에 표시를 달아놓는 것)의 합성어이다.

사용자가 정의한대로 코드를 점검, 에러가 있으면 표시해주고 또한 코딩스타일을 정할 수 있는 도구이다.

장점

1. 문법 에러를 잡아준다.

2. 코딩스타일을 정해 팀 단위로 작업해도 한 사람이 코드를 작성한 듯한 결과를 낸다.

3. 다양한 플러그인을 사용할 수 있어 손쉽게 다른 회사나 사람의 설정을 도입할 수 있는 확장성이 있다.

출처 :

velog.io/@jiwon/ESlint

www.zerocho.com/category/JavaScript/post/583231719a87ec001834a0f2

용어

컴파일(Compile) : 인간이 작성한 소스코드를 기계가 이해할 수 있는 머신코드로 변환하는 것이다.

트랜스파일(Transpile) : 다른 실행 환경에서도 동작하도록 같은 언어를 유지한 채 소스 코드의 형태만 바꾸는 것이다.

개요

JavaScript의 트랜스파일러(Transpiler)이다. 아래의 변환 대상으로 작성한 JavaScript 코드를 ES5 이하의 문법으로 변경하여, 최신 문법을 지원하는 환경과 그렇지 않은 환경 양 쪽에서 잘 동작하도록 해준다.

사용하는 이유

JavaScript 언어의 문법은 빠르게 진화하지만 정작 실행 환경은 이를 받쳐주지 못하는 경우가 많다.

실행 환경인 브라우저의 경우 종류가 다양하고 어떤 브라우저가 어떤 문법을 지원하는지 일일이 파악하기가 힘들 정도이고, 노드(NodeJS)의 경우에도 버젼별로 지원하는 언어나 문법이 다르다.

개발자가 JavaScript ES6 이상의 최신 문법으로 작성한 코드는 일부 실행 환경에서 작동하지 않기 때문에 모든 환경에서 돌아가도록 보수적으로 예전의 ES5 이하 방식으로 코드를 작성해야 하는 문제를 겪는다.

변환 대상

ES6 이상의 최신 문법, TypeScript나 JSX로 작성된 코드 등

특징

Babel은 단독으로 사용되기도 하지만 규모가 큰 프로젝트에서는 Webpack이나 Rollup같은 번들러(bundler)와 함께 사용되거나 프레임워크의 일부로 포함되기도 한다.

출처 : www.daleseo.com/js-babel/

Ajax의 등장 배경 : teach9186.tistory.com/42

■개요

- 용어 : Ajax(Asynchronous Javascript And XML)

- 비동기적인 정보 교환 기법이다.

- XML이라고 명시되어 있지만, JSON이나 일반 텍스트 등 다른 데이터 오브젝트도 사용할 수 있다.

- 주로 JSON 형식이 많이 사용된다.

■원리

1. 브라우저가 사이트에 접속하면, 서버는 사이트의 기본 구조를 담은 '템플릿'을 전달한다.

2. 브라우저는 수신 받은 템플릿 HTML과 CSS를 해석해 화면의 기본 모양을 그린다.

3. 계속해서 서버는 데이터의 요청 방식과 가공 방식을 기술한 자바스크립트 파일을 전달한다.

4. 브라우저는 자바스크립트 파일을 해석하여 파일에 기술된 방식대로 서버에 추가 데이터를 요청한다.

5. 서버는 순수 데이터를 응답으로 되돌려 준다.

6. 브라우저는 수신한 데이터를 해석하여 데이터 가공 방식에 따라 템플릿의 적절한 위치에

  데이터의 삽입, 변경, 삭제를 수행한다.

■단점

- Ajax는 '동적 페이지 렌더링'을 하기 때문에 자바스크립트를 해석하지 못하는 검색엔진에서는 검색되지 않는다.

- 레이아웃이 복잡한 사이트는 웹 브라우저가 렌더링을 하는 데 힘겨워 할 수 있다.

- Ajax는 최소 2번의 데이터 요청(일반적으로 4회 이상, HTML, CSS, JS 로딩 후 Ajax call)을 해야 해서

  필연적으로 속도 저하가 발생한다.

   -> 이런 경우, '서버 사이드 렌더링'이라고 하여 의도적으로 옛방식 그대로 서버가 모든 페이지를 그려 전달함.

- 자바스크립트를 반드시 사용해야 한다. 자바스크립트를 끄면 Ajax 기반 사이트는 화면의 일부만 그려진다.

   -> 스크립팅 기능이 제한되는 특수 목적 기기나 자바스크립트 엔진을 돌릴 여건이 안되는

      초저성능 임베디드 기기에서는 문제가 발생할 수 있다.

출처 : namu.wiki/w/AJAX

개요

웹 페이지의 외형, 데이터 등을 사용자와의 상호작용을 통해 동적으로 변경하기 위한 스크립트 언어

특징

- JavaScript는 인터프리트 언어로 브라우저에 의해 해석 / 실행된다.

장점

- 운영체제나 플랫폼에 상관 없이 동작

- 높은 확장성

출처 : coding-factory.tistory.com/193