drag-and-drop_ts-project_1.project-settings

GI JUNG·2022년 10월 22일

projects

목록 보기

1/3

drag-and-drop 프로젝트 시작하기

요새 typescript를 배우고 있어서 drag-and-drop 프로젝트를 시작했다. 지금 쓰는 이 시점에서 다 완성하지는 않았지만 중간정도 온 거 같다. 프로젝트를 진행하면서 오류도 많이 부딪히고 해결해 나갔는데. 단순히 주석으로 달아놓고 나중에 보려니 시각적으로 많이 불편했으며 금방 까먹을 것 같단 생각에 이 프로젝트를 만드는 과정을 복습 정리겸 기록해보려고 한다.

🍀 Proejct setting

tsconfig.json

아래 명령어로 tsconfig.json 파일을 초기화한다.

$ tsc --init

tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "experimentalDecorators": true, // decorator를 쓰기 위함

    /* Modules */
    "module": "ES6",
    "rootDir": "./src",  // compile root directory지정
    "outDir": "./dist",  // javascript로 compile된 파일 위치 지정
    "sourceMap": true, 
    "removeComments": true,
    "noEmitOnError": true,  // error가 났을 때도 browser에 어떻게 적용되는지 보고 싶어서 true로 설정

    /* Interop Constraints */
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,

    /* Type Checking */
    "strict": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,

    /* Completeness */
    "skipLibCheck": true 
  },
  "exclude": ["node_modules"],  // node_modules는 파일이 크기 때문에 compile에서 제외
  "include": ["src/**/*.ts"]    // src 폴더 밑에있는 '.ts'로 끝나는 모든 파일들을 typescript compile대상으로 지정
}

target: "ES6"는 ES2015와 같으며 이는 lib option에 적절한 값들을 알아서 넣준다. target: "ES6"의 lib option은 아래와 같다. 따라서 target을 설정해주지 않으면 lib를 설정해주면된다.

"lib": [
  "DOM",
  "ES6",
  "DOM.Iterable",
  "ScriptHost"
]

lite-server

lite-server는 local에서 server를 생성시킬 수 있다. 개발하기 위해 server에 띄워야 하므로 이를 사용했다.

$ npm install --save-dev lite-server

lite-server를 깔았으면 npx lite-server로 실행할 수 있으나 npm run dev로 실행하기 위해 package.json에서 dev script를 추가해준다.

package.json

"scripts": {
  ...//,
  "dev": "lite-server",
  ...//
}

실행해보기

typescript는 javascript의 superset개념으로 처음에는 browser가 이해할 수 있는 코드라고 생각했지만 tsc가 왜 있는지 생각하다가 기존의 javascript code로 변환해주어야 browser에서 이해할 수 있음을 알았다.
일단 typescript file -> javascript file로 변환하기 위해 tsc(typescript compiler)를 이용해 보자

index.hml

<html>
...//
  <head>
    <script src="dist/app.js" type="module" defer></script>
  </head>
</html>

src/app.ts를 javascript로 compile한 것은 dist folder하위에 app.js로 들어가기 때문에 html file에는 dist/app.js로 넣어주어야 한다.

src/app.ts

alert('typescript initial setting');

app.ts file을 javascript 코드로 바꾸기 위해 아래 명령어를 실행해주면 아래 그림과 같이 dist folder밑에 app.js를 확인할 수 있다.

--watch: 변경사항이 있을 때마다 자동으로 compile해준다.
--outfile: compile한 javascript코드를 어디에 위치할 지 정해준다.

$ tsc --watch src/app.ts --outfile dist/app.js 1️⃣
$ tsc -w 2️⃣

1️⃣과 같이 compile을 할 수 있지만tsconfig.json에서 configuration들을 지정해주었으므로 간단하게 2️⃣으로 할 수 있다.

compile된 app.ts

이제 잘 작동하나 browser에서 아래 명령어로 확인해보자

$ npm run dev

잘 작동된다!!!

참고

step by step