본문 바로가기

Programing371

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.
<Image> 컴포넌트 Image 컴포넌트란?Next.js 에서 제공하는 이미지 최적화 컴포넌트이다.Next.js 프로젝트에서는 태그를 사용하면 컴파일 에러가 발생한다. 런타임 환경에서 사용하는 데는 아무런 문제가 없지만, 이왕이면 Next.js에서 제공하는 컴포넌트를 써서 대역폭을 줄이고 최적화를 하라는 의미의 에러가 뜬다.Image 컴포넌트의 장점Image 컴포넌트를 사용하면 아래와 같은 장점이 있다.사이즈 최적화 : 브라우저에 적합한 크기의 이미지를 자동으로 제공하여 불필요한 대역폭 사용을 줄여 줌.포멧 최적화 : WebP와 같은 최신 이미지 포맷을 사용해서 파일 크기를 줄이고 로딩 속도를 향상시킴.반응형 이미지 : 다양한 해상도에 맞게 이미지를 자동으로 조절해 줌.레이아웃 보정 : 이미지가 로드되기 전에 공간을 예약.. Programing/Next.js 2024. 8. 5.

티스토리툴바