티스토리 뷰

프로그래밍 공부/Ruby on Rails : 이론

Ruby on Rails : 비동기(Ajax) 이벤트 구현

마음 따뜻한 개발자, 나른한 하루 2019. 11. 3. 14:57

 참고 

해당 실습은 댓글 비동기 구현을 Base로 설명이 됩니다.

해당 실습을 그대로 따라하고 싶으신 분은 사전에 프로젝트에서 다음 과정을 따라해주세요.

git clone https://github.com/kcm4674/ex_devise
cd ex_devise
gem install rails --version=5.2.3
bundle install
rake db:drop; rake db:migrate; rake db:seed

 

그동안 저희는 동기 형식으로 레일즈 내의 모든 이벤트가 이루어졌습니다.

대표적인 예로, 게시글 작성/수정/삭제 등 데이터 처리에 대해 이벤트 처리 홈페이지가 한번 새로고침이 되는 현상,

이것 자체가 동기라고 보시면 되겠습니다.

 

 

  • 동기 개념

동기 방식은 이벤트 처리 후, 완료가 될 때 까지 대기(Await) 해야 함.

  • 요청을 하는 시기와 응답을 받는 시기가 일치
  • 이벤트 처리 후, 바로 최신화 작업을 진행
  • 그동안 우리는 데이터 처리(게시글 작성, 댓글 작성 등)를 하면서 동기 처리 방식으로 실습을 진행해왔습니다.

 

 

  • 비동기 개념

비동기 처리 이벤트는 이벤트가 진행중이어도 대기를 하지 않아도 된다!

  • JavascriptAjax 특성을 이용한 통신방식
  • Ajax : 자바스크립트의 jQuery를 활용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식
  • 하나의 요청에 따른 응답을 즉시 처리하지 않아도, 대기 시간동안 또 다른 요청에 대해 처리 가능
  • 과거(동기)에 데이터가 쓰여지고, 바로 최신화가 이루어 졌다면, 이제는 새로운 데이터가 추가되도, 최신화 작업은 안이루어짐.

 

 

  • 비동기와 동기의 명확한 차이

1) 동기

 

그동안 활용되었던 동기방식 같은 경우, 영상이 재생되는 페이지에서 댓글(동기)을 등록 시 새로고침이 되면서 위와같이 다시 영상이 첫 화면으로 돌아가는 반면,

 

2) 비동기

 

비동기 방식은 댓글 이벤트가 진행되어도, 영상은 계속 끊임없이 돌아가는게 확인됩니다.

그런데 착각하면 안될게 하나 있는게, 비동기는 실시간처리 처럼 보이겠지만, 결과 처리가 실시간으로 반영되지 않습니다.

 

 

  • 비동기 이벤트 처리를 활용한 댓글 구현

이제 본격적으로 한번 시작해보겠습니다!


공통 진행

1. 이번 실습의 비동기 처리는 javascriptjquery 모듈을 기반으로 작동됩니다.

 app/views/layouts/application.html.erb  에서 jQuery 연동 코드를 추가합니다.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
## app/views/layouts/application.html.erb

<head>
    <title>Intro</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload’ %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 
    <!-- 댓글 비동기 처리를 위한 jquery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

 

2. 나중에 Comment 모델이 Post 모델을 참고해야 하는 순간이 있습니다.

이를 위해 Post와의 모델 관계를 설정해주세요.

## app/models/post.rb

class Comment < ApplicationRecord
    belongs_to :post
end

 


Create

1. Postshow View로 이동 후, 코드를 수정합니다.

* 아래 코드들은 새로 추가한게 아닌, 기존의 코드를 수정 및 지우고 재작성 한겁니다.

## app/views/posts/show.html.erb

<%= form_tag("/posts/#{@post.id}/comments", method: "post", remote: true) do %>
## app/views/posts/show.html.erb

<div id="comment-ajax">
    <% @post.comments.each do |x| %>
        <%= render 'comments/comment_list', t: x %>
    <% end %>
</div>

 

 참고  Render 개념 [클릭]


 개념 짚고 넘어가기  remote: true

<%= form_tag("/posts/#{@post.id}/comments", method: "post", remote: true) do %>
  • Ruby on Rails폼 헬퍼 속 옵션으로 정의하는 문법 중 하나로서, javascript로 데이터를 통신/처리할 때 쓰입니다.
  • emote: true 옵션을 줄 시, 데이터를 javascript 단으로 통신/처리 합니다.
  • Javascript로 데이터를 넘기는 것을 이용해서, 저희는 비동기 데이터 처리를 실습합니다.

 

1) 일반적인 데이터 처리 (remote: false)

 

2) 비동기(Ajax) 데이터 처리 (remote: true)

맨 아랫줄에 자세히 보면 .js.erb 파일을 참고하는게 보입니다.


 

2. Comments View 폴더로 이동 및  _comment_list.html.erb  파일을 생성 후,

다음 코드를 작성해주세요.

## app/views/comments/_comment_list.html.erb

<div id="comment_<%= t.id %>">
    <%= t.body %>
    <%= link_to "댓글 삭제", post_comment_path(@post.id, t.id), method: "delete" %>
    <hr/>
</div>

 

3. Comments View 폴더에서  create.js.erb  파일을 추가해주세요.

 

4.  create.js.erb  파일에 다음 코드를 입력합니다.

## app/views/comments/create.js.erb

$("#comment-ajax").append("<%= escape_javascript render 'comments/comment_list', t: @comment %>");

* 이제 댓글이 새로 추가될 때 마다 id="comment-ajax" 선택자 블록 내에 계속 append(추가)된다는 것을 의미합니다.

 

5. Comments Controller을 수정해주세요.

## app/controllers/comments_controller.rb

class CommentsController < ApplicationController
    def create    
        @comment = Comment.create(post_id: params[:post_id], body: params[:co_body])               
        # redirect_to request.referrer
            respond_to do |format|
               @post = @comment.post
               format.js { flash[:notice] = "댓글이 작성되었습니다." }
           end
    end

    .... (이하 코드 생략) ….
end

 


Destroy

1. Comments View 폴더에서   destroy.js.erb  파일을 추가해주세요.

 

2.  destroy.js.erb  파일에 다음 코드를 입력합니다.

## app/views/comments/create.js.erb

$("#comment_<%= @comment.id %>").remove();

 

3. Comment View 폴더로 이동 후 _comment_list.html.erb  파일에서 코드를 추가해주세요.

## app/views/comments/_comment_list.html.erb

<div id="comment_<%= t.id %>">
    <%= t.body %>
    <%= link_to "댓글 삭제", post_comment_path(@post.id, t.id), method: "delete", remote: true %>
    <hr/>
</div>

 

4. Comments Controller을 수정해주세요.

## app/controllers/comments_controller.rb

class CommentsController < ApplicationController
    … (이하 코드 생략) …

    def destroy
        @post = Post.find(params[:post_id])
        @comments = @post.comments
        @comment = @comments.find(params[:id])
        @comment.destroy
         # redirect_to request.referrer
         respond_to do |format|
             format.js { flash[:notice] = "댓글이 삭제되었습니다." }
        end
    end
end

 


이제 한번 직접 홈페이지를 키고 결과를 확인 해보세요!

 

루비온 레일즈 Ruby on Rails ROR

댓글
  • 프로필사진 영아재 그대로 따라해 봤는데, create은 문제가 없었지만, destroy부분은 댓글을 지워도 그대로 있고 오직 페이지 새로고침을 눌렀을때만 작동을 하네요ㅜ
    뭔가 코드를 예로 보여드리고 싶은데 똑같이 써서 뭘 예시로 보여줘야할지..
    2020.12.07 13:59
  • 프로필사진 마음 따뜻한 개발자, 나른한 하루 이건.. 코드로만 보기엔 저도 힘들 것 같아요 (아예 로그를 보는 방향으로 해봐야 할 수도 있어요.. 😢) 2020.12.08 22:45 신고
  • 프로필사진 markchck 안녕하세요 나른한님!
    따라하다가 궁금한게 생겨서 문의드리려구요~

    <div id="comment-ajax">
    <% @post.comments.each do |x| %>
    <%= render 'comments/comment_list', t: x %>
    <% end %>
    </div>

    에서 t: x부분이 나오는데
    1. t는 어디에서 갑자기 나온 변수인가요? x는 each do에서 정의되어있어서 알겠는데 t는 모르겠네요..
    2. <%= render 'comments/comment_list', t: x %>에서 , 뒷부분은 어떤 목적으로 쓰신 코드인가요? t:x 이부분 해석 부탁드립니다!!
    2021.03.15 23:50
  • 프로필사진 마음 따뜻한 개발자, 나른한 하루 안녕하세요, 사실 저 || 사이에 있는 상속변수에 의미를 둬서 작성했어야 했는데.. 지금 생각해보면 좀 미흡하게 글을 써왔던 것 같네요..

    1. t 변수는 render 때 쓰인 app/views/comments/_comment_list.erb 내부 파일을 보시면 t 라는 변수가 있는데, 그 변수가 'x 상속변수를 이어받아 사용하겠다' 라고 보시면 됩니다.

    2. 1번 답변과 거의 비슷하며, app/views/comments/_comment_list.erb 변수 내 t라는 변수에 x 상속변수를 이어쓰겠다 라고 보시면 됩니다.

    답변이 도움되었길 빌겠습니다 :)
    2021.04.04 22:08 신고
댓글쓰기 폼
공지사항
Total
148,752
Today
0
Yesterday
118
링크
«   2021/10   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
글 보관함