Don't be afraid of challenges

'수정'을 거친 후 데이터베이스가 업데이트 되고,그 후 업데이트된 데이터를 다시 브라우저에 불러와야 한다.  이 방법을 수행할 수 있는 몇 가지 방법 1. tanstack query (권장)tanstack query는 클라이언트에서 서버 데이터를 쉽게 관리하고 갱신하는데 유용한 라이브러리.이를 사용하면 데이터가 변경된 후 자동으로 데이터를 새로 불러오거나, 수정된 데이터를 서버에서 가져와 UI 갱신 가능주요 장점 :- refetching : 데이터가 수정되면 해당 데이터를 자동으로 다시 불러오거나, 수동으로 refetch 트리거하여 최신 데이터 반영- optimistic updates : 데이터 수정 요청이 서버에 성공하기 전에 UI에서 미리 예상 결과를 보여주어, UX 개선- 캐시 관리 : 요청 결과는..

2025-01-09 저녁, 인턴업무를 수행하던 와중 검색, 필터링 구현을 시작하게 되었다.지금까지는 그냥 데이터를 다 받은 다음 프론트 단에서 데이터를 slice하고 그랬었는데 몇 달전 내배캠에서 최종프로젝트를 같이하던 팀원분이 검색로직을 맡았었는데 searchParam을 이용하여 로직구현을 하던것을 보았다.그땐 시간도 없고 내 업무 처리하느라 바빠서 저게 뭐지 ..? 하고 넘겼었는데 이제 본인이 그 업무를 맡게 된 것이다.그래서 관련 블로그를 찾아보니 url에 쿼리스트링을 조작하여 상태정보를 저장할 수 있는 방법을 보게 되었다. 지금까지 쿼리를 이용하여 검색로직을 구현해야하는 것에 대해 굳이..? 라는 생각이 들었다.사용자가 검색창에 검색을 하고 필터링을 직접 조작하면 되는 것이 아닌가라고 생각했었는데..

// 페이지가 변경될 때마다 다음 페이지의 데이터를 미리 불러옵니다. useEffect(() => { queryClient.prefetchQuery({ queryKey: ['fanArt', { page: page + 1 }], queryFn: () => fetchNextPage(postId, page) }); }, [page, postId, queryClient]);​// 한 페이지에 표시할 아이템 수와 페이지네이션에 표시할 페이지 수를 정의합니다.export const itemCountPerPage: number = 5;export const pageCountPerPage: number = 5; // 다음 페이지의 데이터를 불러오는 함수입니다.const fetchNext..

1. alertimport { ToastType } from '@/types/toast.type';import { cva } from 'class-variance-authority';import Image from 'next/image';import { useEffect, useState } from 'react';import CloseIcon from '../../../public/icons/ic-close.png';import InfoIcon from '../../../public/icons/ic-info.png';interface AlertProps { toast: ToastType;}const alertVariants = cva( 'bg-gray-200 border border-l-4 bord..

'use client';import supabase from '@/supabase/supabase';import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';import { useParams } from 'next/navigation';const DEFAULT_HEART = '🤍';const PUSHED_HEART = '❤️';function PocketLayout() { const { id } = useParams(); const userId = '4f1ec6bf-bdcd-41fb-aa1e-74b5093d59bb'; const queryClient = useQueryClient(); const { data: ge..

기본적으로 app 폴더 하위의 모든 컴포넌트는 서버 컴포넌트→ 개발을 하다보면 client-side rendering을 위한 기술이 필요할 때도 있는데 "use client" 코드를 컴포넌트 최상단에 붙여넣기 하면 됨 언제 쓰냐 ?User와의 상호작용이 있는경우 CC, 그 외는 SC (그니까 default가 SC고 필요한 경우에 CC를 쓰자) fetch를 통해 여러가지 렌더링 패턴에 대해 이해 할 수 있다. 컴포넌트의 변화는 사실 fetch한 데이터를 기준으로 변경되기 때문에 fetch 데이터의 변경은 컴포넌트 렌더링 방식을 규정한다고 볼수 있다 1. SSG (Static Site Generation)fetch한 데이터는 영원히 변치 않고, 계속 갱신할 필요가 없다SSG는 빌드타임(build-time) ..

template vs layoutlayout 경로 전반에 걸쳐서 상태가 유지됨template라우팅을 탐색할 때 각 하위 항목에 대해 새 인스턴스를 만든다 (즉, User 입장에서 동일한 Template을 공유하는 경로사이를 왔다갔다 할 때 DOM 요소가 다시 생성된다는 것을 의미)use-case1. 템플릿을 통한 페이지 open animation- 페이지 간 전환 시 애니메이션을 계속해서 주고 싶을 때- layout으로 만들어 놓으면 , 최초 렌더링시에만 animation이 적용되고 끝남2. useEffect, useState에 의존// src>app>text>layout.tsx // src>app>text>template.tsx "use client"; import Link from "next/link..

nextjs란?React 프레임워크 nextjs의 왜 쓰냐 ?1. API Route를 지원해서 Full stack 웹 개발 가능2. 렌더링  - CSR에서 벗어나 SSR, ISR, SSG 가능3. 코드 스플리팅- 전통적으로, 해당 웹 전체 코드를 한번에 다운받고 시작하기 때문에 오래걸림 따라서, TTV (Time To View : 사용자가 최초 View를 볼 수 있을 때 까지의 시간)가 오래걸림- 코드 스플리팅을 사용한다면, 사용자가 필요로 하는 부분만 우선 로딩 → Suspense와 lazy를 이용한 코드 스플리팅 구현4. vercel에서 next.js를 제공하기 때문에 배포 쉬움 라우팅1. App Router (recommended)2. Pages Router 렌더링1. CSR (Client Side..