joycie416 님의 블로그

애플리케이션을 만들다보면 전역 상태를 관리해야 할 때가 있다. Prop drilling을 피하기 위해서는 전역 상태로 관리하는 것이 편하다. 오늘 비교해볼 새 클라이언트 상태 관리 도구인 Recoil, Jotai, Zustand는 기본적으로 React와 사용할 것을 전제로해 호환이 잘 된다. Redux는 유명하고, 이미 redux-toolkit을 정리한 적이 있기 때문에 생략하려고 한다. Zustand 또한 이전에 Next.js와 사용하는 방법을 정리했으므로 생략한다.  각 상태 관리 라이브러리를 사용해 count를 관리하는 샘플 애플리케이션을 만들어 보았으니 하나하나 따라하면서 하기 번거롭다면 clone해서 사용해도 좋다. GitHub - joycie416/recoil_jotai_zustand: Pra..

애플리케이션을 만들다보면 전역 상태를 관리해야 할 때가 있다. Prop drilling을 피하기 위해서는 전역 상태로 관리하는 것이 편하다. 오늘 비교해볼 새 클라이언트 상태 관리 도구인 Recoil, Jotai, Zustand는 기본적으로 React와 사용할 것을 전제로해 호환이 잘 된다. Redux는 유명하고, 이미 redux-toolkit을 정리한 적이 있기 때문에 생략하려고 한다. Zustand 또한 이전에 Next.js와 사용하는 방법을 정리했으므로 생략한다. 각 상태 관리 라이브러리를 사용해 count를 관리하는 샘플 애플리케이션을 만들어 보았으니 하나하나 따라하면서 하기 번거롭다면 clone해서 사용해도 좋다. GitHub - joycie416/recoil_jotai_zustand: Prac..

따꼼 프로젝트를 진행하며 Next.js 14의 App Router를 사용했다. 검색어를 입력하고 검색 버튼을 누르면 쿼리스트링에 검색어를 저장해 검색결과를 보여주는 컴포넌트에서 쿼리스트링을 통해 검색 결과를 보여주도록 했다. 그런데 사용자 테스트를 받아보니 검색결과를 보여주기까지 로딩이 너무 오래 걸린다는 답변을 많이 받았고, 나도 잘 인지하고 있는 부분이었다. Next.js App Router는 `next/navigation`에서 `useRouter`를 통해 검색 버튼을 눌렀을 때 페이지 이동을 하도록 했다. 그런데 `router.push()`는 페이지 전체를 처음부터 렌더링하는 것이므로 속도가 너무 느렸다. (Pages Router는 shallow routing을 지원하지만 App Router는 지원..

한 페이지에 여러 데이터를 불러오게 되면 `useQuery'를 불러오는 데이터 개수만큼 사용해야 한다. 하지만 여러 데이터를 불러올수록 비슷한 코드가 여러 번 작성되고, 가독성도 떨어지는 단점이 생긴다. 이를 방지하기 위해 tanStack Query를 이용해 custom hook을 만들 수 있다. 사용자와 사용자가 등록한 아이 정보가 있다고 가정하겠다. 1. Custom Hook 만들기Custom hook을 만드는 과정은 굉장히 쉽다. 우리가 컴포넌트 내부에서 쓰던 것처럼 사용하면 된다. 예를 들어 supabase 서버에서 로그인 정보를 가져오는 코드를 살펴보자.// Schedule.tsx"use client";import { useChildrenQuery, useUserQuery } from "@/ap..

프로필 이미지를 수정할 때, 업로드한 이미지가 어떻게 보일지 궁금하다. 따라서 파일을 업로드하면 미리보기를 띄우기로 했다.  그러려면 JS의 `FileReader`가 필요하며, 사용할 메소드는 `readAsDataURL`, `onloadend`와 `result` 이다. `readAsDataURL`은 업로드한 파일은 컨텐츠를 읽어오는 역할을 한다. `onloadend`에는 파일을 읽는 행위가 종료되면 실행할 함수를 입력하면 된다. `onloadend`에 작성 한 함수 내부에 파일 경로 저장하는 내용이 필요한데, 이때 `result`를 통해 `readAsDataURL`의 결과로 URL로 데이터를 불러올 수 있으며, 해당 URL을 imgPath에 저장해 미리보기를 띄워주었다. 이 imgPath를 img 태그의..

기본적으로 React와 react-router-dom으로만 구성된 경우, client component로만 구성된다는 것을 알고 시작하자. 먼저 `app/page.tsx' 내용을 모두 지우고 아래 내용을 넣어 `yarn dev`로 실행해보자.// src/app/page.tsxexport default function Home() { console.log("Hello Hello"); return ( Next.js를 시작해보자 );} 그러면 브라우저 콘솔창에는 콘솔이 나오지 않지만 터미널에서는 'Hello Hello'가 적혀있는 것을 확인할 수 있다. 즉 해당 페이지는 서버에서 렌더링된 페이지라는 것이다. 자세히 말하자면 브라우저가 아닌 서버를 돌리고 있는 `localhost:3..

추석 연휴를 제외하고 약 일주일간 아웃소싱 프로젝트를 진행했다. 우리 팀은 각종 공연 정보를 제공하고, 공연에 대한 간략한 글과 공연에 대한 후기를 작성할 수 있는 사이트를 만들었다. 처음에 공연 정보를 불러오기 위해 공공 api인 KOPIS API를 사용하기 위해 엄청 고군분투했다. CORS 오류가 생겨 데이터가 불러와지지 않았고 우리는 결국 확장 프로그램을 이용해 임시로 해결하여 진행했다. 먼저 우리 조는 인터파크 티켓에서 큰 디자인을 차용해왔다. 1. 메인 페이지메인 페이지에서는 오늘 진행 중인 공연에 대해서 KOPIS에 등록된 순서대로 공연을 나열하면서 캐러셀로 랜덤 선택된 8개 공연을 보여준다. 이를 위해서 먼저 공연 정보를 불러와야 한다. 처음에는 캐러셀을 위한 컴포넌트와 하단 장르별 데이터를..

새로고침 시 유저 정보를 제대로 불러오기 전에 zustand에 저장한 정보를 가져와 사용하는 문제가 있었다. 이전 `MyPage.jsx`를 살펴보면 아래 코드로 시작했다....const MyPage = () => { const { user } = useUserStore(state => state); if (!user) { return } ... 따라서 새로고침하면 `user`의 초기값인 `null`을 사용하게 되므로 메인페이지로 돌아가게 된다. 이 잘못된 로직을 다음과 같이 바꿨다. 먼저 새로고침하면 각 페이지에서 token이 있는지 여부를 확인한다.토큰이 존재하면 일단 해당 페이지에 머무른다.토큰이 만료된 경우 메인페이지로 보낸다.1,2번 과정은 각 페이지의 시작 부분을 아래와 같이 수정..

어제 이야기한대로 `useState`를 사용하지 않고 테스트 결과가 수정된 경우 반영되도록 바꾸었다. 1. `queryClient` 생성하기먼저 `queryClient`를 생성하고 이를 사용할 수 있도록 `Provider`를 아래와 같이 적용해준다. (`main.jsx`나 `App.jsx`에 하면 된다. 나는 `main.jsx`에 했다.)import { StrictMode } from 'react'import { createRoot } from 'react-dom/client'import App from './App.jsx'import './index.css'import { QueryClient, QueryClientProvider } from '@tanstack/react-query'const quer..

지금은 mbti 테스트를 제공하는 사이트를 만들고 있다. 현재까지 진행상황을 정리하려고 한다. 1. 회원가입/로그인 구현정상적으로 값들이 입력된 경우 회원가입/로그인 기능이 잘 구현되지만, 잘못된 경우 경고 문구를 띄우고 싶었다. 프로젝트에서 사용하는 서버에서 `axios`에러가 나면 에러 문구도 전달해주는 것으로 알고 있는데 전달이 안되는 어려움을 겪었다. 아래는 에러 문구가 전달되지 않는 초기 코드이다. (여기서 `api`는 `axios`를 이용한 커스텀 인스턴스이다.)export const register = async (userData) => { try { const response = await api.post(`/register`, userData); return response...