20221226 TIL

오늘의 한 일

• 최종 프로젝트 - 피드백 반영

 

오늘은 몸이 영 안좋아서 많은 일은 못했고, 웹페이지 기능 점검과 피드백 반영을 조금 봄..

 

 

 

피드백 1 : 피부병변 감지 - 로그인이 없이도 들어가져서 통일감이 없다(로그인 필요 컨텐츠 관련)

 

피부병변 감지는 비로그인 유저도 가능하게 하는것이 의도였으므로 패스

굳이 해야한다면 토큰 검사 후 없을 시 로그인페이지로 replace

 

 

피드백 2 :  회원가입시 유저의 프로필 디폴트 이미지가 있었으면 좋겠다

 

이게 개발과정중에는 있었는데 백엔드 배포과정에 첨가되지 않아서 들어가질 않고있었다!

 

ec2 내로 이미지 업로드해서 백엔드의 media/profile 폴더로 default.jpeg 이미지 삽입하면 될듯

 

 

참조 : https://velog.io/@_koiil/EC2%EB%A1%9C-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C

EC2로 파일 업/다운로드

 

 

 

피드백 3 : 페이지네이션 페이지 구분 필요

 

현재 페이지를 페이지네이션 바 내에서 확인하고 싶다는 피드백이 들어와서 어떻게 만들어야 좋을지 구상해보았다.

 

 

before

 // 페이지네이션 페이지 생성하기 //
    for (let i = firstNumber; i <= lastNumber; i++) {
      let temp_html = `
      <li class="page-item"><a class="page-link" href="?page=${i}">${i}</a></li>
      `
      
      $('#pagination').append(temp_html)
    }
  };

 

after

 // 페이지네이션 페이지 생성하기 //
    for (let i = firstNumber; i <= lastNumber; i++) {
      let temp_html = `
      <li class="page-item"><a class="page-link" id="${i}" href="?page=${i}">${i}</a></li>
      `
      
      $('#pagination').append(temp_html)
    }
  };
  
  const NowPage = document.getElementById("page_id")
  Nowpage.setAttribute("style", "원하는 css스타일링")

 

각 버튼에 페이지 넘버를 id로 부여하고, 페이지 아이디만 따로 떼와서 setAttribute를 주는 방식으로 해결완~

 

 

 

그 외에는 대부분 css에 관한 내용이였다.. 적당히 단정하게 마무리 짓고 이제 발표준비하면 될듯

 

 

 

 

트러블슈팅

 

1)

피드백중 글쓰기, 프로필 변경 등등 csrf 토큰 인증이 안되면서 써지지 않는다는 얘기가 몇개 있었는데,

이는 로그아웃을 하지 않고 웹사이트를 종료함으로 로컬스토리지에 만료된 토큰이 사라지지 않고 남아있어 생기는 문제인 것 같다.

지금 로그인 방식으로는 이를 해결할 방도가 딱히 없는것같은데 jwt를 로컬스토리지에 저장하는 방식이 통상적으로 쓰이는 로그인 방식인지 생각해 볼 필요가 있는 것 같다

 

 

2)

웹 배포 환경에서 사진 없이 글을 썼을때 400에러

로컬환경때는 분명히 잘 됐는데 왜지?

 

async function postArticle() {
  const title = document.getElementById("title").value;
  const content = document.getElementById("content").value;
  const image = document.getElementById("image").files[0];
  const category = document.querySelector('input[name="category"]:checked').value;

  const formdata = new FormData();

  formdata.append("title", title);
  formdata.append("content", content);
  formdata.append("category", category);
  if (image!=null){
  	formdata.append("image", image);
    }

  const response = await fetch(`${backend_base_url}/articles/`, {
    headers: {
      Authorization: "Bearer " + localStorage.getItem("access"),
    },
    method: "POST",
    body: formdata,
  });

  response_json = await response.json();
  console.log(response_json);

  if (response.status == 201) {
    alert("게시글 작성 완료!");
    window.location.replace(`${frontend_base_url}/main.html`);
  } else {
    alert(response.status);
  }
}

대충 이런식으로 이미지가 없을 시에는 폼데이터에 append하지 않는 식으로 하면 되려나?