개인이 학습할 내용을 정리할 스터디를 만들고 하루동안 수행할 공부를 관리하며 집중 타이머 기능을 제공해 잘 수행할 때마다 포인트를 제공하는 서비스
문제 발생 : 스터디 상세 페이지에서 useEffect에서 무한 렌더링이 되는 현상이 발생 원인 : GET 요청이 실패 할 때, 의존성 배열의 있는 값이 계속 바뀜 문제 해결 : GET 요청이 실패 할 때에는 렌더링이 반복되지 않도록 수정
export const StudyPage = () => {
const { id } = useParams();
const [studyItem, setStudyItem] = useState({ Emoticon: [] });
const [todoList, setTodoList] = useState();
useEffect(() => {
const handleStudyItem = async () => {
try {
const studyitem = await getStudyItem(id);
if (studyitem && studyitem !== studyItem) {// Get 요청이 실패 했을 경우를 대비하여 문제를 해결함
setStudyItem(studyitem);
}
} catch (error) {
console.error("Failed to fetch study item:", error);
}
};
const handleTodoList = async () => {
try {
const todolist = await getTodoList(id);
setTodoList(todolist);
} catch (error) {
console.error("Failed to fetch todo list:", error);
}
};
handleStudyItem();
handleTodoList();
}, [id, studyItem]); // studyItem이 계속 바뀌어서 무한 렌더링되는 문제 발생
문제 발생/원인 : 기존의 데이터가 삭제되어도 localstorage에 있는 데이터는 삭제 되지 않는 현상 발생 문제 해결 : utils에 localstorage를 관리하는 함수를 만들어서 렌더링 마다 검사
export const validateRecentStudies = async () => {
try {
const recentStudy = JSON.parse(localStorage.getItem(RECENTKEY)) || [];
const validStudyIds = await getStudyItemId();
const filteredStudy = recentStudy.filter((study) =>
validStudyIds.some((item) => item.id === study.id)
);
localStorage.setItem(RECENTKEY, JSON.stringify(filteredStudy));
// console.log("Recent studies validated!");
} catch (error) {
console.error("Error validating recent studies:", error);
}
};