Node Express 웹 개발 프레임워크 기반
서버측에서의 HTML 웹 페이지를 제어할수 있는MVC 패턴 영역중 View 영역에 대한 기초 학습을 진행해보도록 하겠습니다.
관련 실습 깃허브 링크 정보 : https://github.com/eddykang1074/node-express-app.git
이전 시간에는 Router모듈 파일과 라우팅 메소드를 통한 사용자 요청과 응답을 구현하는 Node Express 기초 라우팅 기법에 대해 알아보았습니다.
**이전 라우팅 학습을 하지 않은분들은 아래 링크로 이동해 기초 라우팅기법을 학습후 아래 내용을 학습하시기를 바랍니다.
https://mixedcode.com/blog/detail?pid=26
https://mixedcode.com/blog/detail?pid=27
특히 사용자 요청중에서 웹 페이지에 대한 사용자 요청에 대한 응답처리는 주로 라우팅 메소드의 응답처리 콜백함수의 반환타입중
res.render('지정한 뷰파일경로','뷰파일에 전달될 json데이터')메소드를 통해 Node Express 프로젝트내 Views폴더내 특정 경로의 View파일의 경로를 지정함으로서
해당 뷰파일내 html 페이지 내용이 웹브라우저에 응답 결과물로 제공됩니다.
이전 시간에 게시글 목록 웹페이지에 대한 라우팅 기능과 뷰파일만 구현해보았는데요.
이번 시간에는 나머지 웹페이지들에 대한 요청과 응답처리 라우팅 메소드와 뷰파일들을 간단히 구현해보도록 하겠습니다.
아래 routes\article.js 라우팅 파일을 오픈하고 게시글 등록/등록처리,단일게시글정보확인,수정처리,삭제처리 라우팅 메소드와 뷰파일들을 단계적으로 하나씩 구현합니다.
1) 게시글 등록 웹페이지 요청과 응답 처리하기
-신규 게시글 등록을 위한 웹페이지를 먼저 웹브라우저로 불러오기위한 게시글 등록 웹페이지(뷰파일)에대한 요청 과 응답처리 라우팅 메소드와 관련 뷰파일을 구현합니다.
A)게시글 등록 웹페이지 요청/응답 라우팅 메소드 구현하기
-게시글 등록 웹페이지에 대한 요청을 GET타입의 라우팅 메소드로 구현했으며 응답 콜백함수는 비동방식 콜백함수로 구현하였고
해당 콜백함수는 res.render()를 통해 views/article/create 파일(views폴더 기준 폴더/View파일명.ejs확장자 생략)을 반환하게 정의하였습니다.
-게시글 등록을 위한 등록 웹페이지 호출 전체 URL 주소는 article라우터의 기본주소인 http://localhost:3000/article 주소에 해당 라우팅 메소드의
호출주소인 /create 를 조합한 http://localhost:3000/article/create 입니다.
-routes\article.js
-이후 모든 라우팅 메소드의 콜백함수는 비동기 화살표 함수로 구현해주세요.
/*
- 게시글 등록 웹 페이지 요청과 응답 처리 라우팅 메소드
-요청주소 : http://localhost:3000/article/create
-요청방식 : GET 방식
-응답결과 : article/create.ejs 뷰파일 웹페이지 내용
*/
router.get('/create', async(req, res, next)=> {
//게시글 등록 뷰파일을 반환합니다.
res.render('article/create');
B) 게시글 등록 뷰파일 생성하기
-views/article폴더아래 create.ejs 파일을 새로 만들고 하기 뷰파일 내용을 반영하고 저장합니다.
- 신규 게시글 등록 뷰 파일인 create.ejs 파일은 반응형 CSS Framework인 Bootstrap과 Jquery기반으로 프론트엔드를 구현하였습니다.
-views/article/create.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>게시글 등록 웹페이지</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h3>게시글 등록 웹페이지</h1>
<form action="/article/create" method="post" id="articleForm">
<div class="row mb-3">
<label for="title" class="form-label">제목</label>
<input type="text" class="form-control" id="title" name="title" placeholder="글제목">
</div>
<div class="row mb-3">
<label for="content" class="form-label">내용</label>
<textarea class="form-control" id="content" name="content" rows="10"></textarea>
</div>
<div class="row mb-3">
<label for="display_yn" class="form-label">게시여부</label>
<select class="form-select" id="display_yn" name="display_yn">
<option value="0" >게시안함</option>
<option value="1" selected>게시함</option>
</select>
</div>
<div class="row mb-3">
<label for="regist_user_name" class="form-label">작성자</label>
<input type="text" class="form-control" id="regist_user_name" name="regist_user_name" placeholder="작성자명">
</div>
<div class="d-grid gap-2 d-md-block text-center">
<button type="submit" class="btn btn-primary">등록</button>
<a href="/article/list" class="btn btn-secondary">목록</a>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
2)신규 게시글 입력 데이터 등록 처리 요청과 응답 처리하기
-router.get('/create') 라우팅 메소드를 통해 전달된 게시글 등록 웹페이지에서 신규 게시글 정보를 사용자가 입력하고 저장버튼을 클릭하면
create.ejs파일내 정의된 <form action="/article/create" method="post">에서 지정한 /article/create 주소로 POST방식으로 사용자가 입력한 정보가 서버로 전달되며
해당 정보를 처리해주는 router.post('/create',정보처리콜백함수); 라우팅 메소드를 아래처럼 구현해줘야합니다.
A) 게시글 입력 정보 등록 처리 요청과 응답 처리 라우팅 메소드 구현하기
-사용자가 입력한 <form>태그내 UI 입력/선택 요소들의 req.body.name속성값 형식으로 사용자가 입력한 정보를 router.post('/create',정보처리콜백함수)에서 추출할수 있습니다.
-routes\article.js
/*
- 게시글 입력 정보 등록 처리 요청과 응답 처리 라우팅 메소드
-요청주소 : http://localhost:3000/article/create
-요청방식 : POST 방식
-응답결과 : http://localhost:3000/article/list 페이지로 이동처리(도메인주소생략)
*/
router.post('/create', async(req, res, next)=> {
//Step1: 게시글 등록 데이터 추출하기
const title = req.body.title;
const content = req.body.content;
const display_yn = req.body.display_yn;
const regist_user_name = req.body.regist_user_name
//Step2: DB 신규 등록 단일게시글 정보 준비하기
const article ={
title: title,
content, //속성명과 변수명이 동일하면 변수명 생략가능(ES6문법)
view_cnt:0,
ip_address:req.headers['x-forwarded-for'] || req.connection.remoteAddress,
display_yn:display_yn,
regist_date: Date.now(),
regist_user_name: regist_user_name
};
//Step3: DB 해당 게시글 신규 등록 처리하기
//step4: 등록 완료후 http://localhost:3000/article/list 페이지로 이동처리(도메인주소생략)
res.redirect("/article/list");
});
B) 게시글 입력 정보 등록 처리후 콜백함수 응답 처리하기
-클라이언트에서 전달된 form 데이터를 추출해 DB에 게시글 테이블에 저장할 데이터소스(JSON)를 만들고 DB 등록 처리후 res.redirect('이동할URL주소') 메소드를 통해
사용자 웹브라우저의 주소를 게시글 목록 페이지로 바로 이동시킵니다.
다음 블로깅에서 계속됩니다.
https://mixedcode.com/blog/detail?pid=29
알림
