ejs 템플릿으로 렌더링 되는 화면을 ajax로 비동기식 구현하기


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로 구현해야 한다는 것은 알고 있는데, 그렇다면 이 조건문 부분을 어떻게 처리해야할지 도움 부탁드립니다.

  • 2016년 08월 16일에 작성됨
    웹 사이트 공부 중입니다. 많은 도움 주시면 좋아요.

조회수 175


1 답변


좋아요
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년 08월 16일에 작성됨
    웹을 좋아함

  • 안녕하세요. 아닙니다 전혀 어렵지 않습니다. 정말 상세히 설명해주셔서 초보인 저에게 너무 이해하기 좋았습니다. 김하하님이 계시기에 해시코드에 자주 방문하네요. 항상 정말 감사드립니다!    상남자   2016.8.17 02:00     
  • 김하하님 답변으로 구현하는 방법은 익혔습니다. 그러나, 댓글을 구성하는 데이터가 너무 많아서 append 로 하기엔 코드도 길어질뿐더러 귀찮아지네요. 사실 이 부분에 가장 좋은 방법은 db에 댓글 내용이 저장 될테니 다시 select하여 보여주는게 간편한데, 이 방법은 새로고침이 될 수밖에 없는 방법이겠죠?    상남자   2016.8.18 11:43     
  • 그럼 새로고침밖에 될수가 없겠네요.     김하하   2016.8.18 23:37     

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close