[Type Script] 도구 (소스맵, 린터)

1. 소스맵

소스맵 파일을 사용하면 타입스크립트 코드를 디버깅할 수 있다.

소스맵 파일은 .map 확장자로 js 코드 조각을 원래 언어(ts)에 맵핑하는 json 형식의 데이터를 포함하고 있다.
ts로 작성된 js 프로그램을 디버깅하고자 한다면 브라우저가 컴파일 중에 생성된 소스맵 파일을 다운하며, 엔진이 js를 실행하더라도 ts 코드 내에 브레이크 포인트를 설정할 수 있다.

 

Greeter.ts

class Greeter {
    static sayHello(name:string) {
        console.log(`Hello ${name}`);
    }
}

Greeter.sayHello('John');

-> 터미널에 tsc greeter.ts --sourceMap true 작성 후 실행
-> greeter.js, greeter.js.map 파일이 생성됨

 

greeter.js.map

{
    "version":3,
    "file":"greeter.js",
    "sourceRoot":"",
    "sources":["greeter.ts"],
    "names":[],
    "mappings":"AAAA;IAAA;IAIA,..."
}

-> 사람이 읽을 순 없지만 file 프로퍼티는 생성된 js 파일 이름이, source 프로퍼티는 ts 파일임을 볼 수 있다.
mapping 프로퍼티에선 js와 ts 파일 내 코드 조각의 맵핑 정보가 있다.

 

js 엔진은 맵핑 정보를 포함한 파일이 greeter.js.map 이라고 어떻게 추측할까?

-> 추측할 필요 X
greeter.js의 맨 끝 줄에
//# sourceMappingURL=greeter.js.map
-> 이 줄을 추가하고 index.html에 script를 적용하고 live server로 실행해보자
F12 -> sources -> greeter.ts에서 코드 줄을 선택하고 새로고침해보면 선택한 브레이크 포인트에 코드 동작이 멈추고 한 단계씩 확인하며 디버깅 해볼 수 있다.

 

--inlineSources (ts 컴파일러 옵션)

: 사용 시 .js.map 파일에도 ts 소스 코드가 포함된다.

tsc greeter.ts --sourceMap true --inlineSources true

-> greeter.ts 파일 내 코드도 포함하고 이 모드에선 웹 서버에 별도의 .ts 파일을 배포할 필요가 없지만 ts 코드를 디버깅할 수 있다.

 

2. ESLint

린터?
: 일정한 코딩 스타일을 유지하도록 도와주는 도구
모든 파일에서 홑 따옴표만 사용 가능하며 불필요한 괄호를 제거하는 등 코딩 스타일 관련 규칙을 만들 수 있다.
JSLint, JSHint 등 다양한 js 린터가 존재한다.

 

npm init -y

-> 먼저 새 디렉토리를 만들고 npm 프로젝트를 초기화한다.
-y 옵션은 모든 기본 옵션을 따른다는 뜻으로 기본 설정을 지닌 package.json 파일을 생성한다.

 

npm install typescript eslint

: 타입 스크립트와 ESLint를 설치한다.
node_modules 폴더가 생성되고 이 폴더 내 ts와 ESLint가 설치된다.

 

./node_modules/.bin/eslint --init

-> ESLint 구성파일을 생성 / 몇 가지 질문을 하는데, 개인적으로 설정해주면 됨
vscode에서 ESLint를 사용하려면 확장 프로그램으로 설치해야함

.eslintrc.json 파일이 생성되는데, "rules"에 커스텀 규칙을 작성할 수 있다.

 

hello.ts라는 파일을 만들고
console.log("hello world");; 라고 작성해보자
그럼 Unnecessary semicolon (불필요한 세미콜론)이라는 오류가 뜬다.

"rules": {
  "no-extra-semi":"off",
  "@typescript-eslint/no-extra-semi":["off"]
}

-> 여기서 no-extra-semi 규칙의 값을 off로 설정하면 오류가 사라진다.

 

담소

더 남았는데 너무 피곤해서 내일 해야겠다...

다시 초심 잡자!!