Code1018

지난 일지에서의 나의 목표

1. 회원 정보 구체화

2. 로그인 시 회원 정보를 이용해 화면에 표시.

3. 소셜 인증(SNS, Email 등) 을 통한 회원가입 기능 추가. 

  오늘은 회원 정보를 구체화하고, 개인적인 목표로 생일을 입력할 때 달력에서 날짜를 선택해서 입력하는 기능을 추가하기로 했다.

  Widget 기능

  Widget 기능을 구현하기 위해 굉장히 해메었다. 찾았던 많은 방법 중 간단한 방법으로 구현하였다.

< WIdget 추가 >

  DateInput의 타입을 설정한 클래스를 widget에 넣어준다.

  여기서도 문제가 있었는데, 다른 컴퓨터에서 내가 개발했을 때는 위의 방법으로 위젯이 되었는데 다른 노트북에서 테스트 해보니 달력이 안생기는 것이었다. 문제가 무엇인지 한참 검색했더니, IE와 FF에서는 안되는 경우가 있다는 것을 보았다. FireFox에서도 되는 것을 확인했었는데 버전이 달랐던 것으로 받아들였다.

  그리하여 구글 크롬으로 테스트 하였더니 달력 기능이 되는 것을 확인 할 수 있었다.

< Widget 기능 >

  FF와 IE에서 어떤 문제로 안되는 지는 정확히 파악하지 못했지만, 이는 더 조사해보아야할 점이다.

  두 번째는 프로필 정보를 구체화 시켰다.

< 프로필 정보 >

  여기서 해커의 레벨을 등급으로 만들어 두고 이를 튜플로 선택할 수 있도록 만들었다. 이를 관리자 페이지에서 확인해보면 다음과 같다.

< 프로필 확인 >

  원하는 방식으로 구현 된 것을 확인하였다.

  이제 다음으로 회원가입 기능에 설정한 내용을 입력하게 하는 것이다.

< 필드 추가 >

  이는 기존의 방법대로 fields에 입력받을 폼을 추가하여 구현하였다.

< 회원 가입 화면 >

  회원 가입 화면은 위와 같다. 아직 디자인은 없어서 모양이 이상하지만 개발을 우선으로 하고 나중에 디자인 할 계획이다.

  회원 가입 테스트를 해본다!

< 회원 가입 테스트 >

  회원 가입 결과 성공적으로 회원가입이 되었다.

  이제 추가적으로 이렇게 입력받은 정보들을 확인할 수 있는 기능을 만들 것이다. 이를 위해 왼쪽 사이드 바에 mypage 란을 만든다.

< mypage 목록 추가 >

< 추가된 My Page >

  My Page에서 회원 프로필 정보를 확인하는 기능을 추가해야한다.!!

다음 나의 목표.

1. 로그인 시 회원 정보를 이용해 화면에 표시. (My Page기능)

2. 소셜 인증(SNS, Email 등) 을 통한 회원가입 기능 추가. 

  Python을 이용해서 웹 서버를 구축 프로젝트를 시작한다!

계획은 다음과 같다.

1. 인증부분 구현 (로그인,로그아웃 및 회원 관련)

2. Blog App 개발

3. Board App ( 게시판(질문게시판) ) 개발

4. Tools App ( 자료실 ) 개발

기본 Auth App을 사용하여 로그인 로그아웃 기능을 구현하였다. 이 기능은 인터넷에 많은 자료가 있어서 만들기 쉬웠다.

< 메인 페이지 >

  메인 페이지에서 왼쪽 사이드 바에는 앞으로 만들 목록들을 나열해 두었다. 그리고 로그인이 되었는지를 쉽게 알기 위해 메인에서는 로그인이 되었는지 안되었는지를 표시해준다.

< 로그인 화면 >

  위 처럼 로그인을 하게 되면 아래와 같은 메인 페이지로 바뀐다.

< 로그인 된 모습 >

  로그인 된 아이디를 가지고 간단한 인사를 해준다. 그리고 왼쪽 사이드 바에서 로그인, 회원 가입 목록이 사라지고 로그 아웃 버튼이 나오게 만들어 주었다.

  추가적인 욕심은 바로 이 User 모델을 확장하는 것이었다. 기본 User 모델을 이용해서는 내가 원하는 정보를 넣을 수 없었다. 예를 들어 회원 가입할 때 취미, 사는 위치, 생일 등 다양한 정보를 원할 수 있는데 기본 모델을 사용하기 때문에 확장하기 어려웠다.

  조사해본 바로는 User 모델을 확장하는 방법은 여러가지가 있었다. User 모델 차원에서 전부 뜯어 고치는 방법도 있었는데 나는 User 모델에서 One To One Field를 사용하여 회원 정보를 추가하기로 했다.

  이 방법은 정말 쉽고 인터넷에 찾아보면 쉽게 찾을 수 있다.

< OneToOneField를 이용한 확장 >

  여기까지는 쉬울 수 있으나 문제가 있었다. 이렇게 확장하는 것은 편리하긴 하나 회원가입할 때 이 추가정보들을 어떻게 보여주느냐가 문제였다.

  나는 CreateView (class 기반의 뷰) 를 사용할 건데 여기에는 form 을 하나만 넣어줄 수 있었다. 그렇기에 회원가입할 때 내가 확장한 정보들을 입력할 수 가 없었다.

  물론, class 기반 뷰를 사용하지 않고 직접 view를 작성하면 되긴 하지만 class 기반의 뷰를 이용하고 싶었다. 어떻게하면 두 form을 합칠지 고민해보았다.

( 이 고민을 하며 이 글을 보고 있는 사람이 있을 수 있으리라 생각한다. 나 또한 많이 고민하고 찾았다. )

  바로 MultiModelForm 을 이용하여 해결했다.

이를 사용하려면 아래의 라이브러리를 받아준다.

< django-betterforms 설치 >

  이 안에 있는 MultiModelForm을 사용하면 form 두개를 합칠 수 있다.

< form 합치기 >

  이렇게 합쳐주고 class 기반의 view에서 하나의 폼으로 입력해주면 된다.

< form 입력 >

  그러면 다음과 같이 성공할 수 있다.

< 확장 성공 >

  이제 테스트를 해보았다.

< 테스트 >

  그리고... 테스트 결과는 다음과 같았다.

< 테스트 결과 >

  가입 실패되었다. 에러 원인을 분석해보니 profile 폼에서 user id가 없다는 이야기였다.

  이유를 곰곰히 코드를 살펴보니 이해할 수 있었다.

나는 OneToOne으로 User와 Profile 을 연결하였다. Profile을 추가하기 위해서는 User가 필요한데(구체적으로 User.id) 회원가입할 때 동시에 입력을 넣기 때문에 안되었던 것이다.

  즉, User를 먼저 생성한 뒤, 내가 원하는 정보들인 Profile 정보를 저장할 때 생성한 User의 id를 연결해 줘야 한다는 것이다. 이를 위해서는 View에서 처리할 수 밖에 없었다.

< 회원 가입 처리 >

  동작 원리는 먼저 user 폼에서 들어온 정보들로 User를 생성하여 저장하고, 해당 User를 profile의 user와 연결해준다. ( 1대1 관계 )

  그 후 넘어온 Profile 정보들을 저장해준다.

< 테스트 >

  테스트 결과는 다음과 같다.

< 테스트 결과 >

  User 모델을 확장하는데 성공하였다.!!

다음 나의 목표.

1. 회원 정보 구체화

2. 로그인 시 회원 정보를 이용해 화면에 표시.

3. 소셜 인증(SNS, Email 등) 을 통한 회원가입 기능 추가. 

  지난 글에서 auth APP을 이용하여 로그인/로그아웃 기능을 구현하였다. 이번에는 회원가입 기능을 추가해 볼 것이다. 이를 위해 accounts APP을 만들어준다.

< accounts APP 생성 >

  이제 이 APP에 auth APP의 기능을 이용해 회원 가입 기능을 추가할 것이다. settings.py 를 수정해준다.

< settings.py 수정 >

  accounts APP을 생성한 후 settings.py 파일에서 임포트 APP 리스트에 추가해준다.

< urls.py 수정 >

  urls.py에 생성한 accounts 경로를 만들어주고 우리 APP의 urls을 include해준다. 위에서 아래로 url을 찾기 때문에 우리가 만든 APP의 urls.py를 검색한 뒤 여기에 없으면 auth APP의 urls.py에서 찾는 url을 찾을 것이다.

< accounts/urls.py >

  우리가 만든 APP의 urls.py에 회원 가입 경로를 설정해준다. views 파일에 SignUp 클래스를 만들어 줄 것이므로 위와 같이 view를 넣어준다.

< SignUp 클래스 생성 >

  이 클래스는 제네릭 CreateView이다. form은 auth APP에 있는 UserCreationForm을 사용할 것이고, template과 가입이 끝난 뒤 어디로 redirect 시킬지에 대한 정보를 입력한다. 

< signup.html >

  마지막으로 회원 가입하는 페이지! signup.html 템플릿을 만들어준다.

  이제 지금까지 구현한 회원가입 기능이 잘 동작하는지 확인해본다.

< Signup 페이지 >

  aacounts/signup/ 으로 접속하니 회원가입 페이지가 잘 나오는 것을 확인 할 수 있다. 이제 아이디와 비밀번호를 입력하여 회원가입한다.

< 회원 가입 >

  회원 가입 후 실제로 로그인 해본다.!

< 로그인 시도 >

< 로그인 성공 >

  우리가 회원 가입한 아이디로 로그인이 된 것을 확인 할 수 있었다.

  이로써 auth APP을 이용하여 회원가입 기능을 구현해 보았다.