2019.05.07 인스타그램 클론 코딩하기(회원가입 기능 구현하기1)

인스타그램 만들기(17)

• dstagram 소스코드

회원가입 기능 구현하기(5~6)

모델 폼을 통해 회원가입 기능 구현하기

1. views를 통해 로직 구현하기
   1. POST형태로 받을 때와 처음 실행할 때 화면 구현
   2. render의 특징
   3. POST형태의 데이터 저장하기
2. 템플릿 만들기
3. url 연결하기
4. 비밀번호 암호화하기
5. forms.py를 구현하여 views.py를 간락햐게 만들기
   1. forms.py 오버라이딩하기
   2. views.py 간략히 수정하기
   3. 중복 입력 받기(commit=False)
   4. signup_complete에 회원가입한 사람 이름 띄어주기
   5. form을 통해 받은 자료 암호화하기
      1. set_password
6. 비밀번호 재입력창 만들기
   1. 비밀번호 중복 확인하기
7. 해로쿠를 통해 서버 배포하기

5. forms.py를 구현하여 views.py 간략하게 만들기

1. forms.py 구현하기

• forms.py 생성
• class Meta를 활용해 입력 받을 필드들을 나열한다.
• password에 대해서는 입력시 ****가 나오도록 하기 위해 커스터마이징 한다.

모델폼 일반 보기

• class Meta 활용
• 다 가지고 오려면 "_all_"
• 우리가 views.py에 만든 것은 signup.html에 추가되는 것이다.
• 따라서 우리가 만들어 준 것은 지워주면 된다.
• fields에는 해당 모델에 대해 입력 받을 필드들을 나열한다.
• • 추가필드도 포함될 수 있다.
    • 필드 목록과 추가 필드가 겹치면 오버라이드 한다.(password)
• fields에 써진 순서대로 출력된다.
• 이후에 해야 하는 것들
  • 필드의 기본값 설정하기(상품 장바구니 기본값 1로 셋팅)
  • placeholder 설정법
  • css class 설정법
  • Validator 설정법
  • 커스텀 필드 만드는 법
  • 헬프 텍스트 설정법 ( 이거는 나도 꼭 필요하다!! )

1. views.py 간략하게 만들기(중복 저장 피하기)

• from .forms import SignUpForm을 가지고 온다.
• POST일 때 SignUpForm(request.POST)인 객체를 생성하고
• 그것이 유효하다면 user_instance에 signup_form을 저장한다.
• 하지만 아래에서 또 한번 저장이 있으므로 중복 저장을 피하기 위해 commit=False를 입력한다.
• set_password 및 cleaned_data를 통해 유효한 문자만 남긴 상태를 저장한다. 또한 암호화한다.
• render 뒤쪽에 {'username':user_instance.username'}을 넣어서 username이 나오도록 구현해준다.

6. 비밀번호 재입력창 만들기

1. form 커스터마이징

• Repeat_password를 fields에 추가해 준뒤에 폼에 없는 field 이므로 커스터마이징해준다.
• clean_[필드명]을 통해 cleaned_data를 받아오고 이 받아온 데이터들 중 'password'와 'Repeat_password'를 확인하여서 일치 하지 않으면 에러 메시지를 전송한다.
• 일치하면 일반적으로 'Repeat_password'를 반환한다.

2019.05.07 인스타그램 클론 코딩하기(회원가입 기능 구현하기1)

인스타그램 만들기(16)

• dstagram 소스코드

회원가입 기능 구현하기(1~4)

모델 폼을 통해 회원가입 기능 구현하기

1. views를 통해 로직 구현하기
   1. POST형태로 받을 때와 처음 실행할 때 화면 구현
   2. render의 특징
   3. POST형태의 데이터 저장하기
2. 템플릿 만들기
3. url 연결하기
4. 비밀번호 암호화하기
5. forms.py를 구현하여 views.py를 간락햐게 만들기
   1. forms.py 오버라이딩하기
   2. views.py 간략히 수정하기
   3. 중복 입력 받기(commit=False)
   4. signup_complete에 회원가입한 사람 이름 띄어주기
   5. form을 통해 받은 자료 암호화하기
      1. set_password
6. 비밀번호 재입력창 만들기
   1. 비밀번호 중복 확인하기
7. 해로쿠를 통해 서버 배포하기

1. views.py를 통해 로직 구현하기

1. 입력 방식이 POST로 오면 해당 정보들을 get을 통해 받고
2. User() 객체를 만들어서 해당 정보들을 user에 넣고 저장해준다.
3. 그리고 render를 통해 signup_complete.html을 불러온다.
4. else: 그렇지 않으면 (기본적으로 보여지는 형태)
5. context_values를 dictionary 형태로 만들고
6. render를 통해 signup.html로 옴기고, context_values를 signup.html에 포함시킨다.
7. signup.html에 {{ form }} 의 형태가 있으면 'this is form'을 불러온다.

render의 특징

1. render란 무엇인가? (3가지를 한번에 해결해준다)
   1. 템플릿 불러오기
   2. 템플릿 랜더링 하기
      1. context_value를 해당 템플릿에 끼워넣어준다.
   3. HTTP Response하기
      1. 완료된 내용을 화면에 띄어준다.

2. 템플릿 만들기

1. signup.html 구현하기

• input태그를 활용하여 정보를 넣을 수 있게 하고 name을 넣어서 view와 일치되도록 한다.
• method는 post 형식으로 하여서 views에서 requests==post 라는 것에 성립되도록 구현한다.

2. signup_complete.html 구현하기

• 로그인이 잘 되었다는 문구를 띄어주고
• login url을 연결해줘서 login 하는 창으로 이동하도록 해준다.

3. url 연결하기

• path('signup/', signup, name ='signup') 연결해주기

4. 비밀번호 암호화히기(views.py 수정)

• user.password = password 수정
• user.set_password(password) 로 수정해줌으로서 admin에 들어가서 비밀번호가 잘 설정된 것을 확인할 수 있다.

2019.05.05 인스타그램 클론 코딩하기(좋아요 버튼 구현하기)

인스타그램 만들기(15)

• dstagram 소스코드

구현 로직

1. photo 앱 만들기
2. 모델 설계하기
3. views 설계하기
   1. list페이지
   2. 상세페이지
   3. 삭제하기
   4. 수정하기
   5. 생성페이지
4. url 연결시켜주기
5. template 만들기
   1. create/list/update/delete/detail
6. 사진 화면에 업로드 할 수 있도록 만들기
7. success url을 get_absolute_url로 연동시켜보기
8. account 앱 만들기
   1. 로그인/로그아웃 기능 구현하기
   2. 템플릿에 로그인/로그아웃 보이도록 하기
   3. 로그아웃 되었을 때는 create 및 sign out가 안 보이도록 구현하기(분기)
9. 권한 문제 해결하기
   1. html 기준에서 해결하기
   2. 링크로 들어와도 안 되도록 해결해보기
      1. view를 조정하기
10. 댓글 기능 구현하기
    1. 댓글은 상세페이지에서 가능하도록 하기
    2. 소셜 댓글기능으로 구현하기
11. 좋아요/저장하기 버튼 만들기
    1. 스프라이트 이미지 기법 활용하기
    2. 클릭하면 색깔 바뀌도록 구현하기
    3. 로그인을 해야지 버튼 클릭이 되도록 하고 클릭을 하면 like count 올라가기
    4. like에 대한 정보를 저장하기
    5. 좋아요 counting 표시해주기
    6. 디테일 페이지에서 좋아요를 누르면 디테일 페이지에서 그대로 유지하도록 하기
       1. view와 like에서의 분기
       2. 레퍼러를 활용하여 해당 주소가 어디서부터 시작됬는지 확인한다.
    7. 저장하기 기능 추가하기
12. 좋아요한 포스팅만 보기 기능 구현하기
13. 저장한 포스팅 리스트 페이지 구현하기
14. 좋아요한 포스팅 및 저장한 포스팅 리스트 보기는 로그인한 사람만 보여주기
    1. view단에서 시행
       1. dispatch 활용
       2. LoginRequiredmixin
    2. html 활용
15. my page에 내가 올린 사진들만 나오도록 구현한다.
16. my page에 팔로우 기능 추가하기

이번 시간에 할 것(15)

• user_list를 만들어서 사용자가 올린 사진들만 모아보기 기능 추가
  • user_list라는 views.py에 추가해준다.
  • url을 연결하여 준다.
• user_list를 볼 수 있는 템플릿을 만든다.
• base.html을 통해 새로운 카드를 만든다.
  • 해당 링크를 user_list로 연결해준다.

유저 리스트 만들기

1. views.py를 통해 PhotoMyList를 만든다.
2. url을 연동시켜준다.
3. templates를 만든다.
   1. mylist 템플릿을 구현한다.
   2. photo_list 템플릿을 수정하여 mylist 템플릿으로 갈 수 있도록 url을 연결해준다.

views.py 만들기

• templates을 mylist로 연결시켜준다.
• dispatch를 통해 로그인을 했는지 확인해준다.

url 연동시켜주기

• url로 이동하여 mylist의 path를 추가해준다.

templates 만들기

photo_mylist 템플릿 만들기

1. Bootstrap Gallery - examples & tutorial. Basic & advanced usage - Material Design for Bootstrap
2. 위의 자료를 참고하여 mylist를 구현

• object의 list를 돌면서 작성자와 요청자가 같은 것만 보여준다.
• figure class를 통해서
  , figure class="col-md-4"> 두개를 나눈 값 만큼 1줄에 card를 넣는다. 12/4 = 3개씩
• 이미지 url을 넣어준다.

photo_list.html 수정하기

• 그냥 있었던 마지막 div class col에 새로운 내용을 추가해준다.
• bootstrap 카드를 참조해서 가지고 온다.
• url을 연결하여 mylist로 이동하도록 해준다.'
• title은 접속한 로그인 유저가 나오도록 해줘야 하는데 어떻게 구현해야할지 잘 모르겠다. ㅠㅠ

확인

• 회원님의 스토리 이동 클릭

• 아래와 같이 잘 구현된 것을 볼 수 있다.

2019.05.05 인스타그램 클론 코딩하기(좋아요 버튼 구현하기)

인스타그램 만들기(12~14)

• dstagram 소스코드

구현 로직

1. photo 앱 만들기
2. 모델 설계하기
3. views 설계하기
   1. list페이지
   2. 상세페이지
   3. 삭제하기
   4. 수정하기
   5. 생성페이지
4. url 연결시켜주기
5. template 만들기
   1. create/list/update/delete/detail
6. 사진 화면에 업로드 할 수 있도록 만들기
7. success url을 get_absolute_url로 연동시켜보기
8. account 앱 만들기
   1. 로그인/로그아웃 기능 구현하기
   2. 템플릿에 로그인/로그아웃 보이도록 하기
   3. 로그아웃 되었을 때는 create 및 sign out가 안 보이도록 구현하기(분기)
9. 권한 문제 해결하기
   1. html 기준에서 해결하기
   2. 링크로 들어와도 안 되도록 해결해보기
      1. view를 조정하기
10. 댓글 기능 구현하기
    1. 댓글은 상세페이지에서 가능하도록 하기
    2. 소셜 댓글기능으로 구현하기
11. 좋아요/저장하기 버튼 만들기
    1. 스프라이트 이미지 기법 활용하기
    2. 클릭하면 색깔 바뀌도록 구현하기
    3. 로그인을 해야지 버튼 클릭이 되도록 하고 클릭을 하면 like count 올라가기
    4. like에 대한 정보를 저장하기
    5. 좋아요 counting 표시해주기
    6. 디테일 페이지에서 좋아요를 누르면 디테일 페이지에서 그대로 유지하도록 하기
       1. view와 like에서의 분기
       2. 레퍼러를 활용하여 해당 주소가 어디서부터 시작됬는지 확인한다.
    7. 저장하기 기능 추가하기
12. 좋아요한 포스팅만 보기 기능 구현하기
13. 저장한 포스팅 리스트 페이지 구현하기
14. 좋아요한 포스팅 및 저장한 포스팅 리스트 보기는 로그인한 사람만 보여주기
    1. view단에서 시행
       1. dispatch 활용
       2. LoginRequiredmixin
    2. html 활용
15. my page에 내가 올린 사진들만 나오도록 구현한다.
16. my page에 팔로우 기능 추가하기

이번 시간에 할 것(12 ~ 14)

• 좋아요 및 저장한 포스팅만 보기 기능 구현하기
  • 좋아요 클릭한 포스팅만 볼 수 있도록 구현한다.
  • 저장한 포스팅만 볼 수 있도록 구현한다.
  • 새로운 템플릿을 만들지 않고 쿼리셋을 통해 구현

좋아요 및 저장한 포스팅만 보기 구현하기

1. views.py 구현하기
   1. 클래스형 뷰를 상속받아 만들기
   2. 쿼리셋을 통해 구현하기
   3. 로그인을 했을 때만 가능하도록 하기
2. url 연결해주기
3. 템플릿 수정해주기
   1. base.html에 항목 추가해주기

views.py 구현해주기

• photo_list.html을 가지고 온다.
• dispatch를 통해 get 방식 및 post 방식 2가지를 처리하고
• 로그인이 안 되어 있으면 warning message를 부여
  • 실제로는 base.html에서 html 분기를 통해 해결할 예정
• 이후 잘 실행되면 super을 통해 원래 PhotoLikeList를 실행
• 쿼리셋을 정의하고 요청한 유저의 좋아요한 포스터를 전부 리턴하도록 설계
• Favorite 역시 like_list와 동일하게 설계

url 연결해주기

• 해당 views.py에 대한 url 2개 연결해주기

base.html 카테고리 추가해주기

• 유저가 로그인이 되어 있다면
• 좋아요한 사진보기 및 저장한 사진 보기 추가 및 url 연결해주기

확인

• 위의 카테고리에 좋아요한 사진보기 및 저장한 사진보기가 추가된 것을 확인할 수 있다.
• 또한 각각 추가한 카테고리만 다시 리스트 형태로 보여지는 것을 알 수 있다.
• 추가적으로 따로 템플릿을 만들어서 url을 연결해주어도 된다.

2019.05.05 인스타그램 클론 코딩하기(좋아요 버튼 구현하기)

인스타그램 만들기(11)

• dstagram 소스코드

구현 로직

1. photo 앱 만들기
2. 모델 설계하기
3. views 설계하기
   1. list페이지
   2. 상세페이지
   3. 삭제하기
   4. 수정하기
   5. 생성페이지
4. url 연결시켜주기
5. template 만들기
   1. create/list/update/delete/detail
6. 사진 화면에 업로드 할 수 있도록 만들기
7. success url을 get_absolute_url로 연동시켜보기
8. account 앱 만들기
   1. 로그인/로그아웃 기능 구현하기
   2. 템플릿에 로그인/로그아웃 보이도록 하기
   3. 로그아웃 되었을 때는 create 및 sign out가 안 보이도록 구현하기(분기)
9. 권한 문제 해결하기
   1. html 기준에서 해결하기
   2. 링크로 들어와도 안 되도록 해결해보기
      1. view를 조정하기
10. 댓글 기능 구현하기
    1. 댓글은 상세페이지에서 가능하도록 하기
    2. 소셜 댓글기능으로 구현하기
11. 좋아요/저장하기 버튼 만들기
    1. 스프라이트 이미지 기법 활용하기
    2. 클릭하면 색깔 바뀌도록 구현하기
    3. 로그인을 해야지 버튼 클릭이 되도록 하고 클릭을 하면 like count 올라가기
    4. like에 대한 정보를 저장하기
    5. 좋아요 counting 표시해주기
    6. 디테일 페이지에서 좋아요를 누르면 디테일 페이지에서 그대로 유지하도록 하기
       1. view와 like에서의 분기
       2. 레퍼러를 활용하여 해당 주소가 어디서부터 시작됬는지 확인한다.
    7. 저장하기 기능 추가하기
12. 좋아요한 포스팅만 보기 기능 구현하기
13. 저장한 포스팅 리스트 페이지 구현하기
14. 좋아요한 포스팅 및 저장한 포스팅 리스트 보기는 로그인한 사람만 보여주기
    1. view단에서 시행
       1. dispatch 활용
       2. LoginRequiredmixin
    2. html 활용
15. my page에 내가 올린 사진들만 나오도록 구현한다.
16. my page에 팔로우 기능 추가하기

이번 시간에 할 것(11)

• 좋아요 버튼 만들기
  • 스프라이트 이미지 기법 활용하기
  • 클릭하면 색깔 바뀌도록 구현하기
  • 로그인을 해야지 버튼 클릭이 되도록 하고 클릭을 하면 like count 올라가기
  • like에 대한 정보를 저장하기
  • 좋아요 counting 표시해주기
  • 디테일 페이지에서 좋아요를 누르면 디테일 페이지에서 그대로 유지하도록 하기
    1. view와 like에서의 분기
    2. 레퍼러를 활용하여 해당 주소가 어디서부터 시작됬는지 확인한다.

좋아요 및 저장하기 버튼 만들기

1. like와 favorite 모델 구현하기
2. manytomanyField 사용하기
3. migration해주기 migrate해주기
4. views 연결해주기
5. url 연결해주기
6. template에 나오도록 구현해주기

스프라이트 이미지 기법

• 이미지는 한장인데 위치를 조절한다.
• photo - static - images - instagram.png
• 스태틱 리소스를 띄우기 위해서
  • { load static }

1. 인스타그램 접속 및 좋아요 버튼 옆에서 검사 보기
2. 해당이미지의 url을 확인하고 해당 url로 이동
3. 이미지 확인 및 다른 이름으로 저장하여 로컬로 이동하기
   1. photo아래에 static 디렉토리 생성
   2. static 디렉토리 아래에 images 디렉토리 생성
   3. 그 아래에 원하는 이름으로 저장

models에 like / save(favorite)추가해주기

• 결국 버튼을 클릭하면 어떤 업로드가 일어나야 하는데 그것을 구현하기 위해서는 클릭시 url을 연결해야 하고 그러기 위해서는 views가 필요하고 또 views가 움직이기 위해서는 models이 필요하다.

1. like와 favorite 모델 구현하기
2. manytomanyField 사용하기
3. migration해주기 migrate해주기
4. views 연결해주기
5. url 연결해주기
6. template에 나오도록 구현해주기

views 연결해주기

1. like view 구현하기

• get 방식으로 온다고 설정
• 로그인이 확인되지 않으면 자료를 숨겨라
• photo_id를 확인
• photo는 pk를 가지게 한다.
• user가 이미 좋아요 한 사람 중에 있으면 클릭했을 때 지워지도록 하고
• 그렇지 않으면 더하게 해라
• referer_url을 통해서 url을 parser 하여
  • 만약에 메인 페이지에서 좋아요를 누르면 그 메인페이지에 있도록 하고
  • 상세페이지에서 좋아요를 누르면 그 상세페에지로 redirect한다.

2. 저장하기(favorite)구현하기

• like와 마찬가지로 get 형식으로 온다고 설정
• 로그인 되어 있지 않으면 숨겨서 보이지 않도록 한다.
• 위와 동일

url 연결해주기

• url 연결

template 구성해주기

• base.html을 통해 위의 저장된 static 불러오기 및 사진 위치 설정해주기
• photo_list를 통해 해당 위치 구현해주기
• photo_detail에 해당 위치를 구현해주기

base.html

• 각 아이콘들의 위치를 정확히 찾는다.
  • 좋아요 눌렀을 때 사용될 채워진 사랑표
  • 좋아요 된 상태에서 한번 더 눌렀을 때 사용될 빈 사랑표(평소 때 사용)
  • 저장하기 눌렀을 때 사용될 색깔 있는 저장표
  • 저장하기 된 상태에서 한번 더 눌렀을 때 사용될 색깔 없는 저장표(평소에도 사용)
• 각각의 active에는 채워진 사랑표 및 색깔 있는 저장표를 사용한다.
• text-indent는 list.html의 a태그 뒤에 적혀질 글자가 안 보이도록 설정해준다.
• overflow hiddend을 통해 옆으로 밀어진 글자를 아예 숨기도록 한다.
• 위치는 네이버의 검사를 통해 style에서 backgroud-position을 옴겨가며 찾는다.

photo_list.html 구현하기

• url 링크를 연결시켜주고 만약에 좋아요한 유저가 있으면 아이콘 active를 시켜준다.
• 그리고 좋아요는 all.count를 활용하여 몇명이 좋아요 했는지 표시하도록 한다.
• favorite 역시 favorite한 유저가 있으면 아이콘 active시켜준다.

photo_detail.html

• photo_detail에도 적절한 위치에 추가해준다.
• views.py에서 주소 parse를 통해 분기시켜줬기 때문에 detail에서 좋아요나 저장하기를 눌러도 detail 페이지에서 머문다.
• 만약 저장하기가 눌리지 않는다면 화면 분할이 잘못 되었을 수 있다.
• class sytle='width: 30rem;' 에서 정해놓은 width를 삭제함으로 문제를 해결할 수 있다.

구현 확인하기

• 클릭을 이것저것 해보며 구현이 잘 된 것을 확인한다.

2019.05.05 인스타그램 클론 코딩하기(권한 문제 및 댓글 구현하기)

인스타그램 만들기(9~10)

• dstagram 소스코드

구현 로직

1. photo 앱 만들기
2. 모델 설계하기
3. views 설계하기
   1. list페이지
   2. 상세페이지
   3. 삭제하기
   4. 수정하기
   5. 생성페이지
4. url 연결시켜주기
5. template 만들기
   1. create/list/update/delete/detail
6. 사진 화면에 업로드 할 수 있도록 만들기
7. success url을 get_absolute_url로 연동시켜보기
8. account 앱 만들기
   1. 로그인/로그아웃 기능 구현하기
   2. 템플릿에 로그인/로그아웃 보이도록 하기
   3. 로그아웃 되었을 때는 create 및 sign out가 안 보이도록 구현하기(분기)
9. 권한 문제 해결하기
   1. html 기준에서 해결하기
   2. 링크로 들어와도 안 되도록 해결해보기
      1. view를 조정하기
10. 댓글 기능 구현하기
    1. 댓글은 상세페이지에서 가능하도록 하기
    2. 소셜 댓글기능으로 구현하기
11. 좋아요 버튼 만들기
    1. 스프라이트 이미지 기법 활용하기
    2. 클릭하면 색깔 바뀌도록 구현하기
    3. 로그인을 해야지 버튼 클릭이 되도록 하고 클릭을 하면 like count 올라가기
    4. like에 대한 정보를 저장하기
    5. 좋아요 counting 표시해주기
    6. 디테일 페이지에서 좋아요를 누르면 디테일 페이지에서 그대로 유지하도록 하기
       1. view와 like에서의 분기
       2. 레퍼러를 활용하여 해당 주소가 어디서부터 시작됬는지 확인한다.
12. 좋아요한 포스팅만 보기 기능 구현하기
13. 포스팅 저장하기 기능 구현하기
14. 저장한 포스팅 리스트 페이지 구현하기
15. 좋아요한 포스팅 및 저장한 포스팅 리스트 보기는 로그인한 사람만 보여주기
    1. view단에서 시행
       1. dispatch 활용
       2. LoginRequiredmixin
    2. html 활용
16. my page에 내가 올린 사진들만 나오도록 구현한다.
17. my page에 팔로우 기능 추가하기

이번 시간에 할 것(9 ~ 10)

• 권한 문제 해결하기 (다른 사람으로 로그인 했을 때 삭제 및 수정 못하도록 하기)
  • html기준
  • views 조정으로 해결하기
• 댓글 기능 구현하기
  • disqus를 활용한 댓글 구현

1. 권한문제 해결하기

list.html에서 간단하게 분기로 해결하기

• 분기를 통해 간단하게 화면에서 나오지 않도록 만들기
• 단 사용자가 주소를 입력하여 접속하게 되면 문제 발생(views.py로 해결)

• user와 작성자가 같으면 수정하기와 삭제하기를 보여주도록 설정
• 새로운 유저 생성 이후에 다시 로그인을 해보면
• 메인 페이지에 수정하기와 삭제하기가 없어진 것을 확인할 수 있음

views.py로 주소로 접속해도 안되도록 해결하기

• 새로운 유저 생성이후 /delete/2 로 접속을 해보면 삭제가 가능하다.
• 실제적으로 권한을 부여해서 못하도록 막음

views.py 의 class update 수정

• def dispatch를 활용하여 get형태 및 post형태 2가지 모두 커버하기

• 사용자가 접속하였을 때 get이냐, post이냐를 결정하고 분기를 자동으로 해줌
• 만약에 작성자와 요청자가 다르면 수정할 권한이 없다는 메시지를 주고 메인페이지로 이동
• 그렇지 않으면 super을 써줘서 원래 Updateview가 실행되도록 해주며 super을 쓰게 되면 실행시 absolute_url로 자동적으로 이동한다. (단 success url이 설정되어 있으면 우선시 된다.)

views.py의 class delete 수정

• 전반적으로 Update와 유사하다.
• HttpResponseRedirect를 써주기 위해서는 import 해줘야 한다.
• messages 역시 쓰기 위해 import 해줘야 한다.

메시지 실행을 위한 구문 넣기

• base.html로 이동

• {if message}를 통해 만약에 message가 있으면 message를 띄우도록 구현
• 위치 : {block content}위에 위치하여 화면의 가장 위에 뜨도록 구현

확인하기

• 새로운 유저 생성 이후 다시 delete/2로 접속
• 메인페이지에서 삭제할 권한이 없습니다 .확인

댓글 구현하기(소셜 로그인 으로 구현하기)

1. disqus 접속
2. 회원가입 이후 생성 페이지 접속

1. Create site를 진행
2. Basic 단계 선택

1. 해당하는 플랫폼이 없으므로 Universal Code 선택
2. 아무것도 하지 않고 제일 마지막에 configure 선택
3. configure disqus에서도 complete setup선택
4. 이후 본인이 설치한 네임 확인 (주소창 확인)
   1. buinstagram.disqus.com ---> buinstagram 사용
5. terminal에서 pip install django.disqus
6. setting의 installed app에서
   1. disqus
   2. django.contrib.sites 추가
   3. 이후 python manage.py migrate를 통해 적용 필수!
7. setting의 제일 아래 줄에 DISQUS_WEBSITE_SHORTNAME 추가

화면에 보이는 위치 설정해주기

1. photo_detail.html로 이동
2. 수정일 대신 { load disqus_tags }
3. 보여질 위치에 { disqus_show_comments } 삽입

확인하기

1. 댓글 달기를 클릭하면 detail페이지로 이동하고 아래에 댓글 기능 생긴 것 확인

2019.05.04 인스타그램 클론 코딩하기(success_url 및 account 앱 구현하기)

인스타그램 만들기(7~8)

• dstagram 소스코드

구현 로직

1. photo 앱 만들기
2. 모델 설계하기
3. views 설계하기
   1. list페이지
   2. 상세페이지
   3. 삭제하기
   4. 수정하기
   5. 생성페이지
4. url 연결시켜주기
5. template 만들기
   1. create/list/update/delete/detail
6. 사진 화면에 업로드 할 수 있도록 만들기
7. success url을 get_absolute_url로 연동시켜보기
8. account 앱 만들기
   1. 로그인/로그아웃 기능 구현하기
   2. 템플릿에 로그인/로그아웃 보이도록 하기
   3. 로그아웃 되었을 때는 create 및 sign out가 안 보이도록 구현하기(분기)
9. 권한 문제 해결하기
   1. html 기준에서 해결하기
   2. 링크로 들어와도 안 되도록 해결해보기
      1. view를 조정하기
10. 댓글 기능 구현하기
    1. 댓글은 상세페이지에서 가능하도록 하기
    2. 소셜 댓글기능으로 구현하기
11. 좋아요 버튼 만들기
    1. 스프라이트 이미지 기법 활용하기
    2. 클릭하면 색깔 바뀌도록 구현하기
    3. 로그인을 해야지 버튼 클릭이 되도록 하고 클릭을 하면 like count 올라가기
    4. like에 대한 정보를 저장하기
    5. 좋아요 counting 표시해주기
    6. 디테일 페이지에서 좋아요를 누르면 디테일 페이지에서 그대로 유지하도록 하기
       1. view와 like에서의 분기
       2. 레퍼러를 활용하여 해당 주소가 어디서부터 시작됬는지 확인한다.
12. 좋아요한 포스팅만 보기 기능 구현하기
13. 포스팅 저장하기 기능 구현하기
14. 저장한 포스팅 리스트 페이지 구현하기
15. 좋아요한 포스팅 및 저장한 포스팅 리스트 보기는 로그인한 사람만 보여주기
    1. view단에서 시행
       1. dispatch 활용
       2. LoginRequiredmixin
    2. html 활용
16. my page에 내가 올린 사진들만 나오도록 구현한다.
17. my page에 팔로우 기능 추가하기

이번 시간에 할 것(7 ~ 8)

• success url을 get_absolute_url 로 연동시켜보기
• account 앱 만들기
  • 로그인/ 로그아웃 기능 구현하기
  • 템플릿에 로그인/ 로그아웃 보이도록 하기
  • 로그아웃 되었을 때는 create 및 로그아웃이 안 보이도록 구현하기 (분기)

1. success url을 get_absolute_url로 연동시켜보기

1. models.py에 absolute url 입력해주기
2. 상세페이지로 이동하도록 absolute_url 설정 (나중에 사용)

• 이후에 views에서 return super가 나오게 되면 자동적으로 absolute_url 이 실행

2. account 앱 만들기

1. python manage.py startapp accounts
2. setting.py에 install_app에 accounts 추가
   1. 추가해주지 않으면 템플릿 및 models을 찾을 수가 없다.

로그인, 로그아웃 기능 만들기

1. 장고에서는 기본적으로 로그인, 로그아웃 기능을 지원
2. 전체적인 그림
   1. urls.py를 만들어서 loginview와 logoutview를 바로 login.html과 logout.html로 전달
      1. templates에 login.html과 logout.html 구현
   2. models.py와 views.py를 거치지 않고 바로 구현 가능
   3. 로그인 성공했을시 접속할 링크 구현
3. urls.py로 바로 url 연결시켜주기

2차 urls.py 구현하기

• 장고에서 지원하는 loginview와 logoutview를 활용하여 바로 login.html과 logout.html로 연결시켜줌
• 1차 url 연결
  • 메인 urls.py에 path('accounts/', include('accounts.urls')) 추가

템플릿 구현하기

1. login.html

2. logout.html

• 로그인 성공 이후에 아래에 로그인 다시 할 수 있도록 링크 설정

로그인 성공했을 시 접속할 링크 구현해주기

1. setting.py에 추가

LOGIN_REDIRECT_URL ='/' 

확인하기

1. runserver하여 /accounts/login 및 /accounts/logout 들어가보기

템플릿에 로그인 / 로그아웃 보이도록 하기

1. base.html의 navbar를 추가하여 로그인 / 로그아웃 구현
2. url 링크 연동

로그인 했을 때만 사진 업로드 및 logout 보이게 하기 (분기)

• { if user.is_authenticated }
• { else }
• { endif }
• 활용 하여 구현

• 로그인이 되어 있다면 사진 올리기와 logout 을 보여주고
• 그렇지 않다면 login을 보여줘라

2019.05.04 인스타그램 클론 코딩하기(Template 및 url 연결하기)

인스타그램 만들기(5~6)

• dstagram 소스코드

구현 로직

1. photo 앱 만들기
2. 모델 설계하기
3. views 설계하기
   1. list페이지
   2. 상세페이지
   3. 삭제하기
   4. 수정하기
   5. 생성페이지
4. url 연결시켜주기
5. template 만들기
   1. create/list/update/delete/detail
6. 사진 화면에 업로드 할 수 있도록 만들기
7. success url을 get_absolute_url로 연동시켜보기
8. account 앱 만들기
   1. 로그인/로그아웃 기능 구현하기
   2. 로그아웃 되었을 때는 create 및 sign out가 안 보이도록 구현하기(분기)
9. 권한 문제 해결하기
   1. html 기준에서 해결하기
   2. 링크로 들어와도 안 되도록 해결해보기
      1. view를 조정하기
10. 댓글 기능 구현하기
    1. 댓글은 상세페이지에서 가능하도록 하기
    2. 소셜 댓글기능으로 구현하기
11. 좋아요 버튼 만들기
    1. 스프라이트 이미지 기법 활용하기
    2. 클릭하면 색깔 바뀌도록 구현하기
    3. 로그인을 해야지 버튼 클릭이 되도록 하고 클릭을 하면 like count 올라가기
    4. like에 대한 정보를 저장하기
    5. 좋아요 counting 표시해주기
    6. 디테일 페이지에서 좋아요를 누르면 디테일 페이지에서 그대로 유지하도록 하기
       1. view와 like에서의 분기
       2. 레퍼러를 활용하여 해당 주소가 어디서부터 시작됬는지 확인한다.
12. 좋아요한 포스팅만 보기 기능 구현하기
13. 포스팅 저장하기 기능 구현하기
14. 저장한 포스팅 리스트 페이지 구현하기
15. 좋아요한 포스팅 및 저장한 포스팅 리스트 보기는 로그인한 사람만 보여주기
    1. view단에서 시행
       1. dispatch 활용
       2. LoginRequiredmixin
    2. html 활용
16. my page에 내가 올린 사진들만 나오도록 구현한다.
17. my page에 팔로우 기능 추가하기

이번 시간에 할 것(5~6)

• Template 만들기
• 사진이 화면에 업로드 할 수 있도록 만들기

Template 만들기

1. 템플릿 만들기

• photo 아래에 templates 폴더 만들기
• templates 아래에 photo 폴더 만들기
• 그 아래에 html 파일들 생성해주기
• 이후 많은 앱들이 생기는 경우 서로 겹치는 문제를 해결하기 위해 templates 아래에 photo폴더를 다시 만들고 html파일 생성

2. base.html에 연결하기

• photo 아래에 layout 만들고 base.html 생성해주기
• layout 경로를 찾을 수 있도록 setting에 templates 경로를 지정
• os.path.join(BASE_DIR, 'layout')

3. Bootstrap 적용하기

1. 부트스트랩을 적용하면 누구나 손쉽게 웹사이트 디자인을 할 수 있습니다.
2. Bootstrap · The most popular HTML, CSS, and JS library in the world. 에 접속합니다.
3. base.html 파일에 부트스트랩을 사용하기 위해 필요한 css 및 javascript 링크를 넣습니다.
   1. css 파일은 head의 마지막에 위치
   2. javascript 파일은 body의 마지막에 위치

#css 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 

#javascript

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

1. 부트스트랩에서 마음에 드는 navbar를 가지고 옵니다.
   1. Navbar · Bootstrap

1. 마음에 드는 포맷을 찾으면 해당 포맷을 적용할 html에 넣어줍니다.
   1. 지금은 base.html에 넣어줍니다.(body tag내 위치)
   2. 파일들을 적절하게 수정하고 클릭시 연결할 링크를 연결해줍니다.
      1. <a href = " " > 내 위치
      2. { url 'bookmark:index' } 등과 같이 연결
   3. block content를 만들어서 다른 템플릿에서 추가할 수 있도록 구성합니다.

• 상단 링크 구성을 Home과 사진올리기로 구성
• 아래쪽에 { block content } { endblock } 을 구성
• Dstagram 제목 설정 및 Home, 사진 올리기 url 연결하기

photo 템플릿 수정하기

photo_list

• for문으로 models를 통해 생성된 object의 list를 하나씩 가지고 온다.
• img의 경로는 image.url 을 통해 연결

photo_create

• form을 활용하여 입력창 생성
• post형식으로 전송
• { csrf_token }을 작성하여 보안문제 해결
• {{ form.as_p }} 를 적어줌으로서 한줄씩 띄우면서 create의 field에 등록된 것을 가지고 옴

photo_detail

• 해당 컨텐츠의 작성자 / text를 보여준다.
• 수정과 삭제를 할 수 있도록 링크 연결

photo_delete

• form 형식으로 구현
• 한번 더 실제로 지울지를 확인하는 페이지로 구성

photo_update

• create와 비슷하게 구현
• 폼 형태로 입력할 수 있도록 구현

2. 화면에 사진 업로드 할 수 있도록 만들기

1. 현재는 사진을 업로드 하려고 하면 선택된 파일이 없다고 나옴
2. 메인 화면에 사진이 오류가 뜸

해결방안

1. html의 폼형태에서 입력할 때는 모두 text 파일로 인지 따라서 form 옆에 이게 image 파일이라는 것을 알려줄 수 있도록 해야함

• enctype을 추가하여 데이터형식을 입력한다고 알려줌

2. 또한 photo을 생성하는데 user_id가 확인되어야 하므로 views.py 수정

• 입력받는 폼이 유효한지 확인하고 작성자 id 확인

2. 메인 화면에 사진이 오류가 뜸
   1. 이미지 url을 확실하게 설정해줘야 한다.
   2. urls.py 수정

• 이미지의 url 설정

2019.05.04 인스타그램 클론 코딩하기(views 및 url 연결하기)

인스타그램 만들기(3~4)

• dstagram 소스코드

구현 로직

1. photo 앱 만들기
2. 모델 설계하기
3. views 설계하기
   1. list페이지
   2. 상세페이지
   3. 삭제하기
   4. 수정하기
   5. 생성페이지
4. url 연결시켜주기
5. template 만들기
   1. create/list/update/delete/detail
6. 사진 업로드 할 수 있도록 만들기
7. success url을 get_absolute_url로 연동시켜보기
8. account 앱 만들기
   1. 로그인/로그아웃 기능 구현하기
   2. 로그아웃 되었을 때는 create 및 sign out가 안 보이도록 구현하기(분기)
9. 권한 문제 해결하기
   1. html 기준에서 해결하기
   2. 링크로 들어와도 안 되도록 해결해보기
      1. view를 조정하기
10. 댓글 기능 구현하기
    1. 댓글은 상세페이지에서 가능하도록 하기
    2. 소셜 댓글기능으로 구현하기
11. 좋아요 버튼 만들기
    1. 스프라이트 이미지 기법 활용하기
    2. 클릭하면 색깔 바뀌도록 구현하기
    3. 로그인을 해야지 버튼 클릭이 되도록 하고 클릭을 하면 like count 올라가기
    4. like에 대한 정보를 저장하기
    5. 좋아요 counting 표시해주기
    6. 디테일 페이지에서 좋아요를 누르면 디테일 페이지에서 그대로 유지하도록 하기
       1. view와 like에서의 분기
       2. 레퍼러를 활용하여 해당 주소가 어디서부터 시작됬는지 확인한다.
12. 좋아요한 포스팅만 보기 기능 구현하기
13. 포스팅 저장하기 기능 구현하기
14. 저장한 포스팅 리스트 페이지 구현하기
15. 좋아요한 포스팅 및 저장한 포스팅 리스트 보기는 로그인한 사람만 보여주기
    1. view단에서 시행
       1. dispatch 활용
       2. LoginRequiredmixin
    2. html 활용
16. my page에 내가 올린 사진들만 나오도록 구현한다.
17. my page에 팔로우 기능 추가하기

이번 시간에 할 것(3~4)

• views 설계하기
• URL 연결하기

views 설계하기

1. class형 뷰의 generic view를 이용하여 구현
2. ListView/CreateView/UpdateView/DeleteView/DetailView 구현

1. Listview, Createview, deleteview,detailview,updateview 임포트 해오기
2. PhotoList:
   1. 가장 메인에서 보여줄 로직
   2. 북마크 모델을 불러와서 데이터를 활용할 것이라고 기제
3. PhotoCreate:
   1. 북마크 모델을 활용하는데
   2. 생성할 때 채워야 할 필드 확인
   3. 이후 연결될 템플릿 이름은 bookmark_create 일 것이다.
   4. 성공하면 메인 페이지로 돌아가도록 연결(이후 url로 연결)
4. PhotoUpdate:
   1. Create와 마찬가지로 field가 꼭 필요하다
   2. 대부분 Create와 동일
5. PhotoDelete와 PhotoDetail
   1. 삭제와 상세페이지는 특별한 로직이 필요하지 않음
   2. 템플릿과 연결을 잘 시킬 수 있도록 신경

URL 연결하기

2차 URL 연결하기

1. photo의 urls.py 생성
2. URL 작성하기

1. app_name 설정을 통해 namespace(이름공간)확보
   1. 다른 앱들과 url pattern 이름이 겹치는 것을 방지하기 위해 사용한다.
2. path(url pattern, view, url pattern name),
   • 함수형 뷰는 이름만 적으면 되고 클래스형 뷰는 이름.as_view()
   • name은 나중에 불러쓰기 위해 지정한다.
3. url pattern
   1. <int:pk>
      1. 해당 작성에 대한 번호로 이동해야지 상세페이지 및 그 글에 대한 삭제, 수정을 할 수 있다.
4. views 경로 지정
   1. 해당 url이 들어오면 views의 해당 view의 로직을 따라서 처리한다.
5. name
   1. 네임 설정을 통해 이후 클릭하면 해당 url로 이동하도록 설정한다.

1차 URL 연결하기

1. config의 url.py에 작성
2. 2차 URL을 설정한 이후에 가장 기본이 되는 URL과 연결시켜준다.

1. 기본적으로 admin 주소는 설정되어 있다.
2. include를 통해서 해당 주소로 연결시켜준다.
   1. 가장 기본 주소가 들어오면 photo의 url로 연결시켜줘라.

이까지 하면 views 로직을 만들고 URL까지 연결시켜주었다. 다음 시간에는 직접 화면에 구성해줄 Template를 구성한다.

2019.05.04 인스타그램 클론 코딩하기(앱 및 모델 만들기)

인스타그램 만들기(1~2)

• dstagram 소스코드

구현 로직

1. photo 앱 만들기
2. 모델 설계하기
3. views 설계하기
   1. list페이지
   2. 상세페이지
   3. 삭제하기
   4. 수정하기
   5. 생성페이지
4. url 연결시켜주기
5. template 만들기
   1. create/list/update/delete/detail
6. 사진 업로드 할 수 있도록 만들기
7. success url을 get_absolute_url로 연동시켜보기
8. account 앱 만들기
   1. 로그인/로그아웃 기능 구현하기
   2. 로그아웃 되었을 때는 create 및 sign out가 안 보이도록 구현하기(분기)
9. 권한 문제 해결하기
   1. html 기준에서 해결하기
   2. 링크로 들어와도 안 되도록 해결해보기
      1. view를 조정하기
10. 댓글 기능 구현하기
    1. 댓글은 상세페이지에서 가능하도록 하기
    2. 소셜 댓글기능으로 구현하기
11. 좋아요 버튼 만들기
    1. 스프라이트 이미지 기법 활용하기
    2. 클릭하면 색깔 바뀌도록 구현하기
    3. 로그인을 해야지 버튼 클릭이 되도록 하고 클릭을 하면 like count 올라가기
    4. like에 대한 정보를 저장하기
    5. 좋아요 counting 표시해주기
    6. 디테일 페이지에서 좋아요를 누르면 디테일 페이지에서 그대로 유지하도록 하기
       1. view와 like에서의 분기
       2. 레퍼러를 활용하여 해당 주소가 어디서부터 시작됬는지 확인한다.
12. 좋아요한 포스팅만 보기 기능 구현하기
13. 포스팅 저장하기 기능 구현하기
14. 저장한 포스팅 리스트 페이지 구현하기
15. 좋아요한 포스팅 및 저장한 포스팅 리스트 보기는 로그인한 사람만 보여주기
    1. view단에서 시행
       1. dispatch 활용
       2. LoginRequiredmixin
    2. html 활용
16. my page에 내가 올린 사진들만 나오도록 구현한다.
17. my page에 팔로우 기능 추가하기

이번 시간에 할 것(1~2)

• photo 앱 만들기
• 모델 설계하기
• 초기 설정 및 프로젝트 시작은 bookmark 만들기를 참고해주세요 :)

1. photo 앱 만들기

프로젝트 시작 준비하기

가상 환경 만들기

• pip3 install virtualenv
• virtualenv -python = python3.7 venv
• venv라는 가상환경 생성

가상 환경 실행하기

• source venv/bin/activate
• 해당 터미널에 venv ) 표시 확인

장고 설치하기

• pip install django==2.2
• 원하는 버전의 장고 설치
• 가상환경이므로 더 이상 pip3를 해줄 필요 없음

프로젝트 생성하기

• django-admin startproject config .
• config는 프로젝트명 뒤에 .은 해당 디렉토리에 생성
• config내에 setting 및 url.py 등 관련 내용 생성

데이터베이스 migrate해주기

• 생성된 프로젝트에 대한 데이터베이스 초기화
• python manage.py migrate

photo 앱 만들기

• python manage.py startapp photo
• settings.py에 installed app에 photo 추가해주기

photo model 설계하기

1. 해당 photo의 models.py로 이동
   1. author/ text/ imange/ created/ updated 구현
2. _str_ 을 통해 admin 사이트 화면 표시 구현
3. class Meta를 통해 ordering 정렬

1. 장고에서 구현해주고 있는 user를 불러와서 photo를 foreignkey로 연결해줌
2. upload_to="timeline_photo/Y/m/d"
   1. timeline_photo폴더에 연도, 월, 일을 만들어서 사진을 저장
   2. media 폴더를 생성하여 그 아래에 지속적으로 저장되도록 구현
      1. setting의 값 설정

1. MEDIA_URL 을 설정하고 ROOT를 잡아주어서 저기로 사진이 저장되도록 한다.

모델 설계 이후 migrations 해주기

1. Image파일을 업로드 하기 위해 pip install Pillow를 해줘야 한다.
   1. pip install Pillow
2. python manage.py makemigrations photo
3. python manage.py migrate

admin 사이트에 등록하기

1. admin.py로 이동
2. from .models import Photo
3. admin.site.register(Photo)

admin 사이트에서 확인해보기

1. 관리자 계정 만들기
   1. python manage.py createsuperuser
2. python manage.py runserver 8000
3. 해당 링크의 /admin으로 이동하여 글 등록해보기

• 포토 몇개 등록해보기
• media 폴더에 잘 저장되는지 확인해보기

2019.05.03 북마크 프로젝트의 개별 상세페이지를 만들고 링크를 연동하여 연결시켜 줍니다.

개인 Bookmark웹 만들기

• 웹사이트를 통해 개인 북마크를 설정할 수 있다.
  • 북마크에는 url 주소와 사이트명이 들어간다.
  • 해당 사이트에 대한 설명과 작성일자가 자동으로 생성된다.
• 메인 페이지에서 해당 북마크에 대한 리스트를 보여준다.
  • 메인페이지에서 북마크 추가하기 버튼으로 추가할 수 있다.
  • 해당 북마크를 클릭하면 상세페이지로 이동한다.
  • 상세페이지에서 수정 및 삭제를 할 수 있다.
  • base.html과 연동하여 쉽게 구현할 수 있도록 한다.

이번 시간에 할 것

• 개별 템플릿 꾸미기
• base.html과 연동시켜주기
• 링크를 연결하여 페이지 이동시키기

개별 템플릿 만들기

bookmark 템플릿 수정하기

bookmark list

• block content 구성
• models 을 통해 생성된 object의 list들을 돌면서 한 줄씩 가지고 온다.
  • 해당 object의 id/ site_name/ url 나열
• 각각의 링크 연결

bookmark_create

• form을 활용하여 입력창 생성
• post형식으로 전송
• { csrf_token }을 작성하여 보안문제 해결
• {{ form.as_p }} 를 적어줌으로서 한줄씩 띄우면서 create의 field에 등록된 것을 가지고 옴

bookmark_detail

• 해당 컨텐츠의 이름/ url / content를 보여준다.
• 수정과 삭제를 할 수 있도록 링크 연결

bookmark_delete

• form 형식으로 구현
• 한번 더 실제로 지울지를 확인하는 페이지로 구성

bookmark_update

• create와 비슷하게 구현
• 폼 형태로 입력할 수 있도록 구현

실제 실행 및 실제 페이지 확인

• python manage.py runserver

2019.05.03 북마크 프로젝트의 템플릿 만들기 및 base.html에 연동시키기

개인 Bookmark웹 만들기

• 웹사이트를 통해 개인 북마크를 설정할 수 있다.
  • 북마크에는 url 주소와 사이트명이 들어간다.
  • 해당 사이트에 대한 설명과 작성일자가 자동으로 생성된다.
• 메인 페이지에서 해당 북마크에 대한 리스트를 보여준다.
  • 메인페이지에서 북마크 추가하기 버튼으로 추가할 수 있다.
  • 해당 북마크를 클릭하면 상세페이지로 이동한다.
  • 상세페이지에서 수정 및 삭제를 할 수 있다.
  • base.html과 연동하여 쉽게 구현할 수 있도록 한다.

이번 시간에 할 것

• 템플릿 만들기
• base.html에 연결하기
• 템플릿 꾸미기
  • 부트스트랩 활용

템플릿 만들기

1. 템플릿 만들기

• bookmark 아래에 templates 폴더 만들기
• templates 아래에 bookmark 폴더 만들기
• 그 아래에 html 파일들 생성해주기
• 이후 많은 앱들이 생기는 경우 서로 겹치는 문제를 해결하기 위해 templates 아래에 bookmark폴더를 다시 만들고 html파일 생성

2. base.html에 연결하기

템플릿 분리형 확장

• 매번 있어야하는 내용을 지속적으로 넣어주기가 귀찮음
• 앱 별로는 각각의 템플릿에 필요하나 전체 앱에 있어야하는 것은 전체 루트위로 뺀다.
• 전체 프로젝트 아래에 layout을 만들고 아래에 base.html을 만든다.
• 내가 원하는 부분부분 나누어 놓는다.(by block)
  • bookmark 템플릿들은 base.html을 확장받아 사용한다.
• settings templates
  • base.html을 찾을 수 있도록 경로를 지정해준다.
  • DIR에 추가적으로 등록해놓는다. (directorys)
    • os.path.join(베이스디렉토리의 layout 폴더를 등록해놓는다.)
  • base.html을 부트스트랩을 디자인 할 것이다.

1. layout 디렉토리를 만들고 그 아래에 base.html을 만듭니다.
2. layout 경로를 찾을 수 있도록 setting에 templates 경로를 지정해줍니다.

3. Bootstrap 적용하기

1. 부트스트랩을 적용하면 누구나 손쉽게 웹사이트 디자인을 할 수 있습니다.
2. Bootstrap · The most popular HTML, CSS, and JS library in the world. 에 접속합니다.
3. base.html 파일에 부트스트랩을 사용하기 위해 필요한 css 및 javascript 링크를 넣습니다.
   1. css 파일은 head의 마지막에 위치
   2. javascript 파일은 body의 마지막에 위치

#css 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 

#javascript

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

1. 부트스트랩에서 마음에 드는 navbar를 가지고 옵니다.

   1. Navbar · Bootstrap

1. 마음에 드는 포맷을 찾으면 해당 포맷을 적용할 html에 넣어줍니다.
   1. 지금은 base.html에 넣어줍니다.(body tag내 위치)
   2. 파일들을 적절하게 수정하고 클릭시 연결할 링크를 연결해줍니다.
      1. <a href = " " > 내 위치
      2. url 'bookmark:index' 등과 같이 연결
   3. block content를 만들어서 다른 템플릿에서 추가할 수 있도록 구성합니다.

• 상단 링크 구성을 Home과 북마크 생성하기로 구성
• 아래쪽에 { block content } { endblock } 을 구성

다음 시간에는 상세 페이지들을 하나씩 구성해보겠습니다.

개인 Bookmark웹 만들기

• 웹사이트를 통해 개인 북마크를 설정할 수 있다.
  • 북마크에는 url 주소와 사이트명이 들어간다.
  • 해당 사이트에 대한 설명과 작성일자가 자동으로 생성된다.
• 메인 페이지에서 해당 북마크에 대한 리스트를 보여준다.
  • 메인페이지에서 북마크 추가하기 버튼으로 추가할 수 있다.
  • 해당 북마크를 클릭하면 상세페이지로 이동한다.
  • 상세페이지에서 수정 및 삭제를 할 수 있다.
  • base.html과 연동하여 쉽게 구현할 수 있도록 한다.

이번 시간에 할 것

• Views.py 만들기
  • 함수형 뷰 및 클래스형 뷰 공부하기
  • 클래스형 뷰를 통해 구현하기
• 2차 url 만들기
• 1차 url에 연결시켜주기

1. 북마크 만들기

1. VIews.py 만들기

views에 대해 먼저 알고 가기

• 클래스형 뷰와 함수형 뷰는 서로 상호 기능 제약이 거의 없다.
  • 클래스형 뷰로 만드는 것은 모두 함수형 뷰로 가능하고 서로 바꿔서도 가능하다.
    • 하지만 구현 방법이 조금씩 달라질 수 있다.
  • 가장 기본적인 것들을 많이 쓰면 클래스형 뷰가 좋고
  • 기본적으로 처리해야되는 것조차 커스터마이징이 필요하면 함수형 뷰가 좋다.
• 함수형 뷰
  • def 뷰이름(request[, 추가인수]) : 처리할 내용
  • CRUDL에 특별한 처리를 추가해야 되는 경우
  • 함수형 뷰는 자유도가 클래스형 뷰에 비해 높다.
  • 처리할 코드를 직접 다 개발자가 작성
• 클래스형 뷰
  • class 뷰이름(제네릭뷰 상속): 처리할 내용
  • CRUDL에 관련된 기능은 자주 사용하기 때문에 장고에서 제네릭 형태로 미리 만들어 놓음
  • 클래스형 뷰는 생산형이 함수형 뷰에 비해 높다.
  • 제네릭 기능 외우 추가적인 기능을 개발자가 작성
  • 쭉 적는 것이 아닌 메서드 방식 - 커스터마이징에 관련된 메서드를 찾아야 한다.
    • 어떤 기능에 대한 커스터마이징을 하느냐에 따라서 찾아봐야한다.(쿼리셋)
• 뷰의 기본 : CRUDL!
  • Create : 생성과 관련된 로직 구성
  • Read : 한 개의 파일에 대한 상세 페이지 구성 (detail로 활용)
  • Update : 수정하기와 관련된 로직 구성
  • Delete : 삭제하기와 관련된 로직 구성
  • List : 메인 화면과 관련된 로직 구성
• 뷰를 만든 다음에는 url을 연결해줘야한다.

views.py 구성하기

1. 클래스형 뷰를 통한 구현 실행

1. Listview, Createview, deleteview,detailview,updateview 임포트 해오기
2. BookmarkList:
   1. 가장 메인에서 보여줄 로직
   2. 북마크 모델을 불러와서 데이터를 활용할 것이라고 기제
3. BookmarkCreate:
   1. 북마크 모델을 활용하는데
   2. 생성할 때 채워야 할 필드 확인
   3. 이후 연결될 템플릿 이름은 bookmark_create 일 것이다.
   4. 성공하면 메인 페이지로 돌아가도록 연결(이후 url로 연결)
4. BookmarkUpdate:
   1. Create와 마찬가지로 field가 꼭 필요하다
   2. 대부분 Create와 동일
5. BookmarkDelete와 BookmarkDetail
   1. 삭제와 상세페이지는 특별한 로직이 필요하지 않음
   2. 템플릿과 연결을 잘 시킬 수 있도록 신경

URL 연결하기

2차 URL 연결하기

1. bookmark의 urls.py 생성
2. URL 작성하기

1. app_name 설정을 통해 namespace(이름공간)확보
   1. 다른 앱들과 url pattern 이름이 겹치는 것을 방지하기 위해 사용한다.
2. path(url pattern, view, url pattern name)
   • 함수형 뷰는 이름만 적으면 되고 클래스형 뷰는 이름.as_view()
   • name은 나중에 불러쓰기 위해 지정한다.
3. url pattern
   1. <int:pk>
      1. 해당 작성에 대한 번호로 이동해야지 상세페이지 및 그 글에 대한 삭제, 수정을 할 수 있다.
4. views 경로 지정
   1. 해당 url이 들어오면 views의 해당 view의 로직을 따라서 처리한다.
5. name
   1. 네임 설정을 통해 이후 클릭하면 해당 url로 이동하도록 설정한다.

1차 URL 연결하기

1. config의 url.py에 작성
2. 2차 URL을 설정한 이후에 가장 기본이 되는 URL과 연결시켜준다.

1. 기본적으로 admin 주소는 설정되어 있다.
2. include를 통해서 해당 주소로 연결시켜준다.
   1. 가장 기본 주소가 들어오면 bookmark의 url로 연결시켜줘라.

이까지 하면 views 로직을 만들고 URL까지 연결시켜주었다. 다음 시간에는 직접 화면에 구성해줄 Template를 구성한다.

2019.05.03 장고 Bookmark 만들기 프로젝트

개인 Bookmark웹 만들기

• 웹사이트를 통해 개인 북마크를 설정할 수 있다.
  • 북마크에는 url 주소와 사이트명이 들어간다.
  • 해당 사이트에 대한 설명과 작성일자가 자동으로 생성된다.
• 메인 페이지에서 해당 북마크에 대한 리스트를 보여준다.
  • 메인페이지에서 북마크 추가하기 버튼으로 추가할 수 있다.
  • 해당 북마크를 클릭하면 상세페이지로 이동한다.
  • 상세페이지에서 수정 및 삭제를 할 수 있다.
  • base.html과 연동하여 쉽게 구현할 수 있도록 한다.

이번 시간에 할 것

• 프로젝트 시작하기
• 앱 만들기
• models를 통해 DB 구축하기
• 만들어진 DB를 admin 사이트에 접속하여 확인하기
• DB 등록하기

1. 북마크 만들기

프로젝트 시작 준비하기

가상 환경 만들기

• pip3 install virtualenv
• virtualenv -python = python3.7 venv
• venv라는 가상환경 생성

가상 환경 실행하기

• source venv/bin/activate
• 해당 터미널에 venv ) 표시 확인

장고 설치하기

• pip install django==2.2
• 원하는 버전의 장고 설치
• 가상환경이므로 더 이상 pip3를 해줄 필요 없음

프로젝트 생성하기

• django-admin startproject config .
• config는 프로젝트명 뒤에 .은 해당 디렉토리에 생성
• config내에 setting 및 url.py 등 관련 내용 생성

데이터베이스 migrate해주기

• 생성된 프로젝트에 대한 데이터베이스 초기화
• python manage.py migrate

북마크 앱 만들기

앱 설치하기

• python manage.py startapp bookmark

• 프로젝트 및 앱 설치 이후 상태 확인
• settings.py에 installed app에 bookmark 추가

model 설계하기

1. 해당 bookmark 폴더의 models.py 이동
   1. site_name/url/contents/created 구성
2. str 구성을 통해 admin 화면에서 보이는 모습 구현
   1. site_name 및 url 보이도록 구현
3. class Meta : ordering을 통해 정렬 순서 구현
   1. 생성일자 역순으로 정렬 순서 구현

4. 모델 설계 이후에 데이터베이스에 migration 해주기
   1. python manage.py makemigrations bookmark : 변경 사항 추적 및 기록하기
   2. python manage.py migrate bookmark 0001 : 변경 사항 DB에 적용하기
      1. migrate뒤 bookmark 0001 은 굳이 안해줘도 되나 실무에서 여러 사람이 함께 프로젝트를 진행해야되는 상황이 외면 꼭 해줘야 한다.

model에 대한 추가적인 공부

• 모델의 형태 - class
  • class Bookmark(models.Model)
    • models.Model을 상속 받는 이유
    • 상속 : 어떤 클래스가 부모 클래스를 상속 받는다.
    • 부모클래스가 가지고 있는 메서드 및 속성 값을 사용하기 위해서
    • models.Model이 가지고 있는 메서드나 속성값을 사용하기 위해서 사용
    • models.Model : ORM 관련 기능들
      • DB를 추상화해서 코드로 조작할 수 있게 하는 기능
      • 데이터를 추가, 수정, 검색, 삭제
• 사용자에게 안 받지만 필요한 것
  • 작성자 : 로그인한 유저정보를 찾아서 추가
    • 장고에서는 기본적으로 id값을 생성하여 저장시켜준다.
  • 작성일 : 서버 시간을 읽어서 timestamp값을 만들어 추가
    • 자동 옵션 auto_now, auto_now_add를 하면 자동 서버시간을 저장해준다.
    • 단 setting에서 TIME_ZONE = "Asia/Seoul" 로 해준다.

admin에서 모델 확인하기

• admin.py로 이동
• from .models import Bookmark
• admin.site.register(Bookmark)



model 확인해보기

1. superuser 생성 : admin 사이트 로그인을 위해
   1. python manage.py createsuperuser
   2. 아이디 및 비밀번호 등록

파이썬 서버 실행 시켜보기

1. 서버 실행하기
   1. python manage.py runserver [포트번호]
   2. 실행 이후 나오는 url로 접속

2. url 뒤에 admin을 붙여서 해당 admin으로 접근 및 로그인

3. 해당 bookmark를 통해 몇가지를 직접 add 해보기

다음에서 직접 views.py를 작성하여 url에 연결하여 봅니다.

2019.04.24 장고 데이터베이스 설치하기

(TIL은 스스로 이해한 것을 바탕으로 정리한 것으로 오류가 있을 수 있습니다)

# 질문에 답하기

1. 장고 데이터베이스 설치하기

데이터베이스 설치하기

1. 기본적으로 project를 생성하고나면 python manage.py migration을 통해 데이터베이스 생성해주기
   1. 기본 데이터테이블 생성하기
2. 모델 만들기
3. 모델을 바탕으로 해당 앱 데이터테이블 생성하기

기본 데이터테이블 생성하기

migrate

• python manage.py migrate
• migrate는 settings/INSTALLED_APPS에 등록되어 있는 앱에 필요한 데이터테이블을 생성한다.
• 따라서 INSTALLED_APPS에 등록되어 있지 않다면 migration 명령이 실행되지 않는다.

관리자 계정 생성하기

• python manage.py createsuperuser
• 비밀번호 변경
  1. python manage.py chanagepassword [계정명]

모델 만들기

모델 만들기

• DB에 어떤 데이터를 어떤 형식으로 저장할 것인가?
• 모델 이름 : 테이블 이름
• 모델의 필드 : 컬럼
  1. 컬럼은 데이터의 형식 , 제약 조건
  2. 형식 : 정수, 실수, 글자, 길이없는 텍스트, 날짜 등
• 원래 SQL 언어로 작성을 하여야 하나 model에 클래스를 통해 작성할 수 있다.
• 모델을 사용하면서 장고에서 주는 이점 중 또 한개는 이렇게 모델에 만들어 놓으면 제약조건에 대한 부분을 프론트에 자동으로 만들어 준다.
  1. 프론트에서 사용하는 폼 태그의 종류와 제약 조건을 제시해준다.
• 해당 앱의 데이터베이스 구조를 어떻게 구성할 것인가?
• 이 모델에 따라서 데이터테이블이 생성된다.

polls/models.py

from django.db import models


class Question(models.Model):
    question_text = models.CharField(max_length=200)
    pub_date = models.DateTimeField('date published')


class Choice(models.Model):
    question = models.ForeignKey(Question,                         on_delete=models.CASCADE)
    choice_text = models.CharField(max_length=200)
    votes = models.IntegerField(default=0)

• Question이라는 모델에는 question_text 와 pub_date가 들어가고 각각의 필드(조건)들로 구성된다.
• Choice라는 모델은 question , choice_text, votes로 구성된다.

해당 데이터테이블 변경사항 추적하기 : 모델을 읽어서 DB에 반영할 사항 확인

• migrate를 해줘야하는데 migrate는 settings/INSTALLED_APPS에 등록되어 있는 앱에 필요한 데이터테이블을 생성한다.
• 따라서 먼저 settings/INSTALLED_APPS에 polls를 등록해준다.
• 해당 앱에 대한 migration을 만들어준다.
• python manage.py makemigrations polls
• 해당 앱에 대한 migration을 실시 해준다.

변경 사항 등록하기 : 변경 사항 파일을 읽어서 쿼리 실행

• python manage.py migrate polls 0001
• python manage.py migrate만해도 되지만 polls와 0001을 넣는 이유
  • 한 프로젝트 안에서 다른 사람이 만들고 있는 내용도 같이 반영이 될 수 있음

변경사항 확인하기

• polls/migrations에 보면 변경사항들이 나온다.
• 장고는 DB 의존성이 낮다.
  1. 의존성 : ~ 에 대한 의존성이 높다는 것은 ~가 아니면 정상 동작하지 않는다.
     1. 예) 삼성 리모컨, lg 리모컨
• 어떤 쿼리가 실행될지 알고 싶다면
  1. python manage.py sqlmigrate polls 0001
  2. 어떤 쿼리가 실행될지 알고 싶다
  3. slow 쿼리인지 여부 확인
  4. 튜닝이 필요한 쿼리인지 여부 확인할 때 사용한다.