게시글 관련 오류(useCallback)
* 오류
1) 리트윗하거나 새로운 게시글을 생성, 삭제 시 "좋아요"나 "북마크" 버튼을 누를 경우 게시글을 정확히 찾지 못함
리트윗하거나 새로운 게시글을 생성할 때 게시글이 100인 경우
좋아요나 북마크 버튼을 누를 경우 99나 101과 같이 정확히 100을 찾지 못함
▶ 리트윗, 게시글 생성 및 삭제 모두 기존 post값(본인의 경우 mainPosts라고 사용)이 늘어나거나 줄어들게 만드는 작업들
▶ post값을 기반으로 하는 postId(post.id)값도 변경되야 함
▶ 따라서useCallback의 두 번째 인자를 빈칸이 아닌 [postId]를 넣음
//예시
const onLike = useCallback(() => {
dispatch(likePostRequest(postId));
}, [postId]);
* useCallback 자체가 함수의 불필요한 렌더링을 방지하고 함수를 기억하기 위함, 두 번째 인자에 바뀔 여지가 있는 데이터를 넣어줌
▶ 컴포넌트가 처음 마운트되었을때 해당 함수의 메모리 주소를 참조하고 디펜던시의 값이 변경되었을때 새로 함수객체를 생성해냄
▶ 두 번째 인자가 비어 있으면 첫 값이 계속 유지됨
* 적용 전
▶ 게시글 삭제 후 게시글을 찾을 수 없다는 알림이 뜸
* 적용 후
2) 변수명이 겹칠 경우
▶ 참고한 블로그
import { HeartIcon, BookmarkIcon, } from "@heroicons/react/24/outline";와
import { HeartIcon BookmarkIcon } from "@heroicons/react/24/solid";가 서로 변수명이 겹침
해결책 : as 사용
import {HeartIcon as SolidHeartIcon, BookmarkIcon as SolidBookmarkIcon} from "@heroicons/react/24/solid";
3 쿠키가 남아있어 생기는 오류
▶ loadWordsRequest()의 값을 가져올 때 login한 id의 값을 기준으로 정보를 가져옴
▶ 로그인하지 않았으나, 이전 기록으로 인해 쿠키가 남아있는 경우 오류 발생
▶ backend 서버 킬 때 쿠키를 삭제하게 함(물리적으로 새로고침을 해야 함)
app.get("/", (req, res) => {
res.clearCookie("connect.sid"); //직접 backend쪽 서버에서 실행해야 함
req.session.destroy();
res.send("hello express");
});
* 오류 코드
'<!DOCTYPE html>\n' +
'<html lang="en">\n' +
'<head>\n' +
'<meta charset="utf-8">\n' +
'<title>Error</title>\n' +
'</head>\n' +
'<body>\n' +
'<pre>TypeError: Cannot read properties of undefined (reading 'id')<br> at C:\\Users\\131ji\\OneDrive\\바탕 화면\\Project\\engWord_next\\prepare\\back\\routes\\words.js:13:33<br> at Layer.handle [as handle_request] (C:\\Users\\131ji\\OneDrive\\바탕 화면\\Project\\engWord_next\\prepare\\back\\node_modules\\express\\lib\\router\\layer.js:95:5)<br> at next (C:\\Users\\131ji\\OneDrive\\바탕 화면\\Project\\engWord_next\\prepare\\back\\node_modules\\express\\lib\\router\\route.js:144:13)<br> at Route.dispatch (C:\\Users\\131ji\\OneDrive\\바탕 화면\\Project\\engWord_next\\prepare\\back\\node_modules\\express\\lib\\router\\route.js:114:3)<br> at Layer.handle [as handle_request] (C:\\Users\\131ji\\OneDrive\\바탕 화면\\Project\\engWord_next\\prepare\\back\\node_modules\\express\\lib\\router\\layer.js:95:5)<br> at C:\\Users\\131ji\\OneDrive\\바탕 화면\\Project\\engWord_next\\prepare\\back\\node_modules\\express\\lib\\router\\index.js:284:15<br> at Function.process_params (C:\\Users\\131ji\\OneDrive\\바탕 화면\\Project\\engWord_next\\prepare\\back\\node_modules\\express\\lib\\router\\index.js:346:12)<br> at next (C:\\Users\\131ji\\OneDrive\\바탕 화면\\Project\\engWord_next\\prepare\\back\\node_modules\\express\\lib\\router\\index.js:280:10)<br> at Function.handle (C:\\Users\\131ji\\OneDrive\\바탕 화면\\Project\\engWord_next\\prepare\\back\\node_modules\\express\\lib\\router\\index.js:175:3)<br> at router (C:\\Users\\131ji\\OneDrive\\바탕 화면\\Project\\engWord_next\\prepare\\back\\node_modules\\express\\lib\\router\\index.js:47:12)</pre>\n' +
'</body>\n' +
'</html>\n