타입스크립트 D-3

nearworld·2022년 7월 11일

목록 보기

3/28

본 게시글은 정확한 정보를 담고있지 않을 수 있으므로 다른 자료도 참고하시길 바랍니다.
만약, 본 게시글이 잘못된 정보를 가지고 있다면 피드백 부탁드립니다. 감사합니다.

디버깅을 위한 `launch.json` 생성

중요!
이 과정 이전에 tsconfig.json에서 sourceMap 속성이 활성화되어 있어야 한다. 그래야 디버거가 자바스크립트 코드와 타입스크립트 코드를 매핑하여 디버깅할 수 있다.

본격적인 디버깅 이전에 launch.json 이라는 파일을 생성해야한다.
이 파일을 생성하는 이유는 디버거가 tsconfig.json을 사용하여 디버깅을 하도록 하기 위해서다.

create a launch.json file 문구를 클릭하면 디버거 선택 창이 뜨게 된다. 그럼, Node.js를 클릭한다. 프로젝트 디렉토리 내에 .vscode 폴더와 launch.json 파일이 생성된다. 그 launch.json의 program 속성 밑에 preLaunchTask 속성을 추가해준다.

launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${file}",
          	// 아래 줄을 추가.
          	"preLauchTask": "tsc: build - tsconfig.json"
        }
    ]
}

속성 값 그대로 tsconfig.json을 사용하여 build. 그럼, tsconfig.json에 설정된 대로 프로젝트가 빌드된다.

에러 발생시 참고

error TS5058: The specified path does not exist

이 과정에서 위의 에러가 발생하여 애를 먹었다. 해결법은 그리 복잡하지 않다.
우선 이 에러는 windows 운영체제에서 기본 터미널로 git bash를 사용하는 경우 발생한다. 그래서 build 시에 cmd.exe를 사용하도록 설정해야한다. 해결법은 아래 링크를 참조.