TypeScript로 환경 설정을 하다 보니 갑자기 에러 메세지가 떴다. nodemon 쪽 에러였다.
이게 대체 무슨 에러인지 내용을 확인해 보니까 ts-node 모듈을 찾을 수 없어서 나는 에러인 듯 했다.
이슈 1 : ts-node 설치 에러
이 모듈을 왜 설치해야 하는 거지? 하고 좀 살펴봤는데 이런 문제였다고 한다.
node는 타입스크립트를 읽지 못한다.
그래서 따로 컴파일을 해줘야 한다.
ts-node가 뭐하는 친군가 npm 통해서 더 살펴봤다.
ts-node is a TypeScript execution engine and REPL for Node.js.
It JIT transforms TypeScript into JavaScript, enabling you to directly execute TypeScript on Node.js without precompiling. This is accomplished by hooking node's module loading APIs, enabling it to be used seamlessly alongside other Node.js tools and libraries.
좀 읽어보니까 노드의 모듈 로딩 API를 연결하여 다른 Node.js 도구 및 라이브러리와 함께 원활하게 사용할 수 있도록 하여 수행할 수 있도록 도와주는 모듈인 듯 했다.
해결 방법
이건 nodemon 쪽 문제가 아니라 추후에 다른 곳에서도 날 수 있는 에러일 것 같아서 ts-node를 설치해줬다.
ts 관련 모듈이기 때문에 이것도 devDependencies에 넣어줬다.
그리고 이젠 되겠지? 하고 다시 서버를 실행했는데 또 에러가 났다.
에러 내용을 읽어보니까 ./www 라는 모듈을 못 찾아서 이러는 거라는데 js 환경일 땐 안 깔아도 잘만 실행되더니 ts 환경에서는 왜 안 돌아가는지 궁금해졌다.
찾아봤는데 그럴싸한 포스팅이 없었다 (...) 그래서 chatGPT에게 물어봤다.
이슈 2 : ./www 에러
원인 추측
- TypeScript 프로젝트에서 컴파일된 JavaScript 파일에서 해당 모듈을 찾을 수 없을 때 발생하는 거다
- TypeScript는 기본적으로 소스 코드를 컴파일하여 JavaScript 파일을 생성하며, 이 때 파일 경로 등이 변경된다는 특징이 있다. 지금 내 tsConfig.json의
outdir경로가./dist로 되어 있다. 그래서./bin/www경로를dist/bin/www경로로 바꾸고 실행해 봤다. - 결과 : 안 됨... 경로 문제가 아닌 거 같다.
- TypeScript는 기본적으로 소스 코드를 컴파일하여 JavaScript 파일을 생성하며, 이 때 파일 경로 등이 변경된다는 특징이 있다. 지금 내 tsConfig.json의
- 내가 nodemon을 이용하는 커맨드를 과거 문법으로 설정해서 ts로 환경을 바꿨을 때 충돌이 난 거다. (유력)
- 내가 해당 스크립트를 만들었을 때 이 블로그 글을 보고 했었다. 이 블로그 글은 21년도에 쓰인 글이라, 3년 사이에 nodemon이 업데이트 되었을 가능성이 농후했다.
- 그래서 실제로도 문법적 문제가 있는지 scripts를 변경해 보고 실행했다.
블로그 글에서는nodemon ./bin/www으로 설정하면 된다고 했지만 실제로는 사용 방법이 이렇다고 나와 있었다. (그렇다면 Js 환경에서는 왜 된 건지 알 수 없다. 그냥 첫 번째 원인이랑 두 번째 원인이 맞물린 게 아닌가 싶기도 하다.)
해결 방법
별 다른 걸 해주진 않았고 그냥 지웠다. (...)
지우고 다시 서버를 돌려봤다. 이번엔 되겠지?? 했는데 또 에러를 만났다. (.......)
이슈 3 : TypeError: (0 , express_1.default) is not a function
이게 대체 무슨 에러지? 하고 또 구글링을 했다.
좀 구글링을 하니까 stackover에서 나와 비슷한 상황이신 분의 글을 볼 수 있었다. -> 해당글
여러 답변을 읽어보니까 tsConfig.json 설정을 좀 만져줘야 하는 에러인 듯 했다.
해결 방법
"esModuleInterop": true 를 compilerOptions 에 추가해줬다.
근데 안 돼서 뭔가 더 해줘야 하는 게 있나 하고 파일을 아예 뒤지기 시작했다.
let app = express(); 이 부분에서 에러가 나는 거니까 app.ts 부분으로 가서 확인했다.
확인하니까 모듈 몇 개를 더 깔아야 하는 것 같았다. 깔아준 모듈은 @types/node 모듈과 @types/express 모듈이었다.
이 부분도 대충 컴파일을 할 때 필요한 모듈이 없어서 에러가 나는 모양이었다. 참고한 블로그
그래서 현재 내 devDependencies는 최종적으로 이 형태가 됐다.
"devDependencies": {
"@types/express": "^4.17.21",
"@types/node": "^20.11.16",
"@typescript-eslint/eslint-plugin": "^6.20.0",
"@typescript-eslint/parser": "^6.20.0",
"add": "^2.0.6",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.3",
"ts-node": "^10.9.2",
"typescript": "^5.3.3"
}그리고 부푼 마음을 안고 다시 서버를 실행했다.
드디어 해결 됐다... ㅠㅠ
혹시 몰라서 postman으로도 정상적으로 데이터를 조회하는지 등을 확인해 보니까 잘 된다!
해결 이후
TypeScript는 React 쪽에서만 사용해서 관성적으로 필요한 거만 설치하고 넘어가고 그랬었다...
그런데 이번에 node.js의 환경을 TypeScript로 바꾸면서 이런 저런 에러를 만나 트러블 슈팅을 한 게 나름대로 의미가 있는 듯 하다.
그리고 늘 생각하는 거지만 에러 메세지 굉장히 직관적이고 배려 있다는 점...
내가 경험하는 에러는 반드시 구글에 있다는 점...
