Ruby on rails - 좋아요 기능 만들기

Ruby on rails - 좋아요 기능 만들기  

실습을 통해 좋아요 기능을 만들어 봅시당!

> like 모델 만들기

rails g model like post:references user:references

Like 모델을 만들어줍니다. 이모델은 post모델과 user모델을 참조하게 됩니다!

그이유는 좋아요는 어떠한 user가 좋아요를 눌렀는지, 어떤 게시글에 눌렀는지를 알아야 하기 때문이죠!

gem 'devise'
bundle install
rails g devise:install

위와 같이 devise gem을 설치해줍시다. 참고로 이 실습은 post모델과 user모델이 있다는 가정하에 진행됩니다.

-모델 관계 설정하기

app/models 폴더를 보면 like.rb, post.rb user.rb 이 세가지를 찾을수 있습니다. 이제 이모델간의 관계를 설정해줍시다.

1.like 모델

#app/models/like.rb 아래 코드를 추가해줍니다.
​
  belongs_to :post
  belongs_to :user

2.post 모델

#app/models/post.rb 아래 코드를 추가해줍니다.
 belongs_to :user
 has_many :likes 

3. user모델

#app/models/user.rb 아래 코드를 추가해줍니다.
  has_many :post
  has_many :likes

-컨트롤러에 액션 추가하기

만약, like가 nil일 경우, '좋아요' 반영, nil이 아닐 경우 '좋아요' 삭제

  def like_toggle
    like = Like.find_by(user_id: current_user.id, post_id: params[:post_id])
    #좋아요가 눌렸는지 체크
    if like.nil?
      Like.create(user_id: current_user.id, post_id: params[:post_id])
    else
      like.destroy
    end
    redirect_to :back
  end

위와 같은 액션은 컨트롤러에 추가해줍니다. 새로운 컨트롤러를 만든 후 넣어도 되지만, 저는 post 컨트롤러 안에 넣어주었습니다.

>라우트 추가하기

  post 'post/:post_id/like' => 'posts#like_toggle'

컨트롤러에 액션을 추가해줬으니 route역시 추가해 줍시다. 위의 라우트 설정은 예시이니, 자신의 입맛대로 바꿔주면 됩니다.

-show.html.erb에서 좋아요 관련 뷰 설정하기

    <p>
      <strong>Like:</strong>
      <%= @post.likes.size %> 명이 좋아합니다. 
    </p>
     
    <p>
      <% if current_user.is_like? (@post) %>
      <form action='/post/<%= @post.id%>/like' method='post'>
      <button> 좋아요 취소 </button>  
      </form>
      
      <% else %>
      <form action='/post/<%= @post.id%>/like' method='post'>
      <button> 좋아요</button>  
      </form>
      
      <% end %>
    </p>

위와 같은 뷰파일을 show에 추가해줍니다.form action안의 url은 앞서 route에서 설정해준대로 형식에 맞춰 넣어주면 됩니다.

>에러해결

ActionController::InvalidAuthenticityToken 관련 에러가 뜨시는분은

https://stackoverflow.com/questions/3364492/actioncontrollerinvalidauthenticitytoken

를 참고.

skip_before_filter :verify_authenticity_token  를 추가하시면 됩니다.

위 화면을 보면 좋아요를 누르면 숫자가 올라가고, 좋아요 취소버튼으로 바뀌는 것을 확인해 볼 수 있습니다 :)

>전체 글 화면에서 좋아요수 보여주기

  <%= post.likes.size %>

를 전체 좋아요수를 보여주고 싶은 부분에 추가해주면 됩니다.^^

|글전체화면

|글 화면

위와 같이 자신의 입맛대로 css를 수정하면 더 보기 좋습니닿ㅎㅎ

|마치며

위 실습은 scaffolding 한 프로젝트에서 user, post 모델을 이미 만들었다 가정하고 진행된 프로젝트 였으니, 참고하고 진행하셨길 바랍니다.

이상입니다! : )