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(..

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

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 액션 정의액..

useRef 알아보기         useRef란? state와 마찬가지로 특정 값을 저장하지만, state와 다르게 값이 변경되어도 컴포넌트가 다시 렌더링되지 않는다. 즉, 렌더링과 관계없이 내부에서 값을 계속해서 유지하는 역할을 한다.          코드 형태 const ref = useRef(초기값); // { current: 값 } 형태          사용 예시 01 기본 예시import { useRef } from 'react';function Counter() { const countRef = useRef(0); const increase = () => { countRef.current += 1; console.log(countRef.current); }; return ..

Styled Components 알아보기          Styled Components란? JavaScript 파일 내에서 CSS를 작성할 수 있도록 도와주는 라이브러리다.컴포넌트 단위로 스타일을 관리할 수 있어서 유지보수가 쉽고 가독성이 좋다.          세팅하기 01 패키지먼저, 사용하고자 하는 프로젝트 터미널에서 패키지를 설치한다.yarn add styled-components   02 확장 프로그램 추가왼쪽 블럭처럼 생긴.. 확장프로그램 설치하는 곳으로 가서'VScode-styled-components'를 검색한 후 설치한다.          사용하기 01 Importimport styled from 'styled-components';사용할 컴포넌트의 상단 부분에서 styled-compo..