1. Typescript 개발 환경 설정하기

내 개발 환경 기준으로는 Intellij에서 Typescript 기본 개발 환경 설정부터 진행해야 한다. 회사에서 만들어져 있는 코드를 쓰다가 새로 하려니 가물가물해서 또 새로운 느낌이다. Intellij는 내가 유료로 구매해서 사용하고 있어서 쓰는 것이고 그냥 vscode로 개발해도 크게 다르진 않을 것 같다.

필요 배경지식

• Docker/Podman container에 대한 이해
• Dockerfile 작성 방법
• Nodejs , Typescript 기본 빌드 및 실행 방법

Prerequisite 

• Intellij
• Intellij plugins 설치
  • Javascript and typescript : 로컬 설치를 위함.
• Podman desktop (혹은 Docker Desktop)
  
  • Podman을 쓰는 이유는 Docker Desktop은 기업 내에서 사용하기에는 유료라서 podman을 쓰는 것에 좀 더 익숙해지고자 함이다. 
  • 서로 대부분 호환되기 때문에 뭘 써도 크게 상관없을 듯
  • 또한, 굳이 컨테이너를 쓰는 이유는 실제 실행시에 환경 설정에 대한 고민을 하기 싫어서.. podman만 깔려있으면 여러 환경에서 쉽게 실행하기 위함이다. 
• NodeJS 20.9 설치

 

기본 필요 파일 생성

Typescript 개발을 위해서 기본으로 필요한 파일이 존재한다.

Chatgpt가 생성해 준 예시를 사용하려고 한다.

1. src/index.ts 

// This is a simple TypeScript index file

function welcomeMessage(name: string): string {
    return `Welcome to TypeScript, ${name}!`;
}

console.log(welcomeMessage("Developer"));

2. package.json (Nodejs 의존 관리 파일)

Typescript 빌드를 위해서 필요한 npm library가 포함되어 있다.

{
  "name": "typescript-example",
  "version": "1.0.0",
  "description": "A TypeScript project example",
  "main": "dist/index.js",
  "scripts": {
    "start": "node dist/index.js",
    "build": "tsc",
    "dev": "ts-node src/index.ts",
    "lint": "eslint . --ext .ts"
  },
  "keywords": [
    "typescript",
    "example"
  ],
  "author": "Your Name",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "@types/express": "^4.17.0",
    "@types/node": "^14.0.0",
    "typescript": "^4.0.0",
    "ts-node": "^9.0.0",
    "eslint": "^7.0.0",
    "eslint-config-standard": "^14.0.0",
    "eslint-plugin-import": "^2.20.0",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-promise": "^4.2.0",
    "eslint-plugin-standard": "^4.0.0"
  }
}

3. tsconfig.json

`tsc` 명령어를 통해 typescript 코드를 javascript 코드로 만들어 주는데

tsc 명령어를 실행하려면 tsconfig.json 파일이 필요하다.

다음과 같이 만들어주자.

{
  "compilerOptions": {
    "target": "es5",                         // 컴파일된 JavaScript가 지원할 ECMAScript 버전
    "module": "commonjs",                    // 사용할 모듈 시스템
    "outDir": "./dist",                      // 컴파일된 파일들이 위치할 디렉토리
    "rootDir": "./src",                      // TypeScript 소스 파일들이 위치할 루트 디렉토리
    "strict": true,                          // 모든 엄격한 타입-체킹 옵션을 활성화
    "esModuleInterop": true,                 // default export가 없는 모듈을 위한 지원을 활성화
    "skipLibCheck": true,                    // 선언 파일의 타입 체킹을 건너뛰기
    "forceConsistentCasingInFileNames": true // 대소문자가 일치하지 않는 파일 참조를 금지
  },
  "include": [
    "src/**/*"                               // 컴파일할 TypeScript 파일들의 패턴
  ],
  "exclude": [
    "node_modules",                          // 컴파일에서 제외할 디렉토리 패턴
    "**/*.test.ts"                           // 테스트 파일 제외
  ]
}

4. Dockerfile

위의 파일들을 통해서 Typescript를 실행할 Podman 이미지를 만들기 위한 파일이다.

# 베이스 이미지 선택
FROM node:20.9

# 작업 디렉토리 설정
WORKDIR /usr/src/app

# 의존성 파일 복사
COPY package*.json ./

# 의존성 설치
RUN npm install

# 소스 코드 복사
COPY . .

# TypeScript 컴파일
RUN npm run build

# 애플리케이션 실행
CMD [ "node", "dist/index.js" ]

 

로컬 빌드 및 실행 : 로컬에서 프로그램 실행

다음 명령어 순서로 Typescript를 로컬 빌드를 할 수 있다.

1. Package.json에 정의된 NPM 라이브러리 로컬 설치

npm install

실행하면 node_modules에 라이브러리가 설치되고 package-lock.json파일이 생성된다.

2. Typescript 빌드

npm run build

Typescript가 빌드 되면서  index.ts을  dist/index.js 로 생성해준다.

3. 코드 실행

node dist/index.js

실행 결과

예제 프로그램 실행 결과

 

Deploy : Podman 이미지 빌드 및 실행

이 부분은 추후 현재 사용하고 있는 곳이 아닌 다른 환경에서도 바로 실행이 가능하게 하기 위함이다.
그런게 필요없다면 이 부분은 진행하지 않아도 된다.


다음 명령어를 통해서 이미지를 빌드한다.

podman build -t typescript-app .

결과 예시

STEP 1/7: FROM node:20.9
STEP 2/7: WORKDIR /usr/src/app
--> Using cache 1aa55309545b9b76360e4f3f98063af3435076d9848fa1718b0d40a763ffe527
--> 1aa55309545b
STEP 3/7: COPY package*.json ./
--> Using cache 6248f49b86bd50c58c8e2226d306f8a757265acbed823452e9c703b7f371a14a
--> 6248f49b86bd
STEP 4/7: RUN npm install
--> Using cache 00ac7c519cd3127328cb82697eb2456b19486c9840ba5f7eca483e61f7f94591
--> 00ac7c519cd3
STEP 5/7: COPY . .
--> 54f38cf9541c
STEP 6/7: RUN npm run build

> geeknews-crawler@1.0.0 build
> tsc

--> 4b8615b5e209
STEP 7/7: CMD [ "node", "dist/main.js" ]
COMMIT typescript-app
--> e56ac552ba4e
Successfully tagged localhost/typescript-app:latest
e56ac552ba4ee713c8fd61b04921f1ec52cdae21e2448caf7a5ef818a66c6603

 

다음 명령어를 통해서 예시 App을 실행해 본다

podman run -d --name my-typescript-app typescript-app

 

실행 결과

예시로 생성된 index.ts 파일에는 Welcome to Typescript, Developers!라는 출력 외에는 별 다른 기능을 하지 않는다.

따라서, 컨테이너 실행 후에 로그로 해당 문구를 출력했는지 확인해 보면 된다.ㅣ

정상 실행되어 잘 출력이 된 모습.

 

잡설

대충 지피티가 만들어주는 대로 쭉쭉하다 보니 빨리 만들 수 있기는 한데 중간에 문제가 생기면 

내가 만든 코드가 아니다 보니 디버깅하는데 시간이 더 걸리는 것 같다.

만들어준 코드더라도 천천히 읽어보면서 검증하는 과정이 지속적으로 필요한 듯 ㅠ