Intro
사이드 프로젝트로 동료 서포트하고 있는데 node.js로 쿼리 짜서 api 만드는 것을 하고 있다.
그 중에 초기 프로젝트 설정을 받아서 개선하면서 2가지 정도가 시간이 걸렸다.
프로젝트 초기 설정 이슈 한번 보자.
alias 설정
../../../ 이런 식의 경로는 너무 길고 보기가 안 좋으니 @api, @define 이런 식으로 가는 게 좋다.
막연하게 tsconfig.json만 설정하면 될 거라 생각했다.
"paths": {
"@*": ["./src/*"]
},근데? 못 읽는다. 뭔가 vue랑 react할 때는 그냥 알아서 경로 설정하면 되던데?
node.js는 뭐가 다른 건가?
결론은 다르다는 것이다. node.js에서는 alias 설정을 위해서 tsconfig-paths 라이브러리가 필요하다. 현재 프로젝트에 아래 명령어로 라이브러리를 추가해본다.
yarn add tsconfig-paths그리고 적용을 위해서 프로젝트 시작 명령어를 수정해야 한다.
현재 프로젝트가 실행 환경이 nodemon으로 되어 있던데, 나의 경우 nodemon.json을 최상단에 추가하고
{
"watch": ["src"],
"ext": "ts",
"exec": "ts-node -r tsconfig-paths/register src/index.ts"
}저 exec 부분 보면 tsconfig-paths 추가되고 ts-node로 실행된다는 뜻이다.
이제 package.json으로 간다.
{
"name": "프로젝트 이름입니다. 각자 다릅니다.",
"version": "1.0.0",
"description": "",
"scripts": {
"start": "nodemon"
},
"dependencies": {
"@ngrok/ngrok": "^1.2.0",
"@types/sqlite3": "^3.1.11",
"axios": "^1.6.8",
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"mysql": "^2.18.1",
"sqlite3": "^5.1.7"
},
"devDependencies": {
"@types/body-parser": "^1.19.5",
"@types/cors": "^2.8.17",
"@types/express": "^4.17.21",
"@types/mysql": "^2.15.26",
"@types/node": "^20.12.4",
"nodemon": "^3.1.0",
"ts-node": "^10.9.2",
"typescript": "^5.4.5"
}
}
명령어가 원래는 nodemon src/index.ts 였는데 위의 nodemon.json에서 이것저것 추가하고
아래 명령어가 간결해졌다.
"scripts": {
"start": "nodemon"
},
오 된다 된다.
TIL
- ts-node는 타입스크립트를 직접 실행할 수 있는 도구다. 이거 쓰면 별도로 tsc를 안 써도 됨.
- Vue3 또는 React랑 Typescript 같이 쓸 때는 tsconfig-paths를 안 써도 되던데 얘는 왜 이럼?
Vite + React 프로젝트에서는 Vite 자체의 설정을 통해 경로 매핑이 잘 지원되기 때문에, 별도의 tsconfig-paths와 같은 패키지를 사용하지 않아도 됩니다. 이는 Vite가 TypeScript와의 통합을 잘 지원하기 때문입니다. 반면, Node.js 프로젝트에서는 ts-node와 tsconfig-paths를 사용하여 TypeScript 경로 매핑을 지원하도록 별도로 설정해야 합니다.
- 나의 경우는 baseUrl 잘못해서 좀 시간 더 썼다.
./또는.이어야 함.
"baseUrl": "./",
"paths": {
"@*": ["./src/*"]
},declare global
공통으로 쓰는 애들을 매번 import하지 않고 그냥 전역에 두고 쓰고 싶어졌다.
export {};
declare global {
interface PageInfo {
totalCount: number;
limit: number;
offset: number;
}
interface CustomPage<T> {
list: Array<T>;
pageInfo: PageInfo;
}
}
일단 export {} 를 통해서 얘도 파일로 인식하게 해주어야 한다.
.tsconfig.json 에서 경로도 추가해둔다. 나의 경우 src/defines/global.d.ts 이다.
"typeRoots": ["./src/defines/*", "./node_modules/@types"]node_mudules 내부 타입들도 루트에 포함하게 한다.
근데 왜 CumstomPage can not found냐고;;
해결은 ts-node 내부files 속성을 true로 하는 것이다.
...
"ts-node": {
"files": true
}Outro
node.js에서 alias 설정하겠다고 별의별 라이브러리를 다 install하고 index.ts에 "~/register"도 import 해보고 다 해봤는데, 사실상 해결책은 더 단순하다.
ts 문법도 문법이지만 기초 설정이나 돌아가는 원리를 몰라서 생긴 이슈인 것 같다.
