5-1 회원 기능 붙이기

SNS 뿐 아니라 모든 웹서비스에서 가장 중요한 기능은 회원기능입니다. 우리가 직접 코딩해서 하나하나 회원가입이나 로그인 기능을 구현할 수도 있지만, 이미 멋지게 만들어진 코드를 추가하여 사용할 수 있습니다. 우리가 사용할 gem은 devise gem 입니다. 이 gem을 추가하고 각 아이템에 맞게 커스터마이징하는 방법을 알아보겠습니다. 그러면 레일즈에서 새로운 프로젝트를 생성하고 시작해봅시다!

5-1-1 새 프로젝트 만들기

SNS를 위해 새 레일즈 프로젝트를 생성합니다. 이름은 sns-example라고 짓겠습니다.

$ rails _5.1.4_ new sns-example

프로젝트 생성이 완료되었으면 생성된 sns-example 폴더에 들어가서 모든 작업을 따라 하시면 됩니다. sns-example 폴더에 들어가는 명령어는 다음과 같습니다.

$ cd mySNS

터미널에서 rails 명령어를 입력할 때 항상 현재 폴더의 위치가 sns-example인지 확인하세요.

5-1-2 gem 파일에 devise gem 추가

[TIP] google: devise gem

devise gem 은 회원가입, 로그인, 로그아웃 뿐 아니라 비밀번호 찾기, 자동로그인 등의 기능들도 구현되어있습니다. 이 기능을 사용하려면 간단하게 코드 한줄을 입력하면 됩니다. 프로젝트의 파일들 중 gemfile을 열어 다음과 같이 입력합니다.

# Gemfile
gem 'devise', git: 'https://github.com/plataformatec/devise.git'

5-1-3 gem 설치

Gemfile 수정이 끝났으면 bundle install 명령어를 이용해 gem을 설치하세요. 그러면 gem을 사용할 수 있습니다.

#bash
$ bundle install

5-1-4 devise 설정파일 생성

Devise 설정파일 등을 생성하기 위해 터미널에 다음과 같은 명령어를 입력합니다.

$ rails g devise:install

5-1-5 유저 모델 생성

Devise는 유저를 관리하는 라이브러리인 만큼 유저 모델을 자동으로 생성해주는 명령어도 포함되어 있습니다. 다음은 User라는 모델을 만드는 명령어입니다. 생성되는 모델에는 Devise에서 제공하는 회원 관련 기능들을 모두 포함합니다.

# bash
$ rails g devise User

명령어를 입력하면 db/migrate/ 에 유저 테이블을 생성하는 마이그레이션 파일이 생성됩니다. 유저 테이블에는 이메일, 패스워드뿐만 아니라 비밀번호 초기화, 이메일 인증등의 기능에 필요한 모든 컬럼이 준비되어 있습니다. 이 컬럼들은 Devise gem에서 자체적으로 사용하며 우리가 신경써야 할 컬럼은 이메일과 패스워드입니다.

우리는 SNS에서 이름(name) 컬럼이 필요합니다. 우리가 원하는 대로 추가적인 컬럼을 넣고 싶을 땐 이 마이그레이션 파일에 코드를 적절히 추가하여 커스터마이징 할 수 있습니다.

5-1-6 user 컬럼 추가

# db/migrate/20170912104132_devise_create_users.rb
class DeviseCreateUsers < ActiveRecord::Migration[5.0]
def change
create_table :users do |t|
## Database authenticatable
t.string :email, null: false, default: ""
t.string :encrypted_password, null: false, default: ""
t.string :name ### name 컬럼 추가

## Recoverable
...

5-1-7 회원 기능 실행

이제 다음 명령어를 실행하면 name이 추가된 채로 유저 테이블이 생성됩니다.

$ rake db:migrate

로그인 & 회원가입

지금까지 잘 따라왔다면 주소규칙을 정의하는 config/routes.rb 파일에 devise_for :users이라는 코드가 자동으로 작성되었을 것입니다. 없다면 빠진 부분이 없었나 다시 돌아보세요. 자세한 주소규칙은 터미널에 $ rake routes 명령어를 통해 확인할 수 있습니다.

#bash
$ rake routes

명령어를 입력하는 순간 아래에 쭉 주소규칙들이 뜹니다.

Prefix Verb URI Pattern Controller#Action
new_user_session GET /users/sign_in(.:format) devise/sessions#new
user_session POST /users/sign_in(.:format) devise/sessions#create
destroy_user_session DELETE /users/sign_out(.:format) devise/sessions#destroy
new_user_password GET /users/password/new(.:format) devise/passwords#new
edit_user_password GET /users/password/edit(.:format) devise/passwords#edit
user_password PATCH /users/password(.:format) devise/passwords#update
PUT /users/password(.:format) devise/passwords#update
POST /users/password(.:format) devise/passwords#create
cancel_user_registration GET /users/cancel(.:format) devise/registrations#cancel
new_user_registration GET /users/sign_up(.:format) devise/registrations#new
edit_user_registration GET /users/edit(.:format) devise/registrations#edit
user_registration PATCH /users(.:format) devise/registrations#update
PUT /users(.:format) devise/registrations#update
DELETE /users(.:format) devise/registrations#destroy
POST /users(.:format) devise/registrations#create

로그인(new_user_session)과 회원가입(new_user_registration)등 주소가 이미 정의되어 있는 것이 보입니다. 지금 서버를 켜고 각자도메인/users/sign_up 주소로 접속해보세요. 바로 회원가입과 로그인 기능을 사용할 수 있습니다!

그냥 도메인만 실행했을 때는 여전히 기본화면이 보입니다.

하지만 주소규칙에 나와있는 대로 각자도메인/users/sign_up 주소를 직접 입력하면 회원가입할 수 있는 페이지가 바로 나타납니다. 회원가입 해보세요!

회원가입을 했으면 각자도메인/users/sign_in 주소로 접속하여 회원가입한 정보로 로그인도 해보세요!

5-1-8 추가한 name 컬럼 사용 가능하게 하기

유저 모델을 만들면서 name 컬럼을 추가하였습니다. 이처럼 기본으로 제공되는 컬럼외에 추가적으로 커스터마이징한 컬럼들은 따로 코드를 작성해주어야 합니다. 이 코드를 작성하지 않으면 아무리 이름을 작성하고 회원가입을 해도 유저에 이름이 저장되지 않습니다. app/controllers/application_controller.rb 파일을 아래와 같이 수정합니다.

# app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
protect_from_forgery with: :exception

before_action :configure_permitted_parameters, if: :devise_controller?

protected

def configure_permitted_parameters
devise_parameter_sanitizer.permit(:sign_up, keys: [:name]) ## name 컬럼 코드
devise_parameter_sanitizer.permit(:account_update, keys: [:name]) ## name 컬럼 코드
end

end

5-1-9 devise 파일들 나타내기

devise gem을 통해 이루어지는 회원가입 관련 파일들은 숨어 있습니다. 이를 우리가 적절히 커스터마이징 하기 위해 파일들이 보이도록 터미널에 명령어를 입력합니다. 그러면 파일 목록에 여러 파일들이 나타납니다.

$ rails g devise:views

5-1-10 회원가입 뷰에 name 필드 추가하기

나타난 파일들 중 회원가입 뷰인 app/views/devise/registrations/new.html.erb를 찾아 name 항목을 입력받을 수 있도록 필드를 추가합니다.

# app/views/devise/registrations/new.html.erb
...
<%= f.password_field :password_confirmation, autocomplete: "off" %>
</div>
<div class="field">
<%= f.label :name %><br/>
<%= f.text_field :name %>
</div>
<div class="actions">
<%= f.submit "Sign up" %>
</div>
...

이제 다시 회원가입 페이지를 들어가보면 이름을 입력받을 수 있습니다.

이제 다시 회원가입 페이지를 들어가보면 이름을 입력받을 수 있습니다.

5-1-11 회원정보수정 뷰에 name 필드 추가하기

회원정보를 수정하는 뷰도 같은 방법으로 name 필드를 추가하세요.

# app/views/devise/registrations/edit.html.erb
...
<div class="field">
<%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
<%= f.password_field :current_password, autocomplete: "off" %>
</div>

<div class="field">
<%= f.label :name %><br />
<%= f.text_field :name %>
</div>

<div class="actions">
<%= f.submit "Update" %>
</div>
...

회원정보 수정 페이지도 확인해보니 name 필드가 나타납니다.

[보충설명] Devise 헬퍼

현재 유저가 로그인된 상태인지 확인할 땐 user_signed_in? 헬퍼를 사용하고, 현재 로그인 된 유저 객체를 불러올 땐 current_user 헬퍼를 사용합니다.

이것은 예를 들어 다음과 같은 상황에서 사용될 수 있습니다.

<% if user_signed_in? %>
<span><%= current_user.name %>님 환영합니다.</span>
<% else %>
<span>로그인 필요!</span>
<% end %>

5-1 회원기능 붙이기를 완성했습니다!

devise gem을 추가하여 기본 회원기능을 사용하고, 필요에 맞게 커스터마이징을 해보았습니다. 다음장에서는 디자인 입히기를 해 보도록 합시다.