ijooha 님의 블로그

[RIOT-APP 트러블슈팅] 동적 페이지 생성

ijooha — Wed, 19 Mar 2025 13:46:25 +0900

동적 라우팅 구현 이슈

동적 라우팅을 구현할 때 URL 파라미터를 받아서 해당 파라미터에 맞는 페이지를 동적으로 렌더링하고자 했으나,

params가 제대로 동작하지 않아 문제가 발생했다.

해결 과정

처음에는 params.id가 undefined로 출력되는 문제를 겪었고, 이를 해결하기 위해 여러 가지 방법을 시도했다.

폴더 구조나 파일 구성, 링크 설정 등에서 문제가 있을 수 있기 때문에 하나씩 차근차근 점검했다.

우선 Next.js에서 동적 라우팅을 사용하려면 [id]와 같은 폴더 이름을 사용해야 한다는 점을 다시 확인하고, 이 구조로 맞게 설정했는지 다시 보니 문제가 없었다.

그 다음 파일 구성을 계속 살펴봤는데, 동적 페이지를 구현하기 위해 [id] 폴더를 만든 후, 해당 폴더에 파일을 생성하고 링크를 설정했지만, 링크 설정에서 상위 폴더의 이름을 빼먹는 실수를 했다.....

링크를 <Link href={/${page}/${champion.id}} />와 같이 수정하였고, 이때 page를 동적으로 받아 처리할 수 있게 했다.

페이지 내에서 champions 페이지와 rotation 페이지에서 공통으로 사용되는 디테일 페이지를 동적으로 처리하려면, 각 페이지에서 링크를 클릭할 때 어떤 페이지로 이동하는지 확인할 수 있도록 추가적인 정보를 링크에 포함시켜야 했기 때문이다.

완성된 코드는 이러하다.

<카드 컴포넌트>

    <Link href={`/${page}/${champion.id}`}> //rotation페이지에서 가는 것인지, champion에서 가는 페이지인지 확인하기 위한 용도
      <div>
        <Image
          src={loadingImg(champion.id)}
          alt={champion.name}
          width={300}
          height={200}
        />
        <div>{champion.name}</div>
        <div>{champion.title}</div>
      </div>
    </Link>

이런식으로 컴포넌트에서 props로 어떤 페이지인지 받을 수 있게 해 나누어 주었다.

rotation 페이지에서 디테일 페이지로 넘어가면 rotation/detail로 가고,

champion 페이지에서 디테일 페이지로 넘어가면 champion/detail로 가도록 설정되었다.

항상 폴더와 파일 구조, 링크 설정을 꼼꼼히 점검하면서 작업을 해야겠다.

실수로 인한 문제는 의외로 간단한 부분에서 발생하는 경우가 대부분인 것 같다.

처음부터 차근차근 살펴보는 습관을 길러야겠다!

[Headless UI 라이브러리 개발] Pagination 구현 계획

ijooha — Mon, 17 Mar 2025 18:22:37 +0900

Pagination 이란?

Pagination은 데이터를 여러 페이지로 나누어 보여주기 위한 기법으로, 아래와 같은 예시들이 있다.

(각 사진별 링크를 걸어두었다!)

Pagination 컴포넌트 개발 목표

접근성이 높고 재사용 가능한 Pagination 컴포넌트 구현하기!

Pagination 컴포넌트에서 고려해야할 기능

Pagination 컴포넌트를 제작하기 앞서 고려해야할 기능들을 정리해보았다.

기본 기능 외에도 추가할 수 있는 기능들이 더러 있었고, 차근차근 추가해볼 예정!

1 기본 기능

• 페이지 번호 표시

• '이전', '다음' 버튼

• '처음', '마지막' 버튼 (사용자가 해당 기능 사용할지 선택)

• 페이지 버튼을 클릭하면 해당 페이지로 이동

• 총 페이지수와 현재 페이지 표시 (사용자가 해당 기능 사용할지 선택)

2 추가 기능

• 범위 기반 페이지네이션 (1-5페이지)

• 비활성화된 버튼 기능 (첫번째, 마지막 페이지에서 '이전', '다음', '처음', '마지막' 버튼 비활성화)

3 기본 디자인 요소

• 사용자가 아이콘을 직접 수정할 수 있도록 함

• 클릭된 페이지 버튼에 효과주기

Link? Button?

처음에 이미 만들어져있는 headless ui들의 pagination들을 살펴봤을 때,

1. Link를 사용하여 각 버튼을 구성하는 방식과

2. 그냥 버튼만을 사용하는 방식이 있었다.

둘 중 어떤 방식을 골라야할지 모르겠어서 조금 리서치를 해보았다.

1 Link 사용하기

사용자가 페이지를 이동할 때 새로운 url로 이동하는 방식이다.

일반적으로 Next.js와 같은 SPA(Single Page Application)에서 페이지 이동을 할 때 자주 사용된다.

장점
• SEO 최적화 : 페이지를 새로 로드하는 방식이므로, 검색 엔진이 각 페이지를 별도로 인식할 수 있다.
• 브라우저 히스토리 : '뒤로가기'를 통해 이전 페이지로 돌아갈 수 있다.

단점
• 새로고침 : 페이지를 이동할 때마다 전체 페이지가 새로 로드되기 때문에 지연이 발생한다.
• URL 구조 필요 : url을 기반으로 페이지가 이동하기 때문에 url을 반영해야 한다.

2 Button 사용하기

클라이언트 측에서만 동작하며, AJAX 요청을 통해 새로운 데이터를 가져올 때 사용하는 방식이다.

장점
• 빠른 페이지 전환 : 페이지를 새로고침 하지 않고 데이터를 갱신하기만 하면 되어 전환이 빠르다.
• url에 의존하지 않음 : 사용자가 url을 수정하여 특정 페이지로 이동하거나 페이지를 새로 고침해도 문제가 발생하지 않는다.

단점
• SEO 최적화 문제 : url에 페이지 번호를 반영하지 않기 때문에 각 페이지를 별도로 크롤링하지 못한다.
• 히스토리 문제 : 사용자가 '뒤로 가기'를 할 때, 페이지 상태가 변경되지만 url은 변경되지 않기 때문에 이전 상태로 돌아갈 수 없다.

어떤 상황에서 어떤 방식을 사용해야 할까?

1 Link

• SEO 최적화가 중요한 경우 (예: 검색 결과에서 페이지가 노출되어야 하는 경우)

• 각 페이지가 고유한 url을 가져야 하는 경우

• 사용자가 뒤로가기/ 앞으로 가기 기능을 사용해야 할 경우

2 Button

• 페이지 새로고침 없이 빠른 페이지 전환이 필요한 경우 (단순한 목록 표시, 데이터 필터링 등)

• SEO 최적화가 중요하지 않은 경우 (개인 대시보드나 비공개 페이지)

• 서버에 요청을 보내 동적으로 데이터를 갱신하고자 할 경우

결론!!!! SEO가 필요하면 Link 기반, 속도가 중요한 경우 Button 기반 Pagination을 사용하는 것이 일반적이다.

때에 따라 혼합하여 사용하는 경우도 있다고 하니, 둘 중 어느쪽을 택해도 무방할 것 같다는 생각이 들었고, Button으로 진행하기로 결정했다.

Pagination 컴포넌트의 구조

• Pagination : 전체 페이지네이션을 담당하는 컴포넌트

• Buttons : 각 페이지 번호를 표시하고, 클릭 시 해당 페이지로 이동하는 버튼

• Previous, Next : 이전/다음 페이지로 이동하는 버튼

• Start, End : 시작/끝 페이지로 이동하는 버튼

• PageInfo : 총 페이지 수를 표시

구현 계획

1 기본 컴포넌트 생성

• Pagination 컴포넌트를 생성하고, currentPage, totalPages, pageLimit 등을 props로 받아 페이지네이션 버튼 렌더링

2 페이지네이션 버튼 구현

• '이전', '다음', '처음', '끝' 등의 버튼을 누르면 해당 페이지로 이동

• '처음', '끝' 버튼의 경우 사용자가 사용하거나 사용하지 않을 수 있도록 설정

3 페이지 이동 및 상태 업데이트

• 각 버튼 클릭 시 currentPage를 변경하여 ui 변경

• '이전', '다음', '처음', '끝' 버튼으로 ui 변경

4 접근성 개선

• 버튼에 aria-label을 추가하여 스크린 리더가 읽을 수 있도록 한다.

• 페이지 이동이 가능할 때에만 버튼들이 활성화 되도록 설정

5 스타일

• 기본 스타일 추가

• 현재 페이지 강조

• 비활성화된 버튼 스타일링

6 추가 기능

• 사용자가 한 번에 몇개의 페이지를 표시할지 선택할 수 있는 기능

[Headless UI 라이브러리 개발] Headless UI 라이브러리와 storybook 사용법

ijooha — Fri, 14 Mar 2025 16:31:33 +0900

Headless UI 라이브러리란?

Headless는 오직 기능만을 제공해주는 ui 라이브러리이다.

일반 ui 라이브러리와는 다르게 Headless는 사용자가 원하는대로 커스터마이징 하여 사용할 수 있어 효율적이다.

따라서 진행하고 있는 프로젝트의 디자인을 적용시켜 디자인의 통일성을 지킬 수 있다!

어떤 경우에 Headless UI를 사용할까?

기본으로 제공되는 디자인이 없기 때문에, 디자인 시스템이 없는 경우 오히려 불편할 수 있고,

커스터마이징을 하기 위한 시간을 더 많이 투자해야하는 단점이 있다.

따라서 Headless ui는 ui의 스타일보단 로직이나 기능에 집중해야 하거나,

프로젝터에서 특정한 디자인 요구사항이 있을 때 사용하는 게 적합하다.

storybook 이란?

UI 컴포넌트를 독립적으로 개발하고 문서화할 수 있는 도구다.

아래와 같이 개별 UI 컴포넌트를 따로 렌더링하여, 다양한 상태(props, events)를 직접 조작하여 테스트할 수 있다.

storybook의 특징

1 독립적인 컴포넌트 개발 환경

각 ui 컴포넌트를 독립적으로 테스트하고 개발할 수 있게 하기 때문에, 컴포넌트 자체의 로직과 스타일링에 집중할 수 있다.

2 자동 문서화

컴포넌트의 사용법을 자동으로 문서화해주기 때문에 사용자는 각 컴포넌트를 어떻게 사용하는지 확인할 수 있고, 인터페이스로 여러 예시를 확인할 수 있다. 이를 통해 다른 팀원이 컴포넌트를 보다 빠르게 이해할 수 있도록 돕는다.

3 반응형 뷰포트 지원

반응형 뷰포트나 모바일 뷰를 지원하여, 다양한 크기에서 컴포넌트가 어떻게 보일지 미리 확인할 수 있다.

4 다양한 프레임워크 지원

React, Vue, Angular, Svelte 등 여러 프레임워크와 호환 가능하다.

storybook의 구성

기본적으로 컴포넌트 파일(jsx, tsx)이 있고, 그 외 스토리 파일이 추가된다.

스토리 파일에서는 컴포넌트의 다양한 상태(variant)를 정의해줄 수 있는데, 기본적인 형태는 다음과 같다.

//.stories.jsx / .stories.tsx

import { Meta, StoryObj } from "@storybook/react";
import { Button } from "./Button"; // 컴포넌트 import

// Storybook에서 보여줄 메타데이터 설정
const meta: Meta<typeof Button> = {
  title: "Components/Button", // Storybook에서 보일 그룹명
  component: Button, // 어떤 컴포넌트인지 지정
};
export default meta;

// 각 버튼 변형(variant) 정의
export const Primary: StoryObj<typeof Button> = {
  args: {
    label: "Click Me",
    variant: "primary",
  },
};

export const Secondary: StoryObj<typeof Button> = {
  args: {
    label: "Click Me",
    variant: "secondary",
  },
};

이처럼 스토리 파일을 작성하여 컴포넌트의 다양한 상태를 미리 보고 테스트해볼 수 있고, 자동으로 문서화 시킬 수 있다.

[react/과제] MBTI Test: 무료 MBTI 검사 페이지

ijooha — Tue, 25 Feb 2025 16:22:18 +0900

'무료 MBTI 검사 페이지 만들기'로 tanstack, zustand, tailwind 활용해보기

GitHub 바로가기

포켓몬 도감 사이트 바로가기

트러블 슈팅

개요

무료 MBTI 검사 사이트이다.
로그인 하여 테스트 페이지에서 자신의 성격 유형을 파악하고,
결과 페이지에서 다른 사람들의 유형도 살펴볼 수 있다.
숨기기 또는 공개하기를 눌러 자신의 결과를 공개하거나 숨길 수 있다.

react, tanstack, zustand, axios, json-server, tailwind, react-toastify 사용

• 로그인/회원가입 또는 테스트하기를 눌러 로그인 하기 (로그인 하지 않은 사용자는 접근할 수 없다.)
• 테스트를 진행하고 결과 페이지에서 결과 확인하기
• 검사 결과를 삭제하거나 결과의 공개 범위를 설정할 수 있다.

tanstack과 zustand를 활용해볼 수 있어 좋았고,

더불어 tailwind, json-server을 공부하고 써볼 수 있는 기회였다!

파일 구성

│── db.json
│── index.html
│── server.js
│
├── src
│   ├── api                # API 호출 관련 파일
│   │   ├── api.js
│   │   ├── auth.js
│   │   ├── testResults.js
│   │
│   ├── assets             # 정적 파일 (이미지, 아이콘 등)
│   │
│   ├── components         # 재사용 가능한 UI 컴포넌트
│   │   ├── layout         # 레이아웃 관련 컴포넌트
│   │   │   ├── Footer.jsx
│   │   │   ├── Header.jsx
│   │   │   ├── Layout.jsx
│   │   │   ├── Navi.jsx
│   │   │   ├── Title.jsx
│   │   ├── AuthForm.jsx
│   │   ├── Btn.jsx
│   │   ├── ResultCard.jsx
│   │   ├── ShareBtn.jsx
│   │   ├── TestForm.jsx
│   │
│   ├── data               # 데이터 관련 파일
│   │   ├── questions.js
│   │
│   ├── pages              # 페이지 단위 컴포넌트
│   │   ├── Home.jsx
│   │   ├── Login.jsx
│   │   ├── Profile.jsx
│   │   ├── ResultPage.jsx
│   │   ├── Signup.jsx
│   │   ├── TestPage.jsx
│   │
│   ├── routes             # 라우트 관련 파일
│   │   ├── ProtectedRoute.jsx
│   │   ├── Router.jsx
│   │
│   ├── tanstack           # React Query 관련 폴더
│   │   ├── mutations
│   │   │   ├── useAuthMutations.js
│   │   │   ├── useResultMutations.js
│   │   ├── queries
│   │   │   ├── useQueries.js
│   │   ├── client.js
│   │
│   ├── utils              # 유틸리티 함수 모음
│   │   ├── mbtiCalculator.js
│   │
│   ├── zustand/store      # Zustand 상태 관리
│   │   ├── useAuthStore.js
│   │
│   ├── App.jsx
│   ├── index.css
│   ├── main.jsx

페이지 설명

홈페이지에서 테스트 하러 가기 혹은 로그인/회원가입을 누르면 로그인 페이지로 이동한다.

(로그인 하지 않은 회원은 결과보기 페이지, 테스트 페이지에 접근할 수 없다.)

검사 결과가 있는 경우 자신의 가장 최근 검사 결과가 뜨게되고,

없는 경우 검사 결과가 없다는 문구가 나온다.

테스트 페이지에서 테스트를 진행하고,

결과페이지로 가 자신의 결과와 더불어 다른 사람들의 검사 결과를 확인할 수 있다.

자신의 검사 결과는 숨기기 버튼을 통해 공개하거나 숨길 수 있다.

기능 설명

01 Axios: API 요청

• jwt 인증을 적용하여 회원가입과 로그인 기능을 구현했다.

• json-server를 사용하여 결과 데이터를 업데이트, 수정 및 삭제 가능하게 했다.

02 Tanstack: 서버와 로컬 상태 동기화

• useMutation을 사용하여 회원 관련 정보와 검사 결과가 즉시 반영되도록 했다.

• useQuery로 항상 최신 상태가 유지되도록 했다.

03 Zustand: 전역 상태 관리

• 사용자 정보를 관리하여 API 호출을 줄였다.

• localStorage에 정보를 저장하여 새로고침 해도 로그인 상태가 유지되도록 했다.

• 저장된 로그인 상태를 통해 사용자가 접근할 수 있는 페이지와 없는 페이지를 분리했다.

이번에 새로운 라이브러리들을 왕창 사용해볼 수 있어서 좋았다.

zustand,와 tanstack 등 사용성이 좋은 라이브러리를 알게되고 연습도 해봤다.

더불어 tailwind도 처음 써봤는데 너무 편리했고,

json-server로 가상의 DB를 만들어주는 방법도 알게되어 기쁘다.

다른 프로젝트를 할 때 모두 유용하게 자주 써먹을 수 있을 것 같다.

[react/공부] 깔끔한 코드 쓰기 : MBTI Test 사이트 프로젝트 트러블 슈팅

ijooha — Mon, 24 Feb 2025 14:53:18 +0900

깔끔하게 코드 쓰기

프로젝트 링크

개요

프로젝트를 완료했지만 코드가 너무 장황하고 가독성이 떨어져 보였다.
어떻게 하면 깔끔하고 직관적으로 만들 수 있을지 고민하다가,

여러 컴포넌트에서 사용한 useMutation과 useQuery를 따로 모듈로 분리해보기로 했다.

과정

01 useMutation 분리

먼저 컴포넌트 안에서 사용했던 훅들은 아래와 같은 형태였다.

const mutation = useMutation({ mutationFn: async () => { ... } })

짧게 예시로 작성한 거라 나름 깔끔해보이지만 거의 열줄짜리 훅들이었고, useQuery와 함께 사용하거나 훅이 많아지면 굉장히 길었다.

먼저 별도의 useMutations.js 파일을 만들고, Mutation 훅들을 따로 빼주었다.
사용 목적에 맞게 이름을 정리하여 useAuthMutations, useResultsMutations로 나누고,
회원가입과 로그인 같은 경우 useRegisterMutation 등 구체적인 네이밍을 적용했다.

처음에는 그냥 단순하게 훅을 다른 파일에 복사 붙여넣기 해줬는데,

훅을 그런식으로 컴포넌트 밖에서 사용하면 안된다고... 에러가 떴다.

그래서 어떻게 할지 고민하다가 함수로 한번 감싸주기로 했다.

그렇게 사용 목적에 맞게 각 파일에 필요한 api를 불러 훅들을 만들어줬다.

export const useRegisterMutation = () => {
  return useMutation({
    mutationFn: registerUser,
    onSuccess: () => { ... },
  });
};

그 후 컴포넌트에서는 단순히 mutation 훅을 불러와서 사용했는데,

이때 처음에는 아래와 같이 훅을 먼저 불러온 후, mutate를 붙여 선언해준 형태였다.

const LoginMutation = useLoginMutation();
const login = LoginMutation.mutate;

이것도 두개가 넘어가니 너무 길고 지저분해 보여서 구조분해를 해서 사용해보기로 했다.

const { mutate: login } = useLoginMutation();
login(id, pw);

이렇게 하니 코드가 훨씬 깔끔해졌고, 구조분해 할당을 활용해 mutate를 직관적인 변수명으로 변경할 수 있었다.
필요한 경우 onSuccess 등 추가적인 메소드도 활용할 수 있어 사용성이 더 좋아진 것 같다.

02 useQuery 분리

그 후 useQuery도 분리해보기로 했다.

이번 프로젝트에서는 프로필 정보 가져오기와 결과 가져오기 두 가지 경우에만 useQuery를 사용했다.
그래서 하나의 파일 useQueries.js에 모두 모아 정리했다.

마찬가지로 함수에 묶어서 정리해줬고,

export const useTestResultsQuery = () => {
  return useQuery(['testResults'], fetchTestResults);
};

사용법도 간단했다.

const { data: result } = useTestResultsQuery();

이렇게 정리하니 코드가 훨씬 직관적이고 가독성이 좋아졌다!

코드가 깔끔해지려면 최대한 분리할 수 있는 것은 분리하고,

직관적인 변수명을 활용하는 것이 너무 중요한 것 같다.
이번에 프로젝트를 빨리 끝낸 김에 코드 정리에 시간을 많이 투자해 보았는데,

이 기회로 깔끔하게 코드 적는 능력이 한 단계 성장한 느낌이 들어 기쁘다!

앞으로도 유지보수하기 쉬운, 그리고 가독성이 좋은 코드를 목표로 여러가지 방법을 찾아보고 시도해봐야겠다.

[react/공부] invalidateQuery와 refetchQueries 차이점 및 queryClient 메소드

ijooha — Sun, 23 Feb 2025 11:53:08 +0900

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 요청 후 가져옴

혼자 사용할 수 있을까?

01 디비와 연결되는 메소드

invalidateQueries, fetchQuery, refetchQueries는 디비와 직접적으로 연결되기 때문에

useQuery나 useMutation 내부에서 사용해야 한다.

02 독립적으로 사용 가능한 메소드

getQueryData, setQueryData, removeQueries 같은 메소드는 디비와 연결되지 않으며, 독립적으로 사용 가능하다.

캐시를 업데이트 해주는 세 가지 메소드

캐시를 새롭게 업데이트 해주는 방법은 세가지가 있는데, 모두 기존 캐쉬를 무시하고 새로운 데이터를 덮어씌운다.

그 세가지 메소드가 정말 너무 헷갈려서 튜터님께도 여쭤보고 gpt랑 씨름하고 구글링을 정말 많이 했다......

01 setQueryData

setQueryData는 DB와 상관없이 사용자가 임의적으로 데이터를 수정하고 덮어 씌울 수 있다.

따라서 DB와 직접적으로 소통하는 아래 두 메소드와는 조금 다른 형태

02 invalidateQueries vs refetchQueries

invalidateQueries와 refetchQueries는 모두 디비와 연결되어 있으며 새로운 정보를 덮어 씌우는 역할을 한다.

아무리 찾아봐도 같아보여서 찾다찾다 이해가 가는 차이점을 발견했는데,

invalidateQueries: 데이터가 변하긴 하지만, 곧바로 반영되지 않고 다음 패치 때 반영
refetchQueries: 데이터를 즉시 다시 불러오고, 화면에도 바로 반영

그래서 예를 들면

쇼핑몰의 장바구니에 아이템을 담는 경우, 해당 아이템은 invalidateQueries로 관리한다.

(장바구니 페이지에 가야지만 확인하는 데이터이므로 곧바로 반영될 필요가 없음)

쇼핑카트 아이콘 위에 나타나는 아이템 개수는 즉시 UI에 반영되어야 하므로 refetchQueries를 사용한다.

이 차이를 잘 이해하면 상황에 맞는 메소드를 선택하는 데 도움이 된다.

이거 이해해서 너무 뿌듯하고....... 행복하고..........

차이점을 명확히 알지 않아도 될 거 같아서 중간에 포기할까 했지만,

막상 알고나니 나름 중요한 차이점이었어서 끝까지 파고 알아내길 잘한 거 같다.

[react/공부] axios 알아보기

ijooha — Sat, 22 Feb 2025 15:59:12 +0900

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.data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

fetchData();

위와 같이 fetch 대신 axios와 몇 가지 메소드를 합쳐서 사용하면 된다.

03 메소드

메소드	설명
axios.post(url, data)	새로운 데이터를 추가
axios.patch(url, data)	데이터의 일부를 수정
axios.put(url, data)	데이터 전체를 교체
axios.delete(url)	데이터 삭제

이 메소드들은 이전 글에 써둔 tanstack의 useQuery (GET) 과 useMutation (PUT, POST, DELETE)과 함께 사용할 수 있다!

fetch를 사용할때마다 json형식으로 바꿔줘야 해서 좀 헷갈리고 종종 빼먹었엇는데

쓰지 않아도 된다는 게 진짜 큰 장점인 것 같다.

[react/공부] tanstack 알아보기

ijooha — Fri, 21 Feb 2025 09:56:09 +0900

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(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </StrictMode>
);

03 정보를 불러올 때 사용하는 useQuery

탠스택의 사용법은 크게 두 가지로 나뉜다.
하나는 GET과 함께 사용하는 useQuery이고, 나머지 하나는 PUT, PATCH, DELETE, POST 등 API에 값을 넣어 변경해야 할 때 사용하는 useMutation이다.

먼저 useQuery를 사용하는 방법은 아래와 같다.

import { useQuery } from "@tanstack/react-query";
import axios from "axios";

const fetchData = async () => {
  const { data } = await axios.get("/api/data");
  return data;
};

const Component = () => {
  const { data, isLoading, error } = useQuery(["dataKey"], fetchData);

  if (isLoading) return <div>로딩중...</div>;
  if (error) return <div>에러 발생</div>;

  return (
    <div>
      <h2>데이터 로드 완료!</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre> {/* JSON 데이터를 보기 좋게 출력 */}
    </div>
  );
};

export default Component;

** 캐싱 키는 항상 배열 안 문자열의 형태로 들어가야 한다.

이렇게 구조분해할당했을 때 data, isLoading, error를 주게 되는데, 원하는 곳에 갖다 쓰면 된다!

04 데이터를 변경할 때 사용하는 useMutation

POST(정보 생성), PATCH(수정), PUT(교체), DELETE(삭제) 등 정보를 변경해야 할 payload를 전달해야 할 때 사용한다.

import { useMutation } from '@tanstack/react-query';
import axios from 'axios';

const postData = async (newData) => {
  const { data } = await axios.post('/api/data', newData);
  return data;
};

const Component = () => {
  const mutation = useMutation(postData);

  return (
     mutation.mutate({ name: '새 데이터' })}>
      데이터 추가
    
  );
};

이렇게 onSuccess, onError를 반환하는데, 이를 try, catch처럼 사용하면 된다.

이 코드를 써준 후에 그 payload를 전달하는 역할은 아래와 같이 한다.

mutation.mutate({ name: '새로운 데이터' });

나는 이번 프로젝트에서 아직까진 onClick 콜백함수 안에만 써줬다.

form으로 정보를 넣어주는 경우(로그인, 회원가입)

메소드

01 세팅

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

02 메소드 종류

메소드	설명
queryClient.getQueryData(['캐싱키'])	데이터 가져오기
queryClient.setQueryData	캐시 직접 변경
queryClient.invalidateQueries	캐시 무효화
queryClient.refetchQueries	데이터 다시 패칭
queryClient.fetchQuery(쿼리키, 함수)	데이터 직접 가져오기
queryClient.removeQueries	캐시 삭제

03 메소드 차이점

set, invalidate, refetch가 아무리 봐도 기능이 똑같은 거 같아서 그 차이점을 알아봤다.

메소드	기존 데이터	API 재요청
setQueryData	기존 데이터 유지	재요청 없음
invalidateQueries	무효화	재요청
refetchQueries	유지	재요청

** setQueryData의 경우 old => [...old, new] 이렇게 써서 추가해주면 된다. 아니면 덮어쓰기 됨.

지난시간 zustand에 이어 tanstack을 알게되었는데 너무 유용하게 같이 사용할 것 같다.

이번에 프로젝트 하면서 두개 다 익숙해지면 좋겠다

[react/공부] zustand

ijooha — Thu, 20 Feb 2025 23:36:08 +0900

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: () => set((state) => ({ count: state.count + 1 })), // 액션
  decrease: () => set((state) => ({ count: state.count - 1 })),
  setCount: (value) => set({ count: value }) // payload가 필요한 경우
}));

export default useStore;

이때 payload가 필요한 경우에는 안에 들어가는 함수 안에 인자로 넣어주면 된다.

03 사용하기

사용하기 위해서는 사용하는 컴포넌트에 가서 단순히 구조분해할당으로 내가 넣어뒀던 state, 함수를 useStore로 아래와 같이 불러와서 사용하면 되는데,

import useStore from './useStore';

const Counter = () => {
  const { count, increase, decrease, setCount } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increase}>+1</button>
      <button onClick={decrease}>-1</button>
      <button onClick={() => setCount(10)}>Set to 10</button>
    </div>
  );
};

export default Counter;

이때 함수를 사용하면서 payload가 필요하면 인자로 넣어주면 끝이다!

너무 간단한 상태관리 라이브러리를 알게되었다 !

앞으로 정말 유용하게 써먹을 것 같다.

이번 프로젝트에 tanstack과 zustand를 사용하고있는데, 다음 포스팅은 tanstack으로 해야겠다~

[라이브러리] dayjs, 날짜 라이브러리

ijooha — Wed, 19 Feb 2025 13:13:49 +0900

dayjs 라이브러리 사용하기

dayjs란?

dayjs는 날짜를 관리해주는 라이브러리이다.

달력을 만들어볼 일이 있어서 찾아봤는데, 리액트에서 제공해주는 달력은 커스터마이징이 어렵고 자유도가 떨어져서,

그냥 날짜를 가져다 써서 달력을 만들기로 했다! 날짜 라이브러리도 다양했지만 그중 가장 가벼운 dayjs를 쓰기로 했다.

우선 라이브러리를 설치해야 한다.

npm install dayjs

기본 메소드

dayjs에는 다양한 메소드가 존재하는데, 가장 기본적인 메소드는 이러하다.

현재 날짜	dayjs()
현재 년도	dayjs().year() //month, date, day 등으로도 사용 가능
날짜 더하기	dayjs().add(1, 'year')
날짜 빼기	dayjs().subtract(1, 'year')
특정 날짜 설정	dayjs().set('year', 2026) //(년도만 2026으로 변경)
날짜 차이 계산	dayjs().diff(비교할 날짜, 'date') //비교 날짜와 며칠 차이인지 계산, 시간, 분, 초 단위 가능

응용하기

달력을 만들기 위해 필요한 정보는 두 가지이다.

한 달이 며칠인지
그 달의 첫 번째 날짜가 무슨 요일인지

이를 활용해 `.add('month', 1)` 또는 `.subtract('month', 1)`을 이용하면 이전 달과 다음 달을 구현할 수 있다.

dayjs().daysInMonth() // 한 달이 며칠인지 반환
dayjs().startOf('month').day() // 해당 달의 첫 번째 요일 (숫자로 반환, 월요일=1)

이제 이를 활용해 달력을 구현해보자!

import styled from "styled-components";
import dayjs from "dayjs";
import "dayjs/locale/ko";
dayjs.locale("ko");

const StCalendarGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(7, auto);
  justify-content: start;
  border: 1px solid blue;
`;
const StCalendarBox = styled.div`
  width: 160px;
  height: 160px;
  border: 1px solid red;
`;

const daysName = ["월", "화", "수", "목", "금", "토", "일"];
const emptyDays = dayjs().startOf("month").day() - 1;
const daysInMonth = dayjs().daysInMonth();

const Calendar = () => {
  return (
    
      {daysName.map((day) => (

{day}

      ))}
      {[
        ...Array(emptyDays).fill(""), // 빈 칸
        ...Array.from({ length: daysInMonth }, (_, i) => i + 1), // 날짜
      ].map((el, index) => (
        {el || "empty"}
      ))}
    
  );
};

export default Calendar;

라이브러리를 사용할수록 새로운 기능을 쉽게 구현할 수 있어서 흥미롭다.

앞으로 더 많은 라이브러리를 활용해봐야겠다!