프로젝트를 빌드한 후에 에러가 발생하면 사용자는 next.js의 기본 에러메세지가 표시된 페이지를 확인하게 된다 이런 UI말고 우리가 의도한 UI로 사용자에게 재시도를 유도할 수 있게하려면 어떻게 할 수 있을까?Error UI를 만들기위한 기능도 넥스트에서 기본으로 제공하고 있다. Error UI 만들기1) route segment 폴더에 error.tsx 파일을 생성한다.2) error.tsx는 반드시 클라이언트 컴포넌트여야한다! ('use client')- 리액트의 error boundary와 연관- 에러 바운더리는 클래스 컴포넌트로 작성되어있고, 리액트 컴포넌트 트리 내에서 발생하는 오류를 잡아내 fallback UI를 렌더링하는 역할을 한다- 따라서 클라이언트 측에서 오류를 처리하기 위해서는 오..
큰 데이터를 받아거나 네트워크가 느린 환경에서는 어쩔 수 없이 긴 로딩시간이 생길 수 있다.그럴 때 활용할 수 있는 방법들을 알아보자! 느린 데이터 fetch 환경 만들기1. 크롬에서 속도를 조정할 수 있다.2. json-server 버전을 낮춰 딜레이를 준다- "dependencies": { "json-server": "0.17.4" }- "server": "json-server --watch db.json --delay 5000 --port 4000" 비동기 데이터 로딩페이지에 로딩 UI를 띄워두고, 데이터를 로딩하는 방식이다.'use client';import React, { useState, useEffect } from 'react';import { Product } from '@/types'..
Server Component와 Client Component기본적으로 app 폴더 하위의 모든 컴포넌트는 서버 컴포넌트넥스트에서 클라이언트 컴포넌트를 사용하려면 컴포넌트 파일의 최상단에 'use client' 예약어를 작성해줘야 함 -> 따라서 useState, useEffect 같은 훅을 사용하려면 use client를 작성해줘야 했던 것-> 또한 use client를 작성한 노드의 서브트리는 모두 클라이언트 컴포넌트로 취급된다. 클라이언트 컴포넌트와 서버 컴포넌트를 동시에 사용해야하는 경우에는?1) useClient를 사용하는 컴포넌트를 하나 선언하고2) 페이지인 서버 컴포넌트에서 위의 컴포넌트를 임포트해서 사용하면 된다- 사용자와의 상호작용이 필요한 컴포넌트는 클라이언트 컴포넌트로- 그렇지 않은 ..
layout어떤 segment와 그의 자식 노드에 있는 요소들이 공통적으로 적용받게 할 UI를 정의레이아웃을 지정하고싶은 경로의 루트 폴더에 layout.tsx 파일을 만들고, 자식 노드들이 표시될 곳에 {children}을 사용해 레이아웃을 만들어준다. templatelayout과 유사하지만 상태를 유지 or 리렌더링 발생에서 차이가 있다.layout은 경로 전반에서 상태가 유지되며 필요한 경우가 아니라면 굳이 리렌더링 하지 않는데, template은 라우팅을 탐색할 때마다 새 인스턴스를 만든다. (즉, 동일한 DOM 요소 생성) 아래와 같은 경우에 활용할 수 있다.1) 템플릿을 통한 페이지 open animation- 페이지 전환시 애니메이션을 계속 재생하고 싶을 때- layout으로 만드는 경우에..
URLURL Segment/ 로 분류된 URL path의 한 부분을 의미- http://some.com/dashboard/settings 에서 dashboard, settings 등! URL path, Pathname도메인 (~.com) 이후 따라오는 url 부분 File System based Routingpage.tsx는 path별 main ui가 표시될 곳우리는 각 라우팅마다 page.tsx 파일을 만들게 될 것 -> 그럼 라우팅이 자동으로 만들어짐 static routing (정적 라우팅)1) app 폴더에 test 폴더 생성2) test 폴더에 page.tsx 생성3) localhost:3000/test 로 들어가면 page.tsx의 내용이 렌더링되는 것을 확인할 수 있다! -> 즉 폴더는 U..
지난 프로젝트 중 API URL을 설정해두지 않아 절대 네트워크 요청이 이뤄질 수 없는 상황이었는데 네트워크 에러는 나면서 컴포넌트 내부에서 탠스택쿼리의 isSuccess 를 조건으로 설정해둔 alert이 뜨는 현상이 있었다.대체 이게 뭐지..? 하다가 우선 당장 해야했던 기능 구현을 마무리하고 조금 여유가 생겼을 때 다시 알아보았다. 이유는 생각보다 간단했다! 탠스택쿼리의 queryFn, mutationFn에서 에러가 발생했을 때도 에러가 아닌 데이터를 return해주고 있었기 때문이다. 기존 코드export const postSignUp = async (userInput) => { try { const response = await authInstance.post('/signup', userI..