우리 조 프로젝트 썸네일 !!^^
B급 감성을 다들 좋아하셔서 대환장 파티로 만들어 졌다 :)
구현예정이던
로그인 사용자 확인하여 게시글,댓글 수정,삭제 버튼 비활성화 기능이 완료 되었고
민규님이 맡아주신 로그인시 헤더의 Login이 Logout으로 비로그인 사용자 일경우 Login으로 표시되는 부분도 정상적으로 작동하게 되었다!
로그인기능 민규님 트러블슈팅 내용
token을 쿠키에 저장하여 사용하였는데, 쿠키에 토큰이 저장되어 있으면(로그인 되어있으면) 우측 상단의 LOGIN을 LOGOUT으로 바꾸고, 반대로 저장이 되어있지 않으면 LOGIN으로 표시하는 기능을 추가하고 싶었습니다.
해당 컴포넌트에서 쿠키의 변화를 알아차리고 쿠키에 변화가 생기면 리렌더링을 시켜야 제대로 작동이 되는데, 컴포넌트에서 쿠키의 변화를 알아차리게 하기가 쉽지 않았습니다.
그래서 쿠키의 변화를 감지하는 useCookie 훅을 사용해 코드를 작성하였고, 로그아웃(쿠키 삭제)시 쿠키의 변화를 감지해 LOGIN으로 변경시키는 로직은 잘 작동하였습니다.
그러나 로그인시에 쿠키가 추가되는 부분을 구현 할 때 서버와의 통신을 위해 thunk 미들웨어를 사용하였는데 useCookie는 훅이므로 thunk의 내부나 reducer의 내부에서는 사용할 수 없는 문제가 있었습니다.
그래서 react-cookie의 Cookies를 사용하여 쿠키에 토큰을 추가하였으나 이번엔 쿠키의 변화를 감지하지 못하는 문제가 생겼습니다.
토큰을 꺼내와서 훅을 사용할 수 있는 곳에서 useCookie를 사용해 변화를 감지하는 방법과 액션을 디스패치할 때 페이로드로 useCookie의 setCookie함수를 보내주는 방법으로 해당 문제를 해결할 수 있다고 생각했습니다.
둘 다 깔끔한 해결 방법은 아니였지만, 토큰을 꺼내와서 이리저리 넘겨주는 것 보다는 thunk로 setCookie함수를 넘겨주는게 낫다고 생각하여 해당 방식으로 코드를 작성하였고, 컴포넌트에서도 쿠키의 변화를 제대로 인식하여 문제가 해결되었습니다.
HTTP multipart/form-data 데이터 서버로 전송 오류 트러블 슈팅
문제 - 처음에 서버로 데이터를 전송할때 프론트에서 객체와 img파일을 그대로 전송하였는데
서버에서 제대로 수신하지 못하였음
시도- 서버에서 데이터를 받는 양식과 클라이언트에서 데이터를 전송할때의 양식을 상호 통신하면서
계속 비교,확인해 보았음 여러번의 시도를 통해 전송타입에 문제가 있음을 발견
해결방안 - 우선 넘겨줄 객체는 JSON 문자열로 변환해준 후
이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용하는 Blob 객체를 이용하여
type: 'application/json 으로 타입을 지정한후 FormData에 append 시켜주었음
전송하고자 하는 데이터의 Content-type 이 다르지만(img와 JSON)
두 종류의 데이터가 하나의 HTTP Request Body에 들어가야 하기때문에
이 2 종류의 데이터를 구분에서 넣어주는 방법으로 아래의 코드를 사용해 주었다.
headers: {
'Content-Type': 'multipart/form-data',
}
이해를 돕기 위한 코드
const formData = new FormData();
const json = JSON.stringify(payload.meme);
const blob = new Blob([json], { type: 'application/json' });
formData.append('requestDto', blob);
formData.append('data', payload.img)
