들어가면서... |
어느 사이트에서나 꼭 들어가는 것이 있다면 컨텐츠 페이징기능 일 것이다. 너무 많은 자료를 한 화면에 보여주기 힘들때 사용하는게 페이징기능이다. 요즘은 인피니티 스크롤 기술의 개발로 점점 사용 추세가 줄고는 있지만, 블러그, 게시판 등 글을 다루는 곳에서는 항상 필요하게 되는 기능이 페이징 기능이다.
오늘은 Rails에서 기본적으로 만들어주는 페이징 기능인 Paginate를 사용해보도록 하겠다.
시작하기전에... |
이번 설명을 위해서 간단하게 프로젝트와 데이터베이스를 하나 만들겠다. 목표는 친구이름, 핸드폰번호를 갖고 있는 간단한 테이블을 갖고 있으며 친구 리스트를 보여주는 것에 페이징 기능을 추가하도록 하겠다.
> rails new paginate
...
> cd paginate
> rails s
....
새로운 터미널을 켜서 테이블을 추가시켜보자
> cd paginate
> rails generate scaffold friend name:string phone:string
...
> rake db:migrate
....
테스트 데이터 추가 |
페이징 기능을 확인하기 위해서는 수많은 데이터를 추가해야 한다. localhost:3000/friends/new 페이지에 접속하여 하나둘 데이터를 추가하다 보면 화가나는 자신을 확인할 수 있을 것이다. 여기서 더미데이터를 추가하는 방법에 대해서 간단하게 알려주도록 하겠다.
더미데이터를 추가를 위한 스크립트성 코드를 저장하기 위해서 script 폴더를 만들어서 그곳에서 작업을 하도록 하겠다. 파일이름은 자신이 알아보고 편한 형태로 지어주면된다. 필자의 경우 친구 리스트를 추가하는 것이기 때문에 input_frined.rb로 지었다. 확장자가 erb, ruby 파일임을 확인해야 한다.
> mkdir script
> vi script/input_friend.rb
Friend.transaction do
(1..50).each do |i|
Friend.create(name: "Friend #{i}", phone: "010-1234-0000")
end
end
코드는 간단하다. 테이블에 직접적으로 트렌젝션을 수행하는데 어떤 트렌젝션을 수행할 것인지 작성해주면된다. 데이터를 입력할 필요가 있기 때문에 create를 이용하여 친구 50명을 생성하는 코드이다.
이젠 생성된 스크립트를 실행하기 위해서 다음 명령을 입력하자.
> rails runner script/input_friend
localhost:3000/friend 페이지로 접속을 하면 추가된 친구 목록을 확인할 수 있을 것이다.
이제는 이 많은 친구들을 페이징 기능을 줘서 나눠서 보도록하자.
Paginate |
앞에서 말했듯이 Rails에서는 기본적으로 제공해주는 페이징 기능이 있다. 이것의 이름은 Paginate라고 하며, 기존에는 레일즈에 기본적으로 부착되있었지만, 현재는 자유롭게 변형 및 성능개발을 가능하게 하기위해서 잼으로 분리되었다.
Paginate Gem을 추가하기 위해서 Gemfile을 수정하도록 하자.
> vi Gemfile
Gemfile의 맨 밑에 다음의 한 줄을 추가시키면 된다.
gem 'will_paginate', '~> 3.0'
저장을 하고 나오면 변경된 잼으로 수정하기 위해서 번들을 다시 인스톨 해준다.
> bundle install
설치에 성공하면 다음 화면을 볼 수 있을 것이다.
또한, Bundle이 변경되었기 대문에 서버도 재시작해줄 필요가 있다!
설치가 끝났다면 이젠 컨트롤러와 뷰를 수정하면된다. 일단 컨트롤러에서 얻어올 데이터의 위치 및 양을 정의하도록 하자. 데이터의 목록을 가져와서 보여주는 부분은 index에서 정의할 수 있다.
> vi app/controller/friend_controller.rb
현재 index함수를 보면 Friend.all로 모든 목록을 가져오게 되어있지만, 이것을 변형시켜 다음과 같이 작성하였다.
# GET /friends
# GET /friends.json
def index
@frineds = Friend.paginate page: params[:page], order:'created_at desc', per_page: 3
end
내용은 다음과 같다. 친구데이터를 paginate를 사용해서 가져오겠다고 선언을 하였다. 그 뒤에오는 파라미터로는 몇 번째 페이지인지, 어떤 방식으로 정렬할 것인지, 하나의 페이지에 몇 개의 데이터를 보여줄지를 결정하게 된다.
데이터를 가져오는 것을 컨트롤러에서 정의하였다. 이젠 뷰에 페이징하는 숫자만 추가시켜주면된다.
> vi app/views/friend/index.html.erb
페이징 기능이 보여줄 위치에다가 다음 한 줄을 추가시켜 준다.
<%= will_paginate @friends %>
이제 localhost:3000/friends 페이지를 다시들어가보면 페이징기능이 추가되있는 것을 볼 수 있을 것이다.
마무리... |
페이지기능 끄읏~
기능을 추가시에
- bundle install
- server restart
를 잊지말고 반드시해주자!~
paginate.zip