flatMap()은 배열을 "평탄화(flatten)"하고 변환하는 메서드입니다. data.pages.flatMap((page) => page.posts)에서 flatMap()은 각 page 객체의 posts 배열을 하나의 큰 배열로 합치는 역할을 합니다.역할data.p

! (논리 NOT 연산자): 값을 반대로 바꿉니다.!true → false!false → true값이 falsy(거짓 같은 값)일 경우 true로, truthy(참 같은 값)일 경우 false로 변환합니다.!! (이중 논리 NOT): 다시 한 번 NOT을 적용해서 원래

에러는 두 가지로 나뉠 수 있다. **1. Expected Error : 예상 가능 오류 Uncaught Exceptions: 예기치 못한 오류** 위 두가지를 가지고 어떻게 에러를 핸들링하는지 알아볼 것 (공식문서 참고) Expected Error 주용 사용 예시

Route handler는 Web Request와 Response API를 사용해 특정경로에 대해 사용자 정의 요청 핸들러를 생성할 수 있다. → API end point를 만들 수 있다.Route Handler는 app 디렉토리 안이면 어디서든 사용가능하다. page

여태까지 내가 사용한 방법 supabase + prisma 사용한 방법 정리 따로 supabase의 project를 생성하는 단계는 적지 않고 초기 세팅하는 법만 적어 봄 (공식문서 - 참고용)최상위루트에 .env 설정하기/.envDATABASE_URL="" <

리턴값을 명시해줬는데 아래와 같은 에러 발생현재 코드에서 리턴값이 없기때문에 나온 에러였음

프로젝트 진행하기에 앞서 본격적인 스키마 작성 전 ERD 작성하나의 user는 여러개의 post를 작성할 수 있다.하나의 post는 하나의 유저만 가질 수 있다.하나의 user는 여러명을 following 할 수 있다.하나의 following은 여러 user로 foll

본 포스팅은 공식문서를 참고하여 작성라우트간 이동을 위한 4가지 방법<Link> ComponentuseRouter hook (Client Components)Using the redirect()(Server Components)Using the native His

어트리뷰트는 HTML의 속성element에 id나 class 같은 추가적인 정보를 일컫는다.프로퍼티는 DOM의 속성즉, HTML의 어트리뷰트를 DOM 내에서 대신해서 표현한다위 트리는 div태그를 DOM으로 표현한 것인데, 위에서 className이 property가

이 포스트만 보기보다 공식문서를 같이 옆에 두고 보는거 추천NextJS는 파일 시스템 기반 라우팅을 사용한다고 나와있다.페이지를 만들고 싶으면 app폴더 안에 page.tsx 만들면 됨. app 안에 있는 page.tsx가 localhost:3000으로 접속했을 때 가

각 코드의 비교를 통한 shallow를 알아보려고 한다.console.log()로 어느 컴포넌트가 렌더링 되는지 확인 바랍니다혹시라도 더 정확한 설명을 댓글로라도 알려주시면 감사하겠습니다. console.log() 결과 찍어보기 userInfo컴포넌트 리렌더Addres

데이터 캐싱 TanStack Query를 활용해서 데이터를 가져올 때 항상 queryKey를 지정한다. queryKey는 캐시된 데이터와 비교해 새로운 데이터를 가져올지, 캐시된 데이터를 사용할지 결정하는 기준을 정할 수 있다. import { use

기존의 useEffect, useState를 사용한 비동기 데이터 처리 방식은 상태 관리가 복잡하고 코드 중복이 많아 유지보수가 어려웠다. Redux Thunk와 같은 미들웨어를 사용해도 비동기 로직의 테스트가 복잡하고 보일러 플레이트가 코드가 많이 생기기 때문에 더

이번에 TanStackQuery를 처음 써봐서 작성한 포스트이다.현재 리액트(vite + ts) 를 통해 작성되어 있다.QueryClient는 TanStack Query의 핵심 객체로, 캐시를 관리하고 쿼리(Fetch) 작업을 수행하며, 상태를 추적한다.QueryCli

Zustand의 핵심 기능 + 설명을 담은 글Zustand : 작고 빠르며 확장 가능한 React 프로젝트에서 사용하는 상태 관리 라이브러리Zustand는 Hook 기반의 API이다.틀에 박힌 형식이나 고집은 없지만, 충분한 규칙성을 가지고 있어서 명시적이고 Flux와

이번에 TanStackQuery를 처음 써봐서 작성한 포스트이다.현재 리액트(vite + ts) 를 통해 작성되어 있다.QueryClient는 TanStack Query의 핵심 객체로, 캐시를 관리하고 쿼리(Fetch) 작업을 수행하며, 상태를 추적한다.QueryCli

개발 할 때 안좋은 습관 코드 바로 쓰기 snippet code를 vs extension에서 바로 사용하는 것 제가 추천하는 것 요구 사항을 정리하는 것 파일 : index.ts 내가 이해한 기획서를 정리해서 이렇게 화면 상단에 정리하기 이렇게 적어뒀을 때 장점

그래프 내의 모든 정점을 포함하지만 사이클이 없는 트리로, 신장 트리라고도 한다. 스패닝 트리는 그래프의 최소 연결 부분 그래프이다.최소 연결은 간선의 수가 가장 적은 것을 의미한다.n개의 정점을 가지는 그래프의 최소 간선의 수는 $n-1$개이고 $(n-1)$개의 간선

완전 이진 트리의 특성을 이해하면 쉽게 풀리는 문제 같다. 두 노드 A,B가 주어졌을 때 두 노드의 가장 가까운 부모노드를 찾는 문제였다. A,B를 //연산자(몫)를 사용해서 나누다 보면 A,B가 같아지는 지점이 생긴다 (상위 부모노드에 도달 했다는 뜻) 코드는 아래와

그래프의 특별한 형태 사이클이 없으며 모든정점이 연결된 무방향 그래프구성 요소 루트 노드 : 계층 구조의 시작 노드 부모 자식 관계 : 트리의 모든 노드 간의 관계는 부모-자식 관계를 나타냄 리프 노드 : 자식 노드를 갖지 않는 노드 서브 트리 : 특정 노드와 그 자손