게시판 페이지 목록 구현 (kaminari)

Make Bulletin board paginate with 'kaminari' Gem

개발자가 홈페이지를 개발하다보면 많은 요인들을 생각해내야 합니다. 우리가 별거 아니게 가볍게 넘어가는것이, 개발에 있어서는 중요한 요인이 될 수 있거든요. 만약에 게시판을 개발한다면? 사람들이 흔히 당연하다고 생각하고 쓰는것이 무엇이 있을까요? 게시글 작성 편집기, 게시글 검색, 게시판 페이지 목록... 이 외에도 다양할겁니다.그 중, 저는 이번 시간에는 '게시판 페이지 목록'을 셋팅하는법에 대해 설명하겠습니다.

설명하기 전에 앞서서, 만약에 게시판에 페이지 목록이 없다면 어떻게 될까요?글이 계속 세로로 쭈우우욱 무한히 써져나가고, 엄청난 스크롤 압박이 찾아오겠죠?

이를 방지하기 위해 탄생한 것이 '게시글 페이지 목록' 입니다.

참고로,이와 동일한 Gem으로 will_paginate이 있긴 한데 이것보단, kaminari Gem이 더 사용이 간단하면서도 좋습니다.

참고 - will_paginate : http://blog.naver.com/kbs4674/221012780741

시작 전 유의사항

• 이 글은 게시판의 이름을 post라고 쓴다는 가정 하로 작성됩니다.

• 이 글은 당신이 부트스트랩을 쓴다는 가정 하에 글을 작성합니다. 일부 부분이 부트스트랩을 활용합니다.

• 필자는 CRUD 사용 시, scaffold를 사용했습니다.

kaminari를 이용한 Paginate 구현

• /Gemfile로 이동하시고, 다음 내용을 입력합니다.

gem 'kaminari'

그리고 명령어 입력창(터미널)에 다음 명령어를 입력합니다.

bundle install

• /app/controllers/(게시판 컨트롤러 이름)_controller.rb로 이동하셔서 목록에 해당되는 정의(필자는 def index) 속에 다음 내용을 추가합니다. (저는 게시판 컨트롤러 이름이 posts라서 /app/controllers/Posts_controller.rb 파일을 열람했습니다.)

class PostsController < ApplicationController
...
  def index
    ...
    @posts = Post.order("created_at DESC").page params[:page]
  end
  ...
end

게시글이 보여질 시, 내림차순 정렬이 됩니다. (오름차순 정렬을 원하시면 order("created_at DESC") 이 부분을 없애주세요!

그리고 이어서 /app/models/(게시판 모델 이름).rb로 이동하시고, model 파일 안에 다음 내용을 입력해줍니다.

(저는 게시판 모델 이름이 post라서 /app/models/post.rb 파일을 열람했습니다.)

class Post < ApplicationRecord
  ...
  paginates_per 5
  ...
end

위 예시는 '한 목록 당 5개의 글이 보여짐'을 의미합니다. 만약 5개 말고 더 많이 혹은 더 적게 글을 보여주고 싶다면

'paginates_per 5' 이 부분에서 숫자를 수정해주세요.

• View에서 게시물 목록에 해당되는 곳(필자는 index.html.erb)으로 가셔서 적절한 위치에 아래 태그를 삽입합니다.

<%= paginate @posts %>

• 그러면 우선 일단은 내림차순, 한 목록 당 5개의 게시글이 보여지는게 확인됩니다! 그리고 더불어 게시판 목록이 보여지는것도 확인됩니다!

참고 및 이슈 : 게시판 카테고리 적용하신분들 참고=> '테스트 게시판'에서 작성한 게시글.

'테스트 게시판'에 저는 어떤 글을 작성하고, Kaminari를 위 설명대로 적용을 했습니다.

=> 어.. 자유게시판에 테스트 게시판에서 작성된 글이 검색이된다?

kaminari를 적용하고 난 뒤, 카테고리 내 아무 게시판을 가보는데 깜짝놀랐습니다. 어느 게시판을 가든 모든 게시글에 대해 한번에 글이 나타나는겁니다. 이 이슈 해결방법은 간단합니다.

Controller에 작성했던

@posts = Post.order("created_at DESC").page params[:page]

위 내용을

@posts = Post.where(bulletin_id: @bulletin).order("created_at DESC").page params[:page]

이걸로 바꿔주면 됩니다.

• 간단한 부트스트랩 디자인을 적용하고 싶다면, 명령어 입력창(터미널)에 다음 명령어를 입력해줍니다.

부트스트랩4 Alpha-6 사용 기준 작성.

rails g kaminari:views default

그러면 /app/views에 kaminari 폴더와 함께 뭔가 생겨난걸 확인할 수 있습니다!

여기를 클릭해서 첨부된 파일을 다운로드 하시고, 저 폴더에 옮겨줍니다.

* 첨부파일 속 파일들은 위 kaminari 폴더에 있는 동일한 파일들이지만, class를 '부트스트랩4-Alpha의 paginate'로 설정한 파일들입니다.

그리고 다시 게시판 리스트를 보면...

=> 부트스트랩 디자인이 적용된 Paginate!

부트스트랩 디자인이 간단히 적용된게 확인됩니다!!!

하지만.. 전 여기서 아직도 만족을 못하겠더군요.. 이번엔 저 영어가 거슬렸습니다.=>내가 원하는 한국어 패치(...)

그런데 kaminari는 i18n이라 해서 다국어 언어를 설정할 수 있습니다!=> Kaminari에서 설명하는 i18n

저는 이번엔 한국어 패치를 해보고자 합니다.

• /config/locals/ 폴더 내에서 kaminari.ko.yml 파일을 생성합니다.

그리고 생성한 파일(kaminari.ko.yml)에 다음 내용을 입력하고, 저장해줍니다.

kaminari.ko.yml 말고 다른 이름으로 생성해도 되나, 반드시 확장자가 yml이어야 합니다!

ko:
  views:
    pagination:
      first: "« 처음"
      last: "마지막 »"
      previous: "‹ 이전"
      next: "다음 ›"
      truncate: "…"
  helpers:
    page_entries_info:
      one_page:
        display_entries:
          zero: "%{entry_name} 를 찾지 못했습니다."
          one: "Displaying <b>1</b> %{entry_name}"
          other: "Displaying <b>all %{count}</b> %{entry_name}"
      more_pages:
        display_entries: "Displaying %{entry_name} <b>%{first}&nbsp;-&nbsp;%{last}</b> of <b>%{total}</b> in total"

번역 안한부분은 무슨기능인지 확실히 몰라서 다 번역은 안했고, 절반만 했습니다.

• 다시 게시판 목록을 보면 이젠 번역까지 된게 확인됩니다!

=> 디자인 / 번역 모든게 완벽한 페이지 목록!
이 외에도 더 엄청난기능들이 많은 것 같은데 이걸 다 활용 못하는게 매우 아쉬울 따름입니다...!!

혹시 kaminari에 대해 좋은 기능을 알고있다면 피드백 해주세요! 감사합니다!!

도움 및 참고

1) 팀원의 도움 : L. G. S

2) Github - Kaminari : https://github.com/kaminari/kaminari

3) 알아두면 좋은 Gem : http://cafe.naver.com/itctsixsens/23