[NodeJS] express 프로젝트 생성 ( Side Project - 스터디 사라져서 중단... )

프로젝트를 진행하면서 react와 javascript를 공부해 나가는 스터디에 나가게 되었습니다.

 

그러면서 프로젝트 주제를 정하게 되었고 커뮤니티 웹앱을 만들게 되었습니다.

 

그러다 보니 백엔드를 맡을 사람이 필요하게 되었는데 express를 좀 더 공부해보자는 제가 맡게 되었습니다.

 

물론 프론트쪽의 작업도 몇개 주어지긴 했지만 일단은 주는 백엔드이다보니 작업을 하면서 정리를 해보려고 합니다.

 

 

express 프로젝트 생성

---

터미널에서 해당 명령어를 입력하면 프로젝트가 생성됩니다.

express --view=ejs 프로젝트명

** --view=템플릿 -> 이부분은 생략 가능합니다.

저는 프론트를 react로 진행하기 때문에 선언을 하지않고 바로 프로젝트를 생성하였습니다.

 

express 환경에서 typescript를 적용하여 프로젝트를 진행할 것입니다.

package.json

"devDependencies": {
  "@types/express": "^4.17.2",
  "nodemon": "^2.0.2",
  "ts-loader": "^6.2.1",
  "ts-node": "^8.5.4",
  "ts-node-dev": "^1.0.0-pre.44",
  "tslint": "^5.20.1",
  "typescript": "^3.7.4"
}

package.json의 개발쪽에 해당 스크립트 사용하여 모듈을 다운받습니다. -> npm i

* build 시에 typescript -> javscript으로 컴파일 되기 때문에 devDependecies에 넣어 주었다.

 

모듈을 다운 받은 후에 typscript를 사용하기 위한 config 파일을 생성해줍니다.

tsc --init

 

그럼 tsconfig.json 파일이 생성되었을 것입니다.

{
  "compilerOptions": {
    "lib": ["es5","es6"],
    "target": "es5",                                     
    "module": "commonjs",                
    "typeRoots": [
      "./node_modules/@types",
      "./src/types"
    ],                                  
   "sourceMap": true,
    "outDir": "./build",                                   
   	"esModuleInterop": true,                            
    "forceConsistentCasingInFileNames": true,          
	"strict": true,                                    
    
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

일단 사용된 설정은 이와같습니다.

* 사용에 따라 설정파일을 다를 수 있습니다.!!!

 

 

app.ts와 server.ts를 연결

---

app.ts

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

const path = require('path');
const app: express.Application = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(express.json({ limit: '50mb' }));
app.use(express.urlencoded({ limit: '50mb',extended: true }));
app.use(express.static(path.join(__dirname, '../public')));

//--------- ROUTING ----------
app.get('/', (req: Request, res: Response, next: NextFunction) => {
    res.header('Access-Control-Allow-Origin','*');
    return res.status(200).send({});
});

export default app;

 

사실...프로젝트 중간에 정리를 시작한 거라 파일 구성이라든지.. 다를수가 있습니다.

일단 express 모듈만 남겨놓고 다 지운거라 대충 이와 비슷한 구조가 나올것이라고 생각이 듭니다.

 

app.ts를 살펴보면 server에 관련된 내용이 없습니다.

그럼 서버를 어떻게 만들어서 구동시키지 라는 생각이 들 수 있는데

저는 server를 따로 분리시켜서 해당 서버 모듈안에 app를 끼워넣는 식으로 진행할 예정입니다.

 

server.ts

import app from "./app";
import {createServer} from "http";

const port: number = Number(process.env.PORT) || 3000;
const server = createServer(app);

server.listen(port, () => {
    console.log(`APP START : ${port} port`);
});


export default {
    server
};

app.ts를 불러와서 server.ts와 연결 (createServer(app))

 

연결 후에 서버를 구동하기 전에 typescript 파일을 javascript파일로 컴파일을 해줘야합니다.

 

구동시킬때마다 tsc를 입력하여 컴파일 하기에는 불편하기 때문에 package.json파일에서 script 추가하여 서버 구동전에 컴파일이 될 수 있도록 합니다.

"scripts": {
    "prestart": "tsc",
    "start": "set NODE_ENV=development && nodemon --exec ts-node ./build/src/server.js"
  },

터미널에서 npm start 입력시에 tsc가 먼저 실행되어 컴파일이 이루어지게 됩니다.

 

서버 구동시 연결된것을 확인 할 수 있습니다.

 

 

이번 포스팅은 프로젝트 생성부터 서버 생성까지만 진행하고

 

다음 포스팅에서는 MySQL을 연동하는 부분을 진행 할 예정입니다.

 

---