[ToyPJ/Python] django 로 인스타그램 만들기 - 09 로그아웃, 프로필 페이지, 프로필 사진 변경 만들기

📌 01. 프로필/로그아웃 버튼 만들기

로그인 하는 기능을 만들었으니 이제 로그아웃하는 기능을 만들 차례이다. 실제 인스타그램처럼 프로필 이미지 아이콘을 누르면 선택 박스가 나오게 하고, 박스 안에 프로필/로그아웃 버튼을 달려고 한다. 바로 아래와 같이!

프로필/로그아웃 버튼

어느정도 원하는 형태의 버튼을 만들었다. 이러한 버튼 형식을 "드롭다운" 버튼이라고 부르는데 부트스트랩에 올라와 있는 소스를 활용하였다. 복사, 붙여넣기만 하면 돼서 간단하겠구나 생각할 수도 있었지만, 사실 되게 애먹었다. 드롭다운 버튼을 만드는 것까지는 쉽게 성공했는데 자꾸 드롭다운 버튼이 여러 요소들의 뒤쪽에 위치하였다.. ㅠㅠ

드롭박스 버튼이 뒤로 숨는다..

이것을 해결해주기 위해 position : relative를 먹이고, z-index의 속성값을 높게 설정해주면 된다고 하여 따라해봤으나, 이전에 복잡하게 만든 <div>에 position을 다시 먹이려니 여간 복잡한 일이 아니었다. 심지어 position 속성값이 이미 absolute로 먹여져 있어서 그걸 relative로 다시 먹이면서 웹페이지의 변화를 봐야했다.. 무슨 방법이 없을까 고민하다가 생각보다 간단한 방법이 있었다. 바로 가장 아래쪽에 작성한 <div>가 웹페이지 화면의 가장 앞에 위치한다는 특성을 이용한 거였다. 

원래는 상단의 내비 바를 만드는 태그가 피드를 만드는 태그보다 html 소스의 위쪽에 위치하였지만, 위의 특성을 활용하여 내비 바 태그를 html 소스의 아래에 위치시키니까 내가 원하는 대로 구현이 되었다.

📌 02. 로그아웃 기능 만들기

로그아웃 버튼을 만들었으니 이제 로그아웃 버튼을 누르면 로그인 화면으로 돌아가도록 기능을 만들면 된다. 나는 강의를 따라 로그아웃을 get으로 처리하도록 소스를 작성하였다. user/views.py에 클래스를 만들고 user/urls.py를 views.py와 맵핑시켜주면 된다.

main.html - 로그아웃 버튼 링크 만들기

여기서 생각해줘야 하는 것은 로그아웃 버튼을 누르게 되면 세션 정보에 저장된 사용자 정보(이메일)을 삭제시켜주고, 로그인 화면으로 보내도록 해야한다는 것이다. 이렇게 해야 만약 main페이지의 주소를 입력했을 때 세션 정보가 없다면 main페이지가 아닌 로그인 화면으로 이동시킬 수 있다.

이것을 구현하기 위해 content/views.py의 Main페이지에 해당하는 class도 약간 수정해주었다.(원래는 세션 정보에 없으면 None을 담는 소스가 없었다.)

user/views.py - get으로 로그아웃 처리

content/views.py - 세션 정보에 담긴 정보가 있으면 email 담고, 없으면 None

views.py를 작성했다면 urls.py를 작성해서 views.py와 맵핑시켜준다.

user/urls.py

여기까지 완료했다면 로그아웃 버튼을 눌렀을 때 세션 정보가 비워지게 되고, 로그인 화면이 나오게 된다. 다시 메인 페이지의 주소를 입력했을 때도 세션 정보가 없기 때문에 로그인 화면이 나오게 된다.

📌 03. 프로필 페이지 만들기

이제 프로필 페이지를 만들어보자. 프로필 페이지에서 내비 바는 main 페이지와 동일하므로, main.html의 내비 바 부분을 그대로 복사 붙여넣기 해준다. 이제 밑 부분을 인스타그램 프로필 화면처럼 꾸미면 된다.

profile.html

프로필 이미지는 하드코딩으로 붙였지만,(프로필 이미지 만드는 것은 뒤에서 할 예정) 프로필 닉네임, 이름은 세션 정보에서 받아와서 화면에 표시해줄 수 있다. (현재 로그인한 사용자에 대한 정보를 프로필에 표시하는 거니까)

하지만 현재 content/views.py의 Profile 클래스에는 세션 정보를 받아오는 소스가 작성이 되어 있지 않다. content/views.py의 Main 클래스에 작성된 세션 정보를 받아오는 소스를 복사해서 Profile 클래스에도 붙여 넣어준다. 

content/views.py - Profile 클래스

이렇게 해주면 profile.html에서도 세션 정보에 저장된 사용자 정보를 불러와서 사용이 가능하다. 바로 아래처럼 {{ }} 안에 받아올 사용자 정보 데이터를 적어주면 된다.

profile.html

세션 정보에 저장된 사용자 정보를 가져와서 사용했다.

📌 04. 프로필 이미지 변경하기

그 다음 프로필 이미지를 변경할 수 있는 기능을 만드려고 한다. 이미지 위에 커서를 올렸을 때 마우스 포인터가 변경이 되고, 클릭을 하면 파일 업로드 창이 띄워지게 하기 위해서, 구글링을 통해 파일 업로드 창을 띄우는 소스를 가져와서 기능을 구현할 수 있었다.

content/profile.html - 파일 선택 버튼을 만들고 display:none 속성을 통해 숨긴다.

content/profile.html - 이미지 위의 커서를 변경하고, id를 지정한다.

위와 같이 소스를 작성해주었다면 이제 제이쿼리를 통해 동작을 만들 차례이다. 만약 이미지(id=button_profile_upload)를 클릭하면, 숨겨져 있는 파일 선택 버튼(id=input_fileupload)가 클릭될 수 있도록 제이쿼리를 작성해주었다.

jQeury

지금까지 작성한 소스들이 정상적으로 구현되는 것을 웹페이지에서 확인할 수 있다.

파일 업로드 창이 띄워진다!

 파일 업로드 창이 띄워지는 것을 확인했다면 이제 이미지가 바뀌도록 만들어야 된다. 파일 업로드 창이 띄워지게 하는 소스를 보면 input 타입으로 되어있다. 이 input 타입은 안에다가 함수를 만들 수 있는데 onChange="profile_upload()"라는 함수를 주목하자. 이 함수는 만약 내용이 바뀌면 실행된다는 의미를 담고 있다. 즉, onChange가 될 때 어떤 액션을 취하게 할 수 있는데, 우리는 이것을 활용하여 제이쿼리를 통해 바꿀 프로필 이미지가 DB에 저장되고, 실제로 프로필 이미지가 변경되도록 구현하면 된다.

파일 업로드 창 소스. 현재는 숨겨져 있다.

우선 브라우저에서 받은 입력을 제이쿼리가 서버로 보낼 작업을 준비해야 한다. 업로드된 파일과 이메일을 폼 데이터에 담고, ajax를 통하여 post방식으로 폼데이터를 user/urls.py의 profile/upload라는 주소와 맵핑된 views.py에 보낸다.

profile.html - jQuery, ajax 작성

user/urls.py

views.py의 UploadProfile 로직은 파일과 이메일을 불러와서 파일은 랜덤으로 고유값을 만드는 소스를 이용해 랜덤 고유값을 만들고 media 폴더에 저장을 하고, 파일 이름을 profile_image라는 필드에 저장을 하고, User테이블의 이메일 주소를 가지고 사용자를 찾아서 그 사용자의 프로필 이미지에 만든 프로필 이미지를 저장해주고 세이브를 해주는 로직이다.

user/views.py

실제로 브라우저에서 프로필 이미지를 변경하게 되면 DB의 프로필 이미지 값이 바뀌게 된다.

db.sqlite3

이제 웹페이지에서 바뀐 프로필 이미지를 불러오게 하기 위해서는 이전에 피드 이미지를 불러올 때와 마찬가지로 {% get_media_prefix %}를 사용해주면 된다.

profile.html - 내비 바 프로필 이미지

profile.html - 바디 프로필 이미지

짜잔! 프로필 이미지가 바뀌었다!

프로필 이미지를 바꾸는 기능을 만들었다면, 이번엔 처음 회원가입을 했을 때 프로필 이미지가 default_profile로 설정이 되어있는데 이 default_profile의 파일을 실제로 넣어주기로 하자. 먼저, media 폴더에 default_profile로 쓸 이미지를 찾아서 넣어준다. 이름은 당연히 default_profile이 되어야 한다.

media - default_profile.jpg 넣기

그 다음, user/views.py의 회원가입에 해당하는 함수를 수정해준다. profile_image에 방금 넣은 파일명을 적으면 된다.

user/views.py

이제 회원가입을 해보고 프로필에 들어가보면 기본 프로필 이미지가 적용되어 있는 것을 확인할 수 있다.

회원가입을 해보자.

회원가입 시 기본 프로필 이미지가 설정된다.

앞으로 피드를 업로드할 시 바뀐 아이디와 프로필 이미지로 업로드되어야 한다. 현재는 main 페이지에서의 사용자 아이디와 프로필 이미지가 하드코딩 되어있다.

main.html

이것을 아래와 같이 바꿔주면 피드를 업로드할 때 아이디와 프로필 이미지가 현재의 아이디와 프로필 이미지로 업로드가 된다.

main.html

이렇게 아이디와 프로필 이미지가 변경이 되어 피드가 올라간다.

📌 05. 변경된 아이디/프로필 이미지 통일화 시키기

이제 새로운 피드를 업로드할 때, 현재 프로필 화면에서 설정되어 있는 아이디, 프로필 이미지로 업로드가 될 것이다. 그렇다면 이제는 과거의 모든 피드까지도 현재 로그인되어 있는 사용자의 아이디와 프로필 이미지로 표시하도록 만들어보도록 하자.

우리가 피드를 가져올 때, 모델에 필요했던 필드들은 총 5개였다. "content, image, profile_image, user_id, like_count" 였지만 이제는 현재 로그인 된 이메일로 아이디도 내려받고 프로필 이미지도 내려받을 것이므로, profile_image와 user_id는 필요없고 email만 필요하게 된다. 모델을 변경해주면 다시 마이그레이션을 해줘야하니 터미널에 마이그레이션 명령어를 해주는 것도 잊지말자.(email의 default 값을 설정해준 이유는 안해줄 시 마이그레이션 시 에러가 나기 때문이다.)

models.py

모델을 변경해주었다면, 이제 뷰에서도 profile_image와 user_id를 받을 필요가 없어진다. email만 받으면 되기 때문이다. 하지만 로그인 시에 세션 정보에 이메일이 저장되기 때문에 세션 정보에서 이메일을 받아서 처리하면 된다. UploadFeed 클래스를 아래와 같이 수정한다.

views.py - class UploadFeed

Main 클래스도 아래와 같이 수정한다. 기존에 Main 클래스를 render할 때 feed_list를 내려주는데 feed_list에는 현재 email 밖에 없다. 따라서 profile_image와 nickname을 위에서 받아서 넘겨줘야 한다.

views.py - class Main

뷰를 수정했다면, 템플릿에서도 수정 내용을 받아서 브라우저에 표시해줘야 하기 때문에 html도 수정되어야 한다. for문으로 feed_list를 받을 때, {% get_media_prefix %}{{ feed.profile_image }}를 통해 프로필 이미지를 받고, {{ feed.nickname }}을 통해 아이디를 받고,  {% get_media_prefix %}{{ feed.image }}를 통해 피드 이미지를 받는다.

main.html

이렇게 수정해주면 피드를 작성한 후 프로필 이미지를 변경하면 이전 작성한 피드의 프로필 이미지가 변경되게 된다.

 

 

📚 요약하자면,

 

 

https://cholol.tistory.com/548

 

이 게시물의 모든 저작권은 마이쮸(mychew__)님께 있으며, 저는 오직 학습과 기록을 목적으로 포스팅한 것임을 알려드립니다.

좋은 강의 컨텐츠를 제공해주신 마이쮸님께 감사의 말씀 드립니다. (_ _)