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

조회수 3056회

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 답변

  • 좋아요

    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

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.