Django - 비 SPA 방식 인스타그램 클론 과정 1/3 Memo.

기간

2020년 9월 18일 금요일 ~ 2020년 9월 21일

결과 이미지

• 인덱스 페이지
  

  

• 유저 페이지
  

  

설명

• 에듀케스트의 장고 강의를 첫번째로 주행하는 시간.
• 비SPA 방식으로 인스타그램을 클론함으로써, Django의 기초를 다지는 시간을 갖는다.

각 강의 영상의 중점

• Django의 초기 설정(setting.py, Media, Static)을 모듈와
  • settings와 requirements를 개발용, 배포용으로 모듈화하는 방법을 배웠다.
  • 효율적이며 생산적이고 아름다운 구조라고 느꼈다.
• 기본 레이아웃을 구성한다.
  • 부트스트랩을 활용, 인스타그램의 HTML 및 부트스트랩 예제의 HTML구조를 활용하여 기본 Layout 템플릿을 생성하였다.
  • 프론트엔드 개발에 어떤 기술을 써야할지 아직 더 고민해야겠다.
• 회원가입 구현
  • 커스텀 유저 모델을 생성하고, 유저 DB를 다루는 폼을 작성하고, 회원가입 페이지를 구현한다.
  • 템플릿간의 include를 통한 효율적인 템플릿 구조 설계 방식, 템플릿 태그 include에 사용되는 with 등을 배웠다.
• 회원가입 이메일 보내기
  • SendGrid의 회원가입 관련 문제가 있어(적절한 사용자가 아니면 회원으로 받지 않는 문제) 회원가입을 진행하지 못했다.
  • 추후 다른 방법으로 이메일 인증을 직접 구현해보는 방향으로 진행해야 한다.
  • 서버단에서 동기적으로 처리가 되면 그 동안 클라이언트에게 로딩시간이 전달되기 때문에, 비동기적으로 셀러리를 활용하는 것이 좋다고 한다.
• 로그인 구현
  • 로그인, 로그아웃, 회원가입과 동시에 로그인 기능을 구현하였다.
  • auth의 구조에 관해 자세히 공부하지 않는다면 그저 따라 치는 수준밖에 되지 않는 챕터.
  • 사용자 관련 django.contrib.auth에 대하여 더 공부해야겠다.
• 유저마다 default 프로필 이미지 생성
  • django-pydenticon을 활용하면 특정 주소에 해당하는 값을 통하여 각각의 이미지를 생성할 수 있다. 해당 이미지를 유저의 기본 프로필 이미지로 사용할 수 있다. (사용하지 않음)
  • 위의 방식이 적절하지 않다고 개인적으로 판단하여, user.avatar_url 프로퍼티를 등록, avatar 필드에 이미지가 있을 경우 해당 이미지의 url을 반환하고 없다면 django.templatetags.static의 static 함수를 사용하여 미리 static 경로에 넣어두었던 이미지 경로를 반환하도록 하였다.
• 유저 프로필 수정 form 생성 및 페이지 구현
  • 커스텀 유저 정보를 수정하고, 이미지 필드를 다루는 방법 등을 학습하였다.
• 유저 암호 변경 페이지 구현
  • auth에서 구현된 뷰와 폼들을 알아야 활용하는 방식을 알 수 있을 것 같다.
  • 위에서도 설명하였듯, 해당 챕터를 완전하게 이해하기 위해서는 auth를 우선적으로 공부해야 한다.
• 포스팅, 태그 모델 구현
  • django-taggit라는 장고 개발자가 설계한 태그 시스템이 있다고 한다. 추후 여유가 될 때, 해당 앱을 사용해보는 것도 좋을 듯 하다.
  • 폼을 뷰에서 활용하여, 폼의 특정 필드 데이터를 기반으로 타 필드의 값을 채우는 과정이 흥미로웠다.
  • 이미지 데이터를 효과적으로 다루려면 django-imagekit을 사용하면 좋다고 한다. 이미지의 용량, 규격, 등등.
• 포스팅 디테일 템플릿 구현
• 유저 페이지 구현
• 유저 페이지의 이미지 썸네일 처리
• 타임라인 사이드 바 구현
• 유저 팔로우 관계 모델 정의 및 활용
• 타임라인에 팔로우중인 유저들의 포스팅만을 노출
  • Q 객체를 활용한 쿼리문, 적절한 html 템플릿의 분리 및 활용에 대해서 배웠다.
• Unfollow 구현
• 포스팅 좋아요-취소 구현
  • 커스텀 템플릿 태그를 구현하고 사용해보았다. 과정은, 익숙해진다면 간단하다.
  • django.template의 Library()로 register를 생성하여 그 녀석에게 함수를 할당해주면 되는 방식. 그런데...
  • "register = Library()" 한 줄에서 register의 변수 이름을 regiser로 해버렸더니 동작하지 않는다.
  • 위 과정은, 아마도 모듈 내에 'register'라는 어트리뷰트가 존재하는지 확인하는 방식으로 동작하는 듯 하다.
  • 변수를 잘못 지정해서 동작되지 않는 구조... 설계적으로 패턴이 아름다울 수 있지만, 어딘가 이상하다고 느꼈다.
• 댓글 구현
  • Comment 모델을 구현하고 포스팅과 연결되도록 작성되었다.
  • humanize 템플릿 태그를 활용하여 datetime 문자열을 사람에게 친숙한 방식의 문자열로 변경하는 방법을 배웠다.
• 자바스크립트 없이 포스팅 화면에 댓글 쓰기
  • 새로운 url에 댓글을 작성하는 과정을 삽입하였다.
  • 검색을 통하여 찾아낸 정보. 블로그같은 곳의 포스팅은 https://django-ckeditor.readthedocs.io/en/latest/#changelog를 이용하면 될 것 같다.
• jQuery를 사용하여 Ajax 댓글 쓰기 구현
  • 포스트 템플릿 내에서 화면전환 없이 화면이 변경되도록 하기 위해서는, 다른 기술들을 더 알아야 하는구나...
  • jQuery, Ajax. 둘 다 배운 적이 없으므로 이해도가 낮다.
• 기타 개인 수정사항
  • 프로필 페이지에서 로그아웃, 암호 변경 버튼을 추가하였다.
  • 모든 댓글이 출력되므로, 해당 길이를 제한하였다.(하지만 제한되어 숨겨진 댓글들을 어떻게 추가적으로 load해야 하는지 아직 모른다.)
  • 유저 페이지의 이미지에 각 Post 링크를 삽입하였다.

여담

• 이제 다시 Documentation을 처음부터 살펴볼 때가 되지 않았을까. (강좌를 구매하기까지의 과정은 다음과 같다.)
  • 굳이 돈 주고 공부할 필요 없지 않아? Django Documentation!
  • 책을 보더라도 기초적인 내용이고, Document의 Tutorial로도 부족해. 전체적인 작업 흐름을 파악할 수가 없어.
• 한번 쭉 훑어보고 나니, 서버, MVC의 흐름, 프론트 라이브러리 등등의 전체적인 흐름은 이해한 듯 하다.
• 처음부터 비SPA 방식으로 Model, View, Template를 설계하는 과정을 세 번 정도 반복할 생각이었다.
• 처음부터 프로젝트를 쌓아나가기에는 손이 버벅거린다. 전체적인 흐름을 잡았지만, 각 세부 항목에 대한 암기가 부족하다.
• 실제로 서비스를 제공하기 위해서는 서버를 공부해야 한다. 이 과정을 다음번 학습 과제로 삼아야겠다. (포트폴리오에 추가하기 위해서)
• 로드맵을 설계한다.
  1. 비 SPA 방식으로 인스타그램을 총 3번 클론한다.
  2. 커스텀 앱을 작성하여 커뮤니티 게시판, 이미지 월드컵 등의 프로젝트를 진행한다.
  3. 진행한 모든 프로젝트를 실제 서버에 등록하여 서비스를 진행할 수준까지 도달한다.