typescript 개발세팅 및 koa 기본 구조 세팅

노요셉·2019년 10월 29일
0

MongoDB + AWS Lambda

목록 보기
1/1
  • 자바스크립트 실행환경
  • 컴파일러
  • 에디터

자바스크립트 실행환경

Node.js 설치하기

이건 넘어가겠습니다.

node.js version manager
nvm, n

프로젝트 생성

mkdir Blinker-server && cd Blinker-server
npm init -y

typescript

typescript파일을 javascript으로 트랜스파일 하는 프로그램

설치방법

yarn add typescript

typescript 설정파일 생성하기
tsconfig.json 프로젝트 루트 디렉토리에 생성

기본 디렉토리 생성하기
mkdir dist && mkdir src

tslint 설치 및 설정

yarn add -D tslint 

프로젝트 루트 디렉토리에 tslint.json 생성
package.json에 npm scripts 추가해주기

  ...
  "scripts": {
    "build": "tsc",
    "watch": "tsc -w",
    "watch-start": "concurrently --kill-others \"tsc --watch\" \"nodemon dist/index.js\"",
    "start": "node dist/index.js",
    ...
  },
  ...

koa 프레임워크로 서버 애플리케이션기본 구조 세팅

src/index.ts 생성

yarn add @types/node koa @koa/cors@2 koa-body koa-router @types/koa__cors

VSCODE extension Prettier, TSlint 설치

tslint-config-prettier, tslint-plugin-prettier 패키지 설치

yarn add -D tslint-config-prettier tslint-plugin-prettier 

루트 디렉토리에 .editorconfig 파일 생성

root = true

[*.ts]
indent_size = 2
indent_style = space

tslint.json

  "defaultSeverity": "error",
  "extends": [
    "tslint:recommended",
    "tslint-config-prettier",
    "tslint-plugin-prettier"
  ],

  "jsRules": {},
  "rules": {
	...
    "prettier": true
  },
  "rulesDirectory": []

자 이제 cmd + s로 *.ts 파일을 저장하시면 .editorconfig에 규칙에 따라 prettier가 동작할것입니다.


추가

이번 프로젝트에서는 tslint만 사용해서 code format을 하고 있다.
IDE를 vscode를 쓰는데, tslint, prettier 익스텐션을 둘다 받아놓고 사용하니,
settings.json에 editor.formatOnSave: true 가 동작하질 않아서 prettier를 disable하니까..
동작을 잘하네요..
왜인지는 아직 모르겠음.. 주말에 알아봐야할것

profile
서로 아는 것들을 공유해요~

0개의 댓글