data life

지난 글에서 기본적인 캐시 개념을 정리했다면, 이번엔 다른 훅 두 개를 정리해보려 한다.useInfiniteQuery는 데이터를 어떻게 쌓을 것인가 (무한 스크롤 / 페이지네이션)에 대한 훅이고, useSuspenseQuey는 로딩·에러 상태를 누가 처리할 것인가 (Suspense/ErrorBoundary 위임)에 대한 훅이라 서로 목적이 다르다. 둘 다 필요하면 합친 useSuspenseInfiniteQuery도 있음.테스트 예제useInfiniteQuery : 페이지를 쌓아나가는 쿼리일단 useQuery는 한 번의 요청이 하나의 데이터 덩어리이지만 useInfiniteQuery는 페이지 단위로 데이터를 계속 이어붙여 관리한다.const { fetchNextPage, fetchPreviousPage..

서버 데이터를 state로 다루지 않고, 캐시로 다루기 위해 등장한 tanstack query (구 React query)에 대해 정리해보고자 한다.tmi. 원래는 React Query지만 Table, Router, Virtual 등 프레임워크 독립적인 라이브러리 생태계로 확장되면서 상위 브랜드로 통합됨 (어댑터 형태) 일단 왜 TanStack Query가 필요한지// 기존const [todos, setTodos] = useState([])const [isLoading, setIsLoading] = useState(true)const [error, setError] = useState(null)useEffect(() => { setIsLoading(true) fetch('/api/todos') ..

app/ todos/ page.tsx ← /todos 라는 URL이 됨 (화면) api/ todos/ route.ts ← /api/todos 라는 URL이 됨 (API) 라우팅 파일파일명역할page.tsx화면 하나layout.tsx공통 레이아웃route.tsapi 앤드포인트loading.tsx로딩 UIerror.tsx / global-error.tsx오류 / 전역 오류 UInot-found.tsx페이지 없음template.tsx새롭게 렌더링된 레이아웃 동적 라우트- 하나만 받는 경우app/api/todos/[id]/route.ts params로 값 꺼내기//app/api/todos/[id]/route.tsexport async function DELETE( reque..

한줄로 간단히 요약하자면 기본은 다 서버이지만 인터랙션이 필요할 때에만 클라이언트를 사용한다.이때, 파일 맨 위에 'use client'를 써주면 되는데 기본적으로 layout과 page는 서버 컴포넌트이고, 이는 서버에서 데이터를 가져와 UI를 렌더링하고, 결과를 캐싱한 뒤 클라이언트로 스트리밍할 수 있게 해준다. 인터랙션이나 브라우저 API가 필요할 경우 클라이언트 컴포넌트를 사용하여 기능을 추가한다. 사실 언제 뭘 써야 하는 지 판단 기준이 실전에서 가장 중요한데클라이언트 컴포넌트는- 상태나 이벤트 핸들러- 생명주기 로직(useEffect)- 로컬 스토리지나 브라우저 전용 API- 커스텀 훅이 필요할 때 사용된다. 예를 들어, 간단한 할 일 프로젝트에 적용한다고 치면컴포넌트타입 TodoList (r..

React 프로젝트 시작에 앞서 가장 많이 고민하는 게 상태관리입니다."Zustand 써야 해? Redux가 맞아? 그냥 귀찮으니 Context API로 버텨?" 개발하면서 같은 고민을 했어요. 직접 써보고 느낀 것들을 정리해둘까 합니다. 클라이언트 상태 vs 서버 상태먼저 이 개념부터 잡고 가도록 합시다.클라이언트 상태 → 브라우저 안에서만 존재하는 상태 모달 열림/닫힘, 다크모드, 유저 UI 설정서버 상태 → 서버에서 가져오는 데이터 유저 정보, 게시글 목록, API 응답값 이 글은 클라이언트 상태관리만 다뤄보려고 합니다.. 서버 상태는 React Query 글에서 따로 정리했어요. 1. Context APIReact 내장이라 별도 설치가 필요 없습니다.// context 생성const UserCon..

2024년 상반기 회고록12월 프론트엔드 개발자로서의 시작이자 입사부터 이번달의 퇴사까지의 경험들을 되돌아보며, 나의 개발자로서 여정을 기록해보고자 한다. 입사와 새로운 시작 (2023년 12월)지난 12월 11일, 사회의 첫 발걸음과 함께 개발자로서의 커리어를 시작하게 되었다. 정말 내가 원하던 회사는 아니었지만 운이 좋게도 합격하게 되었고 통보와 동시에 한걸음에 달려갔었던 회사이다. 그래서인지 입사 초 한 달 동안은 왕복 5시간 거리도 신이 나게 다녔었던 것 같다. 사실 이때 집과 회사를 오고가면서 공부했던 vue, nuxt가 지금 내가 성장한 것에 대해 과언이라고 해도 무방할 정도이다.무엇보다 회사에 적응하기 바빴고 회사에서 내어준 게시판 만들기 과제와 병행하며 기존에 진행하던 웹소켓을 이용한 사이..

1. 프라이빗 클래스 필드와 메소드 - 객체 지향 프로그래밍에서 중요한 역할을 합니다. - 다른 사람이 작성한 함수를 사용할 시, 프라이빗해야 하는 문제를 해결해줍니다. class MyClass { #privateMethod() { console.log("This is a private method."); } publicMethod() { console.log("This is a public method."); this.#privateMethod(); // 클래스 내부에서만 호출 가능 } } const instance = new MyClass(); instance.publicMethod(); // "This is a public method." 출력 // 아래 코드는 문법 오류입니다. 클래스 외부에서 호..

Next.js에서 img 태그 사용 시, 다음과 같은 문구를 보신 적이 있으실 겁니다. Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. 📌 Image Component & Image Optimization Next.js에서는 이미지를 자동으로 최적화시켜 주어 따로 처리해주지 않아도 되도록 해줍니다. 이미지 컴포넌트인 `next/image`는 모던 웹용으로 발전된 HTML img 태그의 확장입니다. 해당에는 우수한 Core..

이번 포스팅에서는 차세대 ORM 프레임워크로 각광받고 있는 Prisma에 대해서 함께 알아봅시다. 공식문서에서는 차세대 Node.js 및 TypeScript의 ORM 라고 소개되어있습니다. 여기서 ORM이란? Object Relational Mapping으로 ‘객체로 연결을 해준다’는 의미로, 애플리케이션과 데이터베이스 연결 시 SQL언어가 아닌 애플리케이션 개발언어로 데이터베이스를 접근할 수 있게 해주는 툴입니다. 자바스크립트 혹은 타입스크립트 코드와 데이터베이스 사이의 연결다리라고 이해하시면 되겠습니다. SQL문법 대신 애플리케이션의 개발언어(자바스크립트 혹은 타입스크립트)를 그대로 사용할 수 있게 함으로써, 개발 언어의 일관성과 가독성을 높여준다는 장점을 갖고 있습니다. 또한 타입스크립의 장점도 같..

PlanetScale은 개발자 경험을 희생하지 않고도 확장성, 성능 및 안정성을 제공하는 MySQL 호환 서버리스 데이터베이스입니다. PlanetScale을 사용하면 수평 분할, 비차단 스키마 변경 및 더욱 강력한 데이터베이스 기능을 구현하는 데 어려움을 겪지 않고도 강력한 기능을 얻을 수 있습니다. planetScale은 깃과 같이 분기(branch) 작업이 가능합니다. 스키마 변경 사항을 프로덕션 데이터베이스에 직접 적용하는 대신 본질적으로 데이터베이스의 복사본인 분기를 생성할 수 있습니다. 프로덕션 외부에서 새 분기를 생성하면 개발에 사용하여 스키마를 변경할 수 있는 격리된 데이터베이스 복사본이 있습니다. 시작하기 전, 먼저 해당 사이트에서 로그인과 결제수단을 등록해주세요! (데이터베이스 생성 시,..