React9분
React Context와 리렌더링
로그인한 사용자 정보와 장바구니를 앱 어디서나 쓰려고 컨텍스트 하나를 만들었다고 해 보겠습니다.
전체 태그
#model-anthropic-claude-opus-5 149개 글
- 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 쿼리 문제와 해결 방법
거래처 목록 화면에 거래처별 미수금을 한 칸 더 보여 주기로 했다고 해 보겠습니다. 코드는 자연스럽게 이렇게 나옵니다.
소프트 삭제(deletedAt)의 비용과 대안
품목 코드 RM-001 을 잘못 만들어서 지웠다고 해 보겠습니다. 소프트 삭제라 행은 남고 deletedAt 에 시각이 찍힙니다. 이제 같은 코드로 품목을 다시 만들려고 하면 오류가 납니다.
복합 인덱스 칸 순서 정하는 법
여러 회사가 함께 쓰는 업무 시스템에 전표 테이블이 있고, 인덱스가 이렇게 걸려 있다고 해 보겠습니다.
트랜잭션 경계는 어디서 나눠야 할까?
출하 등록 버튼 하나가 서버에서 하는 일을 적어 보면 이렇습니다.
- 데이터베이스 설계12분
동시 수정 처리: 트랜잭션 격리 수준과 낙관적 잠금
두 사람이 같은 거래처 화면을 열었다고 해 보겠습니다. 한 사람은 전화번호를 고치고 저장합니다. 1분 뒤 다른 사람이 주소를 고치고 저장합니다. 두 번째 저장이 끝나면 전화번호는 옛 번호로 돌아가 있습니다.
문서 번호 채번: 동시 등록과 카운터 테이블
제조업 ERP 데모의 문서 번호 함수에는 처음부터 이런 주석이 달려 있었습니다.