-
[루비온레일즈] devise gem 이용해 회원가입, 로그인 기능 만들기Ruby on Rails 2021. 3. 12. 11:02
오늘 포스팅에서는 devise gem을 이용해 회원가입과 로그인 기능을 구현해보겠습니다!
우선 gem(젬)이란, 여러 가지 기능들을 구현하기 쉽게 만들어 놓은 라이브러리입니다.
회원가입, 로그인 기능을 만들어주는 devise gem 뿐 아니라 사진 업로드 기능을 구현해주는 carrierwave gem 등 다양한 젬들이 있는데요.
이 젬들은 다른 사람들이 미리 만들어 놓고 사용법까지 자세히 공개하였으니, 우리는 그냥 가져다 쓰면 됩니다!
저는 보통 필요한 gem 들을 구글 검색을 통해 찾아서 사용합니다.
이런 식으로 직접 검색해도 되고, devise gem의 사용법은 아래 링크에 나와 있으니 참고하시기 바랍니다.
1. devise gem 설치
devise gem 설명에서 스크롤을 내려보면, Getting started가 있습니다. 이 부분부터 따라해보겠습니다.
우선, 젬 파일들을 관리하는 Gemfile 로 이동해 기존에 설치되어 있는 gem 들 사이에
gem 'devise'
를 추가해줍니다. 저는 맨 위에 넣었습니다.
그리고 터미널 창에 bundle intall 해줍니다.
bundle 을 통해 새로 추가된 gem을 업데이트해준다고 생각하면 됩니다.
그리고 터미널에 rails g devise:install 을 입력해 devise gem을 설치합니다.
설치가 완료되면 터미널에 아래와 같은 메세지가 나옵니다. 일단 devise 관련 파일 2개가 생성되었고, 그 아래에 수행해야 하는 다음 단계들이 나오는데 1번부터 시작하겠습니다.
1번은 config/environments/development.rb 에 config.action_mailer.default_url_options = { host: 'localhost', port: 3000 } 라는 코드를 추가하라는 지시입니다.
저는 이런 식으로 8번째 줄에 해당 코드를 복붙했습니다.
2번은 라우트를 설정하라는 것입니다.
config/routes.rb 에 가서 2번 째 줄에 root "컨트롤러#index" 을 추가합니다.
이 코드의 의미는 boards 컨트롤러의 index를 기본 페이지로 설정하겠다는 의미입니다.
이렇게 추가하고 localhost:3000/을 브라우저 주소창에 입력하면 index 페이지가 나옵니다.
3번은 app/views/layouts/application.html.erb 에
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>를 삽입하라는 의미인데요, application.html.erb 는 application 즉 우리가 만들고 있는 프로젝트에 모두 적용되는 html 파일입니다.
그리고 해당 명령어는 notice와 alert 즉 알림을 보여주는 코드인데요, 즉 회원가입, 로그인, 로그아웃 등과 관련된 알림을 보여주는 코드라고 생각할 수 있습니다.
마찬가지로 코드를 복붙해서 저는 <head>와 <body> 사이에 넣어서 알림이 홈페이지 맨 위에 나오도록 했습니다.
마지막 4번은 rails g devise:views 를 터미널에서 실행하라는 지시입니다. devise와 관련된 view 파일을 생성하는 명령어입니다. 복붙해서 터미널에 입력합니다.
이렇게 많은 파일들이 생성되었는데요, 일단 보면 모두 뷰 파일들이고 devise 와 관련되어 있습니다. 좀 더 살펴보면, 위부터 에러나 링크를 보여주는 뷰 파일, 컨펌 파일, 패스워드, 등록(회원가입), 메일러 등 회원가입, 로그인과 관련된 뷰 파일들이 생성되었습니다!
이제 devise gem 설치는 모두 끝났습니다!
2. 유저 모델 만들기
다음 단계로 유저 모델을 생성하여 데이터베이스에 유저 정보를 저장할 테이블을 만들겠습니다.
터미널에
rails g devise User
를 입력해 유저 모델을 생성합니다.
유저 모델을 생성했더니 마이그레이션 파일, 유저 모델 파일, 테스트 파일들이 생겼습니다.
마이그레이션 파일에 들어가보면, devise가 기본적으로 테이블 모양을 잡아줍니다. (email, password, token 등)
그리고 하단의 #으로 주석처리된 코드들은 유저 관리, 로그인 기록 등등에 대한 추가 기능들입니다.
모델 파일인 user.rb 에 들어가보면, 4,5번 줄에 devise가 기본적인 기능들을 담아두었고, 추가 기능들도 주석 처리해서 넣어두었네요!
이렇게 gem을 이용하면 웹사이트 상에서 필요한 다양한 기능을 손쉽게 구현할 수 있습니다.
테이블 모양이 잘 잡혀 있다면 rake db:migrate 해서 테이블을 확정합니다.
3. 회원가입, 로그인, 로그아웃 뷰 만들기
이제 웹 사이트 상에 회원가입, 로그인, 로그아웃 링크를 만들어 화면에 보이게 하겠습니다.
그 전에 어디에 코딩을 할지 잠깐 생각해보면, 회원가입과 관련된 링크들은 웹사이트 상에서 index, show, edit 등 어떤 페이지를 가더라도 항상 보여져야 합니다.
그리고 이렇게 항상 보여주는 html파일은 앞에서 notice와 alert 코드를 작성한 application.html.erb 파일입니다!
여기에 하단 코드를 작성합니다. 저는 <head> 와 <body> 사이에 넣어 화면 맨 위에 표시되도록 했습니다.
<%if user_signed_in? %>
<%=current_user.email %>
<%=link_to 'Log Out', destroy_user_session_path, method: :delete %>
<%else%>
<%=link_to 'Sign Up', new_user_registration_path %>
<%=link_to 'Sign In', new_user_session_path %>
<%end%>
코드의 의미를 살펴보면, if 조건문으로 우선 user_signed_in?, current_user 는 devise에서 구현해주는 코드로 만약 유저가 로그인 한 상태라면을 의미합니다. 그러므로 로그인을 했다면, 현재 유저의 이메일을 보여주고 링크를 걸어 Log Out 으로 보여주라는 의미입니다.
이때, Log Out을 클릭하면 destroy 즉 로그아웃이 됩니다.
여기서 사용한 destroy_user_session_path 라는 경로는 터미널에 rails routes | grep user 라고 입력하면 User 와 관련된 모든 경로들이 나옵니다.
계속해서 else로 로그인하지 않은 상태라면, Sign Up(회원가입), Sign In(로그인) 링크를 걸어주었습니다.
뷰 파일이 잘 만들어졌는지 서버를 실행해 확인해보겠습니다. 화면 맨 위 왼쪽에 Sign Up 과 Sign In 링크가 잘 만들어졌네요. 회원가입, 로그아웃, 로그인 기능도 모두 잘 동작하고 있습니다.
이렇게 devise gem 을 이용하면 손쉽게 회원가입 기능을 만들어낼 수 있습니다!!
다음 포스팅에서는 회원정보에 email 말고 다른 항목들을 추가해보도록 하겠습니다!
'Ruby on Rails' 카테고리의 다른 글
[루비온레일즈] 유저-게시물(로그인, 비로그인 검증해 게시글 작성하기) (0) 2021.03.17 [루비온레일즈] devise gem 회원정보 추가하기 (0) 2021.03.12 [루비온레일즈] 댓글 기능 구현하기 (부모-자식 관계) (0) 2021.03.11 [루비온레일즈] Scaffold 생성하고 뜯어보기 (0) 2021.03.11 [루비온레일즈] MVC 패턴(업데이트, 삭제 기능) (0) 2021.03.07