ijooha 님의 블로그

'무료 MBTI 검사 페이지 만들기'로 tanstack, zustand, tailwind 활용해보기GitHub 바로가기포켓몬 도감 사이트 바로가기트러블 슈팅         개요 무료 MBTI 검사 사이트이다.로그인 하여 테스트 페이지에서 자신의 성격 유형을 파악하고,결과 페이지에서 다른 사람들의 유형도 살펴볼 수 있다.숨기기 또는 공개하기를 눌러 자신의 결과를 공개하거나 숨길 수 있다. react, tanstack, zustand, axios, json-server, tailwind, react-toastify 사용• 로그인/회원가입 또는 테스트하기를 눌러 로그인 하기 (로그인 하지 않은 사용자는 접근할 수 없다.)• 테스트를 진행하고 결과 페이지에서 결과 확인하기• 검사 결과를 삭제하거나 결과의 공개 ..

깔끔하게 코드 쓰기프로젝트 링크        개요 프로젝트를 완료했지만 코드가 너무 장황하고 가독성이 떨어져 보였다. 어떻게 하면 깔끔하고 직관적으로 만들 수 있을지 고민하다가,여러 컴포넌트에서 사용한 useMutation과 useQuery를 따로 모듈로 분리해보기로 했다.         과정 💦 01 useMutation 분리 먼저 컴포넌트 안에서 사용했던 훅들은 아래와 같은 형태였다.const mutation = useMutation({ mutationFn: async () => { ... } })짧게 예시로 작성한 거라 나름 깔끔해보이지만 거의 열줄짜리 훅들이었고, useQuery와 함께 사용하거나 훅이 많아지면 굉장히 길었다. 먼저 별도의 useMutations.js 파일을 만들고, Mutati..

invalidateQuery와 refetchQueries 차이점 및 queryClient 메소드        쿼리 클라이언트 메소드 메소드설명queryClient.getQueryData('key')캐싱된 데이터를 가져옴 (API 요청 없음)queryClient.setQueryData('key', data)캐싱된 데이터를 즉시 업데이트queryClient.invalidateQueries('key')다음 패치 시 새로운 데이터로 업데이트queryClient.refetchQueries('key')즉시 새로운 데이터를 불러옴queryClient.removeQueries('key')해당 캐시를 삭제queryClient.fetchQuery('key', fetchFn)새로운 데이터를 API 요청 후 가져옴      ..

axios 알아보기        axios란? axios는 기존의 fetch와 같은 역할을 하지만, get, put, post, delete, patch 등의 메소드를 활용하여 API의 데이터를 보다 쉽게 변경/삭제할 수 있도록 한다.가장 큰 차이점은 fetch는 기본적으로 JSON 변환 과정이 필요하지만, axios는 자동으로 변환해준다!!!!          사용법 01 설치npm install axios  02 사용하기import axios from 'axios';const fetchData = async () => { try { const response = await axios.get('https://api.example.com/data'); console.log(response.d..

tanstack 알아보기         tanstack이란? tanstack은 캐쉬 저장소로, 기존에 API를 가져올 때 쓰던 fetch, useEffect의 기능을 한 번에 수행하는 역할을 한다.여러 가지 메소드로 캐쉬를 변경, 삭제할 수 있고, API도 변경, 삭제, 데이터를 불러올 수 있다.         사용법 01 설치npm install @tanstack/react-query  02 Provider상위 컴포넌트에 가서 아래와 같이 프로바이더로 감싸주기import "./index.css";import App from "./App.jsx";const queryClient = new QueryClient();createRoot(document.getElementById("root")).render(..

zustand 알아보기        zustand란? zustand는 상태를 관리하는 방법 중 하나로, useState, Context API, RTK와 같은 역할을 하는데 훠어어어얼씬 간편하다. 정말 훨씬.         사용법 01 설치하기npm install zustand  02 세팅하기먼저 useStore.js 파일을 만들어준다. (useUserStore 등 원하는 네이밍을 붙여 사용)그리고 안에 코드를 작성하는데, RTK의 initialState, reducer, action을 한꺼번에 한 함수에 써준다.import { create } from 'zustand';const useStore = create((set) => ({ count: 0, // 상태 초기값 increase: () => s..

'포켓몬 도감 사이트 만들기'로 상태 관리 연습하기GitHub 바로가기포켓몬 도감 사이트 바로가기트러블 슈팅         실습 내용 세가지 방식(props-drilling, contextAPI, RTK)으로 만든, 다양한 포켓몬을 확인할 수 있는 포켓몬 도감 사이트이다.모달을 통해 포켓몬의 자세한 정보를 확인할 수 있고, 원하는 포켓몬을 잡거나 놓아줄 수 있다.• 포켓몬을 눌러 포켓몬 상세 정보 확인• 원하는 포켓몬 '잡기' 버튼을 클릭하여 대쉬보드에 포켓몬 추가• 잡은 포켓몬을 클릭하여 포켓몬 놓아주기 헷갈렷던 세가지 방식 모두를 써볼 수 있어서 좋았고, 역시 props-drilling은 복잡하고 싫다 !         컴포넌트 구성 App├── Home├── Dex│ ├── DashBoard│..

페이지 링킹하기        URL Search Params() `URLSearchParams()`는 기본 내장 함수로, 몇 가지 메소드를 사용하여 URL을 컨트롤할 수 있다.  사용법 .get(파라미터)특정 파라미터 값을 가져온다.new URLSearchParams("popup=open").get("popup") //open//응용하기const params = new URLSearchParams(window.location.search); //현재 와있는 주소, "....id=juha"console.log(params.get("id")); // 'id' 파라미터의 값, "juha"를 가져옴 .set(파라미터, 값)특정 파라미터 값을 설정한다.const params = new URLSearchParams..

Redux 상태를 활용해 Toast 알림 문제 해결하기         문제 상황 ⚠️ 버튼에서 toast()를 실행해야 하는데, Dex 페이지(상위 컴포넌트)에서 렌더링되므로 알림이 뜨지 않았다.처음에는 버튼이 클릭됐을 때 toast가 실행되도록 했더니, 버튼 위에 토스트 알림이 뜨는 대참사..(포켓몬 덱스 프로젝트를 하고 있었어서 버튼이 150개였음.)         원인 분석 🧐 toast()는 Dex 페이지에서 실행되지만, 버튼 클릭 시 상태 변경이 Dex에 즉시 반영되지 않는다.어떻게 해야될진 모르겠지만 우선 상태를 관리해서 정보를 넘겨줘야겠다고 생각했다.        해결 과정 💦 그래서 state에 alert: false를 추가했다.이후 버튼을 눌렀을 때 특정 조건(슬롯이 가득 찼거나, 이..

useContext 알아보기         useContext란? useState는 데이터를 최상단 컴포넌트에서 생성한 후 props로 자식 컴포넌트에 계속 전달해야 한다.이를 props drilling이라고 한다. 이를 해결하기 위해 등장한 것이 useContext다.전역 상태 관리 도구는 아니지만, 특정 상태를 전역처럼 쉽게 공유할 수 있도록 도와준다. createContext, useReducer, Provider 등을 활용해1. context 폴더에서 상태를 관리하고2. 필요한 컴포넌트에서 useContext를 통해 가져다 쓰면 된다.           context.js 크게 다섯 가지 단계로 나뉜다.액션 정의초기값 생성reducer 함수createContextProvider  01 액션 정의액..