게시판 페이지 목록 구현 [Gem : 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 구현

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

gem 'kaminari'

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

bundle install

2. /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

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

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

class Post < ApplicationRecord 

...

 paginates_per 5 

...

end

참고
1) 위 예시는 '한 목록 당 5개의 글이 보여짐'을 의미합니다. 만약 5개 말고 더 많이 혹은 더 적게 글을 보여주고 싶다면'paginates_per 5' 이 부분에서 숫자를 수정해주세요.

2번 과정 전체적인 참고
만약 show에는 한 목록 당 5개의 게시글을, index에는 한 목록 당 10개의 게시글 이렇게 다르게 보여주고 싶다면model에 paginates_per 5 을 쓰지 말고, Controller에 다음과 같이 입력해주세요.

class PostsController < ApplicationController 

def index 

...

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

end



def show

...

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

end

위와같이 모든 게시글 정보를 불러오는 컨트롤러 변수 끝에다가 .page(params[:page]).per(10) 을 쓰면model파일에 paginate 정의를 안내려줘도 됩니다.

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

<%= paginate @posts %>

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

▲ 아주 간단하게 Paginate 적용

하지만 여기서 끝나기엔 이 기능에 있어서 아까운것이 있습니다.

kaminari Gem에는 will_paginate와는 다르게 부트스트랩도 적용을 할 수 있습니다! (디자인 꾸미기에 최적화 되어있어요!)

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

부트스트랩4-Alpha 사용 기준 작성이며, 부트스트랩 관련 파일(CSS, JS 등)들이 미리 application.html.erb에 적용되어 있어야 합니다.

 rails g kaminari:views default

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

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

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

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

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

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

하지만.. 전 여기서 아직도 만족을 못하겠더군요.. 이번엔 저 영어가 거슬렸습니다.

▲ 내가 원하는 한국어 패치(...)
그런데 kaminari는 i18n이라 해서 다국어 언어를 설정할 수 있습니다!

▲ Kaminari에서 설명하는 i18n
저는 이번엔 한국어 패치를 해보고자 합니다.

6.

참고
아직 실험은 안해봤습니다만, 저는 devise-i18n Gem이 설치된 가정 하에 했습니다.
※참고 : http://blog.naver.com/kbs4674/221041391645

/config/locals/ 폴더 내에서 kaminari.ko.yml 파일을 생성(다른 이름으로 생성해도 되나, 확장자가 yml이어야 합니다!)합니다.
그리고 생성한 파일(kaminari.ko.yml)에 다음 내용을 입력하고, 저장해줍니다.

ko:















  views:















    pagination:















      first: "&laquo; 처음"















      last: "마지막 &raquo;"















      previous: "&lsaquo; 이전"















      next: "다음 &rsaquo;"















      truncate: "&hellip;"















  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"

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

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

▲ 디자인 / 번역 모든게 완벽한 페이지 목록!

이 외에도 더 엄청난기능들이 많은 것 같은데 이걸 다 활용 못하는게 매우 아쉬울 따름입니다...!!

혹시 kaminari에 대해 좋은 기능을 알고있다면 댓글로 작성해주세요!

감사합니다!!

도움 및 참고

팀원의 도움 : L. G. S
Github - Kaminari : https://github.com/kaminari/kaminari
알아두면 좋은 Gem : http://cafe.naver.com/itctsixsens/23

Topics