회사서 계속 java만 쓰다보니 간단한 툴은 node서버를 사용하고 싶어졌다. 그래서 개발에 필요한 도구들을 node로 만들고 있는데 문득 typescript를 쓰고 싶어졌다. 이유는 vscode가 내가 만든 모듈의 자동완성을 잘 안해주고 못해줘서다.
typescript를 type지정기능이 추가된 javascript라고 생각했는데 하다보니 컴파일이 안되는 경우도 많고 외부모듈사용할때도 @types를 추가로 설치해야하고 모르는 부분이 많았다. 소스코드는 어찌어찌 고쳐나가면 되는데 결국은 node 서버로 실행해야해서 개발환경, production환경설정도 해줘야했다. 이런저런 삽질을 거쳐서 완료를 하고 나니 기록으로 남겨야겠다는 생각이 들었다.
개발환경
아무것도 모를적에는 deno를 쓰면 되는 줄 알았다. 그런데 deno는 node와 전혀 다른 별개의 환경이었다. 모듈, import 모두 달랐다. 그럼 tsc로 빌드한 후에 node로 실행하는가 했는데 ts-node라는 것을 또 발견했다. 그런데 아무래도 production에서는 빌드된 결과물을 실행하는게 나을 것 같아 ts-node는 개발환경에서만 사용하기로 했다.
"scripts": {
"start": "nodemon --exec ts-node src/app.ts",
}모듈 base 설정
tsconfig에서 baseUrl을 설정하면 import할때 "../service/project" 같은 경로를 "service/project" 로 사용할 수 있다. webpack없이 이런게 되다니 너무 좋았다. 그런데... ts-node와 tsc의 결과물은 이걸 tsconfig의 경로로 알아서 찾아주지 않았다. 오류가 발생했다. tsc가 빌드할때만 찾아주나보다. 그래서 tsconfig-paths라는 모듈을 추가로 사용해야했다.
ts-node에서는 -r tsconfig-paths/register 로 모듈을 로드해주면 해결되었다.
"scripts": {
"start": "nodemon --exec ts-node -r tsconfig-paths/register src/app.ts",
}문제는 tsc 빌드 후 node에서 실행할때다. node는 tsconfig을 알아서 읽어주지 않았다. node에서는 별도로 tsconfig-paths를 로드해서 register를 실행해줘야 한다. 아래와 같이 모듈을 만들어서 로드하도록 했다.
// tsconfig-paths-bootstrap.js
const tsConfigPaths = require("tsconfig-paths");
const cleanup = tsConfigPaths.register({
baseUrl: "./dist",
paths: []
});
//package.json
"scripts": {
"start": "nodemon --exec ts-node -r tsconfig-paths/register src/app.ts",
"build": "tsc",
"start:dist": "node -r ./tsconfig-paths-bootstrap.js dist/app.js"
}마치며
이렇게 typescript 서버 설정을 완료하고 typescript 개발도 완료를 했다. 일단 빌드가 되도록 설정만 잘 해두면 개발은 어찌어찌 되는거 같다. 아직은 얼떨떨하고 잘 모르겠지만 계속해서 하다보면 더 나아지겠지. 한동안 typescript를 계속 파봐야겠다.
