Skip to main content

Command Palette

Search for a command to run...

Loader 옵션으로 타입스크립트 실행시키기

NodeJS의 Loader 옵션으로 타입스크립트 파일을 변환하지 않고 바로 실행할 수 있습니다.

Updated
1 min read
Loader 옵션으로 타입스크립트 실행시키기

기본적으로 타입스크립트는 자바스크립트 파일로 변환해야 NodeJS로 실행이 가능하지만 ts-node로 직접적인 변환 과정을 생략할 수 있다.

npm install -D ts-node
npx ts-node ./scripts/the-file-you-want-to-execute.ts

TypeScript 설정이 명시되어있는 tsconfig.json에서 ts-node 관련 설정만 추가해주면 모듈 에러 없이 실행이 가능했다.

module 속성으로 CommonJS를 명시해서 외부 모듈이 필요할 때 NodeJS에서 호환 가능한 require를 호출하도록 할 수 있다.

target은 타입스크립트가 어떤 버전의 자바스크립트 파일로 변환할지 명시한다. ES6이라 적혀있어도 require 또한 호환되도록 컴파일된다.

{
  "ts-node": {
    "compilerOptions": {
      "target": "ES6",
      "module": "CommonJS",
      "moduleResolution": "node"
    },
    "esm": true
  }
}

몇몇 프로젝트에서는 package.json"type": "module"이 작성되어있는데 이때 ts-node가 작동하지 않는 경우가 많았다. 자주 마주친 에러는 'ERR_UNKNOWN_FILE_EXTENSION'로 인터넷 검색 결과 여러 사람들이 이 에러를 마주치고 있는 것으로 보였다.

해결책

ts-node를 직접적으로 호출하지 않고 node 명령어에 loader 옵션을 추가함으로써 타입스크립트 파일을 컴파일 없이 실행시킬 수 있다.

ESM Loader를 사용하기 때문에 tsconfig.jsonmodule 옵션을 ES 모듈을 지원하는 버전으로 바꿔줄 필요가 있다.

{
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "target": "ES6",
    "module": "ES6",
    "moduleResolution": "Node"
  }
}
npm install -D ts-node
node --loader ts-node/esm ./scripts/the-file-you-want-to-execute.ts

실행할 때 경고문이 출력되지 않게 하려면 옵션을 더 추가하면 된다.

node --no-warnings --loader ts-node/esm ./scripts/the-file-you-want-to-execute.ts

More from this blog

AI 에이전트에서 작업 맥락을 관리하기 위해 사용한 방법

AI 에이전트의 불편함 Codex CLI와 같은 AI 코딩 에이전트를 통해서 프로젝트 개발 속도를 높일 수 있다. 그리고 혼자 작업했을 때는 놓칠 수 있는 부분도 발생할 수 있는데 AI 에이전트를 통해 보완할 수 있었다. 컴포넌트에 대해서 접근성 태그 작성 API 호출하는 비동기 코드 작성할 때 에러 처리 그리고 AI 에이전트를 잘 활용하면 불가능하

Mar 8, 202610 min read

지시사항을 분할하여 Codex로 효율적인 작업하기

이슈 Codex와 같은 AI 기반 코드 에이전트는 출력 토큰의 수가 제한되어 있다. 그래서 다양한 작업을 하나의 프롬프트에 전부 몰아서 작성하면 원하는 결과가 나오지 않을 수 있다. Codex와 같은 LLM 기반 서비스는 출력 토큰 수를 초과하게 되면 일부 단계가 누락되거나 특정 요소를 과하게 요약할 수 있고 이는 전체적인 답변 퀄리티를 낮출 수 있기 때문이다. 그래서 다양한 AI 공식문서는 특정 작업을 더 작은 단위로 분할하는 방식을 강조한다...

Nov 3, 20255 min read

Key를 활용하여 컴포넌트 상태를 초기화하기

개요 컴포넌트의 상태가 업데이트되어도 컴포넌트 내부에 배치된 컴포넌트의 상태는 그대로 유지되는 경우가 있었다. 예전에는 Props 전달 및 내부에서 useEffect를 통해서 상태를 초기 상태로 업데이트하도록 했는데 useEffect를 남용하게 되면 상태 변화 추적이 어려워지는 문제가 있었다. 그런데 useEffect 외에도 Key를 통해서 컴포넌트 상태를 초기화할 수 있다는 사실을 알게 되었다. 리스트 렌더링 React 프론트엔드에서 목록 형...

Sep 21, 20253 min read

내가 AGENTS.md를 작성하는 방법

Codex CLI 요즘 프로젝트 개발에 Codex CLI를 활용하는 이유는 다음과 같다. 특정 프로젝트를 작업할 때 Claude Code는 종종 사용량을 초과한 것과 다르게 Codex CLI는 ChatGPT Plus 요금제만으로도 토큰 사용량 초과 걱정 없이 충분하게 활용할 수 있었다. 타 CLI 기반 AI 개발 도구에 비해서 요구사항을 더 정확하게 구현하고 꼭 필요한 작업만 진행하기 때문에 코드를 검토하는 시간을 줄일 수 있다. 반복적인 코드...

Sep 21, 20254 min read
N

Nowon Lee

22 posts