[nodejs] 5. nodejs + express 프로젝트 구성하여 리팩토링

안녕하세요. 

지난 시간까지는 express의 대해 간단하게 서버 구축하여 각 api를 지정하여 예제로 연습을 진행해보았습니다.

본격적으로 프로젝트를 진행하기 앞써서 설계부분을 진행을 하여 구축하는 과정에서 차후 유지보수를 위해 진행하기 위해서 프로젝트 구조를 나누는 연습을 진행하겠습니다.

 

Github : https://github.com/BerkleyLim/basic_nodejs

GitHub - BerkleyLim/basic_nodejs: 이 프로젝트는 node.js 입문을 위한 프로젝트 중 하나입니다.

 

 

실제 프로젝트 투입 시 nodejs는 각 프로젝트 및 개발 스타일마다 다를 수 있기 때문에 조금씩 다른 점 이에 참조 바랍니다.

 

nodejs 설계시 아래와 같이 구성 되는 경우로 되어있습니다.

 

<프로젝트 구성>

--- public
--- src
      ---- index.js (cafe24 호스팅 시 web.js)
      ---- router
      ---- view

 

 

하지만, 저는 Java 개발자 (Spring boot) 출신과 어울리는 설계 구조로 정하고 진행 하였습니다.

Spring 구조 상 MVC 패턴으로 구성 되어 있으며, 현재 백엔드만 구축하는 용도로만 사용할 것이기 때문에 Spring 구조 모방하여 아래와 같이 설계를 진행합니다.

 

<현재 구성된 프로젝트>

--- src
      ---- main
            ---- index.js (cafe24 호스팅시 web.js)
            ---- config
            ---- controller
                  ---- index.js (각 api별로 설정)
                  ---- MainViewController.js (메인용 api 별 입/출력 설정)
                  ---- MemberController.js (회원 정보용 api 별 입/출력 설정)
                  ---- StoreController.js (매장 정보용 api 별 입/출력 설정)
            ---- service
      ---- resource

 

 

 

- 프로젝트 시작 점 : src/main/index.js

- config : 각 환경 설정을 담당하는 디렉토리 (Spring 프로젝트 특성 그대로 모방)

- controller : Spring 특성 상 제어의 역행 특성으로 api 호출 받으면 해당 메소드를 찾아 진행합니다.

- service : 로직 구현, DB 조작 (DML) 데이터 가공하여 controller 단에 보낸다.

- resource : 파일 관련 데이터 및 my-batis 등 질의어를 위해 저장

 

 

 

1. Package.json 설정

{
  "name": "ver05",
  "version": "1.0.0",
  "description": "",
  "main": "src/main/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node src/main/index.js"
  },
  "author": "",
  "license": "ISC",
    "dependencies": {
    "express": "^4.18.2"
  }
}

 

 

- main Key : 시작점에서는 src/main/index.js로 지정한다.

- scripts Key : "start" : "node src/main/index.js" 지정

- 이 작업은 디렉토리 구조의 따라 다르게 설정한다.

 

2. 소스코드

ver04에 index.js에서 하나로만 몰빵한 것을 각각 나눠보기

 

<src/main/index.js>

// express 선언
const express = require("express");

// express에 app 넣고, 포트 지정
const app = express();
const PORT = 300;
const http = require('http').createServer(app);

// api 지정 (router)
const routes = require('./controller')

app.use(routes)
// 서버 실행시 화면 표시
const consoleListening = () => {
  console.log(`server start : http://localhost:${PORT}`);
}

// 서버 실행
// main 화면입니다. 결과 뜨고,
// console에 server start : http://localhost:300 올리기
http.listen(PORT, consoleListening);

 

 

- 기존에 있는 코드에서 routes 를 유사 spring 구조로 controller로 이용하여 지정한다.

- app.use(routes)를 넣어 router 제어를 위해 사용한다.

- 이후, ver04 소스코드 구조랑 유사합니다.

 

<src/main/controller/index.js>

// 이부분 router를 지정하여 각 사용할 api 지정
const router = require('express').Router();
const MainViewController = require('./MainViewController');
const MemberController = require('./MemberController');
const StoreController = require('./StoreController');

router.get('/', MainViewController.mainView)
router.get('/memberView/', MemberController.memberView)
router.get('/storeView/', StoreController.storeView)

module.exports = router;

 

 

- 지금 단계에서는 ver04 결과 값 그대로 표현하기 위해 간단하게 api 지정을 해줍니다.

- 이 단계에서는 사용 controller를 이용하여 화면 전환을 위해서 간단하게 사용하였습니다.

- 각 controller에서는 exports를 이용하여 사용합니다.

- 이후, module에서 router 지정

 

 

<src/main/controller/MainViewController.js>

exports.mainView = (request, response, next) => {
  response.send('main 화면입니다.')
};

 

 

<src/main/controller/MemberController.js>

exports.memberView = (request, response, next) => {
  response.send('member 화면입니다.')
};

 

 

<src/main/controller/StoreController.js>

exports.storeView = (request, response, next) => {
  response.send('매장 정보 입니다!!!')
};

 

 

 

3. 설명

- 각 api 별 진입시 나오는 결과 그대로 출력됩니다.

- 특별히 기능은 없고 이전 포스팅 4. express에 각 경로별로 출력될 view단 나타내기 그대로 결과 출력

- https://berkley.tistory.com/65

[nodejs] 4. express에 각 경로별로 출력될 view단 나타내기

 

 

4. 결과

<api : / >

 

 

 

<api : /memberView >

 

 

<api : /storeView >

 

 

자세한 사항은 github에서 ver05 소스코드 구조를 확인하시기 바랍니다.