개발환경 잡기

yarn add http-server
yarn add -D typescript @types/http-server

yarn tsc --init

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ESNext",
    
    "rootDir": "src",
    "outDir": "dist",
    "strict": true,
    "sourceMap": true,

    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
}

• 이슈 사항

  모듈은 디폴트로 CommonJS를 사용하는데

  Object.defineProperty(exports, "__esModule", { value: true });
  

  여기서 exports를 사용하지 못한다.. 아마 webpack으로 번들을 제공해줘야..

  일단 최신 모듈로 "module": "ESNext" 변경.

  import App from "./App.js"
  

  대신 import 할 때 파일확장명을 붙여줘야한다. 결국 js파일을 사용하니까 . js

Compiling

yarn tsc -w

-w 변경사항을 바로 컴파일한다.

package.json

"scripts": {
	  "start": "http-server ./ -o ./public -c-1"
},

2개의 터미널을 사용하여 각각 적용하자

yarn tsc -w

yarn start

START Vanilla-TS