본문 바로가기

전체 글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.
<Image> 컴포넌트 Image 컴포넌트란?Next.js 에서 제공하는 이미지 최적화 컴포넌트이다.Next.js 프로젝트에서는 태그를 사용하면 컴파일 에러가 발생한다. 런타임 환경에서 사용하는 데는 아무런 문제가 없지만, 이왕이면 Next.js에서 제공하는 컴포넌트를 써서 대역폭을 줄이고 최적화를 하라는 의미의 에러가 뜬다.Image 컴포넌트의 장점Image 컴포넌트를 사용하면 아래와 같은 장점이 있다.사이즈 최적화 : 브라우저에 적합한 크기의 이미지를 자동으로 제공하여 불필요한 대역폭 사용을 줄여 줌.포멧 최적화 : WebP와 같은 최신 이미지 포맷을 사용해서 파일 크기를 줄이고 로딩 속도를 향상시킴.반응형 이미지 : 다양한 해상도에 맞게 이미지를 자동으로 조절해 줌.레이아웃 보정 : 이미지가 로드되기 전에 공간을 예약.. Programing/Next.js 2024. 8. 5.
모듈의 exports는 선언문에서? 하단에서? // 선언문에서 바로 export 하는 use caseexport function Login() { ...}export fuction Logout() { ...}// 하단에서 모아서 export 하는 use caseexport function Login() { ...}export fuction Logout() { ...}export { Login, Logout }  위 예제는 컴포넌트로 예를 들었지만, 물론 보통 한 파일에서 컴포넌트를 여러 개 export 하는 경우는 잘 없었던 것 같다.함수를 여러 개 export 하는 경우를 생각해보면 더 적절하겠다. 둘의 기능은 완전히 같다. 단순히 취향 차이이다. 각각 장단점이 있는데,선언문에서 바로 export 하는 경우 함수나 컴포넌트가 export 됨.. Programing/React 2024. 8. 2.
layout 컴포넌트 React.js에서 App 컴포넌트에서 했던 일을 Next.js에서는 layout 컴포넌트가 해주고 있다고 생각하면 된다. 프로젝트를 처음 생성하고 나면 src/app 폴더 하위에서부터 layout.tsx 컴포넌트가 만들어져 있을 건데,이곳에서 해당 레이아웃 컴포넌트가 있는 폴더 내부의 모든 파일들 (자식 요소들, children)에 대해서 공통된 레이아웃을 설정할 수 있다. 예를 들어 아래처럼 모든 페이지에 둥둥 떠있는 내비게이션 헤더를 만들 수도 있다. import Link from 'next/link';export default function Layout({ children }) { return ( 홈 ㅣ 로그인 {children} );} .. Programing/Next.js 2024. 8. 1.
<Link> 컴포넌트 넥스트에서는 컴포넌트와 useRouter() 훅으로 페이지 간 이동을 할 수 있다. import Link from 'next/link'function Home() { return ( Main Login )} 앵커 태그와 비슷한 형태로 되어 있는 것을 알 수 있다.Link 컴포넌트로 만든다고 해서 별도의 태그로 만들어지는 것이 아니라 개발자 도구에서 확인해보면 HTML 문서에서는 앵커 태그로 변환되어 있는 것을 확인 할 수 있다. 앵커 태그로 만들어져야 검색 엔진 크롤러가 페이지를 읽을 수 있기 때문에 그런 부분은 넥스트에서 잘 변환해주니 걱정하지 않아도 된다. 다만 Link 컴포넌트로 페이지 이동할 수 있는 링크를 만들어 놓으면 a 태그와는 다르게, 사용자의 뷰포트에.. Programing/Next.js 2024. 7. 31.
개발 초기 아이템 리스트 스켈레톤 로더 구현하기 스크린샷코드// 스켈레톤 컴포넌트// 이후에 가져올 데이터가 렌더링 될 크기와 동일하게 맞춘다import React from 'react';const SkeletonLoader: React.FC = () => { return ( );};export default SkeletonLoader; 위 스켈레톤을 isLoading이나 isPending 등의 값을 반환 받거나 api route에서 로직.. Programing/Next.js 2024. 7. 31.

티스토리툴바