[Node.js] NPM express 그리고 router, multer, body-parser

 

공부하면서 정리한 내용입니다

참고한 내용은 링크를 확인해주세요

---

 

 

 

📦 express

자바스크립트를 서버에서 사용하려면 구글의 V8 엔진을 기반으로 한 nodeJS 프레임워크를 사용해야 한다.

REST서버를 구현하게 해주는 프레임워크로는 Koa, Hapi, express 등이 있다.

그중 가장 대중화된 Express를 사용하자.

 

🔗 REST API란

🔗 Express 기본설명

🔗 Express 설치하기

🔗 Express API

🔗 www.Domain.com : Port?

 

 

cors

미들웨어

크로스오리진 이슈 해결해줌

🔗 access-control-allow-origin missing

 

static

express빌트인

express.static(”Directory”);

정적파일을 제공한다 (?)

자주사용하는 경로를 입력해두면 파일 불러올때 경로를 전부 입력하지 않아도 된다. (라고 이해함)

🔗 static 사용하기

 

use

express빌트인

express.use(”Option”);

 

body-parser

express빌트인

요청한 데이터를 받아서 Parse 타입에 따라 body-parser 를 다르게 설정한다.

express 4.16.0 버전이후 express빌트인되서 별도의 설치가 필요없음

🔗 미들웨어 body-parsor 알아보기

//express 4.16 이전 버전사용 예시

const bodyParser = require('body-parser'); 

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

//이후버전

import express, { json, urlencoded } from "express";

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

 

router

빌트인

express를 확장하여 깔끔하게 관리 가능하게 함

🔗 라우팅에 대하여

🔗 라우터 구조잡기 ⭐폴더정리방법

🔗 라우팅 분리하기 ⭐express.use 와 next() 사용방법

//routfile.js

import express from 'express';

let router = express.router(); 

export default router.get("/path", (req,res,next)=>{
		// ...
});

//index.js

import express from "express";
import router1 from "./routfile_1";
import router2 from "./routfile_2";

express.use("/mainpath", routfile_1[, routfile_2]);

//라우트파일1 호출URL  domain.com:port/mainpath/routfile_1
//라우트파일2 호출URL  domain.com:port/mainpath/routfile_2

import express from "express";

let router = express.Router();

router.get("/", (req,res, next)=>{

		next(); 
		// 이곳에서 판단(res())을 하지않는다. 다음 진행하는 라우터가 있는 경우 그곳에서 해결하자.
		// next에 파라미터를 넣을 경우 에러핸들러로 이동한다.

}).((req,res, next)=>{
		// something process
});

export default router;

 

multer

빌트인

express는 사용자가 업로드한 파일을 받아서 저장하는 기본 기능을 제공하지 않는다.

미들웨어인 multer가 전송받은 데이터를 처리하는 작업을 한다.

전달하는 정보는 크게 텍스트와 파일 로 나눌 수 있다.

🔗 github 상세가이드 ⭐

🔗 multer 파일업로드

🔗 multer 이미지업로드

import  multer from "multer";

let upload = multer({ dest: './uploads' }); // 파일 업로드할 디렉토리를 지정

app.post('/path', upload.single(), function(request, response){    
    console.log(" > request.file : ", request.file); // file확인
    console.log(" > request.body : ", request.body); // file외 정보
});


//* ----------- uploade type ---------- *
upload.none();   // file 없음 
upload.single(); // file 1개
upload.field();  // file 여러개

// file 여러개받기

import path from "path";
import fs   from "fs";

let fileOption = [
    { name: "parameter_name1", maxCount: "number"}, // 동일한 파라미터로 여러개의 파일을 받을 수 있음
    { name: "mainImage", maxCount: 3}, // 예시. mainImage이름으로 파일3개까지 받는다.
];

let upload = multer({
    storage: multer.diskStorage({
    
    	// File 저장소
        destination: (req, file, cb)=>{
            console.log("body", req.body);
            
            let image_path = "/path/";

            fs.exists(image_path, (exists)=>{	//exists가 false 일 경우, fs에서 업로드 건너뜀
                if(exists){  
                    cb(null, image_path);	//파일저장
                }else{
                    fs.mkdir(image_path, {recursive: true}, (err)=> cb(err, image_path););  
                    // make directory
                }
            });
        },
        
        // File name
        filename: (req, file, cb)=>{
            let ext = path.extname(file["fieldname"]); // 확장자 추출
            cb(null, Date.now() + ext);	//파일이름적용
        }
    })
});

app.post('/path', upload.field(fileOption), function(request, response){    
    //multer가 파일을 이미 저장하고 난 후 여기로 온다.
    //request.file 확인해보면 저장된 파일이름과 정보들이 보여진다.
}

 

 

 

 

 

 

코드1 라우터, 에러핸들러 사용한 index.js

import express, { json, urlencoded } from "express";  
import cors                          from "cors"; 

import green  from "./dir/greenfile.js";
import red  from "./dir/redfile.js";

const exp = express();
const port = process.env.PORT || 3000; // 환경포트사용방법 : cmd. PORT=번호 node 파일명

// express option
exp.use(urlencoded({extended: false })); 
exp.use(json());                         
exp.use(cors());

// RPC
exp.use(green);
exp.use("/test/", red);  //경로추가 할 수 있음


// Error handler 
exp.use((req, res)=>{
	// 라우터에서 경로를 찾지 못했을 경우 이곳으로!
    res.status(404).send("ERROR 404 URL 혹은 전송방식을 확인하세요");
});


exp.use((err,req,res,next)=>{
	// 라우터 next에서 파라미터를 전달한 경우 이곳으로!
	console.log(err instanceof Error); 
});

// Listener
exp.listen(port, ()=> console.log('> Express Listen port :' + port));

 

 

코드2 cors 옵션, post통신, 에러핸들러 사용한 index.js

import express, { json, urlencoded } from "express";
import cors from "cors";    
import multer from "multer";

const app = express();
const port = process.env.PORT || 3000;

const corsOption = {	//쿠키때문에 넣었던거 같음
    origin : true,
    credentials: true
}

app.use(urlencoded({extended: false}));
app.use(json());
app.use(cors(corsOption));

// Post
let upload = multer();

app.post("/door/knock", upload.none(), (request, response, next)=>{
    let key = request.body.key;
    console.log("request : ", key);

    if ( key ){
        response.json("welcome");

    } else {
        next(new Error("please key"));
    }
});


// Error handler
app.use((req, res, next)=>{
    res.status(404).json("404 Not Found");
});

app.use((err, req, res, next)=>{
    console.error(err);
    res.status(500).send("500 Broken");
});

// Listen
app.listen(port, ()=> console.log(`\n\nNode Start. Listen port is ${port}\n`));

 

 

 

---