본문 바로가기

프론트엔드로 가는 길/portfolio 제작 여정기 👩🏻‍💻16

01.PetDiary_카카오 소셜로그인 보호되어 있는 글 입니다. 2023. 12. 15.
10. 자살예방웹사이트 - 속성오류 이 경고는 React가 인식하지 못하는 isOpen 속성(또는 prop)이 DOM 요소에 전달되었을 때 발생합니다. React는 커스텀 속성을 자동으로 인식하지 않으며, 컴포넌트에서 사용해야 합니다. const NavWrapper = styled.div` /* 스타일과 위치 설정은 필요에 따라 조절하세요. */ width: 80%; height: 100%; padding: 20px; position: fixed; top: 0; left: ${({ isOpen }) => (isOpen ? "0" : "-80%")}; background-color: ${({ theme }) => theme.color.mainWhite}; transition: left 0.3s ease-in-out; z-index: 1000.. 2023. 10. 4.
08. 자살예방웹사이트 - 게시글 수정페이지 value값 넣기 게시글 수정 어떻게하지 고민해보자.. 음.. postId로 내 게시글을 작성하던 시점으로 돌아가서 기존에 저장된 데이터를 value에 보여주면 되지않을까? 일단 내가 하고 싶은 건 게시글 작성 폼으로 다시 돌아가서 수정하게 하는 것 [Cloud FireStore - posts Data] [EditPostForm] 난 참 비동기가 헷갈린다. 확실히하고 넘어가야겠다. useEffect(() => { // Firebase Firestore에서 해당 게시물의 정보를 가져오는 비동기 함수 async function fetchPost() { try { const postRef = doc(collection(db, "posts"), postId); const docSnap = await getDoc(postRef);.. 2023. 9. 14.
07. 자살예방웹사이트 - redux-persist 로그인 유지 나는 처음..토큰을 리덕스에 저장했다. 그래서 새로고침 시 로그아웃이 됐다..새로고침 시 로그아웃...로그아웃.. 계속 로그아웃 왜? 리덕스의 상태가 메모리 내에서만 유지되기 때문이었다. 리덕스 상태는 브라우저의 메모리에 저장되고, 새로고침하거나 페이지를 닫고 다시 열면 리덕스 상태가 초기화된다. 그래서 -> 브라우저 저장소를 사용 -> 쿠키 사용 -> 페이지 로드시 토큰 재요청 방식이 있었는데 나는 브라우저 저장소 사용으로 redux-persist를 선택했다. Redux-Tookit 개념 정리 [userLoginAccessTokenSlice.tsx] import { createSlice, PayloadAction } from "@reduxjs/toolkit"; const initialState = "".. 2023. 9. 12.