티스토리 뷰
Ruby on Rails : 페이지(paginate) [Gem : kaminari]
나른한 하루 2019. 11. 5. 16:00해당 글은 https://blog.naver.com/kbs4674/221067158208 로 부터 게시글이 이전되었습니다.
만약에 게시판을 개발한다면? 사람들이 흔히 당연하다고 생각하고 쓰는것이 무엇이 있을까요?
게시글 작성 편집기, 게시글 검색, 게시판 페이지 목록... 이 외에도 다양할겁니다.
그 중, 저는 이번 시간에는 '게시판 페이지 목록'을 셋팅하는법에 대해 설명하겠습니다.
설명하기 전에 앞서서, 만약에 게시판에 페이지 목록이 없다면 어떻게 될까요?
글이 계속 세로로 쭈우우욱 무한히 써져나가고, 엄청난 스크롤 압박이 찾아오겠죠?
(물론 일정 스크롤에 도착하면 새로 글이 로딩되는 무한스크롤 방법이 있긴 합니다.)
이를 방지하기 위해 탄생한 것이 '게시글 페이지 목록' 입니다.
부록
-
Kaminari보다 최적화 된 Paginate : Pagy [클릭]
시작 전 유의사항
-
이 글은 Post Scaffold를 쓴다는 가정 하로 작성됩니다.
-
이 글은 당신이 부트스트랩을 쓴다는 가정 하에 글을 작성합니다. 일부 부분이 부트스트랩을 활용합니다.
-
kaminari를 이용한 Paginate 구현
1. Gemfile 로 이동 후, 다음 내용을 입력합니다.
gem 'kaminari'그리고 Gem을 설치합니다.
bundle install
2. app/controllers/posts_controller.rb 로 이동 후, 목록에 해당되는 액션(필자는 def index) 속에 다음 내용을 추가합니다.
class PostsController < ApplicationController
...
def index
...
@posts = Post.order("created_at DESC").page params[:page]
end
...
end참고 게시글이 보여질 시, 내림차순 정렬이 됩니다.
오름차순 정렬을 원하시면 order("created_at DESC") 코드를 없애주세요!
이어서 app/models/post.rb 로 이동 후, model 파일 안에 다음 내용을 입력해줍니다.
class Post < ApplicationRecord
paginates_per 5
...
end참고
위 예시는 'Post 모델에 있어, 한 목록 당 10개의 글이 보여짐'을 의미합니다. 만약 10개 말고 더 많이 혹은 더 적게 글을 보여주고 싶다면
'paginates_per 10' 이 부분에서 숫자를 수정해주세요.
2번 과정 전체적인 참고
show에는 한 목록 당 5개의 게시글을, index에는 한 목록 당 10개의 게시글
위와같이 다르게 보여주고 싶다면
1) Model 파일에 paginates_per 5 을 쓰지 말고, Controller에 다음과 같이 입력해주세요.
class PostsController < ApplicationController
def index
..
@posts = Post.page(params[:page]).per(5)
end
def show
..
@posts = Post.page(params[:page]).per(10)
end
2) 위와같이 모든 게시글 정보를 불러오는 컨트롤러 변수 끝에다가
Model.page(params[:page]).per(5)위 코드를 쓰면 Model파일에 paginate 정의를 안내려줘도 됩니다.
3. Post View의 index.html.erb 로 가서 적절한 위치에 아래 태그를 삽입합니다.
<%= paginate @posts %>참고 위 코드의 @posts 변수에는
Post.page(params[:page]).per(5)Controller에 정의했던 위 코드가 초기화 되어있습니다.
4. 서버를 껏다 켜주세요.
5. 중간에 한번 확인해 보면 게시판 목록에 한 목록 당 5개의 게시글이 보여지는게 확인됩니다!
하지만 여기서 끝나기엔 이 기능에 있어서 아까운것이 있습니다.
kaminari Gem에는 디자인 템플릿을 적용을 할 수 있습니다!
-
kaminari에 디자인 템플릿 적용
Paginate에는 다양한 디자인 템플릿을 적용할 수 있습니다. [지원 디자인 템플릿 리스트]
해당 예시에서는 부트스트랩4 디자인을 입혀보겠습니다.
1.간단한 부트스트랩 디자인을 적용하고 싶다면, 터미널에 다음 명령어를 입력해줍니다.
※ 부트스트랩 4.0 사용 기준 작성이며, 부트스트랩 관련 파일(CSS, JS 등)들이 미리 레일즈 프로젝트 내에 적용되어 있어야 합니다.
rails g kaminari:views bootstrap4
그럼 뭔가 view 파일들이 생성되는게 확인이 됩니다.
해당 View파일들은 Kaminari 디자인을 이루는 하나하나의 Component 라고 보시면 됩니다.
3. 위 명령어는 각 kaminari View 별로 디자인 class 만 정의될 뿐, 실제로 아직 디자인이 되진 않습니다.
Bootstrap css/js 구성을 정의해보겠습니다.
4. app/views/layouts/application.html.erb 파일로 이동해주세요.
그리고 다음 코드를 추가해주세요.
<%# app/views/layouts/application.html.erb %>
<head>
...
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
5. 부트스트랩 디자인이 간단히 적용된게 확인됩니다!!!
하지만.. 전 여기서 아직도 만족을 못하겠더군요.. 이번엔 저 영어가 거슬렸습니다.
-
kaminari 번역 적용
kaminari는 i18n을 이용해서 해서 다국어 언어를 설정할 수 있습니다!
이번엔 한국어 패치를 해보겠습니다.
1. config/application.rb 파일을 열람 후, 다음 문구들을 추가합니다.
config.i18n.default_locale = :ko
config.time_zone = 'Seoul'
적용 예시
## config/application.yml
... 내용 생략 ...
class Application < Rails::Application
config.load_defaults 5.2
config.i18n.default_locale = :ko
config.time_zone = 'Seoul'
end
2. config/locals/ 폴더 내에서 kaminari.ko.yml 파일을 생성(다른 이름으로 생성해도 되나, 확장자가 yml이어야 합니다!)합니다.
그리고 생성한 파일(kaminari.ko.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} - %{last}</b> of <b>%{total}</b> in total"참고 번역 안한부분은 무슨기능인지 도저히 몰라서 다 번역은 안했고, 절반만 했습니다.
2. 다시 게시판 목록을 보면 이젠 번역까지 된게 확인됩니다!
- 도움 및 자료 참고
1. 팀원의 도움 : L. G. S
2. Github - Kaminari [클릭]
3. 알아두면 좋은 Gem [클릭]
루비온 레일즈 Ruby on Rails ROR
'프로그래밍 공부 > Ruby on Rails : Gem' 카테고리의 다른 글
| Ruby on Rails : Rolify + Cancancan 권한 지정/권한 관리 [Gem : rolify, cancancan] (0) | 2019.11.05 |
|---|---|
| Ruby on Rails : 페이지(paginate) 2 [Gem : Pagy] (2) | 2019.11.05 |
| Ruby on Rails : Devise 로그인 Form 변경하기 (0) | 2019.11.05 |
| Ruby on Rails : 게시물 삭제 기록 남기기 [Gem : paranoia] (0) | 2019.11.05 |
| Ruby on Rails : 조회수 구현 [Gem : impressionist] (0) | 2019.11.05 |
