관통 프로젝트 디버깅

✅accounts 구현

1. url 설정

from django.urls import path
from . import views
# jwt를 쓰기 위해 불러온다.
from rest_framework_jwt.views import obtain_jwt_token


urlpatterns = [
    path('signup/', views.signup), # 회원가입
    path('signout/', views.signout), #회원 탈퇴
    path('api-token-auth/', obtain_jwt_token), #jwt 부여
    path('login/', views.login), # 로그인
    path('logout/', views.logout), # 로그아웃
    path('update/', views.update), # 회원 정보 수정
    path('password/', views.change_password), # 비밀번호 수정
    path('<int:user_pk>/', views.profile), #프로필 조회
    path('<int:user_pk>/follow/', views.follow), # 팔로우
]

JWT 사용을 위해 설치한다.

$ pip install djangorestframework-jwt

settings.py에 추가한다.

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': (
        'rest_framework.permissions.IsAuthenticated',
    ),
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework_jwt.authentication.JSONWebTokenAuthentication',
        'rest_framework.authentication.SessionAuthentication',
        'rest_framework.authentication.BasicAuthentication',
    ),
}

2. 로그인, 회원가입 페이지인 Vue 컴포넌트를 만들고 라우터 연결
3. views.py에서 회원가입 함수 생성
4. serializer에서 userSerializer 만들기.
5. CORS 문제 - settings.py에서 installed_app, middlware, CORS_ALLOWED_ORIGINS 설정

 

✅ .env.local

BACK 서버 URL을 .env.local에 저장해두고 자꾸 url을 못찾음

.env.local을 변경했다면 node 서버를 다시 켜야한다.

 

✅ vuex

isLogin -> state에 지정하고 mutations, actions로 조절

logout까지 구현 : isLogin(state)을 바꾸려면 mutations가 해야하니까

 

✅ vue - setter

computed -> App에서 created에서 this.login 수치를 바꾸고 있어서 그랬다.

 

✅ 회원가입 / 로그인 에러 메세지 출력

const error = JSON.parse(err.response.request.response)
          this.error = Object.values(error)[0][0]
          console.log(this.error)

 

✅ src/assets에 있는 이미지 출력

src를 v-bind로 만들어야 `(backtick)을 사용할 수 있다.

<img :src="require(`@/assets/profile_img/${profile_path}.png`)" alt="">

 

✅ 새로고침 로그인 유지 + 로그아웃 시 지우기

: persistedstate -> 여기가 진짜 어렵고 오래걸림...

로그아웃할 때 jwt 토큰은 지워지지만 vuex에 저장한 state값이 지워지지 않는다.

그래서 reducer이란 함수를 써서 비우고 vuex에 저장된 값은 빈 문자열을 넣어주었다.

plugins: [
    createPersistedState({
      key: 'vuex',              
      reducer (val) {                                
        if(val.isLogin === false) { // return empty state when user logged out                
          return {}
        }
        return val
      }
    })
  ]

https://github.com/robinvdvleuten/vuex-persistedstate/issues/88

Delete persisted state · Issue #88 · robinvdvleuten/vuex-persistedstate

 

✅ user profile serializer 받아오기

영화, 리뷰, 리뷰 댓글, 게시글, 게시글 댓글까지 다 serializer를 만들고,

import로 불러와서 User Serializer에 추가함, 그리고 profile 페이지에서 전부 받아온다.

 

✅ admin 등록

python manage.py createsuperuser 하고

영화, 사용자 모델만 admin이 수정할 수 있도록 등록하였다.

 

💜11/18

 

✅ vuex moduels

persistedState를 사용해서 user와 movie의 state를 나눌 필요성을 느꼈다.

그래서 moduels를 사용해서 나눴다.

 

namespace를 true로 하면 dispatch('login') -> dispatch('userStore/login')으로 변경해야한다.

...mapState를 사용하려면 const userStore = 'userStore'를 선언하고 mapState의 첫번째 인자로 넣어주어야 한다.

https://velog.io/@skyepodium/VUEX-store-%EC%97%AC%EB%9F%AC-%EA%B0%9C%EB%A5%BC-%EB%AA%A8%EB%93%88%ED%99%94%ED%95%98%EA%B8%B0

VUEX store 여러 개를 모듈화하기

https://vuex.vuejs.org/kr/guide/modules.html

모듈 | Vuex

이제 createPersistedState 플러그인을 사용해야하는데...

그냥 index.js (메인)에 넣어놓고, isLogin 초기화를 userStore 단계만 넣었다.

 

✅ passing props to vue rotuer

https://router.vuejs.org/guide/essentials/passing-props.html#boolean-mode

우선 router의 index.js에서 props true로 바꿔준다.

그러면 params로 넘겨줄 수 있다.

어차피 루트에 없는 파라미터는 주소에 영향을 주지 않는 것 같다.

 

✅ logout refresh

https://stackoverflow.com/questions/41301099/do-we-have-router-reload-in-vue-router

this.$router.go() 하면 새로고침 된다.

 

✅ 401 Unathorized error

store을 나누고 나서 console에 출력해서 어떻게 접근해야하는지 알아냈다.

this.$store.state.userStore.

 

✅ accounts 시리얼라이저 회원가입이랑 프로필 조회용 나눔

안그러면 field가 비었다면서 회원가입이 안됨

 

✅ 커뮤니티

pk로 받아온 유저 어떻게 백에서 이름으로 바꿔서 보내주나? vue단에서는 안됨. 전체 유저를 참고할 수 없어서

1. view함수에서 직접 찾고 Response에 context라는 dictionary에 serializer랑 같이 넣어서 보낸다.
2. 댓글 유저 pk -> 이름으로 바꾸는 방법
   1. article_comment 시리얼라이저에서 SerializerMethodField를 사용해 이름을 반환한다.
   2. https://ssungkang.tistory.com/entry/Django-Serializer-Custom-Field-SerializerMethodField

[Django] Serializer Custom Field, SerializerMethodField

 

💜11/19

✅ article create, comment crate 구현

 

✅ serializer와 prop

comment를 prop으로 받아오는데,

serializer에서 comment의 liked_users를 read_only_fields에 넣으면 생성은 되지만

prop에 liked_users가 없어서 현재 사용자가 좋아요 했는지 확인 불가

(liked_users가 빈 배열이라 자꾸 includes가 없는 속성이라고 뜸)

-> comment serializer에서 read_only_fields로 빼지 말고 meta 클래스 밖에서 read_only=True를 줘서 해결한다.

https://www.django-rest-framework.org/api-guide/relations/#primarykeyrelatedfield

Serializer relations - Django REST framework

comment의 liked_users (pk값을 참조하는 필드)를 보기 위해서 PrimaryKeyRelatedField를 사용했다.

 

✅ article 수정시 get으로 디테일 가다가 수정으로 가버리는 이유

- 파트너가 해결해줌

 

b-form 태그에서 action 지정 안해주면 원래 url로 돌아가기 때문에 b-text로 바꾸고,

새로고침하면 안나오던 내용을 created에서 불러오도록 했다.

 

✅ 게시글 좋아요 많은 순으로 출력하기

from django.db.models import Count

articles = get_list_or_404(Article.objects.annotate(*num_likes*=Count('liked_users')).order_by('-num_likes'))

https://docs.djangoproject.com/en/3.2/topics/db/aggregation/#generating-aggregates-for-each-item-in-a-queryset

Aggregation | Django documentation | Django

 

 

✅ 회원 탈퇴 구현하기

modal - ok버튼 회원탈퇴로 바꾸기

b-modal에서 바꿔야됨

https://bootstrap-vue.org/docs/components/modal#comp-ref-b-modal-events

BootstrapVue

 

✅ 비밀번호 수정 구현하기

아..view함수에서 signup이랑 그냥 똑같이 하면되는거였는데 혹시 생성될까봐 걱정되어서 다르게 썼다가 시간만 날렸다.

 

💜11/20

✅ 댓글에서도 프로필 이동

profile router에서 vue warn으로 username 파라미터 받을 수 없다고 떠서 버튼 누르면 이동하도록 methods에서 정의해주니까 페이지 생성될때 없다고 에러가 안뜬다.

 

✅ 스크롤링

https://router.vuejs.org/kr/guide/advanced/scroll-behavior.html

프로필 페이지로 이동하면 맨 위부터 본다

 

✅ 팔로우 - 모달

팔로잉, 팔로워 수만 시리얼라이저로 보내고

목록을 보기 했을때 팔로잉, 팔로워 이름 리스트를 받아온다.

모달에서 2개 리스트를 띄우려면 row, col을 사용하면 된다.

https://bootstrap-vue.org/docs/components/list-group

BootstrapVue

https://bootstrap-vue.org/docs/components/modal#modal-content

BootstrapVue

✅ serializerMethodField에서 method_name에 함수 이름 문자열로 넣어라.......

method = getattr(self.parent, self.method_name)

TypeError: getattr(): attribute name must be string

 

✅ 팔로우 - 팔로워, 팔로잉 리스트로 출력하고 프사까지 함. 여기서 serializer 바꾸느라 시간 엄청 소비함.

 

 

✅ v-for 숫자로 쓰기(프사 파일 이름은 숫자고, 2줄로 나타내려고)

https://stackoverflow.com/questions/44617484/vue-js-loop-via-v-for-x-times-in-a-range

Vue Js - Loop via v-for X times (in a range)

 

✅ 프사 모달창에서 바꿀 수 있도록 바꿈.

-> url이랑 view함수 만들어서 사용자의 profile_path 수정함

 

✅ 팔로잉,팔로워 리스트에서 해당 유저 누르면 그 사람 프로필로 움직이도록 함.

기존에는 다른사람 프로필 보고 있다가 navbar에서 내 프로필 누르면 주소만 바뀌고 내용 업데이트가 안됐는데,

router-view 에서 :key="$route.path" 설정해주니까 해결됨. 같은 페이지여도 주소가 바뀌었다면 새로 부른다.

https://focuspro.tistory.com/7

(Vue.js 오류 해결) 같은 경로일때 로드가 되지 않는 문제.

 

💜11/21

✅ 로그인 페이지 꾸미기

• placeholder 색을 바꾸고싶다면 아래와 같다.

• .input-form::placeholder { color: rgba(255, 255, 255, 0.562); }
  /* Chrome, Firefox, Opera, Safari 10.1+ */

   
• 그라데이션
  1. background image에 그라디언트르 넣었음
  2. 안움직임 = 이유는 button과 background 크기가 완전히 같아서 전혀 움직이지 않았던거임
     1. 하지만 그걸 모르고 애니메이션이 작동 안하는 줄 알았다.
     2. vue transition까지 찾아보다가 우연히 찾음. 무슨 id가 깨지는 버그라고까지 해서 그건가 했는데... 근데 그냥 box shadow는 작동을 잘해서 그게 아니었다.
     3. ㄴㅇㅁㄹㅇㄴㅁㄹㄹ
     4. https://stackoverflow.com/questions/31292187/background-position-percentage-not-working
  3. 그라데이션이 좌우로 왔다갔다 하는게 싫어서 또 찾아봄
     1. https://stackoverflow.com/questions/30730650/css-way-of-looping-a-background-image-with-cover-or-contain-sizing
• 폰트 바꿈 -> font-face를 css에 저장했으며 폰트는 눈누 사이트에서 골랐다.
  • https://noonnu.cc/font_page/366
  • https://yeolceo.tistory.com/82
• form 입력할때 하얀색으로 변하는건 input:focus에서 바꾸면된다.

CSS way of looping a background image with cover or contain sizing

 

✅ 에러 한글화

• 회원가입은 view함수에서 직접 error 처리함(빈칸, 비밀번호 비일치) 사용자 존재는 한글로 나오길래 따로 처리 안함
• 로그인은 vue 컴포넌트에서 직접 했고 try 구문으로 빈칸일 경우와 아닐경우(잘못된 정보)로 나눠서 에러 메세지 할당했음

 

💜11/22

✅ 프로필 페이지

• backdrop-filter 배움
• 좋아하는 영화, 보고싶은 영화, 작성한 영화 리뷰, 좋아요한 영화 리뷰 router-link로 연결하고 숫자로만 출력한다음에 상세페이지가면 출력해주도록 함
• 작성한 게시글, 좋아한 게시글, 작성한 영화 리뷰 댓글, 작성한 게시글 댓글은 b-table로 출력
  • b-table 필드 커스텀 하는 방법 -> vue의 data에서 처리

  • fields: [ 
    	{ key: 'content', label: '내용' }, 
        { key: 'created_at', label: '작성 시간' }, 
        { key: 'updated_at', label: '수정 시간' }, 
        { key: 'liked_users', label: '좋아요 수' }, 
        ],

  • 출력 내용 커스텀 하는 방법

  • <b-table stripted hover :items="review_comment_set" :fields="fields"> 
    	<template #cell(created_at)="data"> 
        	{{ data.value.substring(0, 19) }} 
        </template> 
        <template #cell(updated_at)="data"> 
        	{{ data.value.substring(0, 19) }} 
        </template> 
        <template #cell(liked_users)="data"> 
        	{{ data.value.length }} 
        </template> 
     </b-table>

  • 사이즈에 맞춰 컬럼 수 줄이는 방법
  • https://github.com/bootstrap-vue/bootstrap-vue/issues/1158
  • thClass, tbClass 로 조절할 수 있다.https://bootstrap-vue.org/docs/components/table
  • @media (max-width: 576px) { .dateTable { visibility: hidden; } }

  • fields: [
            { key: 'content', label: '내용', thClass: 'contentTable' },
            { key: 'created_at', label: '작성 시간', thClass: 'dateTable d-none d-sm-table-cell' },
            { key: 'updated_at', label: '수정 시간', thClass: 'dateTable d-none d-sm-table-cell' },
            { key: 'liked_users', label: '좋아요 수', thClass: 'likeTable' },
          ],
        }

if(to.matched.some(record => record.meta.requiresAuth))

 

💜11/23

✅ 회원가입 시 불가능한 입력값 걸러내기 - javaScript의 includes와 in의 차이

어떤 값이 리스트 안에 존재하는지 보기 위해선 in이 아니라 incldues 사용해야한다.

in은 인덱스가 있는지 본댄다...

https://stackoverflow.com/questions/50547523/how-can-i-use-javascript-to-test-for-password-strength-in-a-way-that-returns-the

How can I use JavaScript to test for password strength in a way that returns the quality of the password in numeric form?

 

✅ django 시크릿 키

https://hyunalee.tistory.com/62

[Django] settings 파일에 선언한 값 가져오기

 

✅ vue에서 axios 처리 하려고했는데 movies/tarot에서 url을 나눠 보낼 수가 없어서 django에서 처리함. 오히려 django에서 하니 CORS 신경안써도 되고 좋았다.

 

💜11/24

✅ AWS배포시

https://jnj1.tistory.com/34

2. AWS EC2에 Django 배포하며 생긴 문제들 (PostgreSQL)

sudo apt-get install postgresql
sudo apt-get install libpq5
sudo apt-get install libpq-dev

이걸 입력해주고 pyenv를 설치해야만 정상 실행 된다.

 

✅ netlify.toml

1. build(환경변수 인지), redirects(새로고침 404 해결)

http://pinedance.github.io/blog/2020/09/26/Netlify-%EC%82%BD%EC%A7%88%EA%B8%B0

Netlify 삽질기

 

✅ 타로카드 화면

1. movie quotes 에서 명대사 받아옴
2. vue particle 적용
3. 배경화면 적용 ( background-image url path)

 

✅ 로그인 <-> 회원가입 라우터 문제