티스토리 뷰
참고
해당 실습은 댓글 비동기 구현을 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
그동안 저희는 동기 형식으로 레일즈 내의 모든 이벤트가 이루어졌습니다.
대표적인 예로, 게시글 작성/수정/삭제 등 데이터 처리에 대해 이벤트 처리 홈페이지가 한번 새로고침이 되는 현상,
이것 자체가 동기라고 보시면 되겠습니다.
-
동기 개념
- 요청을 하는 시기와 응답을 받는 시기가 일치
- 이벤트 처리 후, 바로 최신화 작업을 진행
- 그동안 우리는 데이터 처리(게시글 작성, 댓글 작성 등)를 하면서 동기 처리 방식으로 실습을 진행해왔습니다.
-
비동기 개념
- Javascript의 Ajax 특성을 이용한 통신방식
- Ajax : 자바스크립트의 jQuery를 활용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식
- 하나의 요청에 따른 응답을 즉시 처리하지 않아도, 대기 시간동안 또 다른 요청에 대해 처리 가능
- 과거(동기)에 데이터가 쓰여지고, 바로 최신화가 이루어 졌다면, 이제는 새로운 데이터가 추가되도, 최신화 작업은 안이루어짐.
-
비동기와 동기의 명확한 차이
1) 동기
그동안 활용되었던 동기방식 같은 경우, 영상이 재생되는 페이지에서 댓글(동기)을 등록 시 새로고침이 되면서 위와같이 다시 영상이 첫 화면으로 돌아가는 반면,
2) 비동기
비동기 방식은 댓글 이벤트가 진행되어도, 영상은 계속 끊임없이 돌아가는게 확인됩니다.
그런데 착각하면 안될게 하나 있는게, 비동기는 실시간처리 처럼 보이겠지만, 결과 처리가 실시간으로 반영되지 않습니다.
-
비동기 이벤트 처리를 활용한 댓글 구현
이제 본격적으로 한번 시작해보겠습니다!
공통 진행
1. 이번 실습의 비동기 처리는 javascript의 jquery 모듈을 기반으로 작동됩니다.
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. Post의 show 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
'프로그래밍 공부 > Ruby on Rails : 이론' 카테고리의 다른 글
| Ruby on Rails : SQL Performance의 고민 (서론) (0) | 2019.11.06 |
|---|---|
| Ruby on Rails : 여러가지 메소드 (일부는 깊게 파보기) (0) | 2019.11.06 |
| Ruby on Rails : 댓글 구현 (1:M 개념 익히기) (0) | 2019.11.03 |
| Ruby on Rails : 코드의 분산 - render의 개념! (0) | 2019.11.02 |
| Ruby on Rails : Active Storage (5) | 2019.11.01 |
