프로젝트 환경 설정 및 기본 구조 설계

1. Node.js 및 TypeScript 설치

1. Node.js 설치: Node.js 공식 웹사이트에서 최신 LTS 버전 설치
2. TypeScript 설치: 전역으로 설치하거나 프로젝트 내에 설치

npm install -g typescript

또는 프로젝트 내에:

npm install --save-dev typescript

Node.js와 TypeScript 확인

node -v
tsc -v

2. 프로젝트 초기화

1. 프로젝트 폴더 생성 및 초기화

mkdir company-website
cd company-website
npm init -y

2. TypeScript 설정 파일 생성:

npx tsc --init

tsconfig.json 파일이 생성됨

주요 설정:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true
  }
}

3. 프로젝트 디렉토리 구조 설계

company-website/
├── src/
│   ├── routes/
│   ├── controllers/
│   ├── views/
│   ├── app.ts
├── dist/ (빌드된 파일)
├── package.json
├── tsconfig.json

1. 폴더 생성

mkdir src src/routes src/controllers src/views
touch src/app.ts

2. src/app.ts에 기본 서버 코드 작성

import express, { Request, Response } from 'express';

const app = express();
const PORT = 3000;

app.get('/', (req: Request, res: Response) => {
    res.send('Hello, World!');
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

4. 의존성 설치

1. Express.js 설치

npm install express
npm install --save-dev @types/express

2. Nodemon 설치 (개발용) 자동으로 서버를 재시작하도록 설정

npm install --save-dev nodemon

3. 스크립트 추가 (package.json) package.json 파일의 scripts 항목에 다음을 추가:

"scripts": {
    "start": "node dist/app.js",
    "dev": "nodemon src/app.ts"
}

5. 테스트 실행

1. TypeScript 코드를 컴파일:

npx tsc

2. dist 폴더에 JavaScript 파일이 생성됨

서버 실행:

npm run dev

브라우저에서 http://localhost:3000으로 접속하여 "Hello, World!" 메시지가 보이는지 확인