choijming21 님의 블로그

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 아이콘 라이브러리를 사..

작성 폼 페이지 기능 구현을 거의 다 완성하였지만 문제점이 생겼다.... 오늘은 그것에 대해서 어떻게 해결했는지 블로그에 담아보겠다!!     React에서 게시글 수정 시 이미지 파일 처리 문제와 해결 방안  1. 문제 상황게시글 작성과 수정시 모든 필드(이미지 포함)에 대한 빈칸 유효성 검사를 구현했다.수정 시 기존 이미지 파일을 Supabase에서 불러오는데 어려움이 있었다.이로 인해 사용자가 이미지를 변경하지 않더라도 새 이미지를 업로드 해야만 유효성 검사를 통과할 수 있는 문제가 발생했다. 2. 원인 분석Supabase에서 이미지 파일 자체를 불러오는 것이 기술적으로 복잡했다.파일 시스템이나 스토리지 서비스에서 직접 파일을 가져오는 것은 보안 및 성능 이슈를 이야기 할 수 있다. 3. 임시 해결..

내가 맡은 부분은 작성폼 페이지이다! 오늘은 작성폼 페이지 기능구현에 대해서 블로그를 써보겠다.          1. 상태 관리일단 상태관리는 useState 훅을 사용하여 폼데이터를 관리한다. 각 입력 필드에 대한 상태를 하나의 객체로 관리하고 있다.const [formData, setFormData] = useState({ storeName: '', image: null, address: '', region: '', rating: '', review: ''});     2. Context 사용PostContext를 통해 전역 상태를 관리하고 있다. 이를 통해 게시물 목록을 업데이트할 수 있다.const { posts, setPosts } = useContext(PostContext);   ..

오늘은 알고리즘 코드카타 문제를 풀어보겠다~~!!요즘 팀프로젝트 때문에 바빠서 알고리즘 문제를 풀었어도 블로그에 올리지 못했다ㅜㅜ     Q. 약수의 개수와 덧셈두 정수 left 와 right 가 매개변수로 주어집니다. left 부터 right 까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return하도록 solution 함수를 완성해주세요. 1 ≤ left ≤ right ≤ 1,000 leftrightresult131743242752  다음 표는 13부터 17까지의 수들의 약수를 모두 나타낸 것입니다.수약수약수의 개수131, 132141, 2, 7, 144151, 3, 5, 154161, 2, 4, 8, 165171, 172 따라서, 13 + 14 ..

뉴스피드란?뉴스피드(Newsfeed)는 소셜 미디어나 콘텐츠 폴렛폼에서 사용자에게 최신 정보나 업데이트를 실시간으로 보여주는 기능을 말한다. 페이스북이나 인스타그램의 홈 화면을 떠올리면 된다.     오늘은 리액트 첫 팀프로젝트이다. 바로 뉴스피드를 만드는 것이다. 내가 팀장이라서 떨린다.......>_  뉴스피드 기능을 사용해 우리 8조는 맛있는 경험을 다른 사람들과 공유하고, 새로운 맛집을 발견할 수 있는 플랫폼을 만들 것이다. 사용자들이 올린 최신 맛집 리뷰, 추천, 사진 등이 실시간으로 업데이트되어 피드 형태로 보여지게 된다. 이를 통해 사용자들은 다른 사람들의 맛집 경험을 쉽게 확인하고, 새로운 맛집 정보를 빠르게 얻을 수 있게 된다!     기획안1. 와이어 프레임피그마를 사용하여 대략적인 와..