[Django App 3-6] 인스타그램 클론 코딩_메인 페이지&포스트 리스트 페이지&포스트 상세 페이지

<Complete List>

1. 데이터베이스 및 UI 설계하기

• 인스타그램 UI 구성
• 데이터베이스 테이블 설계 및 구현

2. 앱 만들기

• instagram, accounts 앱 만들기
• views.py 분리하기

3. 회원가입 페이지

• 비밀번호 암호화 함수 구현 - 해시 함수

4. 로그인 페이지

• 세션에 사용자 ID 저장하기

5. 로그아웃 뷰

 

<To Do List>

6. 메인 페이지

7. 포스트 리스트 페이지

8. 포스트 상세 페이지

 

---

6. 메인 페이지

• pystagram에서 작업

6.1 url

urlpatterns = [
    re_path(r'^$', MainView, name='pn_main'),
]

 

6.2 MainView

• splitviews 디렉토리에 MainView.py 생성

• splitviews 의 __init.py__에 MainView 를 import

 

• 로직(전체코드 - github)
  1. 현재 접속하고 있는 유저와 현재 유저가 팔로잉하고 있는 유저들의 포스트 리스트를 SELECT
  2. (200308 추가) 각 포스트별 세부사항 데이터 SELECT → 포스트 별 좋아요 개수, 좋아요 여부, 컬렉션 여부 등
  3. 가져온 포스트를 main.html에 rendering

 

6.3 main.html

• 전체코드 - github

 

7. 포스트 리스트 페이지

• pystagram에서 작업

7.1 url

urlpatterns = [
    re_path(r'^$', MainView, name='pn_main'),
    re_path(r'^(?P<user_id>[a-zA-Z0-9-_.]*)/$', PostListView, name='pn_post_list'),
]

 

7.2 PostListView

• splitviews 디렉토리에 PostListView.py 생성

• splitviews 의 __init.py__에 PostListView 를 import

 

• 로직(전체코드 - github)
  1. 아이디가 클릭된 유저의 포스트 리스트를 SELECT
  2. (200301 추가) 아이디가 클릭된 유저의 게시물 수, 팔로우 수, 팔로잉 수 SELECT
  3. (200309 추가) 팔로잉 리스트 모달에 띄울 팔로잉 유저 데이터 SELECT
  4. (200315 추가) 현재 유저가 컬렉션(북마크)한 포스트 리스트 데이터 SELECT
  5. 가져온 포스트를 post_list.html에 renderin

 

7.3 post_list.html

• 전체코드 - github

 

8. 포스트 상세 페이지

8.1 url

urlpatterns = [
    re_path(r'^$', MainView, name='pn_main'),
    re_path(r'^(?P<user_id>[a-zA-Z0-9-_.]*)/$', PostListView, name='pn_post_list'),
    re_path(r'^p/(?P<post_id>[0-9]+)/$', PostDetailView, name='pn_post_detail'),
]

• <post_id> 는 숫자로만 이루어진 인자이다. 예를 들어, 별도의 구분없이 /23/ 이런 식으로 url이 들어온다면 위에서부

  터 차례로 매칭하는 django 특성상 pn_post_list 로 인식이 되기 때문에 p를 추가하여 구분

 

8.2 PostDetailView

• splitviews 디렉토리에 PostDetailView.py 생성

• splitviews 의 __init.py__에 PostDetailView 를 import

 

• 로직(전체코드 - github)
  1. 클릭된 포스트를 SELECT
  2. (200308) 클릭된 포스트 세부사항 데이터 SELECT → 포스트 좋아요 개수, 좋아요 여부, 컬렉션 여부 등
  3. 가져온 포스트를 post_detail.html에 rendering

 

8.3 post_detail.html

• 전체코드 - github