Next (5) 썸네일형 리스트형 mutateAsync 도입기 상황프로젝트에는 A 탭과 B 탭, 두 개의 탭이 있다. 두 탭 모두 React Flow로 구성된 캔버스를 가지고 있고, 각 캔버스의 상태를 서버에 스냅샷 형태로 저장하고 불러오도록 설계했었다.초기 구현은 단순했다. 컴포넌트가 mount될 때 서버에 GET 요청을 보내 스냅샷을 가져오고, 그 데이터를 노드와 엣지 상태로 복원한다. 그리고 컴포넌트가 unmount될 때는 현재 React Flow의 상태를 toObject()로 스냅샷 형태로 만든 뒤, 이를 POST로 서버에 저장한다.코드는 대략 다음과 같은 형태였다.useEffect(() => { // mount 시 GET refetch() .then((res) => { ... }) .catch((err) => { ..... Strict Mode와 useEffect의 반복 실행 이슈 정리 Next.js로 개발을 하다가 이상한 현상을 하나 발견했다. 분명히 컴포넌트가 한 번만 마운트될 거라 생각했는데, 콘솔에 로그가 세 번이나 찍힌 것이다. 상황다음은 테스트로 작성했던 코드다.const q1 = useTestDataQuery(1, { enabled: false });const q2 = useTestDataQuery(2, { enabled: false });useEffect(() => { // onMount -> 추후 q1 대신 GET 호출 예정 q1.refetch(); return () => { // onUnmount -> 추후 q2 대신 POST 호출 예정 q2.refetch(); };}, []); 단순히 마운트될 때 1번, 언마운트될 때 1번만 호출될 거라 예상했지만,.. Next.js 프로젝트 구조, src/app으로 써야 할까? Next.js로 프로젝트를 만들다 보면 한 번쯤은 이런 생각을 하게 된다. “나는 app Router를 쓰고 있는데, 굳이 src 폴더가 필요할까?”사실 나도 처음엔 그런 고민을 해본 적이 없었다. 그런데 공식 문서를 보다 보니 이런 문장이 눈에 들어왔다."Next.js also supports placing application code under the src folder. This seperates application code from project configuration files."즉, Next.js는 src 폴더를 강제하지 않지만, 지원한다는 뜻이었다. 그리고 그 이유는 “코드와 설정을 분리하기 위해서”라고 한다.이건 단순히 폴더를 옮기는 문제가 아니라, 프로젝트를 어떻게 구조적으로 설계하.. Loading.jsx와 Suspense fallback의 차이 Suspense와 laoding.jsx의 차이가 궁금해서 알아보았다. SuspenseSusepnse는 비동기 컴포넌트가 렌더링 중일 때 작동한다.그렇다면, 여기서 비동기 컴포넌트란 무엇일까? 비동기 컴포넌트란, 렌더링되기 전에 데이터를 가져오거나, 어떤 비동기 작업을 수행한 후에야 완전히 준비되는 컴포넌트를 말한다. 주로 Server Components, Suspense 등과 사용한다.// Client Component에서 비동기 처리import { useEffect, useState } from 'react';function AsyncComponent() { const [data, setData] = useState(null); useEffect(() => { fetch('/api/data').. bodySizeLimit 설정 https://nextjs.org/docs/app/api-reference/config/next-config-js/serverActions#bodysizelimit 문제 분석server action formData로 file을 보내려고 하는데, 아래와 같은 에러가 났다. 브라우저 상에서는 fetch 에러만 나서 한참을 헤맸는데, 터미널 로그를 보니 빠르게 원인을 찾을 수 있었다. 413 에러는 Payload Too Large 상태를 의미하는 것으로 요청 데이터가 서버에서 제한해 놓은 크기보다 크다는 것을 말한다.{ statusCode: 413} ⨯ uncaughtException: [Error: Body exceeded 1 MB limit. To configure the body size limit .. 이전 1 다음