Next.js8분
Next.js 16 revalidateTag와 브라우저 캐시: 사이드바 숫자가 어긋난 문제
한 번에 글을 일곱 편 발행한 날, 블로그 왼쪽의 카테고리 메뉴가 이상하게 보였습니다. 카테고리를 오가며 스크린샷 두 장을 찍었습니다. 첫 장은 전체 글 수가 377, 「데이터베이스 설계」가 14편이었고, 몇 초 뒤에 다른 카테고리를 눌러 찍은 둘째 장은 전체 370, 「데이터베이스 설계」 7편이었습니다. 메뉴가 글 수…
전체 태그
#technical-note 502개 글
- React8분
React useMemo와 useCallback은 언제 써야 할까?
리뷰에서 이런 코드를 자주 만납니다.
- React7분
React Error Boundary와 try/catch의 차이
대시보드에 위젯이 여섯 개 있습니다. 그중 매출 차트 위젯이 서버에서 예상과 다른 모양의 데이터를 받아 렌더링 중에 오류를 냅니다.
- React9분
React useActionState와 useOptimistic으로 폼 다루기
견적 요청 폼을 보내는 코드입니다.
- React8분
React 커스텀 훅은 state를 공유할까?
장바구니 아이콘과 장바구니 페이지가 모두 담긴 상품 수를 보여 줘야 해서, 로직을 커스텀 훅으로 뺐다고 해 보겠습니다.
- React9분
React Context와 리렌더링
로그인한 사용자 정보와 장바구니를 앱 어디서나 쓰려고 컨텍스트 하나를 만들었다고 해 보겠습니다.
- React9분
React state 구조 설계 원칙
견적함 화면에 품목 목록과 합계가 있습니다.
- React8분
React useRef와 state의 차이
검색어를 입력하고 1초 동안 멈추면 검색하는 입력칸입니다.
- React12분
React transition과 useDeferredValue
상품 1만 개를 거르는 검색 화면입니다.
- React11분
React 서버 함수(use server)와 인증
관리자만 들어올 수 있는 화면에 상품을 지우는 버튼이 있습니다.
- React10분
React Suspense와 스트리밍, 그리고 404 상태 코드
이 블로그의 카테고리 페이지는 없는 카테고리 주소로 들어오면 「찾을 수 없음」 화면을 보여 줍니다. 코드에는 분명히 notFound() 가 있었습니다. 그런데 응답 상태 코드를 찍어 보니 이렇게 나왔습니다.
- React12분
React 서버 컴포넌트와 use client 경계
상품 상세 페이지에 「장바구니 담기」 버튼을 달려고 페이지 파일 맨 위에 한 줄을 더했다고 해 보겠습니다.
- React10분
React 훅 규칙과 조건부 return
로그인하지 않은 사용자에게는 안내 문구만 보여 주는 컴포넌트입니다.
- React9분
React key와 index: 목록 입력값이 뒤섞이는 문제
할 일 목록에서 줄마다 메모를 적는 입력칸이 있습니다.
- React10분
React useEffect와 정리 함수: 외부 시스템 동기화
채팅방 화면이 방에 접속하는 코드입니다.
- React10분
React state 스냅샷과 업데이터 함수
버튼 하나로 숫자를 3 올리는 코드입니다.
- React10분
React 리렌더링은 언제 일어날까?
검색창 하나와 긴 목록이 있는 화면을 생각해 보겠습니다.
감사 로그와 변경 이력 설계
거래처의 결제 조건이 「월말 마감 30일」에서 「월말 마감 60일」로 바뀌어 있습니다. 거래처 테이블에는 updatedAt 이 있어서 어제 오후 3시에 바뀌었다는 것은 압니다.
금액·수량 자료형 선택: 정수, numeric, 부가세 끝수 처리
견적서의 품목 세 줄에 부가세를 줄마다 계산해서 더한다고 해 보겠습니다. 같은 견적을 합계에서 부가세를 한 번 계산한 화면과 나란히 놓으면 부가세가 1원 다릅니다.
N+1 쿼리 문제와 해결 방법
거래처 목록 화면에 거래처별 미수금을 한 칸 더 보여 주기로 했다고 해 보겠습니다. 코드는 자연스럽게 이렇게 나옵니다.