👋 U HWA ~ 프로젝트 5일차

📂 FRONTEND

💬 댓글 수정/ 삭제

첨에 도대체 comment_id값을 어떻게 받아오는건지를 모르겠어서 주소창에서 받아온다고 가정했는데 생각해보니^^ 내가 몇번째 댓글을 삭제할 줄 미리 알고 주소창에 아이디가 있겠냐고.. 슬프다 짧은 생각.. 그래도 만약에 있다? 하면 이제 이렇게 하면 됨 ㅎㅅㅎ

• 주소창에 파라미터가 2개이상일때 파라미터 받는 방법

let url = window.location.search;
console.log(url)
let urlparam = new URLSearchParams(url);
console.log(urlparam)
// var product_id = urlParameter.split('=')[1]
var product_id = urlparam.get("product_id")
var comment_id = urlparam.get('comment_id')
console.log(product_id)
console.log(comment_id)

➜ 요렇게 주소창에서 받아온 id값을 url에 넣어줘서 삭제요청을 처리했다

 const url = `${BACK_END_URL}/products/${product_id}/comment/${comment_id}/`;
    console.log(url)
    const response = fetch(url, {
                    headers: {
                        "content-type": "application/json",
                         "Authorization": "Bearer " + localStorage.getItem("access")
                             },
                    method: "DELETE"
                    }).then(respon => {
              if (respon.status == 204) {
                                            alert(respon.status);
                                        }
            else {
                    alert("삭제되지 않았습니다 다시해")
                 }

    //           if (!response.ok) {
    //             alert("댓글 삭제 실패..!");
    //             return;
    //           }

• 인자값을 어디서 받아오냐의 차이라서 기본적으로 함수 구조는 같다. 다만 바뀌는 건 댓글 조회에서 ajax로 찍어준 comment_id값을 그 다음부터 정의하는 함수에서는 사용할 수 있단 것
  <i class="bi bi-trash3"></i>
  ➜ 요렇게 받아올 수 있다는 놀라운 사실... wow
  async function deleteComment(comment_id)
  ➜ 요렇게 인자값으로 넣어준당
  ➜ editComment랑 putComment도 마찬가지!

➕ Javascript URL 파라미터 가져오기

• let url = document.location.href; url 전체
  = let query = window.location.search; ?로 사직하는 쿼리 부분만
• let query = window.location.search;
  let param = new URLSearchParams(query);
  let id = param.get('id'); id = 이후에 있는 파라미터 값 가져오기
  https://europani.github.io/javascript/2021/06/25/031-URL-parameter.html

➕ GET 방식 파라미터 여러개 전달하기

• http://test.co.kr/?id=hello&&pw=world

💬 회원정보수정

❌회원정보수정하는데 phone이 default='-'로 설정되어있어서 사진만 입력해서 수정하려고하면 수정된 정보가 저장이 안됐다. 근데 진짜 디폴드값이라서 그런가??? 왜 그걸 ... 입력해야만 하는거지..??? 주소도 디폴트가 있는데 ................. 걔는 입력 안해도 그냥 - 이렇게 유지되는데 뭐지 밸리데이터때문인가? 근데 오류가 나는 게 아니라 그냥 저장이 안되는건지 오류가 난건가아니 결과적으로는 오류가 맞지 그치 오류지?????????????그치 저장을 하도록 했는데 못하는거니까 이제 오류가 뭔지도 모르겠네
❌그리고 회원정보를 수정하고나면 비밀번호가 한번 더 해싱돼서? 저장돼서 다시 로그인이 안됐다 ㅋㅋㅋㅋ 이거 뭐였지 다시 물어봐야겠다 시리얼라이져 exclude에 password넣어놔서 password값이 아예 없었던 것 같은뎀..

---

📂 BACKEND

📄 댓글 수정/ 삭제

진짜 프론트에서 작업하려면 백에서 정보를 잘 담아서 줘야하는구나하는 걸 절실하게 깨달았다.. 안주는데 어떻게 보여줘.. 그래서 커멘트시리얼라이져를 이렇게 저렇게 바꿔서 하는데 진짜 머리 안돌아간다
✔️ 댓글을 조회할 때는 '이미 작성된 댓글 리스트'가 보여지는 거라서 우리 프론트 HTML 기준으로 프로필 사진, 프로필 이름, 작성한 댓글 내용, 생성일자, 평점 정보가 필요했다

class CommentsSerializer(serializers.ModelSerializer):
    user=UserCommentSerializer()
    class Meta:
        model = Comments
        fields = ("id", "comment", "grade", "user", "created_at")

✔️ 댓글을 생성할 때는 이미 로그인한 유저가 하는 댓글을 작성하는 거라서 백에서 받아오는 정보는 유저 정보뿐이고 그것도 페이로드 커스텀으로 추가적으로 (유저에 대해서는 자유롭게??(유저모델한정❓)) 가져올 수 있는 정보라는 거? 그래서 이건 프론트에서 프로필 사진, 프로필 이름, 작성한 댓글 내용, 생성일자, 평점 를 백으로 넘겨줘서 DB에 저장하는 거
근데 첨에 사용했던 시리얼라이져에는 유저의 프로필이름은 메소드필드로 가져왔는데, 사진까지 가져오려고 메소드 필드를 유저에 대해서 한번 더 써줬더니(같은 모델에 대해서도 두번써줄 수 있다고!!) encode에러가 났다 결국 이미지가 없어서 디코드할 게 없었던거였던 것 같다.
그래서 결국 CommentCreateSerializer를 새로 만들어서 댓글과 평점 정보만 넘겨주면 되도록 했다.

class CommentCreateSerializer(serializers.ModelSerializer):
    class Meta:
        model = Comments
        fields = ("comment", "grade",)

✔️ 댓글을 수정할 때는 평점은 수정이 안되고 댓글만 수정이 되도록 했는데 원래 사용했던 CommentsSerializer는 유저 정보를 요구했다. 그래서 결국 작성할때와 마찬가지로 CommentCreateSerializer를 사용했고 partial=True 옵션을 줘서 둘중 하나만 입력해도 되도록 코드를 수정했다

def put(self, request, product_id, comment_id):
        comment = get_object_or_404(Comments, id=comment_id)
        serializer = CommentCreateSerializer(comment, data=request.data, partial=True)
        if serializer.is_valid():
            serializer.save()
            return Response({"message": "해당 글이 수정되었습니다.", "data": serializer.data}, status=status.HTTP_201_CREATED)
        else:
                return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

➜ comment: DB에 저장되어있던 원래 코멘트값 | data=request.data: request값으로 들어온 수정된 댓글 값 | partial=True 필드값을 부분적으로 입력해줘도 됨

📄 status code 204 no content

• 클라이언트의 요청은 정상(그래서 200대) - HTTP Response body가 아예 존재하지 않음
• 보통 HTTPMethod가 DELETE일 때 HTTP Response body가 있는 것이 무의미할 때 사용(그래서 보여주지 않음)
• 응답이 null/false인 것과 다름
• 삭제 요청으로 자원을 삭제하여 더 이상 존재하지 않고 그 자원을 참조하는 모든 자원도 삭제되어 더 이상 HTTP body를 응답하는 것이 무의미해졌을 때 사용

---

📂 git

git push하는데 무슨 문제가 있다? 브랜치 메인이랑 병합하는 게 제일 빠름
근데 생각해보니까 또.. 생각만 하면 생각이 나는데 안났던 건 기본적으로 생각을 안하고 사는건가... 무튼 예전에 깃 강의 들었을 때 로컬에서도 머지를 잘 해줘야된다는 식으로 얘기했었던 것 같다

그리고!!! 컨플릭트 해결하고나면 add랑 commit 꼭 해주자 그래야 알록달록 똥그라미들 사라진다.. 이번에 하도 resolve conflict 많이해서 이제 컨플릭트 뭐.. 그냥 그러려니.. 한다 좀 겁이 덜난다고 해야하나 좋은거겠지?? 전엔 진짜 깃 너무 무서웠는데 다행임