이전 블로깅 MVC 라우팅 요청과 응답 프로세스에 대한 개념을 기반으로 
Node Express 기반 라우팅 모듈을 만들고 간단한 주소체계 설계/구현 라우팅 메소드를 하나 구현해보도록 하겠습니다. 

-아래 예시는 사용자가 각종 게시글 관련 웹페이지를 기반으로한 게시글등록/수정/확인/삭제 요청을 서버로 요청해오면
적절한 라우팅 요청주소 체계를  설계/구현하고 서버에서 해당 요청에 대한 적절한 처리 및 응답을 클라이언트로 보내는 시나리오를 직접 구현합니다.

관련 실습 깃허브 링크 정보 : https://github.com/eddykang1074/node-express-app.git

1) Express 라우팅 모듈 생성 및 라우팅 구현하기 

STEP1)Node Express 프로젝트 준비하기
-node express 기본 프로젝트를 하나 만들거나 기존에 만들어진 프로젝트를 준비합니다.
ex) node-express-app 


STEP2)게시글 관리 웹페이지 요청과 응답처리 라우팅 모듈파일 추가하기 
-node-express-app 프로젝트내 routes 폴더에 article.js 라우팅 파일을 새로 추가합니다.
-routes폴더 선택 오른쪽마우스 클릭 > 새파일 > article.js
-라우팅 모듈 파일의 이름은 해당 모듈을 통해 사용자의 어떠한 요청(업무/기능)에 대해 응답처리를 담당할지에 따라 모듈파일명 만들면됩니다.

routes\article.js //게시글 정보관리 웹페이지 요청과 응답처리 라우팅 모듈

예시) 라우터 파일 생성예시 
routes\member.js //회원 정보관리 웹페이지 요청과 응답처리 라우팅 모듈
routes\index.js //메인 및 공통 정보관리 웹페이지 요청과 응답처리 라우팅 모듈
routes\product.js //제품 정보관리 웹페이지 요청과 응답처리 라우팅 모듈
routes\api\product.js //제품 정보 데이터 처리 전용 요청과 응답처리 RESTful API 라우팅 모듈


STEP3) 라우팅 모듈 파일 기본 구조 구현하기  
-라우터 파일을 만들면 express패키지에서 제공하는 Router()메소드를 통해 사용자 요청과 응답을 처리하는 라우터 객체를 생성하고
 라우터 객체에 각종 요청 유형별 라우팅 메소드를 구현하고 최종 라우터 객체를 해당 라우터모듈에서 exports를 통해 내보내기 해주면 됩니다.
-라우터 객체 참조 및 라우팅 메소드 구현 그리고 라우터객체 내보내기 등의 과정으로 모듈을 구현하며 자세한 내용은 아래 주석을 참고바랍니다.

-아래 소스를 복사해서 article.js 라우터 모듈파일에 붙여넣기 합니다.

-routes\article.js

//express 패키지를 참조합니다.
var express = require('express');

//express객체의 Router()메소드를 호출하여 사용자 요청과 응답을 처리하는 서버측 router 객체를 생성합니다.
//일반적으로 서버측 각각의 라우팅 모듈은 추후 app.js내에서 기본 URL주소체계를 정의하게 되며
//article.js 라우팅 모듈의  기본주소 체계로  http://localhost:3000/article 를 사용할 예정입니다.  
var router = express.Router();

/*
- 게시글 목록 웹 페이지 요청과 응답 처리 라우팅 메소드
-요청주소 : http://localhost:3000/article/list
-요청방식 : GET 방식
-응답결과 : article/list.ejs 뷰파일 웹페이지 내용
*/
router.get('/list', function(req, res, next){
    //게시글 목록 뷰파일을 반환합니다.
    res.render('article/list.ejs');
});


//반드시 라우터 객체를 모듈 외부로 내보내기 합니다.
module.exports = router;


STEP4) 라우팅 메소드 형식 및 기능 구현하기 
-라우터 모듈 파일내에서 router.get() 영역이 라우팅 메소드이며 Node Express에서는 다양한 라우팅 메소드 유형을 통해 실질적인 사용자 요청과 응답을 처리합니다.
라우팅 메소드의 형식은 기본적으로 아래와 같습니다.

router.라우터메소드유형('라우팅주소',요청에대한 응답처리 콜백함수);

예시)  router.get('/list',function(req,res,next){}); 

라우팅 메소드의 주요 형식에 대해 설명드립니다. 

A)라우터 메소드 유형

-라우터 메소드 유형은 클라이언트에서 요청해오는 방식(GET,POST,PUT,PATCH,DELETE..)에 따라
router.get();
router.post();
router.put();
router.patch();
router.delete();
등의 적절한 라우터 메소드로 구현해야합니다. 

예를 들면 클라이언트에서 URL주소를 통해 GET방식으로 서버로 특정 요청을 해오면 라우터에서는
router.get()메소드를 POST방식으로 무언가 요청해오면 router.post() 방식으로 서버측에서 요청에 대해 요청방식의 라우터 메소드로 기능을 구현해줘야합니다. 

라우터 메소드에는 라우팅주소와 응답을 위한 콜백함수 2개의 파라메터를 전달해야하며 해당 파라메터에 대해서는 하단에서 자세히 설명드립니다. 

router.라우터메소드유형('라우팅주소',요청에대한 응답처리 콜백함수);


B)라우팅 주소 -라우팅 주소체계 설계 및 구현 
-라우팅 메소드의 첫번쨰 파라메터는 해당 메소드가 호출될떄 사용할 라우팅 주소(문자열로 표기)입니다.
-아래 예시에서는 '/list' 가 해당 라우팅메소드의 기본주소이며 라우팅 메소드가 정의된 라우터 모듈(article.js)의 기본주소체계와 결합해
전체적으로는 http://localhost:3000/article/list 주소 또는 http://도메인주소/article/list 형태로 클라이언트에서 호출했을때 해당 라우팅 메소드가 요청을 접수하고 응답을 처리하게 됩니다. 

router.get('/list', function(req, res, next){
    //게시글 목록 뷰파일을 반환합니다.
    res.render('article/list.ejs');
});


**중요: 클라이언트에서는 URL 주소와 특정 요청방식을 통해 서버에 특정 기능을 요청해오면  서버에서도 반드시 동일한 주소체계 와  라우터 메소드 유형이 일치한 라우팅 메소드가 해당 요청을 접수처리하게 됩니다.
라우터 모듈내 라우팅 메소드는 사용자가 요청한 주소체계와 요청방식 2가지가 일치해야 해당 라우팅메소드가 호출되는점 숙지하시기 바랍니다.

-라우팅 메소드의 주소체계는 여러분(백엔드개발자)이 설계(정의)하고 구현합니다.
-게시글 목록 웹페이지에 대한 요청에 대해 응답을 처리하는 라우팅 메소드 주소를
http://localhost:3000/article/all 로 하고싶으면 router.get('/all',콜백함수);로
http://localhost:3000/article/list/all 로 하고싶으면 router.get('/list/all',콜백함수);로
정의하면 됩니다. 


C) 요청에대한 응답처리 콜백함수

자바스크립트에서의 콜백함수는 어떠한 요청(Call) 또는 호출이 왔을때 반드시 실행되어야하는 함수를 말하며
라우팅 메소드는 사용자에 의해 관련 라우팅메소드가 호출(요청)되면 라우팅메소드의 두번째 파라메터로 지정한 관련함수를 실행하여 호출에 대한 응답을 해당 콜백함수에서 처리합니다.

즉 라우팅 메소드는 사용자의 요청을 접수(동일URL+요청방식)하고 요청에 대한 서버측 응답처리는 라우팅메소드내 두번쨰 파라메터로 제공하는 콜백함수가 담당하는것입니다.
하기 라우팅메소드내 분홍색 영역이 콜백함수영역입니다.

router.get('/list', function(req, res, next){
    res.render('article/list.ejs');
});


-라우터 메소드의 콜백함수는 파라메터로 req,res,next를 기본적으로 전달받으며
req 매개변수(파라메터)는 HttpRequest객체로 웹브라우저에서 서버로 전달되는 각종 정보에 대한 접근이 가능하며
res 매개변수(파라메터)는 HttpResponse객체로 서버에서 클라이언트로 응답결과를 보내기 위한 객체로 제공됩니다.
next 매개변수는 해당 콜백함수의 흐름을 제어하기 위한 미들웨어 매개변수로 next를 이용하면 콜백함수의 흐름을 제어할수 있습니다.   

function(req, res, next){
    //게시글 목록 뷰파일을 반환합니다.
    res.render('article/list.ejs');
}


-콜백함수는 함수이기 때문에 함수 호출의 결과를 반환할수 있으며 return 구문이나 res(HttpResponse)객체를 통해  요청한 클라이언트에 최종 응답 결과물을 반환합니다. 

function(req, res, next){
    //게시글 목록 뷰파일을 반환합니다.
    res.render('article/list.ejs');
}


ㅁ콜백함수의 주요 응답 유형 

res.render('특정 뷰파일 경로',뷰파일에 전달할 json데이터);
-MVC패턴에서의 특정 View 파일을 지정해서 뷰파일 내용을 응답결과물로 반환합니다.
-뷰파일을 지정할때 해당 뷰파일에 모델영역에서 가져온 데이터도 전달하여 뷰내에서 데이터 기반 동적 html을 제어하여 그 결과물을 반환하기도 합니다.

res.json('JSON데이터');
-MVC 패턴 Model 영역에서 가져온 데이터를 JSON데이터로 변환하여 순수한 데이터만 응답결과물로 반환합니다.
-RESTful API 기능을 구현하고 싶으면 해당 라우팅메소드의 응답결과를 res.json('json데이터')로 정의하기만 하며 됩니다.

res.redirect('이동하고자하는 URL주소');
-redirect('이동하고자하는 URL주소')메소드내에 URL을 지정하면 지정한 URL로 사용자 웹브라우저 화면을 이동시킬수 있습니다.
-res.redirect('/article/list'); //현재 접속한 도메인주소가 생략된 형태로 게시글목록 페이지로 이동시킴
-res.redirect('https://mixedcode.com/member/login'); //믹스드코드닷컴 사이트 로그인 페이지로 이동시킴

res.send('다양한콘텐츠');
-send는 만능메소드로 뷰파일/json데이터 등 send()메소드를 통해 다양한 콘텐츠 결과를 반환할수 있습니다.
-send(html코드 or json데이터);

res.end();
-요청 응답결과 없을때( 404에러발생)

res.sendFile(경로)
-경로에 위치한 파일을 응답한다.


-article.js 내 하기 라우팅 메소드의 응답유형은 특정 뷰파일을 반환하는 res.render()메소드를 이용하고 있으며
해당 코드가 정상적으로 작동하려면 프로젝트내 views폴더내에 article폴더를 만들고 article폴더내에 list.ejs란 뷰파일을 아래와 같이 생성합니다.
-해당 views/article/list.ejs 뷰파일 경로의 views폴더 경로는 생략하며 list.ejs내에 예시와 같이 html 웹페이지를 간략히 작성합니다.

router.get('/list', function(req, res, next){
    res.render('article/list.ejs');
});



-views/article/list.ejs
-VSCode 단축키 Shift+1 키 + Tab 키를 눌려 간단한 웹페이지 소스를 아래와 같이 생성합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>게시글 목록 웹페이지</title>
</head>
<body>
<h3>게시글 목록 웹페이지</h1>
</body>
</html>


라우터 메소드의 콜백함수는 요청에 대한 서버측 응답을 처리하는 역할을 담당하며 동기방식 과 비동기 콜백함수로 구현 가능합니다. 

-동기방식 콜백함수 

function(req, res, next){
    res.render('article/list.ejs');
}


-비동기 방식 콜백함수 

async(req, res, next)=>{
    res.render('article/list.ejs');
}



STEP5) 신규 라우터 파일 노드앱에 반영하기 
routes 폴더내 라우터 모듈 파일을 만들었다고해서 바로 라우팅 규칙이 적용되지는 않습니다.
라우터 모듈파일을 새로 만들었으면 반드시 아래 절차에 따라 노드앱에 라우터 파일을 참조 추가하고 라우터 모듈의 호출 기본주소 체계를 지정해줘야합니다. 

node-express-app 프로젝트 루트에  app.js를 오픈하고
신규로 생성한 routes/article.js 라우팅 모듈을 참조하고 해당 라우팅 모듈의 기본 라우팅 주소를  아래와 같이 지정해주면 해당 라우팅 모듈내 모든 라우팅메소드는 기본주소로 라우터 모듈의 기본주소를 상속받게 됩니다. 

--app.js 

.... //기본 샘플 라우터 모듈 파일 참조 영역
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

//게시글 웹페이지 요청/응답 라우터모듈 파일 참조
var articleRouter = require('./routes/article'); ....


.... //기본 샘플 라우터 모듈의 기본 URL주소 정의영역
app.use('/', indexRouter);
app.use('/users', usersRouter);

//게시글 웹페이지 라우터 모듈의 기본 URL주소 정의
//http://localhost:3000/article 기본주소 사용
app.use('/article', articleRouter); ...


지금까지 Step1에서 Step5까지의 절차를 통해 신규 라우터 파일을 생성하고 라우터 파일내에 간단한 게시글 목록 라우팅 메소드를 구현하고 Node Application에 라우터 파일을 연결하는 방법을 알아 보았습니다.
npm start를 실행해 노드 어플리케이션을 실행하고
웹브라우저를 오픈 후 여러분이 생성한 라우팅 URL 주소 호출을 통해 게시글 목록 웹페이지에 대한 요청과 응답내용을 확인해봅니다.

호출URL 주소 : http://localhost:3000/article/list 


이번시간에는 Node Express 기반 MVC 패턴의 Controller영역인 Routes 영역을 통한 사용자 요청과 응답처리 패턴에 대해 기초 학습을 진행해 보았습니다.
다음시간에는 MVC 패턴에서의 View영역을 Controller영역과 연계하여 게시글 등록/수정/확인/삭제 처리하는 방법에 대해 좀더 자세히 알아보도록 하겠습니다.

학습을 하시면서 궁금하신점들은 회원가입 후 댓글에 문의주시면 관련 답변을 드리겠습니다.
오늘 하루도 즐거운 코딩 되세요.