개발일기

트러블 슈팅(카카오톡 공유하기 시 뒤로가기 이슈) ① 문제 카카오톡의 공유하기 버튼을 눌러 상세 게시글을 공유하고, 그 공유된 페이지에서 뒤로가기 버튼(전체 게시글로 돌아가는)이 작동하지 않음. ② 원인 카카오톡의 공유하기 기능 외에도 핸드폰 내부의 공유 버튼을 사용해 우리 페이지를 공유하려고 시도했을 때, 뒤로가기가 정상적으로 작동하지 않았음. 비슷한 기능을 가진 다른 웹 사이트에서는 페이지 이동이 제대로 이루어졌으며, 이를 통해 페이지 라우팅에 문제가 있을 것으로 판단함. ③ 해결 뒤로가기 기능이 navigate(-1)로 구현되어 있었고, 이전 페이지로 이동하는 역할을 하고 있었으며, 공유하기 기능은 이전 페이지가 없었으므로 페이지 이동이 실행되지 않았음. 게시글 전체 목록이 있는 (”/posts”)..

트러블 슈팅(Token 재발급 후 페이지 이동 이슈) ① 문제 axios interceptors를 사용해 axios가 서버로 HTTP 요청을 보내기 전, refresh Token으로 만료된 access Token을 재발급 받도로록 구현함. try catch문을 사용해 에러가 발생했을 때는 쿠키에 저장된 refresh Token과 로컬스토리지에 저장된 access Token을 모두 지우고 로그인 화면으로 이동하도록 useNavigate를 사용했는데, 페이지 이동이 되지 않는 이슈가 발생함. ② 시도 1) 토큰 재발급 코드 위치 변경 : axios interceptors → Layout axios interceptors는 useNavigate가 실행되지 않아 모든 페이지에 영향을 주는 Layout으로 옮겨서..

트러블 슈팅(프로필 사진 put 적용 이슈) ① 문제 마이페이지 프로필 사진을 수정하지 않았는데도 사진 수정 API가 동작함. 사진을 수정할 때도 API가 두번 동작함. ② 원인 useEffect가 1) 컴포넌트가 마운트될 때, 2) 이미지 수정 시 useState가 업데이트 될 때, 두번 실행돼서 발생함. ③ 해결 이미지 업데이트와 관련된 useState를 새로 생성해서, true일때만 수정이 동작하도록 useEffect를 수정함. const [isUpdate, setIsUpdate] = useState(false); // 사진 업데이트 상태 useEffect(() => { // 컴포넌트가 마운트 될 떄 // upLoadImage가 변경될 떄 if (isUpdate) { putUpdateProfileH..

enter 눌러서 로그인하기 // useRef 사용 import { useRef } from "react"; export default function LoginPage() { const loginButtonRef = useRef(); // 사용자가 Enter 키를 눌렀을 때 로그인 실행하는 함수 const handleEnterKey = (event) => { if (event.key === "Enter") { loginButtonRef.current.click(); } } } // onKeyPress 추가하기 return ( ; // loginButtonRef 연결 )

react-intersection-observer 이용한 무한 스크롤 구현 import { useInView } from "react-intersection-observer"; // 무한스크롤 // ref : 관찰할 객체 // inView : ref가 화면에 보이면 true로 변경됨 const [ref, inView] = useInView(); const [page, setPage] = useState(0); // 페이지 수 관리 const [likeList, setLikeList] = useState([]); // get으로 가져온 사용자별 좋아요 게시글 데이터(getLikeList) // GET : 사용자별 좋아요 게시글 가져오기 const getLikeList = async () => { try {..

JWT Access Token / Refresh Token 구현 axios interceptors를 사용해 axios가 서버로 HTTP 요청을 보내기 전, refresh Token으로 만료된 access Token을 재발급 받도로록 구현 // accessToken 재발급 axiosInstance.interceptors.response.use( (response) => { return response; }, async (error) => { // 액세스 토큰 만료됐을 때, if (error.response.data.status === 500) { const refreshToken = getCookie("refreshToken"); // 리프레시 토큰 가져오고, localStorage.removeItem("..