ijooha 님의 블로그

동적 라우팅 구현 이슈 동적 라우팅을 구현할 때 URL 파라미터를 받아서 해당 파라미터에 맞는 페이지를 동적으로 렌더링하고자 했으나,params가 제대로 동작하지 않아 문제가 발생했다.        해결 과정 처음에는 params.id가 undefined로 출력되는 문제를 겪었고, 이를 해결하기 위해 여러 가지 방법을 시도했다.폴더 구조나 파일 구성, 링크 설정 등에서 문제가 있을 수 있기 때문에 하나씩 차근차근 점검했다. 우선 Next.js에서 동적 라우팅을 사용하려면 [id]와 같은 폴더 이름을 사용해야 한다는 점을 다시 확인하고, 이 구조로 맞게 설정했는지 다시 보니 문제가 없었다.그 다음 파일 구성을 계속 살펴봤는데, 동적 페이지를 구현하기 위해 [id] 폴더를 만든 후, 해당 폴더에 파일을 생성..

Pagination 이란? Pagination은 데이터를 여러 페이지로 나누어 보여주기 위한 기법으로, 아래와 같은 예시들이 있다.(각 사진별 링크를 걸어두었다!) Pagination  컴포넌트 개발 목표접근성이 높고 재사용 가능한 Pagination 컴포넌트 구현하기! Pagination 컴포넌트에서 고려해야할 기능Pagination 컴포넌트를 제작하기 앞서 고려해야할 기능들을 정리해보았다.기본 기능 외에도 추가할 수 있는 기능들이 더러 있었고, 차근차근 추가해볼 예정! 1 기본 기능• 페이지 번호 표시• '이전', '다음' 버튼• '처음', '마지막' 버튼 (사용자가 해당 기능 사용할지 선택)• 페이지 버튼을 클릭하면 해당 페이지로 이동• 총 페이지수와 현재 페이지 표시 (사용자가 해당 기능 사용할지..

Headless UI 라이브러리란? Headless는 오직 기능만을 제공해주는 ui 라이브러리이다.일반 ui 라이브러리와는 다르게 Headless는 사용자가 원하는대로 커스터마이징 하여 사용할 수 있어 효율적이다.따라서 진행하고 있는 프로젝트의 디자인을 적용시켜 디자인의 통일성을 지킬 수 있다!  어떤 경우에 Headless UI를 사용할까?기본으로 제공되는 디자인이 없기 때문에, 디자인 시스템이 없는 경우 오히려 불편할 수 있고,커스터마이징을 하기 위한 시간을 더 많이 투자해야하는 단점이 있다.따라서 Headless ui는 ui의 스타일보단 로직이나 기능에 집중해야 하거나,프로젝터에서 특정한 디자인 요구사항이 있을 때 사용하는 게 적합하다.         storybook 이란? UI 컴포넌트를 독립적..

'무료 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..

dayjs 라이브러리 사용하기        dayjs란? dayjs는 날짜를 관리해주는 라이브러리이다.달력을 만들어볼 일이 있어서 찾아봤는데, 리액트에서 제공해주는 달력은 커스터마이징이 어렵고 자유도가 떨어져서,그냥 날짜를 가져다 써서 달력을 만들기로 했다! 날짜 라이브러리도 다양했지만 그중 가장 가벼운 dayjs를 쓰기로 했다. 우선 라이브러리를 설치해야 한다.npm install dayjs         기본 메소드 dayjs에는 다양한 메소드가 존재하는데, 가장 기본적인 메소드는 이러하다.현재 날짜dayjs()현재 년도dayjs().year() //month, date, day 등으로도 사용 가능날짜 더하기dayjs().add(1, 'year')날짜 빼기dayjs().subtract(1, 'year..