본문 바로가기

분류 전체보기402

Next.js 서버/클라이언트 환경에서 TanStack Query 사용하기 TanStack Query, devtools 설치yarn add @tanstack/react-query @tanstack/react-query-devtoolsQueryProvider 설정QueryProvider 컴포넌트를 정의하여 앱의 최상위 컴포넌트에 TanStack Query를 제공하는 설정을 한다.TanStack Query는 리액트에서 데이터 패칭, 캐싱, 동기화를 도와주는 라이브러리이다.devtools는 개발 도구로 현재 데이터의 상태를 웹 브라우저 우측 하단 플로팅 아이콘을 통해 보여주는 라이브러리이다.// src/utils/QueryProvider.tsx'use client';import { QueryClient, QueryClientProvider,} from '@tanstack/reac.. Programing/Next.js 2024. 8. 9.
Next.js API Route로 supabase 통신하기 API Route 정의import { createClient } from '@/utils/supabase/server';import { NextRequest, NextResponse } from 'next/server';export async function POST(req: NextRequest) { try { const supabase = createClient(); const tripData = await req.json(); const { data: trip, error } = await supabase .from('trips') .insert(tripData) .select(); /.. Programing/Next.js 2024. 8. 8.
API Route Handler + Supabase 8.7라우트 핸들러란?라우트 핸들러가 왜 필요한가?사용법API 라우트 생성src app api route.ts위와 같은 구조로 파일을 만들고 이름은 route.ts 또는 .js여야만 한다. 기본 사용법은 위와 같으나, 본인은 사용자 정보를 가져오는 동적 라우팅에서 사용할 동적인 라우트 핸들러를 만들어보겠다.src app api users [id] route.ts// app/api/users/[id]/route.tsimport { NextResponse } from 'next/server';import { supabase } from '@/lib/supabaseClient';export async function GET(request, { par.. Programing/Next.js 2024. 8. 7.
detail page 동적 라우팅 기본 패턴 상황API에서 데이터를 받아 오고 그 반환값으로 어떤 리스트를 렌더링 하는 경우, 그 렌더링 된 아이템 하나를 클릭하면 더 자세한 상세 페이지로 연결되는 것이 일반적인 user flow이다. 만약 쇼핑몰로 가정한다면 수천, 수만 개의 상품 정보가 있을 것이고, 상품명, 가격, 이미지... 등등의 정보가 반환값에 담겨 있다고 가정하자. 이럴 때 각각의 아이템에는 그 아이템을 식별할 수 있는, 겹치지 않는 고유값의 id가 일반 number든 uuid든 어떤 식으로도 겹치지 않게 설정되어 있을 것이다. 보통은 이러한 고유값을 하나의 세그먼트로 받아서 해당 아이템의 상세 페이지를 라우팅하게 된다.제품에 대한 상세페이지 뿐만 아니라 유저에 대한 프로필도 마찬가지다. https://ive.com/goods/1 이런.. Programing/Next.js 2024. 8. 6.
브라우저 콘솔에서 특정 클래스 스크래핑 // span 태그의 클래스 이름 배열const classNames = ["_ap3a", "_aaco", "_aacw", "_aacx", "_aad7", "_aade"];// 클래스 이름을 모두 포함하는 span 태그 선택const spans = document.querySelectorAll('span');const collectedTexts = [];spans.forEach(span => { // span 태그가 모든 클래스 이름을 가지고 있는지 확인 const hasAllClasses = classNames.every(className => span.classList.contains(className)); if (hasAllClasses) { collectedTexts.push(span.t.. Programing/JavaScript 2024. 8. 5.

티스토리툴바