[EXPRESS in Node.js] 익스프레스 개요 (더미데이터 서버 만들어보기)

Node.js 웹 어플리케이션 프레임워크 - > Express !  뭔가 이름부터 짱짱 멋지네요

비슷한 프레임워크로 koa가 있다고는 하는데 뭔가 익숙한 Express에 대해서 작성 해놓으려고 합니다.

현재 사용중인 버전은 express 4.16.3 버전을 사용중에 있습니다. (2018-09-19)

이외에 같이 사용중인 npm Module은

cors 2.8.4

iconv-lite 0.4.24

morgan 1.9.1

multer 1.3.1

joi 13.6.0

faker 4.1.0 정도가 있겠네요

Node.js 가 설치 된 상태라고 가정 시에

express를 설치 하겠습니다.

      mkdir praticeExpress
      cd praticeExpress
      // npm 초기화 
      npm init 
      // express 설치 
      npm i express 
      // express 구조 파악을 위한 express-generator 설치  전역에서 사용하기 위한 -g 옵션 
      npm i express-generator -g 
      // 단순 구조파악을 위한 pug 프로젝트 생성
      express --view=pug testApp
      cd testApp
      npm install
      // LInux 기준 실행 
      npm start
  

구조 파악을 위한 generator 후에 구조 입니다.

.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug
    └── layout.pug




[공식 홈페이지 https://expressjs.com/ko/starter/generator.html ]

app.js 부터 보겠습니다.

1. app.js

불러 오는 모듈들이 엄청 많네요

http-errors,express,path,cookie-parser,morgan, ./routes/index , ./routes/users

이중에서 불러오는 모듈들에 대해서는 각각 모듈에 대해 검색? 으로 찾을수 있는 부분들이라고 생각되서 이를 제외한 것들에 대한 확인을 하였습니다.

var app = express; // 공식 홈페이지에 이와같이 쓸수 있도록 가이드 되었습니다. 따라갑시다

// views -> 사용하는 템플릿 엔진 이 있는 디렉토리 설정 

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

// 뷰 엔진 설정 - express에서 사용할 템플릿 엔진을 설정합니다. pug로 생성했기 때문에 pug로 지정하네요

app.set('view engine','pug');

// * 만약에 뷰엔진을 지정하지 않았을시에는 index.pug 라고작성해 주어야 하지만

// * 뷰 엔진을 pug로 지정하였을 경우는 index라고만 써도 index.pug로 인식하여 동작합니다.

// * res.render('index')      < - > res.render('index.pug')

// ** 템플릿 엔진 사용시에는 관련 모듈도 설치 하셔야됩니다. npm i pug 

// app.use

공식 홈페이지에는 이와같이 나타나있습니다.

지정되는 경로에서 지정된 미들웨어 기능을 탑재

app.use([Path],callback[,callback ...])

path : 미들웨어 기능이 호출되는 경로  Default [ '/' ]

 - 경로를 나타내는 문자열

 - 경로와 패턴

 - 경로와 일치하는 정규식 패턴

 - 위의 조합의 배열

callback : 콜백 함수                         Default : None

 - 미들웨어 기능

 - 일련의 미들웨어 기능 , 로 구분 

 - 미들웨어 기능의 배열

 - 위의 조합의 배열

자세한 내용은 따로 포스팅 하겠습니다.  

아래의 코드들에 대해 설명을 달자면

// express.json 은 express 16 버전 부터 사용 가능 

// express 내장 미들웨어 로 JSON 을 구문 분석 및 Content-type 헤더가 type 옵션과 일치 하는 요청을 보고하는

// 미들웨어를 반환하여 use ( 현재 express에서 사용 합니다. )

// 만약에 Content-type이 맞지 않거나 등의 오류가 발생하면 request 는 req.body 에 채워지는데 {} 값으로 채워집니다.

app.use(express.json());

// urlencoded 역시 내장된 미들웨어로 body의 인코딩을 UTF-8 로 받아 처리해준다.

// extended: 옵션은 기본값은 true이며 true일 경우  

// URL-encoded data와 querystring library 또는 qs 라이브러리 사이의 파싱을 선택할수 있게 허용한다.

// false로 주게 되면 이 부분은 허용하지 않게 한다. ( express 자체적으로 처리 )

app.use(express.urlencoded({ extended: false }));

// express 내장 미들웨어로 루트 디렉토리에서 정적 데이터들 위치를 지정한다. 

// req.url 로 제공된 root디렉토리 와 결합하여 제공할 파일을 결정 

app.use(express.static(path.join(__dirname,'public')));

// 라우터를 사용  -> routes 에서 다시 

app.use('/',indexRouter);

app.use('/users',usersRouter);

// 이외 코드들은 express 에러 핸들링 코드로 되어있는데 이부분은 따로 다뤄야 할것 같습니다.!

2. bin

실행 파일을 놓은 폴더 입니다.  (현재는 어떤 느낌인지 정도만 보고 넘어갑니다.)

3. package.json

현재 사용하는 npm 프로젝트의 의존성 파일입니다.

4. public

정적 파일로 사용할 폴더입니다. 대부분 리소스 파일들을 놓습니다.

해당 폴더를 사용하기 위해서 app.js에서는

express.static이라는 메서들를 사용합니다.

app.use(express.static(path.join(__dirname,'public')));

5. routes

express에서 use로 사용하기로 되어있던 라우터들이 있는 폴더 입니다.

app.use('/',indexRouter);

app.use('/users',usersRouter);

// 로사용 

var express = require('express');

// **** express.Router는 새로운 Router 오브젝트를 반환 해주는 express API 입니다.

var router = express.Router();

/* GET users listing. */

// / 로 작성하였지만 실제 app.js에서는 app.use('/users'/로 경로를 지정하기 때문에

// / 로 작성하여도 실제 동작은 /users 가 됩니다. 

// get으로 /totalUser 라고 작성시에는 실제로는

// /users/totalUser에 대한 라우팅을 실행합니다. ** app.use('/users', ... ) 로 호출하였을 시에

router.get('/',function(req,res,next) {

res.send('respond with a resource');

});

// 위의 만들어진 router를  module.exports를 통하여 exports 합니다. 

// app.js 에서는 var userRouter = require('./routes/users'); 로 사용 

module.exports = router; 

6. views

express에서 사용할 뷰 (views) 템플릿 엔진이 있는 폴더 입니다.

app.set('views ', path.join(__dirname,'views')); 로 지정 

generator를 통해서 기본적인 구조를 파악 한 후에 간단한 더미데이터를 던져 주는 서버를 제작해 보았습니다.

// dummy Data Server

https://github.com/lgance/VanillaJS/tree/master/myVanillaJS/legacy/dummyServer

사용은 

git clone https://github.com/lgance/reactStudy.git 로 클론을 뜬 후에 내부에 dummyServer가 있을 겁니다.

cd dummyServer 

npm update ( package.json 과 package-lock.json 을 통한 모듈 설치 -> git에는 node_modules를 올리지 않음 )

node app.js

요청은  localhost:3505/dummys?columns=20&rows=50 와같이 사용하시면 됩니다.

원하는 컬럼과 로우에 맞게 데이터를 던져 줍니다(JSON) 

[결과]