choijming21 님의 블로그

아웃소싱 팀프로젝트(트러블 슈팅2🌟)

1. 문제 발생❓ 사용자가 마이페이지에서 프로필 사진과 닉네임을 수정한 수, Comments 컴포넌트에서 새 댓글 작성할 때 수정된 프로필 정보가 반영되지 않고 이전 프로필 정보가 남아있는 문제가 발생함.     2. 원인 추론 🔎원래 코드를 살펴보면 Comments 컴포넌트가 처음 렌더링될 때만 useAuthStore에서 사용자 정보를 가져오고 있다.이로 인해 마이페이지에서 프로필 정보를 수정해도 Comments 컴포넌트에는 반영되지 않는다.원래 코드(주요 부분)const Comments = () => { const { newComment, setNewComment, editingComment, setEditingComment } = useCommentStore(); const { token, u..

아웃소싱 팀프로젝(트러블 슈팅1🌟)

1. 문제 발생❓댓글 수정 기능 구현 중 UI 반응성 문제 발생수정 버튼 클릭 후 프로세스(문제 과정 설명)수정 후 완료 버튼 누르기수정 모드 종료기존 값 유지몇초 후 수정된 값으로 변경됨    2. 원인 추론 🔎서버 응답을 기다린 후 UI 업데이트React Query의 기본 동작을 그대로 사용원래 코드(주요 부분)const { mutate: edit } = useMutation({ mutationFn: ({ id, text }) => updateComment({ id, text }), onSuccess: () => { queryClient.invalidateQueries(["comments"]); alert("댓글이 수정되었습니다!"); }});const handleEditSubmit..

드디어 MBTI 과제를 마무리 하였다!트러블 슈팅은 다른 게시물에서 상세하게 다뤄놨으니 오늘은 만든 과제를 자랑해보겠다 ㅎㅎ                    시연 영상이다.     ...     처음 배우는 인증인가 덕분에 일주일 내내 힘들게(?) 보냈던 것 같다. 하지만 실습과 복습을 꾸준히 하면서 어느정도 개념을 익힌 것 같다! 그리고 일주일만에  tanstack query에 대해서 빠삭하게 마스터한 것 같아 뿌듯하다. 아쉽게 MBTI 테스트 사이트 만드는 과제에는 tanstack query가 들어가지 않았지만, 과제를 만들면서 틈틈히 수준별 분반 수업에서 tanstack query를 실습하고 복습했기 때문이다! tanstack query는 서버 상태를 관리하기 위한 강력한 라이브러리로, 데이터를 ..

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 문법: 자바스크립트에서 비동기 작업을 처리하기 위한 최신 문법이다! 기본적인 작동..

[1-2] 비동기1 - 비동기, promise[1-5] json-server[1-6 ~ 1-7] axios의 GET, POST, DELETE, PATCH, fetch와의 비교[1-10] tanstack query 기본 사용법 (매우중요)[1-15] zustand 기본 사용법[1-20] 인증인가 개념 실습[1-21] tailwind   [1-6 ~ 1-7] axio의 GET, POST, DELETE, PATCH, fetch와 비교 axios란?node.js 브라우저를 위한 Promise 기반 http 클라이언트라고 소개하고 있다. 즉, http를 이용해서 서버와 통신하기 위해 사용하는 패키지이다.    설치yarn add axios json-server 설정{ "todos": [ { "id..

필수 개념은 다음과 같다.[1-2] 비동기1 - 비동기, promise[1-5] json-server[1-6 ~ 1-7] axios의 GET, POST, DELETE, PATCH, fetch와의 비교[1-10] tanstack query 기본 사용법 (매우중요)[1-15] zustand 기본 사용법[1-20] 인증인가 개념 실습[1-21] tailwind  [1-2] 비동기, promise동기: 순차적으로 진행, 요청을 보내고 응답을 기다린다.(ex 주문 후, 커피가 나올 때까지 기다려주세요!  다음사람들은 아직 주문 못한 상태로 기다리는중...) 비동기: 비순차적으로 진행, 요청을 보내고 응답을 기다리지 않고 바로 다음 작업을 진행한다.(ex 주문 후, 진동벨이 울리면 커피를 가지러 오세요! 모든 사람..

오늘은 뉴스피드 팀프로젝트의 발표날이다!따라서 어제는 트러블 슈팅을 진행하였다. 3가지 오류를 발견하였는데 그 부분에 대해서 블로그에 담아보겠다! 1. 배포 시, SVG 이미지 파일이 깨지는 문제2. 수정 완료 후 마이페이지 네비게이션 문제3. 로그인 페이지에서 뒤로가기 버튼의 위치 문제  ...  1. 배포 시, SVG 이미지 파일이 깨지는 문제 문제 설명: React 프로젝트를 Vercel로 배포할 때, SVG 이미지 파일이 제대로 렌더링되지 않고 깨지는 현상이 발생했다. 이는 주로 상대경로로 설정해서 문제이거나 스타일드 컴포넌트 사용시 동적 이미지 스타일링을 해서 문제점이 발생할 수 있다. 해결 방법: Lucide 아이콘 라이브러리 사용  이 문제를 해결하기 위해 Lucide 아이콘 라이브러리를 사..