모듈의 평가

• 모듈을 사용하는 쪽에서 모듈을 로드하는 것으로 평가한다고 합니다.
• 여러 소스코드에서 하나의 모듈을 여러번 평가해도 모듈을 한번만 평가됩니다.
• 모듈을 평가하는 순간 해당 모듈내 모든 소스코드가 실행되며, 함수의 실행 및 변수 할당등이 실행됩니다.

  module.js

  // 해당 부분은 여러 소스코드에서 여러번 불러와도 한번만 출력됩니다.
  console.log('foo')

모듈 내보내기 / 불러오기

• 소스코드에서 다른 모듈에서 정의된 리소스(변수, 함수 등)에 접근하기 위해서는 해당 모듈에서 다른 소스코드에서 사용할 수 있도록 리소스를 내보내기 해줘야 합니다.
• 오직 모듈에서 내보내기로 지정된 리소스만 다른 소스코드에서 접근이 가능합니다.

모듈 시스템

1. commonjs

• 서버사이드 어플리케이션(nodejs) 환경에서도 모듈을 로드할 수 있게 하는 방식입니다.
• require 키워드를 사용하여 모듈을 내보하며 module.exports 혹은 exports 키워드를 사용하여 모듈을 불러옵니다.
• ES6 방식이 점점 늘어나는 추세지만 아직까지 일부 실행환경에서는 ES6 모듈 방식을 지원하지 않는 경우가 많습니다.

commonjs 모듈 내보내고 불러오기

• module.exports 혹은 exports 키워드를 사용하여 모듈을 내보냅니다.
• require 키워드를 사용하여 지정된 모듈을 불러오며, 이는 로드한 모듈에서 내보내기된 리소스들을 object 형식으로 반환합니다.

exports vs module.exports

• exports: module.exports 의 숏컷 버전으로 사용하며, 실질적으로 module.exports를 가리킵니다.
• 참조 방향은 다음과 같습니다.

exports -> module.exports -> {}

• 실제로 exports 와 moduel.exports 를 출력해보면 빈 object가 출력됩니다.

console.log(module.exports)
console.log(exports)

// 출력결과
{}
{}

• exports 는 module.exports 를 call by reference로 참조합니다.
• 즉, exports의 값을 수정하면, module.exports 의 값이 변하게 되지만, module.exports 의 값을 수정해도 exports 의 값은 변하지 않습니다.

let foo = 'foo';

module.exports = { 'foo': foo };
console.log(module.exports)
console.log(exports)

// 출력 결과
{ foo: 'foo' }
{}

let foo = 'foo';

exports.foo = foo;
console.log(module.exports)
console.log(exports)

// 출력 결과
{ foo: 'foo' }
{ foo: 'foo' }

• 다만, 내보내기시 최종적으로 리턴되는건 module.exports 입니다.

module.js

let foo = 'foo';

module.exports = { bar: 'bar' }
exports.foo = foo;

main.js

const m = require('./module');
console.log(m);

// 출력 결과
{ bar: 'bar' }

• 주의할 점으로 exports 를 직접 수정하면 exports 가 가리키는 module.exports가 수정되기 때문에 직접 수정하지 않습니다다.

• 따라서 다음의 상황에 따라 둘의 사용을 구분해서 사용한다

여러개의 객체를 각각 내보내는 경우 exports 를 사용한다.

하나의 객체를 내보내는 경우 module.exports 를 사용한다.

불러오기한 객체의 값을 수정한다면

• 모듈에서 내보내기된 리소스들은 require 를 통해 반환된다고 했습니다.
• 이는 내보내기된 리소스들은 사실상 해당 값 자체가 반환되는게 아니라 복사된 값이 반환된다고 볼 수 있습니다.

module.js

let foo = 'foo';

exports.foo = foo;

console.log(`module.exports in module.js: ${JSON.stringify(module.exports)}`);
console.log(`exports in module.js: ${JSON.stringify(exports)}`);

setTimeout(() => {
    console.log(`foo in module.js: ${foo}`);
}, 1000);

main.js

const m = require('./module');

console.log(`before change: ${JSON.stringify(m)}`);

m.foo = 'testing';
console.log(`after change: ${JSON.stringify(m)}`);

• foo 라는 변수를 정의하여 module.js 에서 내보내기 합니다.
• 그리고 1초 뒤에 foo를 출력합니다. 이는 main.js 에서 모듈을 평가하고 변수를 변경하는 시간을 기다리고 나서 출력하기 위함입니다.
• 그리고 main.js 에서는 모듈을 로드하고 불러오기한 변수를 수정합니다.
• 출력 결과는 다음과 같습니다.

• export 와 module.exports에는 foo 라는 이름으로 지정된 변수 foo가 내보내기로 지정됩니다.
• 이후 main.js 에서 foo 변수를 변경하면 main.js 에서는 변경된 값이 출력되지만, 원본 모듈에서는 변경되기 이전의 값이 출력되는 것을 볼 수 있습니다.
• 즉, 불러오기한 값은 내보내기된 값과 다른 값이며, 불러오기 하는 과정에서 해당 값이 복사되어 불러오기 된다는 것을 생각할 수 있습니다.

2. ES6

• exports 키워드를 사용하여 내보내고, import 키워드를 사용하여 불러오기를 하는 모듈 시스템입니다.
• commonjs 에서는 module.exports 라는 객체에 내보내기할 리소스를 할당하는 방법을 사용했지만, ES6 에서는 해당 키워드로 내보내기할 리소스를 지정합니다.

export const foo = "foo";

• 내보내기된 리소스는 불러오는 소스측에서 import 키워드를 사용하여 불러오며, 내보내기된 리소스 중 사용할 리소스만 선택하여 불러옵니다.

import { foo } from './module.js'

이름을 지정하여 내보내고 불러오기

• 내보내기 하는 리소스 명을 지정하여 내보내는 방법입니다.
• 리소스 명을 지정하며 해당 변수에 export 키워드를 붙입니다.

export const foo = "foo";
export const bar = () => "bar";

• 혹은 여러 리소스 를 선언 후 한번에 export 할 수도 있습니다.

const foo = "foo";
const bar = () => "bar";

export { foo, bar };

• 내보내기된 리소스는 import 키워드를 사용하여 불러올 리소스만 불러오기 할 수 있습니다.

import { bar, foo } from './module.js';

console.log(foo);
console.log(bar());

// 출력 결과
foo
bar

• 불러오기시 모든 리소스를 가져오는 경우 * 을 사용하며 해당 모듈에 이름을 지정하여 불러옵니다.
• 이러한 방법으로 불러오기시, 내보내기된 모든 리소스는 object 형식으로 반환됩니다.

import * as t from './module.js';

console.log(t.foo);
console.log(t.bar());

// 출력 결과
foo
bar

익명으로 내보내고 불러오기

• default 키워드를 사용하며, 하나의 리소스를 반환하고자 하는 경우 사용합니다.

export default function () {
    return "foo";
};

• 내보내기된 리소스는 import시 이름을 지정하여 불러와 사용합니다.

import foo from './module.js';
console.log(foo());

// 출력 결과
foo

• 오브젝트 형식으로 내보내고 불러오기

export default {
    foo: () => "foo",
    bar: () => "bar",
}

import baz from './module.js';
console.log(baz.foo());
console.log(baz.bar());

// 출력 결과
foo
bar

• 이 때, 내보내기 하는 모듈에서의 네이밍은 상관 없으며, 불러오기 하는 측에서 이름을 지정하여 사용합니다.

let foo = "foo";
export default foo;

import bar from './module.js'
console.log(bar);

// 출력 결과
foo

섞어서 사용하는 방법

• 두 방식을 섞어서 하나의 리소스는 익명으로 나머지 리소스는 이름을 지정하여 내보낼 수 있습니다.

let foo = "foo";
let bar = () => "bar";

export {
    foo,
    bar
}

export default "baz";

import testing, { bar, foo } from './module.js'

console.log(foo);
console.log(bar());
console.log(testing);

// 출력 결과
foo
bar
baz

• foo, bar 는 네이밍을 지정하여 내보내기 후 불러오기 하였으며, "baz" 라는 리소스는 익명으로 내보내기 후 testing 이란 네이밍으로 불러오는 상황입니다.
• 모든 리소스를 불러오는 경우 마찬가지로 * 을 사용하며, 이름을 지정하여 object 형식으로 불러옵니다.
• 이 때, 익명으로 반환된 리소스는 default 키워드로 접근합니다.

import * as t from './module.js'

console.log(t.foo);
console.log(t.bar());
console.log(t.default);

참고

• https://www.daleseo.com/js-module-require/
• https://velog.io/@leobit/CommonJS

outDir 옵션 관련

• overflow 링크
• tsconfig에서 outDir옵션을 설정했으나 빌드 폴더를 exclude 하지 않은 경우가 해당된다.
• 해당 이슈는 exclude에서 js 확장자를 제외하거나 빌드 폴더 자체를 제외시키면 해결이 된다.

내가 겪은 경우

• 다만 나의 경우는 exclude에서 빌드 폴더를 제외시키고 있었다.
• 원인을 파악해보니 간단한 문제... import 과정에서 outDir에 위치한 빌드된 js파일을 참조하고 있어서 문제가 되었다.
• vscode에서 자동 완성시 해당 파일을 import해서 문제가 된 것으로 보인다.

const sleep = (time: number) => {
    return new Promise((res) => {
        setTimeout(res, time);
    })
}

Promise

• Promise는 약속이다. javascript에서 시간이 오래 걸리는 로직(IO 작업)이 발생하면 이를 이벤트 큐에 삽입하고, 작업이 완료되면 결과를 받아볼 수 있게 한다.
  • Promise는 메인 쓰레드에게 말한다. '시간이 오래 걸리는 작업이 있으니 이것은 이벤트 큐에 넣어 완료될 때 까지 기다릴게. 완료되면 너가 받아 볼 수 있게 해줄게'
  • 메인 쓰레드는 시간이 오래 걸리는 작업을 Promise에게 위임하고, 나중에 작업이 완료되면 Promise가 이를 메인 쓰레드에게 알려 결과를 받아볼 수 있게 한다.
• 위 예시에서 setTimeout 시간이 오래 걸리는 로직이며, Promise는 이 작업이 완료되면 메인 쓰레드에게 알린다.

  해결하는 문제

• 기존에 callback 방식은 함수를 실행하면서 함수의 로직이 종료된 이후에 실행될 로직을 함수로 받아 실행시켰다.
• 대부분 아는 이야기겠지만, 이는 callback 지옥을 생성하여 코드의 가독성이 낮아졌으며, 에러 처리도 어려웠다.
• Promise 는 이 두가지 문제를 해결한다
  • callback 지옥을 없애는것
  • 에러처리가 쉽도록 하는것

기본 사용

• 간단한 Promise 구문을 살펴보자

  function foo(flag: boolean) {
    return new Promise((res, rej) => {
        if(flag) {
            res('suc');
        } else {
            rej('fail');
        }
    })
  }
  

foo(true).then((res) => { console.log(res); }, (rej) => { console.log(rej); });

foo(false).then((res) => { console.log(res); }, (rej) => { console.log(rej); });

#### resolve, reject
- Promise는 기본적으로 `2개의 인자를 받는 익명함수`를 생성자의 인자로 받는다.
- 인자로 들어가는 함수의 인자는 모두 함수이며,`resolve`, `reject`라고 지칭된다.
- 두 함수는 수행하는 역할이 다른데, Promise의 함수가 실행되는 도중 비정상적인 실행 혹은 실패할 경우 `reject`가 실행되며, 정상 실행의 경우 `resolve`가 실행된다.

#### then 구문
- Promise를 리턴하면 이를 호출하는 부분에서 `then` 구문을 사용하여 결과를 받아볼 수 있다.
- `then` 구문의 로직은 호출된 함수와 Promise 내부의 함수 로직이 모두 마무리 되면 실행된다.
- `then` 구문은 `onFulfilled`, `onRejected` 라는 2개의 함수를 인자로 받으며, 각 함수는 `하나의 인자`를 받는다.
- 각 함수는 수행하는 수행하는 역할이 다른데, 첫번째 인자로 들어가는 함수는 Promise에서 `resolve`가 호출되었을 때 실행되며, 두번째 인자로 들어가는 함수는 `reject`가 호출되었을 때 실행된다.
- 그리고 각 `resolve`와 `reject`가 실행될 때 input으로 들어가는 값은 `onFulfilled`, `onRejected`의 인자로 전달된다.

#### 위 예시의 결과
- 예시의 `foo` 함수에 true를 input으로 넣으면 함수 내부에서 flag 값에 의해 `res`로 지칭된 함수가 실행되며, false를 넣으면 `rej`가 실행된다.
- 각 `res`, `rej` 가 실행되면서 input으로 넣어지는 인자는 `then` 구문의 인자로 전달된다.
- 따라서, `foo`에 true를 전달하면 'suc'가 출력되며, false를 전달할 경우 'fail'이 출력된다.

### 에러처리
- 위 예시는 단순히 분기처리에 의해 `resolve`와 `reject`의 호출을 나뉘었다.
- Promise는 에러처리가 쉽도록 하는것을 해결한다고 했다. 다음 예시를 보자.
```typescript
function doError() {
    return new Promise((res, rej) => {
        throw new Error('throw error');
    });
}

doError().then((res) => {
    console.log('success');
}, (rej) => {
    console.log('catch error');
})

• doError 함수는 error를 throw하는 Promise를 반환한다.
• 그리고, 이를 호출하는 부분에서는 Promise의 결과에 따라 'success'나 'catch error'를 출력하게 된다.
• 기본 사용 예시에서 Promise 내부의 함수에서 에러가 발생하면 reject가 실행된다고 했다.
• 그리고, reject가 실행되면, then 구문에서는 onRejected 가 실행된다고 했다.
• 위 예시에서 Error를 던지는 순간 reject가 실행되며, 이를 호출하는 부분에서는 onRejected를 실행한다.
• 따라서, 위 예시에서 catch error가 출력된다.

sleep

• 이제 위의 sleep 함수를 다시 보자.

  const sleep = (time: number) => {
    return new Promise((res) => {
        setTimeout(res, time);
    });
  }
  

sleep(3000).then((res) => { console.log('foo'); })

- Promise의 인자로 time이라는 시간 뒤 res를 실행시키는 setTimeout을 전달한다.
- sleep 함수는 해당 Promise를 반환한다.
- sleep을 호출하는 부분에서 sleep의 인자로 시간을 전달하고, `then` 구문으로 결과를 받아본다.
- setTimeout이 `resolve`를 실행시키므로, `then` 구문에서는 `onFulfilled`를 실행하게 된다.
- 따라서, 위 예시에서 sleep에 전달된 시간 이후 `then` 구문의 `onFulfilled` 부분이 실행되며, 3초 후 'foo' 가 출력된다.


> 틀린내용  혹은 수정이 필요한 부분이 있으면 말씀해 주시기 바랍니다.

• nestjs 8 버전으로 새로운 API를 개발하는 상황
• 공용 라이브러리에는 nest.js로 만든 interceptor가 있는데, 이 interceptor는 던져진 exception을 instanceof로 판별하여 종류에 따라 다르게 처리하고 있었다.

발생한 문제

• 메인 프로세스에서 exception을 던져도 해당 interceptor에서 의도한 대로 작동하지 않는다.
• 던져진 exception은 HttpException으로 판별되어 처리가 돼야 했는데 inctanceof로 판별되지 않았다.
• 근데, console로 찍으면 HttpException으로 출력하는 상황

원인 파악

• 원인은 모듈간 다른 클래스를 사용하는 것에 있었다.
• npm에서 의존성을 설치하는 과정에서 버전과 이름이 동일한 의존성이 설치되어 있다면, 중복으로 설치하지 않고 넘어간다.
• API는 nest.js 8 버전이었고, 라이브러리는 nest.js 7버전으로 서로 다른버전이었기 때문에 라이브러리를 설치하는 과정에서 nest.js 7이 라이브러리의 하부 모듈로 설치되었다.
• API에서 던져진 exception의 class는 nest.js 8에서 정의된 반면 interceptor에서 판별하는데 사용하는 exception의 class는 공용 라이브러리의 nest.js 7 버전에서 정의된 class여서 동일한 클래스명을 갖고 있지만 다른 클래스로 판별 한 것.

해결 방법

• 라이브러리 버전을 올려서 해결하는 방법을 생각했지만, 그렇게 하면 해당 라이브러리에 의존하는 다른 API의 호환이 깨질 수 있어서 일단은 다운그레이드를 하는 방향으로 해결하였다.
• nest.js 7 -> 8로 넘어가는 과정에서 추가되거나 변경된 기능이 많다. 언젠가 날잡고 라이브러리 버전을 올리기 전에 호환성이 맞춰지는지 확인하고 작업해야겠다...