소개

Rails에서 좋아하는 기능을 구현하고 있었습니다만, 이 기능을 사용하면 아래와 같은 문제가 발생하고 있었습니다.

전체 페이지를 다시 렌더링하므로 쓸데없는 처리가 수반됩니다.

페이지 천이가 수반되기 때문에, 페이지 하단에서 like나 코멘트를 해도 페이지의 맨 위로 천이해 버려, 사용성을 낮추고 있다.

따라서 Ajax 기능을 추가하고 페이지 전환을 수반하지 않도록 하여 사용성을 올리려고 했습니다.

최초로 생각한 구현 방법은, JavaScript·jQuery를 사용해, Ajax 처리를 발화해 나가는 방법이 베스트일까라고 생각했습니다만, 조사해 가면, Rails에는, link_to 등의 메소드에 remote: true 을 인수 에서 붙이면 Ajax 처리를 사용할 수 있게 된다는 것이었습니다. 처음 생각했던 구현 방법과 달리 간결했기 때문에 바로 그 방법으로 구현해 보았습니다.

전제

투고 기능 · 좋아요 기능은 이미 구현되었습니다.

구현하는 좋아하는 기능은 좋아하는 버튼을 누르면 페이지 전환이 수반되는 유형입니다.

위에서 Ajax 처리에서 비동기 통신으로 구현한다고 가정합니다. 이 기사는 구현에서 수행한 절차의 소개입니다.

환경 및 버전

루비 2.6.3

Rails 6.0.2.1

jQuery 3.5.1

구현

우선, app/views/posts/show.html.erb 에 좋아요 버튼 app/views/likes/_like.html.erb 을 render 시킵니다.

app/views/posts/show.html.erb

# ・・・省略

<div class="post-like mr-auto">
  <%= render partial: 'likes/like', locals: { post: @post, like: @like } %>
</div>

# ・・・省略

좋아요 기능의 delete 및 post 인수에 remote: true을 추가하여 Ajax 기능을 추가합니다.

app/views/likes/_like.html.erb

<% if current_user.already_liked?(post) %>
  <%= link_to 'Like', post_like_path(post, like), method: :delete, class:'post-like__cancel', remote: true %>
<% else %>
  <%= link_to 'Like', post_likes_path(post), method: :post, class:'post-like__enable', remote: true %>
<% end %>

추가하면 각각의 링크를 누른 후 아래의 처리를 실행할 수 있게 됩니다.

delete 방법 → app/views/likes/destroy.js.erb 파일 실행

post 방법 → app/views/likes/create.js.erb 파일 실행

그런 다음 js.erb 파일은 다음 코드와 같이 @post 및 @like과 같은 Controller 메서드에 정의된 인스턴스 변수를 사용할 수 있습니다. 이것은 편리합니다.

app/views/likes/destroy.js.erb

$('.post-like').html('<%= j(render partial: 'likes/like', locals: { post: @post, like: @like }) %>');

app/views/likes/create.js.erb

$('.post-like').html('<%= j(render partial: 'likes/like', locals: { post: @post, like: @like }) %>');

할 수있는 것

할 수 있는 것은 아래와 같습니다.
페이지 전환 없이 움직이는 것을 확인할 수 있었습니다.

상기의 구현으로 동작하지 않는 경우

작동하지 않는 원인은 View에서 jQuery를 사용할 수 없다는 것을 생각할 수 있으므로 아래의 구현이 되어 있는지 확인합시다.

참고: jQuery and $ not defined in like.js.erb returned from AJAX call

app/javascript/packs/application.js

// Enable jQuery in the .js.erb file
global.$ = jQuery;

config/webpack/environment.js

//jQuery & Bootstap's JavaScript
const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery', //<= 記述されているか確認
    Popper: 'popper.js'
  })
)

사이고에게

그 밖에도 응용해, 팔로우 기능이나 코멘트도 실장할 수 있었습니다.
앞으로는 검색 기능도 만들어 가므로 Ajax도 사용해 나갈 것입니다.

참고 기사

Rails에서 remote : true와 js.erb를 사용하여 Ajax (비동기 통신)를 쉽게 구현하십시오! (좋아하는 기능의 데모 포함)

jQuery and $ not defined in like.js.erb returned from AJAX call