Peep

자바스크립트 전역 스코프에 정의된 것은 코드 내의 어디서든지 접근이 가능하다는 것이 문제가 되고는 합니다.

이때 외부에 공유되면 안되거나 충돌날 위험이 있는 경우 즉시 실행 함수를 통해 해결하고는 합니다.

즉시 실행 함수(IIFE)

단순하게 함수와의 차이를 보자면 즉시 실행되는지 아닌지의 차이입니다.

함수표현식은 함수를 정의하고, 변수에 함수를 저장하고 실행하는 일련의 과정이 있습니다.

하지만 즉시실행함수는 이러한 과정없이 즉시 실행됩니다.

문법의 차이는 단순히 함수를 괄호 "()"로 랩핑한다는 것입니다.

형태

(function() {
    console.log('즉시 실행 함수'); 
}());

var now = (function () { 
    console.log('즉시 실행 함수')    
})();

익명, 기명 즉시 실행 함수

(function () { 
	console.log('익명 즉시 실행 함수'); 
}());

(function now() { 
	console.log('기명 즉시 실행 함수'); 
}());

사용이유

자바스크립트의 모듈 패턴에서 사용할 수 있습니다.

전역 스코프에 정의하는 것이 아닌 즉시실행함수의 스코프에서 실행컨텍스트가 활성화됩니다.

이렇게되면 유효범위가 다른 곳에서 접근하려고 할때 은닉해주는 성질을 지닐 수 있습니다. (캡슐화)

물론 아예 접근이 안되는 것은 아닙니다. 접근하는 방법은 있습니다.

즉..

즉시실행함수로 일반적인 유효범위를 설정하는 언어에서와 같이 private와 public등의 캡슐화를 사용할 수 있습니다.

캡슐화를 해야하는 이유는 무엇일까요? 당연히 충돌을 방지하기 위해서입니다.

즉시실행함수는 플러그인이나 라이브러리에서 많이 사용됩니다.

예시

jQuery 라이브러리에서 $라는 전역변수를 사용하고 있는데, 또 다른 라이브러리를 도입하게되었을 경우...

추가 된 라이브러리도 $라는 전역변수가 있으면 충돌이 생기게됩니다.

이때 

즉시 실행 함수를 사용하여 $ 전역 변수의 충돌을 피할 수 있습니다.

(fucntion($) {
 	//.....
})(jQuery); // jQuery 인자로 전달

참고 

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/function

이터러블 (Iterable)

순회가능한 객체를 말합니다. 

순회 가능한 객체는 Symbol.iterator 심볼 속성을 가지고 있으며 이터레이터 객체를 반환하는 객체를 말합니다.

이러한 것을 이터러블 프로토콜이라고 하며 이터러블 객체라고 합니다.

이터레이터 (Iterator)

이터러블 메소드로 반환하는 객체입니다.

next 메소드를 구현하고 있으며 value, done을 반환하는 객체입니다.

반환되는 IteratorResult는 {done: boolean, value: any} 형태의 단순한 객체입니다.

next 메소드를 통해 모든 값을 돌고 나면 done이 true로 나오며 끝납니다.

한번 끝난 이터레이터는 다시 돌아가지 않으며 value가 undefined로 리턴합니다

이러한 것을 이터레이터 프로토콜이라고 합니다.

for of 루프는 순회 시작 전 [Symbol.iterator]() 메소드를 호출하여 이터레이터 객체를 얻습니다.

그 후에 순차적으로 next 메소드를 호출하며 하나씩 순회합니다.

보통 이터러블 프로토콜과 이터레이터 프로토콜을 하나의 객체에 모두 구현하는 것이 일반적입니다.

// 영원히 0을 반환하는 무한 이터레이터 예시
var zeroesForeverIterator = {
    [Symbol.iterator]: function () {
        return this;
    },
    next: function () {
        return {done: false, value: 0};
    }
};

사용자 이터레이터 객체 생성

이터러블 프로토콜은 obj[Symbol.iterator]: Function => Iterator로 표현할 수 있습니다.

그 후 이터레이터 프로토콜을 따라 value, done가 들어있는 오브젝트를 반환하는 next 메소드를 가진 객체를 반환하면 됩니다. 

const iterable1 = {};

iterable1[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
};

console.log([...iterable1]); // Array [1, 2, 3]

제너레이터 (Generator)  

이터러블, 이터레이터 객체를 만드는 손 쉬운 방법입니다.

동작은 function* 문법을 사용해서 작성하며 next를 통해 실행합니다.

next 메소드를 통해 실행이 되며 yield 문을 만나면 정지합니다. 

next 메소드를 호출함으로써 값을 소비할 수 있습니다. 

function* 문법을 통해 함수가 생성되고 최초로 호출될때 함수 내부의 어떠한 코드도 실행되지 않습니다.

이때 생성자 함수가 반환되는데 이것을 제너레이터 함수라합니다. 그 후 값을 소비하며 함수로 부터 반환되는 객체를 제너레이터라고 합니다.

즉, 제너레이터 객체는 이터레이터 객체입니다. 

(이터레이터 프로토콜을 따르고 있습니다.)

예시

값이 더이상 업을 경우 value: undefined, done: true가 반환된 것이 확인됩니다.

function* generatorFunc() {
  yield 1;
  yield 2;
  yield 3;
}

const it = generatorFunc();

console.log(it.next()); // { value: 1, done: false }
console.log(it.next()); // { value: 2, done: false }
console.log(it.next()); // { value: 3, done: false }
console.log(it.next()); // { value: undefined, done: true }

제너레이터 적극 활용한 예로 redux-saga가 있습니다.

참고 및 정의 출처

• gist.github.com/qodot/ecf8d90ce291196817f8cf6117036997
• developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Iteration_protocols#Builtin_iterables
• developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Iterators_and_Generators
• uzihoon.com/post/f27b7310-64e0-11ea-84dc-878832775ccf
• meetup.toast.com/posts/140
• gist.github.com/qodot/ecf8d90ce291196817f8cf6117036997

자바스크립트는 단일 스레드입니다.

단일 스레드라는 것은 하나의 스택이라는 뜻으로 동시에 하나의 일만 가능하다는 것을 의미합니다.

하지만,

자바스크립트가 사용되는 환경을 보면 비동기 작업을 통해 여러개를 동시에 처리하고 있는것 같습니다. 

멀티 스레드라고 착각할 수도 있을 것 같은데,

어떻게? 이렇게 동작할 수 있는지를 알아보도록 하겠습니다.

자바스크립트 엔진

메모리 힙(Memory Heap)과 콜 스택(Call Stack)으로 이루어져 있습니다.

• 메모리 힙
  • 구조화되지 않은 넓은 메모리 영역을 말한다.
  • 객체들이 할당된다
    • 프로그램에 선언한 변수, 함수 등
• 콜 스택
  • 함수 호출은 프레임들의 스택을 형성
  • 먼저 들어온 것이 나중에 나가는 선입 후출

자바스크립트 엔진에는 설명하려는 이벤트 루프가 등장하지 않는데, 이유는 간단합니다.

비동기 작업에서 필요한 중요한 요소인 이벤트루프, 콜백 큐등은 자바스크립트를 구동시키는 환경(=브라우저, 노드)이 담당하고 있기 때문입니다.

브라우저 환경

• Web APIs
  • 브라우저에서 제공하는 API들, 웹 브라우저에 내장되어 있다
    • DOM, Ajax, Timeout 등..
    • 브라우저 및 주변 컴퓨터 환경의 데이터를 노출하고 이를 사용하여 유용한 복잡한 작업을 수행 할 수 있다
• Callback Queue
  • 처리할 메시지 목록인 메시지 대기열
  • 먼저 들어온 것이 먼저 나가는 선입선출
    • Task Queue
      • ex: setTimeout
    • Micro Task Queue (= Job Queue) 
      • ex: Promise의 .then()
    • Animation Frames
      • ex: requestAnimationFrame API
• Event Loop
  • 콜 스택과 콜백 큐를 감시한다
  • 콜 스택이 비어있으면 콜백 큐에서 태스크를 가지고 와서 콜 스택에 추가하는 행동을 한다

+ Event Table: 특정 이벤트가 발생했을때 어떤 콜백함수가 호출되어야하는지 알고 있는 자료구조

크롬 기준

Micro Task Queue > Animation Frames > Task Queue 순으로 실행됩니다.

그 외에 Queue들도 설명하는 블로그 글도 있기는 하나 정확한 정보는 못 찾았다고 합니다.

도움이 되는 글이라 생각하니 방문해서 읽어보세요~

velog.io/@thms200/Event-Loop-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84#animation-frames

여튼 동작을 예로 들면.. 

ES6의 Promise의 then이 Micro Task Queue로 들어가며 setTimeout 함수는 Task Queue로 들어간다.

이때 Task Queue 대기열에 Task가 있어도 Micro Task Queue가 먼저 이벤트 루프에 의해 콜 스택으로 이동된다.

Micro Task Queue와 Job Queue는 같은 것 일까?

공부하던 중에 논란이 있음을 인지했고 찾아본 두 블로그 글을 가져와봅니다.

정확한 설명은 링크를 통해 들어가서 확인해보세요^^

ECMA에선 PromiseJobs라는 내부 큐(internal queue)를 명시합니다.

V8 엔진에선 이를 '마이크로태스크 큐(microtask queue)'라고 부르기 때문에 이 용어가 좀 더 선호되고 있습니다.

- ko.javascript.info/microtask-queue

브라우저마다 프라미스의 호출 순서가 다른 문제를 지적했다.

프라미스가 ECMAScript에 정의되어 있는 반면에 마이크로 태스크는 HTML 스펙이 정의되어 있는데,

둘의 연관관계가 명확하지 않기 때문이다.

ES6부터 프라미스를 위해 잡 큐(Job Queue)라는 항목이 추가되었지만, HTML 스펙의 마이크로 태크스와는 별도의 개념이다.

프라미스A+ 스펙문서의 Note를 보면 구현 시에 일반(macro) 태스크나 마이크로 태스크 둘 다 사용할 수 있다고 적혀 있다.

실제로 프라미스가 처음 자바스크립트에 도입되는 시점에는 프라미스를 어떤 순서로 실행할 것인가에 대한 논의가 꽤 있었던 것으로 보인다.

하지만 앞서 언급한 것처럼 현재는 프라미스를 마이크로 태스크라고 정의해도 무리가 없을 것 같다.

- meetup.toast.com/posts/89

참고

ko.javascript.info/microtask-queue

meetup.toast.com/posts/89

개발일때에는 development, 배포일때에는 production로 process.env.NODE_ENV를 구분해서 webpack의 설정을 진행해야하는 경우들이 있다.

예를 들면... 보안에 안좋아서 옵션을 달리해야한다던가..?

맥에서는 명령어만 삽입해도 진행이 되는데, windows에서는 라이브러리를 사용해줘야한다.

cross-env는 이때 운영체제나 플랫폼에 종속되지 않고 동일한 방법으로 env 변수를 주입해주는 패키지이다.

이것을 사용하면 동적으로 process.env(환경 변수)를 변경할 수 있다.

설치

npm i cross-env

사용할 커맨드 앞에 cross-env 를 붙여주기만 하면 된다.

package.json

사용 전 

"scripts": {
    "dev": "next -p 3060",
    "build": "ANALYZE=true NODE_ENV=production next build",
 },

사용 후

"scripts": {
    "dev": "next -p 3060",
    "build": "cross-env ANALYZE=true NODE_ENV=production next build",
 },

이렇게 간단하게 해결해주는 패키지이기 때문에 많은 사람들이 사용하고,

그렇기 때문에 비슷한 이름으로 해서 사용자를 헷갈리게 하여 설치하는 순간 정보를 빼가는 해커들도 있었다.

보안뉴스

https://www.boannews.com/media/view.asp?idx=56184&skind=O

해커가 crossenv 라는 패키지를 배포하였고, 개발자가 install시 실수로 '-'를 빼고 설치하게되면 .env 파일을 가져가는 사건도 있었다.

.env에는 보안적인 정보들이 담겨있으니...

npm 블로그

https://blog.npmjs.org/post/163723642530/crossenv-malware-on-the-npm-registry.html

오늘도 이렇게 좋은 패키지를 알아간다ㅎㅎ