카테고리 없음
node.js로 웹서비스 만들기 (8. node.js에서 ejs로 데이터 전달)
길재의 그 정신으로 공부하자
2023. 7. 12. 11:11
이번 글은 백엔드에서 프론트로 데이터를 전달하는 방법에 대해 기록하도록 하겠습니다.
node.js에서 데이터를 읽어와 ejs로 전달
quiz table에서 퀴즈 정보를 읽어와 퀴즈 ejs로 넘겨주는 예제 입니다.
// 퀴즈 상세보기로 이동
router.get('/detail_quiz/:qid', function(req, res){
if(!req.session.user){
res.render('login');
return;
}
var params = req.params;
var qid = params.qid;
var sql = 'SELECT * FROM quiz WHERE qid = ?';
var param = [qid];
conn.query(sql, param, function (err, rows, fields) {
if(err) console.log('query is not excuted. select fail...\n' + err);
else{
res.render('detail_quiz', {item: rows[0]});
}
});
});
node.js에서 프론트 호출은 sendFile(), render() 두가지 메소드가 있는데 sendFile() 메소드는 파일을 그대로 보내고자 할 때 사용하고 render() 메소드는 파일을 보내기 전에 ejs 파일을 html로 변경하고 싶을 때 사용합니다.
저는 ejs 파일이 값을 받아서 해당 값으로 화면을 구성하는 기능을 구현하고자 하기 때문에 render()를 사용하였습니다.
render() 메소드를 사용해 데이터를 전달하고자 할 때는 파일 이름뒤에 전달하고자하는 데이터를 json 형식으로 추가해주면되빈다.
위 예제 코드에서는 query 결과로 받은 퀴즈 데이터를 item으로 전달하였습니다.
res.render('detail_quiz', {item: rows[0]});
ejs에서 전달받은 데이터 처리
ejs는 이렇게 전달받은 값을 "item" 이름으로 바로 접근해 html에 ejs 문법("<% %>, <%= %>, ...")을 사용해 데이터를 표시할 수 있습니다.
<!-- detail_quiz.ejs -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/mypopup.css" />
<script src="//code.jquery.com/jquery.min.js"></script>
<title>퀴즈 자세히보기</title>
</head>
<body>
<div class="mt-3">
<h4 class="text-center" id="qid" tag="<%= item.qid %>">퀴즈 자세히보기</h4>
</div>
...
<div class="container-fluid">
<div class="row">
...
<div class="col" style="background-color: #fff">
<div style="width: 200px; height: 50px;">
제한시간:
<select id="timer" class="form-select" aria-label="Default select example">
<option value="0" <% if (item.timer == 0) { %> selected <% } %>>제한시간 선택</option>
<option value="1" <% if (item.timer == 1) { %> selected <% } %>>없음</option>
<option value="2" <% if (item.timer == 2) { %> selected <% } %>>5초</option>
<option value="3" <% if (item.timer == 3) { %> selected <% } %>>10초</option>
<option value="4" <% if (item.timer == 4) { %> selected <% } %>>20초</option>
<option value="5" <% if (item.timer == 5) { %> selected <% } %>>30초</option>
<option value="6" <% if (item.timer == 6) { %> selected <% } %>>1분</option>
<option value="7" <% if (item.timer == 7) { %> selected <% } %>>2분</option>
</select>
</div>
...
<div class="input-group mt-3">
<span class="input-group-text" style="width: 90px">퀴즈 내용</span>
<textarea id="contents" class="form-control" aria-label="contents" placeholder="[필수] 문제를 입력해주세요."><%=item.contents %></textarea>
</div>
...
</div>
</div>
...
</div>
</body>
</html>
위코드를 보면 ejs의 <% %> 문법을 사용하여 체크박스의 selected 표시를 하였고
<select id="timer" class="form-select" aria-label="Default select example">
<option value="0" <% if (item.timer == 0) { %> selected <% } %>>제한시간 선택</option>
<option value="1" <% if (item.timer == 1) { %> selected <% } %>>없음</option>
<option value="2" <% if (item.timer == 2) { %> selected <% } %>>5초</option>
<option value="3" <% if (item.timer == 3) { %> selected <% } %>>10초</option>
<option value="4" <% if (item.timer == 4) { %> selected <% } %>>20초</option>
<option value="5" <% if (item.timer == 5) { %> selected <% } %>>30초</option>
<option value="6" <% if (item.timer == 6) { %> selected <% } %>>1분</option>
<option value="7" <% if (item.timer == 7) { %> selected <% } %>>2분</option>
</select>
ejs의 <%= %> 문법을 사용해 데이터를 textarea에 text를 추가하는 것을 확인할 수 있습니다.
<div class="input-group mt-3">
<span class="input-group-text" style="width: 90px">퀴즈 내용</span>
<textarea id="contents" class="form-control" aria-label="contents" placeholder="[필수] 문제를 입력해주세요."><%=item.contents %></textarea>
</div>