Typescript module Import/Export

• tsconfig.json module 속성 설정
  - module: 'commonjs' => node 환경
  - module: 'es2015', 'esnext' => browser 환경
  [ 링크 참조 ]
  https://velog.io/@bigbrothershin/TypeScript-%EB%AA%A8%EB%93%88%EC%8B%9C%EC%8A%A4%ED%85%9C-commonJS%EC%99%80-ES2015-export%EC%9D%98-%EC%B0%A8%EC%9D%B4
  
  
• Node.js 환경
  - tsconfig.json

      {
        "compilerOptions": {
       // -----------[ Node ]---------- //
          "module": "CommonJS",
       // ----------------------------- //
          "target": "es5",
          "lib": [
            "dom",
            "ESNext"
          ],
          "sourceMap": true,
          "esModuleInterop": true,
          "moduleResolution": "Node",
          "downlevelIteration": true,
          "noImplicitAny": false,
        },
        "exclude": [
          "node_modules"
        ]
      }

• 브라우저 환경

1. module을 "ES2015" 또는 "ESNEXT"로 바꿔준다.

      {
        "compilerOptions": {
       // ------------[ 브라우저 ]------------- //
          "module": "ES2015",
       // ------------------------------------ //
          "target": "es5",
          "lib": [
            "dom",
            "ESNext"
          ],
          "sourceMap": true,
          "esModuleInterop": true,
          "moduleResolution": "Node",
          "downlevelIteration": true,
          "noImplicitAny": false,
        },
        "exclude": [
          "node_modules"
        ]
      }

2. html파일의 script 구문에 type="module" 속성을 설정해주어야 한다.

✅ 브라우저 환경에서 node_modules에 있는 모듈을 import하기 위해서는 webpeck을 통한 번들링 같은 방법으로 경로 해결을 해야한다.
=> ES2015 모듈은 경로가 존재해야 import/export 가능
=> node_modules에 있는 모듈을 import 할 때는 경로x
=> webpack을 통해 번들링하여 해당 파일 가져오기 가능

[ 링크 참조 ]
https://stackoverflow.com/questions/67809878/how-to-import-node-modules-in-simple-typescript

• NPM 패키지 모듈들은 CommonJS를 기본 모듈 시스템으로 채택
• ReactJS에서 NPM 패키지 모듈을 불러오기 위해 ES6 문법으로 코드를 작성하지만 문제가 발생하지 않는 이유
  : Babel 등의 컴파일러가 ES6 문법의 코드를 CommonJs 기반의 코드로 변환해줌 => Webpack에 의해 JavaScript 모듈들의 번들링이 가능해짐
  
• ts-loader
  : TypeScript 컴파일러인 tsc를 사용하고, tsconfig.json의 설정을 따름
  [ 링크 참조 ]
  https://webpack.kr/guides/typescript/#loader

// webpack.dev.js 설정
const path = require("path");

module.exports = {
    mode: "development",
    devtool: "inline-source-map",
    entry: {
        app: "./src/index",
    },
    resolve: {
        extensions: [".ts", ".js"],
    },
    module: {
        rules: [
            {
                test: /\.ts?/,
                use: [
                    "babel-loader",
                    {
                        loader: "ts-loader",
                    },
                ],
                exclude: /node_modules/,
            },
        ],
    },
    output: {
        path: path.resolve(__dirname + "/dist"),
        publicPath: "/dist",
        filename: "index.js",
    },
    devServer: {
        devMiddleware: { publicPath: "/dist" },
        static: { directory: path.join(__dirname) },
        hot: true,
    },
};