• React/Next.js 프로젝트 진행 시에 typescript 공통 함수를 만들어 사용하는데, 함수가 제대로 작동하는지 확인해보고 싶을 때가 있다.

getPosts.ts

import axios from 'axios';

export async function getPosts() {
  try {
    const response = await axios({
      method: 'GET',
      url: 'http://localhost:3001/posts',
    });
    console.log(response.data);
    return response.data;
  } catch (error) {
    console.error(error);
    return null;
  }
}

• 그 중에서도 나는 axios 함수를 페이지에 사용하기 전에 api 요청이 정상적으로 이루어지는지 확인하고 싶었다.
  • 이전에는 만든 함수를 페이지에서 불러온 다음 함수와 연결된 버튼을 만들어서 직접 버튼을 클릭 시켜 확인하였는데, 테스트 후에는 버튼을 지워야 하고 다시 테스트 하고 싶으면 함수와 연결된 버튼을 다시 만들어야 하는 불편함이 있었다.
  • 타입스크립트 파일에서 함수를 직접 실행시켜보면 불편함이 해결된다!
• 테스트 라이브러리를 사용하지 않고 단순히 함수 실행 결과만 확인해보고 싶을 때 사용하는 방법에 대해 소개한다.

Code Runner + ts-node 설치

• VSCode 확장 프로그램 - Code Runner 설치

• ts-node와 필요한 패키지 설치

npm i -g ts-node
npm i -g typescript
npm i -D tslib @types/node

• tsconfig.json에 아래 코드 추가
  • ts-node를 통해 코드를 실행할 때만 "module": "commonjs**"**를 사용하도록 설정

"ts-node": {
  "compilerOptions": {
    "module": "commonjs"
  }
}

함수 실행

• 함수 실행 하는 코드 추가

import axios from 'axios';

export async function getPosts() {
  try {
    const response = await axios({
      method: 'GET',
      url: 'http://localhost:3001/posts',
    });
    console.log(response.data);
    return response.data;
  } catch (error) {
    console.error(error);
    return null;
  }
}

getPosts(); // 추가

• Code Runner 설치 후 오른쪽 상단에 생성되는 실행 버튼을 클릭하면 함수 결과를 확인할 수 있다.

• 콘솔창에 출력될 내용들이 OUTPUT 창에 출력된다!

References

ts-node 로 TypeScript (*.ts)파일 실행하기 Unknown file extension ".ts"
Typecript 에서 Cannot use import statement outside a module 에러 해결