1. Babel

• Transpiler, Compiler 역할

  • 언어 ⇒ 언어 변환

  • 특정 문법 등을 Javascript Code로 바꿔줌

    ex) Optional Chaning (최신문법을 과거 문법으로)

    //Put in next-gen JavaScript - Optional Chaning
    const city = address?.city
    
    //Get browser-compatible JavaScript out
    "use strict";
    
    var _address;
    
    const city = (_address = address) === null || _address === void 0 ? void 0 : _address.city;

• Plugin

  • 각각의 문법마다 플러그인이 존재

    ex) 위 Optional Chaining 사용시 @babel/plugin-proposal-optional-chaining 설치

    ex) @babel/plugin-proposal-class-properties

• Preset

  • plugin을 모아서 제공 (왜냐면 하나하나 설정해주기 귀찮으니까)

    ex) @babel/preset-env : plugin 모아 특정 환경으로 타겟팅 해줌

    // target - caniuse 
    {
      "targets": {
        "chrome": "58",
        "ie": "11"
      }
    }

• JavaScript 표준 만드는 방법

  • 문법의 정의한다
  • Babel Plugin을 만든다
  • tc39 organization에 제출 (proposal)

• 어떻게 사용 ?

  • babel-plugin-lodash - 번들 사이즈 줄여주는 플러그인
  • JSX

2. TypeScript (TSC)

1. Transpiling → Babel로 대체 (babel-plugin-typescript)

   • TypeScript → JavaScript
   • 대체 시 Type Checking 기능 없음

2. Type Checking

   • 타입이 맞는지 아닌지 체크?

     ex) tsc —moEmit

   • Language Server

     • tsc를 돌리지 않아도 VS Code에서 빨간줄을 볼수있는 이유

3. 결론

   • 레버리징 : 지렛대를 이용함?

     • 이 주식이 백퍼 오른다!
     • 내가 가진 돈이 100만원
       • 1%
       • 101만원
       • 은행에 가서 1억을 땡겨
       • 1억 100만원
       • 1억 201만원
     • 오픈소스 레버리징
       • 내가 어떤 생태계에 속해있어야 하나??
       • yarn add 를 하는 순간 레버리징을 하는거다!

   • TypeScript로 타입 체킹 + Babel로 Transpile —> 지속적 개선을 위해

3. Webpack

• 여러 파일(모듈)들을 한 파일로 뭉쳐준다.

• 파일 → Loader → Webpack → 후처리 Plugin

  • TypeScipt 적용 → ts loader 설치 - .ts로 끝나는 파일 설정해줌

  • JavaScript 관련된건 Babel Loader를 주로 쓴다!

  • Q. svg 파일을 읽고 싶다.

    • import ... from './hello/world/something.svg'

    • svg → 경로로 읽고싶다!

      ex) url-loader

    • svg → string으로 읽고싶다!

      ex) raw-loader

    • svg → React 컴포넌트로 읽고싶다.

      ex) @svgr/webpack

  • 결론적으로, 내가 뭔가 특이한걸 import 하고 싶다!

    • 엑셀을 읽고싶다.

      ex) xlsx-loader

  • CRA로 할때 (eject 안하고 사용하는 경우)

    • react-app-rewired + customize-cra

      $ yarn add customize-cra --dev
      $ yarn add react-app-rewired --dev

      package.json에서 script를 수정하여 프로젝트 실행시 react-scripts 대신 react-app-rewired를 통해 실행

      "scripts": {
          "start": "react-app-rewired start",
          "build": "react-app-rewired build",
          "test": "react-app-rewired test",
        },

      프로젝트 가장 최상단 위치에서 config-overrides.js 라는 파일을 생성한 뒤, 원하는 customizing을 하면 된다.

      config-overrides.js 를 작성하기 전에, decorator 문법을 사용하기 위해 필요한 패키지를 설치

      $ yarn add --dev @babel/plugin-proposal-decorators

      아래와 같이

      const { 
          addDecoratorsLegacy, 
          disableEsLint, 
          override 
      } = require("customize-cra");
        
        module.exports = {
          webpack: override(
              disableEsLint(),
              addDecoratorsLegacy()
          )
        };

      customize-cra가 지원해주는 addDecoratorsLegacy 를 통해 decorator문법을 사용할 수 있게 되었다.

      mobx-react의 observer decorator를 App.js에 적용해 볼 것이다.

      customize-cra 문서에서 disableEsLint 플러그인을 같이 사용하라고 나타나있기 때문에 설정파일에 명시하였다.

    • craco