캠프 61일차

유화제작 프로젝트 4일차
조금 힘든 하루였다. 며칠전부터 감기 기운이 있어서 열도 살짝나고 목도 많이아팠다(코로나는 아니였다.. 검사도 음성이였고 애초에 일주일넘게 접촉한 사람이 없었으니까) 아무튼 감기약을 먹고 하다보니 계속 피로함을 느꼈고 집중도 잘 안됐다. 진행 속도가 조금 느려서 조급함이 없는건 아니지만 주말을 잘 활용해서 채워나가야겠다.

오늘 공부한 것

트러블슈팅

이미지를 유화로 변환해주는 함수를 처리하고 마지막에 opencv2의 imwrite함수로 이미지를 저장하는 과정에서 문제가 발생했다. 우리는 파일명을 날짜(%Y-%m-%d_%H-%M-%S)로 넣어주기 위해 다음과 같은 코드를 작성했다.

time = datetime.now().strftime('%Y-%m-%d_%H:%M:%s')
    cv2.imwrite(f'media/output/{time}.jpeg', output) 
    result = f'media/output/{time}.jpeg'

근데 오탈자도 전혀 없는데 계속 저장이 안됐다😤 time 말고 그냥 파일명을 지정해줬을때는 저장이 잘되었다. f스트링의 문제인가해서 이것저것 바꿔봤는데도 안됐다. 결국 튜터님을 찾아가서 질문을 드렸고, 다른 팀에서 비슷한 오류를 겪었다는 얘기를 해주시고 이것저것 튜터님과 같이 코드를 수정해보았다.

    ts = time.time()
    file_name = datetime.fromtimestamp(ts).strftime('%d-%m-%Y_%H-%M-%S')

    cv2.imwrite(f"media/output/{file_name}.jpeg", output) # 파일 생성
    result = f'/media/output/{file_name}.jpeg'

우선 시간값을 스트링으로 변환하기위해 time 모듈을 추가로 import해줬다. 그 외에는 다 동일.
그랬더니 파일이 잘 저장되었다. 근데 잘보면 strftime('%d-%m-%Y_%H-%M-%S') 이 부분에서 우리가 원하는 날짜 형식이랑 다른데.. 우리가 원한 형식(%Y-%m-%d_%H-%M-%S)으로 입력하면 또 저장이 안되었다. 시간이 촉박해서 형식이 달라도 파일 저장/읽어오는데 문제는 없기에 그냥 넘어가긴 했는데 프로젝트가 끝나면 어떤게 문제였는지 추가적으로 찾아봐야 할 것 같다.

댓글 기능 연동

먼저 html에 댓글을 작성할 수 있는 textarea와 댓글 등록 버튼을 생성했다.

<textarea placeholder="댓글을 입력하세요" wrap="off" id="myNote"></textarea>
<button id="send" type="button" onclick="writeComment()">댓글 등록</button>

textarea의 id="myNote"이고 button의 id="send",로 지정해주어 버튼을 눌렀을때 js에서 writeComment 함수를 동작할 수 있도록 해보자.

async function writeComment() {
  const myNote = document.getElementById("myNote");
  const comment = await postComment(article_id, myNote.value);
  loadDetailArticles(article_id);
  myNote.value = "";
}

loadDetailArticles(article_id);

writeComment()가 동작하면 해당 게시글 id와 myNote에 작성한 텍스트가 postComment에 Request로 전달되고 페이지는 loadDetailArticles(article_id)화면을 다시 띄워준다.

// 댓글 작성 //
async function postComment(article_id, myNote) {
  const commentData = {
    content: myNote,
  };
  const response = await fetch(
    `${backend_base_url}/articles/${article_id}/comment/`,
    {
      headers: {
        "content-type": "application/json",
        Authorization: "Bearer " + localStorage.getItem("access"),
      },
      method: "POST",
      body: JSON.stringify(commentData),
    }
  );

  if (response.status == 200) {
    return response;
  } else {
    alert(response.status);
  }
}

postComment에서는 프론트에서 받은 값들을 서버로 넘겨주는데 content에는 아까 받아온 myNote를 Request로 보내고, 서버의 articles/${article_id}/comment/ url로 이동하면 해당 view가 동작한다. 이후 결과가 response.status 200이라면 response값을 받아온다.
결과적으로 DB에 잘 저장되었는데 게시글 상세페이지에서 댓글이 안불러와졌다. 이 부분은 백엔드에서 특정 게시글을 불러올때 사용한 ArticleSerializer에 comment_set = CommentSerializer(many=True)를 추가해주고, 프론트에서는 loadDetailArticles 함수에서 comment_set을 불러오도록 설정해주니 해결되었다.