새로운 프로젝트를 시작해보겠습니다!

새 레일즈 프로젝트를 생성합니다. 우리가 사용할 rails의 버전은 5.1.4 (2017년 9월 12일 기준)입니다. 레일즈의 버전은 계속 업그레이드됩니다. 만약 버전 차이가 크면 여기 있는 내용이 원하는대로 작동하지 않을 가능성이 있습니다. 5.1.4 버전의 레일즈를 설치하는 방법은 다음과 같습니다. 딱 한번만 설치하시면 됩니다. 이미 설치가 되었다면 다시 할 필요는 없습니다.

$ gem install rails -v 5.1.4

이제 특정 버전으로 새 레일즈 프로젝트를 생성합니다. 이름은 mySNS라고 짓겠습니다.

5-1-1

$ rails _5.1.4_ new mySNS

프로젝트 생성이 완료되었으면 생성된 mySNS 폴더에 들어가서 모든 작업을 따라 하시면 됩니다.

리눅스에서 폴더에 들어가는 명령어는 다음과 같습니다.

$ cd mySNS

터미널에서 제터레이터(rails g) 등 rails 명령어를 입력할 때 항상 현재 폴더의 위치를 확인하세요.

Devise로 회원 기능 만들기

유저가 있는 서비스에는 어떤 기능이 필요할까요? 로그인, 회원가입, 비밀번호 찾기, 자동로그인, SNS 로그인, 이메일 인증....
이 기능들을 직접 구현한다고 생각해보면 눈 앞이 깜깜해질겁니다. 하지만 유저와 관련된 거의 모든 기능들을 이미 구현해놓은 라이브러리가 있습니다. 이번 강의에서는 Devise 젬을 사용하여 유저와 로그인/회원가입을 간단히 구현해보겠습니다.

설치

Gemfile에 Devise 젬을 추가합니다. 최신버전의 Devise를 사용할 경우는 github 주소를 명시해주면 됩니다.

5-1-2

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

5-1-3

Gemfile 수정이 끝났으면 bundle install 명령어를 이용해 젬을 설치해줍니다.

$ bundle install

5-1-4

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

$ rails g devise:install

유저 모델 생성

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

5-1-5

# 모델 이름은 AdminUser, User 등 자유롭게 정할 수 있습니다.
$ rails g devise User

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

5-1-6

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

      ## Recoverable
      t.string   :reset_password_token
      t.datetime :reset_password_sent_at

      ## Rememberable
      t.datetime :remember_created_at

      ## Trackable
      t.integer  :sign_in_count, default: 0, null: false
      t.datetime :current_sign_in_at
      t.datetime :last_sign_in_at
      t.string   :current_sign_in_ip
      t.string   :last_sign_in_ip

      ## Confirmable
      # t.string   :confirmation_token
      # t.datetime :confirmed_at
      # t.datetime :confirmation_sent_at
      # t.string   :unconfirmed_email # Only if using reconfirmable

      ## Lockable
      # t.integer  :failed_attempts, default: 0, null: false # Only if lock strategy is :failed_attempts
      # t.string   :unlock_token # Only if unlock strategy is :email or :both
      # t.datetime :locked_at


      t.timestamps null: false
    end

    add_index :users, :email,                unique: true
    add_index :users, :reset_password_token, unique: true
    # add_index :users, :confirmation_token,   unique: true
    # add_index :users, :unlock_token,         unique: true
  end
end

5-1-7

이제 다음 명령어를 실행하면 users 테이블이 생성됩니다.

$ rake db:migrate

로그인 & 회원가입

유저 모델 생성 명령어를 사용하면서 config/routes.rb 파일에 devise_for :users이라는 코드가 작성되었습니다.
이는 Devise에서 사용하는 주소를 정의하는 코드이며 터미널에 $ rake routes 명령어를 통해 정의된 주소를 확인할 수 있습니다.

$ 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 주소로 접속해보세요. 바로 회원가입과 로그인 기능을 사용할 수 있습니다!

5-1-7 홈 /home
5-1-7 홈 /home
5-1-7 회원가입 /users/sign_in
5-1-7 회원가입 /users/sign_in
5-1-7 로그인 /users/sign_up
5-1-7 로그인 /users/sign_up

추가 컬럼 사용가능하도록 만들기

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

5-1-8

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])
    devise_parameter_sanitizer.permit(:account_update, keys: [:name])
  end

end

TODO :: 회원가입 페이지에 name 인풋 추가하기

5-1-9

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

$ rails g devise:views

5-1-10

회원가입 뷰에 name 필드 추가하기

5-1-11

회원정보수정 뷰에 name 필드 추가하기

[보충설명] Devise 헬퍼

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

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

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

그럼 다음 장에서 Bootstrap으로 간단한 디자인을 입힌 후 회원 가입과 로그인 링크 등을 포함한 Nav바를 만들어 보겠습니다.

results matching ""

    No results matching ""