튜토리얼: Snyk 앱 생성

이 튜토리얼에서는 TypeScript를 사용하여 Snyk 내의 프로젝트 목록을 사용자에게 보여주는 간단한 Snyk 앱을 생성해 보겠습니다.

사전 준비 사항

• NodeJS

• Snyk 계정

기본 구성

먼저, 기기의 적절한 위치에 프로젝트를 담을 디렉토리를 생성합니다. 새로 생성된 디렉토리 내에서 종속성을 추적하고 프로젝트의 이식성을 보장하기 위해 애플리케이션의 package.json 매니페스트를 초기화합니다.

npm init을 실행하고 안내에 따릅니다. 원하는 만큼 정보를 입력할 수 있습니다. 지금은 기본 옵션으로 충분합니다.

이제 종속성 정보를 저장할 공간이 생겼으므로, npm을 사용하여 TypeScript를 개발 종속성으로 설치합니다.

npm install typescript --save-dev

TypeScript가 설치되었지만, tsc 바이너리에 컴파일 옵션을 제공하기 위한 구성 파일이 필요합니다. 프로젝트 루트에 tsconfig.json이라는 TypeScript 구성 파일을 생성합니다. 다음 템플릿을 사용하십시오.

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "declaration": true,
    "sourceMap": true,
    "moduleResolution": "node",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "skipLibCheck": true,
    "esModuleInterop": true
  },
  "exclude": [
    "./tests",
    "./dist"
  ]
}

이 옵션들은 TypeScript가 ES6 JavaScript를 생성하도록 하고, 생성할 모듈 코드 유형을 지정하며, 컴파일된 파일에 대한 소스 맵(Source Map) 제공 여부 등 유용한 옵션들을 설정합니다. 가능한 옵션들에 대한 전체 개요는 TypeScript 문서의 TSConfig 참조 소개를 참조하십시오.

이 튜토리얼의 목적에서 가장 주목할 만한 옵션은 rootDir과 outDir입니다. 이 옵션들은 각각 소스 .ts 파일과 컴파일된 .js 파일이 프로젝트 내에서 어디에 위치하는지를 정의합니다. 설정 값에서 참조하는 디렉토리들을 생성합니다.

mkdir ./dist
mkdir ./src

테스트

기본적인 환경이 갖춰졌으므로, ./src/index.ts 파일을 생성하여 간단한 Hello World를 만들어 보겠습니다.

const world = 'world';

export function hello(world: string = world): string {
  return `Hello ${world}! `;
}

이제 모든 것이 올바르게 연결되었는지 확인할 수 있습니다. npx tsc를 실행하여 프로젝트를 컴파일합니다.

성공하면 프로젝트 구조는 다음과 같습니다.

my-snyk-app/
 - dist/
   - index.d.ts
   - index.js
   - index.js.map
 - src/
   - index.ts
 - node_modules/
   - <다양한 항목들>
 - package-lock.json
 - tsconfig.json

tsc 프로그램이 소스 TypeScript 파일을 ES6 JavaScript로 컴파일하고 디버깅을 위한 소스 맵을 제공했습니다.

컴파일러를 감시 모드(Watch mode)로 설정하여 .ts 파일의 변경 사항을 지속적으로 감지할 수도 있습니다: npx tsc -w