TIL | 11.28.월 [DRF / Deep Learning / JS]

(B2 | 5_team_project)

 

- 트러블 슈팅

 

1. 댓글 수정 문제

문제

• 백엔드에서 정상 동작을 Postman으로 확인 하였으나 프론트에서 동작을 못함
• 원인: 생성된 댓글의 id값을 프론트에서 불러오지 못해 수정 기능이 동작을 못함

해결

• detail페이지에서 get 로드 할 때

onclick="location.href='edit_comment.html?comment_id=${element.id}'"

commenteidtbtn.onclick = function() {
            localStorage.setItem("comment_id",element.id)
            window.location.href = "edit_comment.html"
        }

let getLink = window.location.search;    
    let getCode = getLink.split('=');    
    let commentEditId = getCode[1];
    let comment_article_id = localStorage.getItem('article_id')

const response = fetch(`${main_url}/articles/${comment_article_id}/comment/${commentEditId}/`,{

id 값을 받아 수정할 수 있게 코드 수정하여 해결

 

---

2. 이미지 전송 문제

문제

• 프론트에서 입력 받은 이미지를 백엔드로 보낼 때 이미지를 읽어오지 못함

해결

• form data 형식으로 보낼 때 getelementId로 받아오면 파일을 읽지 못해서 queryselector로 변경하여 읽어옴 

  

 

---

 

3. 특정 유저의 게시글만 가져오기

문제

• 전체 사용자가 올린 모든 게시글은 불러와지지만 내가 원하는 유저가 올린 게시글만 가져오는 것이 안됨
• 원인: payload값에 article_user값을 바로 불러오지 못함

해결

• 새로운 변수를 배열로 선언해 그 안에 'article_user == userId' ← 해당 조건을 만족하는 user의 element만 넣어줘서 가져올 수 있게 만들어줌

var my_articles = new Array
    response_json.forEach(element => {
        if (element.article_user == userId){
            my_articles.push(element)
        }
    })

 

---

 

 

4. token 있을 때 signin 접속시 오류 발생

문제

• 토큰 체크후 signin 접속시 메인 페이지로 접속하는 기능 구현 후 로그인이 안되는 이슈 발생
• 원인: 토큰을 가지고 signin 페이지에 접속했을 때 프론트에서 post를 통해서 토큰 확인 후 page reload 를 함

해결

• 기능을 구현하는 중에 post 에 로그인과 로그인체크를 함께 보내서 로그인이 되지 않는 문제를 로그인 체크는 get 으로 요청을 보냄

해당 커밋

!HOTFIX 오류 주석처리 #10

[fix] 회원로그인 시 분기처리 에러 #11

 def get(self, request):
        # token 있는데 signin.html 접속할 때
        try:
            access_token = request.headers['Authorization']
            if request.headers['Authorization'] is not None:
                token = request.headers['Authorization']
                refresh_token = str(token)
                access_token = str(token)

                if access_token:
                    return Response(
                        {
                            "refresh" : refresh_token,
                            "access": access_token
                        }, status=status.HTTP_200_OK)

        except:
            return Response({"message": "KEY_ERROR"}, status=400)

 

---

 

 

5. 팔로워 팔로잉 수 serializer

문제

• 유저간의 팔로우 기능을 위한 여러가지 데이터들을 하나의 시리얼라이저로 처리하여 전송해야했음
• 같은 user 모델을 서로 참조하는 followings manytomany 필드

해결

• SerializerMethodField를 사용하여 모델에 없는 필드를 추가하거나 있는 값을 변형해서 새로운 필드값을 만들 수 있음
• 팔로잉 수는 followings필드의 count, 팔로워 수는 오브젝트의 역참조로 불러온 리스트의 길이를 반환