ejs 템플릿으로 렌더링 되는 화면을 ajax로 비동기식 구현하기
조회수 4431회
node.js + express 로 개발 중입니다.
댓글 작성하기 기능을 비동기식으로 구현하려고 합니다. ( 새로고침을 막기 위해 )
ejs 템플릿을 사용하고 있습니다.
게시판 글+댓글 페이지로 이동
router.get('/topic', function(req, res) {
models.Board.findAll({
})
.then(function(data){
res.render('topic', data); // topic.ejs 페이지
});
});
이렇게 topic.ejs 을 렌더링하였고,
topic.ejs 에서는 ajax 로 댓글 작성하기를 구현합니다.
여기서 댓글은
<% if(user) { %>
<p>닉네임</p>
<% } else if { %>
<p>비로그인</p>
<% } %>
<p>댓글 내용<p>
형태로 있습니다.
이 부분을 댓글 작성하기 성공시
$('#comment').append(
`<% if(user) { %>
<p>닉네임</p>
<% } else if { %>
<p>비로그인</p>
<% } %>
<p>content<p>
);
식으로 처리하려고 합니다.
ejs 는 렌더링하는 역할이고, 이 렌더링이 끝난 코드를 ajax로 구현해야 한다는 것은 알고 있는데, 그렇다면 이 조건문 부분을 어떻게 처리해야할지 도움 부탁드립니다.
1 답변
-
제생각엔 방법이 2가지가 있을것 같습니다
핵심은 댓글내용은 변함이 없고 유저이면 닉네임, 아니면 비로그인만 출력하는것입니다.
그래서 저런형식으로 append 하셔도 이미 저 ejs는 서버에서 렌더링 되서 나오기 때문에 작동이 안될겁니다.
굳이 리렌더(rerender)를 하면 나오긴 하겠지만 화면이 깜빡거리거나 그런일이 있을수도 있죠
서버에서 HTML만들어 보내기
<% if(user) { %> <p>닉네임</p> <% } else if { %> <p>비로그인</p> <% } %> <p>댓글 내용<p>
서버에서 유저인지 아닌지 체크해서 html로 출력해버리는겁니다
// node.js 라우터 ... if(user) { // 유저면 닉네임만 보내면 되니까 res.send('<p>'+닉네임 변수+'</p><p>댓글 내용</p>'); } else { // 유저가 아니라면 res.send('<p>비로그인</p><p>댓글 내용</p>'); } ...
그리고 이제 받아서 그대로 추가하면 됩니다
$('#comment').append(data); // ajax 성공시 가져온 data그대로 넣기
클라이언트에서 분기하기
ajax요청 성공시 서버에서 로그인유저인지 비로그인 유저인지를 JSON 형태로 보내서 클라이언트에서 하는방법입니다.
//로그인유저면 res.send({logined: True, nickname: "닉네임"}); // 비로그인유저면 res.send({logined: False});
이런식으로 보낸후 클라이언트에서
data = JSON.parse(data); // 가져온 data를 파싱 if (data.logined == True) { // 로그인유저면 $("#comment").append("<p>"+data.nickname+"</p><p>댓글 내용</p>"); } else { // 아니라면 $("#comment").append("<p>비로그인</p><p>댓글 내용</p>"); }
이런형식으로 가능합니다.
어렵게 풀었는데 쉽게 말하자면 서버든 클라이언트든 유저인지 아닌지만 구별해서 분기하자 이겁니다
-
(•́ ✖ •̀)
알 수 없는 사용자
- 안녕하세요. 아닙니다 전혀 어렵지 않습니다. 정말 상세히 설명해주셔서 초보인 저에게 너무 이해하기 좋았습니다. 김하하님이 계시기에 해시코드에 자주 방문하네요. 항상 정말 감사드립니다! 상남자 2016.8.17 02:00
- 김하하님 답변으로 구현하는 방법은 익혔습니다. 그러나, 댓글을 구성하는 데이터가 너무 많아서 append 로 하기엔 코드도 길어질뿐더러 귀찮아지네요. 사실 이 부분에 가장 좋은 방법은 db에 댓글 내용이 저장 될테니 다시 select하여 보여주는게 간편한데, 이 방법은 새로고침이 될 수밖에 없는 방법이겠죠? 상남자 2016.8.18 11:43
- 그럼 새로고침밖에 될수가 없겠네요. 알 수 없는 사용자 2016.8.18 23:37
-
댓글 입력