개발 🐾

문제 상황Next.js를 사용해 캘린더 페이지를 개발하는 중,Supabase 통신 중 발생하는 에러를 페이지 라우터 세그먼트 내의 error.tsx로 통합해서 처리하려 했다.하지만 에러를 던질 때 내가 지정한 메시지와 런타임 중 발생하는 시스템 메시지가 섞여 나오는 문제가 있었다.또한, app/api/**/route.ts (라우트 핸들러)supabase 호출 함수(fetch)클라이언트 컴포넌트 (page.tsx)탠스택 쿼리(useQuery)이렇게 여러 레이어를 거치면서 에러 흐름을 깔끔하게 잡는 것도 고민이 필요했다. 최종적인 에러 흐름은 아래와 같다.라우트 핸들러성공or에러를 객체 형태로 받아서 return 👉🏻 페이지에서 에러 객체를 잡아서 throw 👉🏻 error.tsx 잡음 더보기impo..

지난 개인 과제부터 너무 헷갈리는 라우트 핸들러, 서버 액션더보기[기존 지식]라우트 핸들러는 주로 클라이언트 컴포넌트에서 사용하며 GET, POST 등을 이용해서 서버로 요청을 보내고,나의 로컬호스트 서버로 응답을 준다. 서버 액션은 주로 서버 컴포넌트에서 사용하며 비동기 함수를 통해 요청하고 응답을 받는다.정도로 알고 있었다. 둘의 차이점은 응답을 사용하는 부분에 있다고 생각했다.라우트 핸들러 : 핸들러 -> 내 서버 함수 -> 실제 사용서버 액션 : 함수 -> 실제 사용둘의 특징을 확실히 비교해보고자 한다.Route Handler// app/api/hello/route.tsimport { NextResponse } from "next/server";// 1. GET 요청을 처리하는 핸들러export ..

Tanstack Query + Context API + Zustand로 전역 상태 관리하기  *Context API : 상태를 전역으로 공유 4주차 숙제 🤔 Tanstack Query + Zustand 왜 같이 쓸까?탠스택은 서버 상태를 가져오고 캐싱한다.주스탠스는 클라이언트 상태 관리를 간편하게 할 수 있다.둘을 함께 사용하면, 서버 상태를 클라이언트 상태로 동기화하는 패턴을 만들 수 있다. 숙제 수행 단계 1.  RQProvider.tsx 에서 서버/브라우저 각각 새로운 쿼리 클라이언트 생성더보기"use client";import { isServer, QueryClient, QueryClientProvider,} from "@tanstack/react-query";function makeQue..

Next.js는 웹을 만들기 때문에 웹 서버를 실행할 수 있는 프레임워크이다.그렇다면 Next에서의 '웹 서버'란 무엇일까? React의 웹 서버의 역할은 빌드 시점에 빈 html(id가 root인 빈 div태그)과 JS 번들 파일을 제공한다.그것을 받은 브라우저는 알아서 JS를 해석하여 빈 태그에 JS 파일들을 바꿔 끼우는 형식으로 페이지를 구성한다.브라우저는 빈 html을 받았기 때문에 JS를 인식할 때까지 시간이 걸릴 수 밖에 없다. 즉, TTV가 길다.클라이언트 사이드 렌더링(CSR)이 바로 이러한 방식이다. Next.js의 웹 서버의 역할은 빌드 시점(SSG)과 요청 시점(SSR)에 HTML을 생성하고 API 라우트를 통한 데이터를 제공한다.나누자면 html은 프론트엔드, API를 제공하는 건 ..

Next.js를 활용한 개인 과제를 Vercel에서 배포해보았다.분명 개발 모드에서는 아무 문제 없이 작동하던 프로젝트가 빌드 과정에서 많은 오류를 뱉어냈다. 여러 원인이 있었고 파일 명이 나와있지만, 에러의 최종 페이지(?)만 나타나있었기 때문에정확히 어느 과정에서 에러가 발생한 건지 파악하기 어려웠다.  클라이언트 사이드 에러 처리 클라이언트 컴포넌트는 useQuery를 통해 에러 처리를 하고 있었다.또한 클라이언트 요청을 처리하는 라우터 핸들러에서도 에러 처리를 하고 있었다.더보기// rotation > page.tsx...export default function Rotationpage() { const { data: imgUrl, isPending, isError, error } = getIm..

Tanstack Query 📍Tanstack : 클라이언트 사이드에서 서버 상태 관리를 하는 라이브러리탠스택은 useQuery 같은 훅을 사용해야 한다.때문에 Provider 컴포넌트는 반드시 클라이언트 컴포넌트이다.QueryClientProvider는 React Context를 사용해서 전역 상태를 관리React의 Context API는 클라이언트 컴포넌트에서만 사용전역 상태를 관리하기 때문에 최상단(root layout)에 적용🤔클라이언트 사이드에서만 적용시키는데 왜 전역에 적용해야 할까?페이지 이동 시 클라이언트 상태가 초기화될 수 있기 때문에 전역에서 캐싱모든 하위 클라이언트 컴포넌트에서 동일한 QueryClient 인스턴스를 사용 서버 컴포넌트와 클라이언트 컴포넌트 📍서버 컴포넌트와 클라이..

로딩까지 시간이 걸리는 페이지로 이동을 한다고 해보자.  영상에서 볼 수 있듯이 페이지가 모두 그려질 때까지 넘어가지 않고 스피너가 돌게 된다.이를 보완할 수 있는 방법이 있다. 비동기 데이터 로딩 [클라이언트 사이드] 데이터를 불러오는 것에서 비동기를 말하는 것이 아닌페이지를 순차적으로 보여주는 것에 있어서 비동기 형식을 말한다. isLoading 컴포넌트를 사용하여 데이터를 비동기적으로 가져오는 동안 'Loading...' 을 표시하고 데이터가 준비되면 UI를 업데이트한다.더보기더보기'use client';import React, { useState, useEffect } from 'react';import { Product } from '@/types';const HomePage = () => { ..

우리가 평소에 쓰는 개발 모드는 yarn dev를 했을 때, 브라우저의 ‘개발자도구’에서 콘솔을 확인할 수 있었다.yarn build를 하게 되면 실제 배포에서 사용되는 프로덕션 모드로 바꾸는 것이다따라서 (특히 react)는 개발자도구에서 보던 태그나 다른 형태가 아닌 일그러진 형태가 되는 것이다.react는 html요소가 거의 없으며 JS를 통해 화면에 그려내는 것이기 때문이다. build를 하게 되면 빌드 시점에서의 로직이 프로덕션 모드로 생성된다. SSG (Static Site Generation)SSG는 최초 빌드 시의 상태를 캐싱해두었다가 사용자의 요청에 따라 고정된 HTML을 클라이언트에 전달하고 화면에 뿌려준다.이미 서버 측에서 HTML을 빌드해두었기 때문에 사용자에게 정말 빠르게 보여줄..

타입스크립트에서 타입을 선언하는 방식인 interface와 type. interface는 여러 할당이 가능하다.하지만 위험요소가 있으며 자주 쓰이지는 않는 듯 하다.interface Todo { id: string; title: string; completed: boolean;};interface Todo { timestamp: number;}; 위와 같이 interface는 여러 할당이 가능하다.이런 식으로 할당하게 되면 결국 Todo에는 4개의 타입이 가능하다. 확인은 아래 사진에서 볼 수 있듯이 todo. 을 찍으면 내부 타입 확인이 가능하며 timestamp 타입을 포함하고 있다. 다만, 이렇게 쓰인다면 Todo 자체의 타입이 변하게 된다.즉, 처음 할당한 {id, title, comp..

TodoList의 디테일 페이지와 홈페이지를 오가면서 테스트한 staleTime 과 gcTimeHomeDetail  invalidateQuerise - 쿼리 무효화// Detail.jsx const { id } = useParams(); const fetchDetail = async () => { const response = await todoApi(`/todos/${id}`); return response.data; }; const { data, isLoading, error } = useQuery({ queryKey: ["todos", id], queryFn: fetchDetail, }); 홈 -> 디테일 페이지로 들어가면 params로 id를 요청하여 해당 tod..