기본 콘텐츠로 건너뛰기

JPA N+1 문제, 왜 생기고 어떻게 줄일까: fetch join과 EntityGraph 선택 기준까지

JPA N+1 문제, 왜 생기고 어떻게 줄일까: fetch join과 EntityGraph 선택 기준까지 빠른 답 EAGER 는 N+1의 해결책이 아니라 연관 조회 시점을 앞당기는 설정에 가깝다. JPQL이나 Spring Data JPA 조회 메서드가 조인을 자동 보장하지는 않는다. LAZY 는 문제를 없애는 방식이 아니라 미루는 방식이다. 목록을 읽은 뒤 연관 필드를 순회하는 순간 N+1이 다시 나타날 수 있다. 목록 조회 최적화는 fetch join , @EntityGraph , 배치 로딩( @BatchSize , hibernate.default_batch_fetch_size )을 조회 형태와 페이징 요구사항에 맞춰 나눠 쓰는 편이 낫다. 최적화 여부는 SQL 로그, 바인드 값, 쿼리 수, 실행 계획까지 같이 봐야 판단할 수 있다. 목차 시간 흐름으로 이해하기 흐름으로 보기 패치가 아니라 fetch 전략이다 N+1이 생기는 구조를 쿼리 관점에서 보기 LAZY와 EAGER는 왜 둘 다 N+1에서 안전하지 않은가 findAll 호출 뒤에 실제 SQL이 어떻게 늘어나는가 실행 계획과 인덱스로 보면 왜 더 느려지는가 fetch join, EntityGraph, 배치 로딩은 어떻게 나눠 쓰나 설정과 검증 예시 자주 부딪히는 함정과 현재 기준 버전 차이 시간 흐름으로 이해하기 T1 목록 조회 시작 → T2 루트 쿼리 실행 → T3 연관 로딩 대기 → T4 연관 필드 접근 → T5 추가 SQL 반복 Post 목록 API는 대개 루트 엔티티만 읽는 SQL로 시작한다. 문제는 그다음 시점이다. DTO 매핑이나 JSON 직렬화에서 post.getAuthor().getName() 같은 코드가 실행되면, 그 순간 연관 엔티티 초기화가 시작되고 결과 건수만큼 비슷한 SQL이 반복될 수 있다. 흐름으로 보기 흐름 다이어그램 N+1은 "첫 쿼리 하나가 느린 문제"라기보다 "첫 쿼리 뒤에 반복 SQL이 따라붙는 구조"에 가...
최근 글

SSR은 무엇이고 언제 써야 할까: CSR, 하이드레이션, Next.js까지 현재 기준으로 정리

SSR은 무엇이고 언제 써야 할까: CSR, 하이드레이션, Next.js까지 현재 기준으로 정리 빠른 답 SSR은 첫 화면 HTML을 서버에서 먼저 만들어 보내는 방식이다. 다만 버튼과 입력이 실제로 반응하는 시점은 하이드레이션 이후일 수 있다. 브라우저는 SSR 페이지도 DOM, CSSOM, 렌더 트리, 레이아웃, 페인트, 컴포지팅을 그대로 거친다. SSR은 브라우저 렌더링을 없애는 기술이 아니라 시작 시점을 바꾸는 쪽에 가깝다. SEO와 초기 콘텐츠 노출이 중요하면 SSR이 도움이 되지만, 요청마다 HTML을 만들면 TTFB와 서버 비용이 늘 수 있다. 2026-04-07 기준 Next.js는 getServerSideProps 만으로 SSR을 설명하기 어렵다. App Router의 서버 컴포넌트, 스트리밍, 캐시 모델까지 함께 봐야 현재 동작과 가깝다. 목차 시간 흐름으로 이해하기 흐름으로 보기 SSR이 다시 중요해진 이유와 흔한 오해 SSR, CSR, SSG를 먼저 구분해 두기 요청부터 화면 반응까지: HTML, DOM, CSSOM, 하이드레이션 브라우저 렌더링 관점에서 보면 왜 SSR도 느릴 수 있을까 Next.js 현재 기준으로 다시 보기 스트리밍과 캐시를 같이 봐야 하는 이유 무엇을 측정해야 SSR의 효과가 보일까 언제 SSR을 선택하는 편이 잘 맞을까 현재 기준에서 바꿔 읽어야 할 오래된 설명 공식 문서와 참고 링크 시간 흐름으로 이해하기 요청 시작 브라우저가 URL을 요청하고 네트워크 왕복이 시작된다. → 서버 생성 서버가 요청 시점 데이터로 HTML을 만들거나 캐시된 결과를 꺼낸다. → 첫 표시 HTML과 CSS가 도착하면 브라우저가 첫 화면을 그리기 시작한다. → 연결 단계 자바스크립트가 로드되고 React가 기존 DOM에 연결된다. → 상호작용 가능 이벤트 핸들러가 붙고 클릭, 입력, 토글이 기대한 대로 동작한다. 흐름으로 보기 흐름 다이어그램 이 순서를 먼저 잡아두면 SSR이 바꾸는 구간과 바꾸지 않는 구간이 자연스럽...

웹 접근성은 왜 기능이 아니라 기본 품질일까: 구조부터 점검까지 실무적으로 이해하기

웹 접근성은 왜 기능이 아니라 기본 품질일까: 구조부터 점검까지 실무적으로 이해하기 빠른 답 웹 접근성은 일부 사용자를 위한 부가 기능이 아니라, 더 많은 사용자가 같은 기능을 실제로 사용할 수 있게 만드는 기본 품질입니다. 출발점은 복잡한 위젯이나 ARIA 가 아니라 HTML 구조, 제목 체계, 버튼과 링크의 의미 같은 기본 마크업입니다. ARIA 는 시맨틱 요소를 대체하지 못하고, 이름·역할·상태를 보강해야 할 때만 의미가 있습니다. 자동 검사 점수보다 중요한 것은 키보드와 스크린 리더로 핵심 사용자 흐름을 끝까지 수행할 수 있는지입니다. 목차 점검 순서 흐름으로 보기 웹 접근성을 기본 품질로 보는 이유 사용자는 어디에서 막히는가 시맨틱 구조가 접근성의 출발점인 이유 폼, 버튼, 모달에서 바로 적용하는 코드 예시 ARIA는 언제 필요하고 언제 멈추는 편이 나은가 키보드 포커스, 대비, 오류 메시지는 함께 봐야 한다 개발 과정에 녹이는 설정과 자동 점검 개선 우선순위를 잡을 때 놓치기 쉬운 점 점검 순서 제목 구조, 랜드마크, 버튼·링크의 의미를 먼저 확인합니다. 마우스를 치우고 Tab , Shift+Tab , Enter , 방향키만으로 이동해 봅니다. 폼 입력, 오류 메시지, 제출 실패 흐름이 읽히는지 점검합니다. 모달·탭·드롭다운 같은 복합 UI에 필요한 ARIA 만 보강합니다. 자동 진단 도구로 누락을 찾고, 마지막에 실제 보조기기 탐색으로 우선순위를 다시 조정합니다. 이 순서가 유용한 이유는 접근성 문제가 대개 화려한 인터랙션보다 기본 구조에서 먼저 드러나기 때문입니다. 처음부터 속성을 많이 덧붙이기보다, 문서 구조와 상호작용 흐름을 바로잡는 편이 실제 사용성 개선으로 이어지는 경우가 많습니다. 흐름으로 보기 1 구조 작성: 제목, 랜드마크, 입력 요소, 버튼의 의미를 마크업에 담습니다. ↓ 2 브라우저 해석: DOM 과 기본 시맨틱을 바탕으로 접근성 트리가 만들어집니다. ↓ 3 보조기기 전달: 스크린 리더는 요소의 ...

React에서 useEffect와 useLayoutEffect, 언제 무엇을 써야 할까

React에서 useEffect와 useLayoutEffect, 언제 무엇을 써야 할까 빠른 답 기본 선택은 useEffect다. 네트워크 요청, 구독, 이벤트 등록처럼 화면 표시를 막을 이유가 없는 작업에 맞다. useLayoutEffect는 DOM 크기 측정이나 위치 보정처럼 화면이 그려지기 전에 끝나야 하는 작업에만 좁게 쓴다. useLayoutEffect는 브라우저 페인트를 막는 동기 작업이므로 무거우면 첫 화면 표시가 느려진다. React 18 개발 모드에서는 Strict Mode 때문에 Effect가 두 번 실행된 것처럼 보일 수 있어 타이밍 로그를 해석할 때 주의해야 한다. 현재 초안의 구조는 이미 잡혀 있어서, React 공식 문서와 MDN 기준으로 실행 시점 표현만 다시 확인한 뒤 발행용 문장으로 정리하겠습니다. 비교 섹션과 시간축 섹션은 초반에 더 압축하고, 오래된 설명으로 보일 수 있는 부분은 현재 기준 용어로 바로잡겠습니다.공식 문서 기준선은 반영했습니다. 현재 React 문서는 react.dev 의 최신 메이저인 React 19.2 기준이고, 오래된 글에서 자주 보이는 “항상 페인트 후”, “DOM 업데이트 직전” 같은 표현은 지금 문서의 설명과 어긋나는 부분이 있어 그 차이를 본문에 녹여 정리하겠습니다.# React에서 useEffect와 useLayoutEffect, 언제 무엇을 써야 할까 목차 한눈에 비교 시간 흐름으로 이해하기 왜 둘 다 렌더 후처럼 보일까 어떤 작업에 무엇을 써야 하나 깜빡임이 생기는 예제와 해결 방식 React 19.2 기준으로 다시 볼 점 SSR과 하이드레이션에서의 처리 성능과 DevTools에서 확인할 지점 한눈에 비교 실행 시점 useLayoutEffect 는 DOM 커밋 직후, 브라우저 리페인트 전에 실행된다. useEffect 는 대체로 페인트 뒤에 실행된다. 브라우저 영향 useLayoutEffect 는 현재 프레임의 표시를 막을 수 있다. useEffect 는 이미 그려진 화면 뒤...