choijming21 님의 블로그

1. 문제 발생❓페이지 새로고침 시 로그인 상태가 유지되어 있음에도 불구하고, 로그인 페이지로 리다이렉트 되는 문제점!!    2. 원인 추론 🔎상태 초기화: 페이지 새로고침 시 React 상태('user')가 'null'로 초기화 되는 문제가 있는 것 같다.비동기 처리 타이밍: 'useEffect'에서 'fetchUserProfile' 함수가 완료되기 전에 라우팅 결정이 이루어지는 것 같다.에러 처리: 모든 에러 상황에서 자동으로 로그아웃 처리 제일 큰 문제는 비동기 처리 타이밍 문제인 것 같다.페이지를 새로고침 하면 React 상태가 초기화 되어 user 상태가 null이 된다. 그리고 useEffect에서 fetchUserProfile을 비동기적으로 호출하지만, 이 함수가 완료되기 전에 라우팅 결..

1. 문제 발생❓로그인 후 토큰을 제대로 받아오지 못하는 문제 2. 원인 추론 🔎API 응답 구조를 잘못 이해하여 토큰을 잘못된 키로 접근하고 있었다. 3. 해결 과정 📋'handleLogin' 함수에서 'console.log(response)'를 통해 API 응답을 확인했다.API 공식 문서를 참조하여 올바를 응답 구조를 파악했다.'response.token' 대신 'response.accessToken'으로 수정했다. const handleLogin = async (userData) => { try { const response = await login(userData); localStorage.setItem("authToken", response.accessToken); awa..

심화 주차에서는 json-server, axios, 인증인가, Tanstack query, Zustand, Tailwind 등 많은 것을 배워서 좀 어려웠던 것 같다. 최대한 배운 내용을 과제할 때 활용해봐야겠다고 생각했다. 배운 내용을 활용해 보기 위한 React 심화 주차 개인과제 주제는 무료 MBTI test 사이트를 만드는 것이였다. 흥미로운 주제였던 만큼 흥미로운 오류들도 많이 발생하였다 ㅜㅜ 그래서 오늘은 React 심화 주차 개인과제에 대해서 트러블 슈팅을 작성해보겠다!      1. 문제 발생❓로그인 및 회원가입 기능 구현 중 API 호출 시 다음과 같은 오류가 발생했다Error: Request failed with status code 400Response data: { "error": ..

비동기 프로그래밍: 자바스크립트는 비동기 작업을 통해 긴 작업이 완료될 때까지 다른 코드가 멈추지 않고 실행되도록 한다.    동기(Synchronous)특징: 작업이 순차적으로 진행되며, 하나의 작업이 끝나야 다음 작업을 수행할 수 있다.문제점: 네트워크 요청이나 파일 읽기 같은 작업이 오래 걸리면, 그 작업이 끝날 때까지 나머지 코드가 실행되지 않는다. 비동기(Asynchronous)특징: 오래 걸리는 작업이 끝나길 기다리지 않고, 다른 작업을 먼저 진행할 수 있다.장점: UI가 멈추지 않고 사용자에게 빠르게 반응할 수 있는 애플리케이션을 만들 수 있다.     비동기 작업을 동기적으로 처리하기!async / await 문법: 자바스크립트에서 비동기 작업을 처리하기 위한 최신 문법이다! 기본적인 작동..