[RoR] Carrierwave 를 이용한 이미지 업로드 기능 구현

carrierwave 를 이용해서 이미지 업로드 기능을 구현하려고 합니다.

1. 먼저 이미지를 올리기 위한 게시판 형식을 scaffold 형식으로 구현해보도록 한다.

rails g scaffold Post title:string content:text

2. scaffold 의 index 페이지를 첫 화면으로 띄우도록 하기 위해서 config/route.rb에 root를 추가해 주는 작업을 거칩니다. 

#config/route.rb

Rails.application.routes.draw do
    root :to => 'posts#index'
    resources :posts
end

3. 데이터가 존재함으로 migration 해줍니다. 

rake db:migrate

4. 다음으로 carrierwave gem을 인스톨 해줍니다

#Gemfile
gem 'carrierwave', github: 'carrierwaveuploader/carrierwave'

5. install 해줍니다. 13개 정도가 설치됩니다.

%주의% : 만약 1개가 설치된다면, 작성한 코드가 잘 저장되어있는지 확인하도록 합시다. 

bundle install

6. 업로더 셋팅을 위한 파일을 만들어 줍시다.

rails g uploader test

app/uploaders/test_uploader.rb에 파일이 추가된 것을 알 수 있습니다.

7. scaffolding으로 만들어진 모델의 각각의 post가 이미지를 가져야 함으로 이미지 링크가 저장될 공간을 만들어야한다. 따라서 기존 model에 새로운 문자열 저장 공간을 만들어야 한다. 

rails g migration AddImageToPost image:string

8. 마찬가지로 migration해줍니다.

rake db:migrate

이제 post 모델에 image라는 이름으로 string을 저장할 수 있는 공간이 생성되었습니다. 

9. post모델에 uploader를 사용할 수 있도록 mount 명령어를 추가해 주어야 합니다.

#app/models/post.rb
class Post < ActiveRecord::Base
    mount_uploader :image  <<<---
end

10. 자. 이제 view에 보이도록 합시다. 

app/views/posts/_form.html.erb에서

<div class="field">
    <%= f.label :image %><br>
    <%= f.file_field :image, accept: 'image/png,image/gif,image/jpeg' %>
</div>

를 추가해 줍니다. 

11. 컨트롤러에서도 변동사항이 있습니다.

app/controllers/posts_controller.rb에서

class PostsController < ApplicationController
    private
        def post_params
            params.require(:post).permit(:title,:content,:image) <---추가
        end
    end

이미지를 추가해 준다.

12. 게시판에 이미지가 보이도록 한다.

#app/views/posts/index.html.erb에서
<tr>
    <td><%= post.title %></td>
    <td><%= post.content %></td>
    <td><%= image_tag("#{post.image}") %></td>    <---추가
    <td><%= link_to 'Show', post %></td>
    <td><%= link_to 'Edit', edit_post_path(post) %></td>
    <td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>

13. 제목을 클릭했을 때 다른 페이지로 넘어가지며 이미지가 보이게 한다.

#app/views/posts/show.html.erb에서
<p>
    <strong>사진:</strong>
    <%= image_tag("#{@post.image}") %>
</p>

추가해준다.

이상 이미지 업로드 기능을 알아보았습니다. 추후 다운로드기능까지 추가해서 올리겠습니다.