TypeScript 프로젝트 초기세팅

1.프로젝트 폴더 생성

• 새로운 디렉토리를 만들고, 프로젝트의 이름으로 폴더를 명명합니다.

 

2.TyppeScript 설치

• 프로젝트 폴더에서 다음 명령을 사용하여 필요한 패키지를 설치하고 TypeScript를 설치합니다.

npm install -g typescript

 

 

3.package.json 파일 생성

• 프로젝트 폴더에서 터미널 또는 명령 프롬프트를 열고 다음 명령을 실행하여 package.json 파일을 생성합니다.

npm init -y

 

4.tsconfig.json 파일 생성

• tsc --init 명령어를 통해 tsconfig.json 파일을 생성합니다. 이 파일은 TypeScript 프로젝트의 설정을 담고 있습니다.

tsc --init

 

5.TypeScript로 개발하기

• 이제 src 디렉터리를 생성하고 그 안에 TypeScript 파일 (예: index.ts)을 만들어 개발을 시작할 수 있습니다.

mkdir src
touch src/index.ts

 

6.필요한 패키지 설치

• 프로젝트에 필요한 추가 패키지가 있다면 npm install 명령어로 설치합니다. 예를 들어, Express를 사용하려면 다음과 같이 설치할 수 있습니다

npm install express
npm install @types/express --save-dev
npm install --save-dev nodemon ts-node

 

7. .gitignore 설정

•  프로젝트 폴더 내에 .gitignore 파일을 생성합니다 https://www.toptal.com/developers/gitignore 사이트에 접속하여 필요한 설정을 추가하여 .gitignore 파일을 생성합니다. 이 사이트는 다양한 환경 및 언어에 대한 .gitignore 파일을 자동으로 생성해줍니다.
• vim, macOS, node, linux, visualStudioCode, dotenv 등 생성

.gitignore

# Ignore node_modules
node_modules/

# Ignore .env 파일 (환경 변수 파일)
.env

# Ignore dbmate schema 파일과 CSV 파일
schema.sql
*.csv

# Ignore macOS 관련 파일
.DS_Store

//예시입니다

 

8.package.json에 start 스크립트 추가

• package.json 파일 내에서 "scripts" 섹션에 다음과 같이 "start" 스크립트를 추가합니다.

"scripts": {
  "build": "tsc",
  "start": "nodemon --exec ts-node app.ts"
}

 

9.index.ts 서버 코드 작성

• index.ts 파일을 생성하고 서버 코드를 작성합니다. env 파일도 설정합니다.

import express, { Request, Response, NextFunction } from "express";

const app = express();

app.use(express.json());

const startServer = async (): Promise<void> => {

const PORT = process.env.PORT || 3000;  

app.listen(PORT, () => {

console.log(`Listening on Port ${PORT}`);

});
};

startServer();

 

10.서버 실행

• 터미널에서 프로젝트 폴더에서 다음 명령으로 서버를 실행합니다.

npm start

 

이렇게 하면 TypeScript 프로젝트를 초기화하고 설정할 수 있습니다. 필요한 패키지와 환경 변수를 추가하고, 서버를 작성할 수 있습니다. 문제가 있는 부분을 수정했으며, 원하는 대로 프로젝트를 확장하실 수 있습니다.