오류1. localStorage에 토큰을 저장했는데도 자꾸 새로고침하면 로그아웃됨. 하지만 localStorage에 토큰값은 그대로 있음.
- 오류가 난 이유
이 문제는 loginCheckDB부분에 로직에 오류가 있었다.
그래서 로그인을 했는데도 else에 있는 로그아웃이 실행됐던 것이다.. 😢
//Before 코드(오류가 있던 코드)
const loginCheckDB = () => {
return function (dispatch, getState, { history }) {
//const userId = localStorage.getItem("userId");
const userId = localStorage.getItem("token");
const tokenCheck = document.cookie;
if (tokenCheck) {
dispatch(setLogin({ id: userId }));
} else {
dispatch(logOutDB());
}
};
};//After 코드(오류 수정 코드)
const loginCheckDB = () => {
return function (dispatch, getState, { history }) {
const tokenCheck = localStorage.getItem("token");
if (tokenCheck !== "undefined" || tokenCheck !== null) {
dispatch(setLogin({ id: tokenCheck }));
} else {
dispatch(logOutDB());
}
};
};- 해결방안
-
const userId = localStorage.getItem("userId"); -> 이부분에서 userId가 암호화 되있지 않으면 localStorage에 저장하면 좋지않다는 튜터님의 말씀을 듣고 token값으로 수정했었다. 생각해보면 토큰으로만 체크하면 되기때문에 userId변수도 결국 필요없게 되서 아예 삭제해줬다.
-
const tokenCheck = document.cookie; -> token은 쿠키에서 localStorage 저장으로 바꿨는데 쿠키에서 찾아오게끔 되있어서 loclalStorage.getItem으로 수정했다.
-
if (tokenCheck) {
dispatch(setLogin({ id: userId })); -> 이제 userId로는 체크하지 않기때문에 토큰값이 undefined이거나 null이 아닐경우 token값을 setLogin에 담아서 로그인하게끔 수정했다.
오류2. formData에 넣은 image와 content 값이 서버에 보내지지 않음
- 오류가 난 이유
이 문제는 내가 서버에 key값을 잘못 보내서 생긴 오류였다.
//Before 코드 (오류 수정 전 코드)
const fileUploadHandler = () => {
const file = fileInput.current.files[0];
//console.log("file", file);
const formData = new FormData();
formData.append("file", file);
formData.append("content", content);
//console.log("formData", formData);
const token = localStorage.getItem("token");
//console.log(token);
axios
.create({
baseURL: "http://13.125.63.44",
})
.post("/api/posts/create", formData, {})
.then((res) => {
//console.log(res);
history.push("/");
dispatch(imageCreators.setPreview(null));
})
.catch((err) => {
console.log(err);
});
};//After 코드 (오류 수정 코드)
const fileUploadHandler = () => {
const file = fileInput.current.files[0];
console.log("file", file);
const formData = new FormData();
formData.append("img", file);
formData.append("postContents", content);
console.log("formData", formData);
const token = localStorage.getItem("token");
console.log(token);
axios
.create({
baseURL: "http://13.125.63.44",
headers: {
"Content-Type": "multipart/form-data",
Authorization: `Bearer ${token}`,
},
})
.post("/api/posts/create", formData, {})
.then((res) => {
console.log(res);
history.push("/");
dispatch(imageCreators.setPreview(null));
})
.catch((err) => {
console.log(err);
});
};
- 해결방안
-
api 설계서에 headers에서 토큰값도 보내야 된다고 되있었다. 근데 토큰값 보낼때 Bearer이 붙어서 보내져야한다해서 이부분 형식을 조금 고민하고 headers 위치도 고민했었다.. axios api 모듈 만들어놓은 곳에 모양처럼 똑같이 해봐야겠다 싶어서 baseURL아래에 넣었다. 그리고 Bearer 붙여서 토큰보낼때 Authorization:
Bearer ${token}이렇게 해주면 된다.
headers 이부분은 사실 계속 맞는건가 확신이 없었는데 잘되서 아 폼데이터는 이렇게 보내는 거구나 깨닫게 된 케이스다... 😉 -
사실 처음에 전주차때 파일업로드 했던 코드보고 formData.append("file", file); formData.append("content", content); 이렇게 지정해줬는데 "file", "content" 이부분이 api설계때 정한 키값이 들어가는 것일줄이야...! 나중에 그걸 알고 api설계대로 "image", "postContents"로 바꿨는데 그래도 안되서 너무 당황스러웠지만 알고보니 "image"->"img"였다! ㅎㅎ
오류3. 작성하기를 완료했더니 image가 보이지 않았다.
-
오류가 난 이유
이 문제는 이미지 경로 문제였다...! 서버에서 받은 경로로는 내 로컬에서 당연히 확인할 수 없었다.. -
해결방안
서버에서 받은 이미지경로에 배포된 서버 IP주소를 붙여서 이미지 경로를 맞춰줬다.
const ip = "http://13.125.63.44";
const img = props.postImg;
const imageUrl = ip + img;
return (
<React.Fragment>
... 생략 ...
{/* 사진 */}
<Grid>
<Image shape="rectangle" src={imageUrl} />
</Grid>
... 생략 ...
</React.Fragment>
)오늘 파일업로드 해결하면서 지난주보다는 수월하게 끝낸 내 자신에게 칭찬을...ㅎㅎ
지난주는 파일과 content내용을 한번에 못보내서 두번 보내는 비효율적인 로직으로 진행했었는데.. 드디어 한번에 보내게됐다. 이번 프로젝트를 통해서 파일업로드가 어느정도 감이 잡힌거같아 너무 좋다!! 🙂
그리고 지난주와는 다르게 기능 만드는 속도가 빨라져서 그런지 프로젝트를 재밌게 하고있다. 기능 완성되면 뿌듯하고 재밌다는걸 요즘 느낀다...!😉
