분류 전체보기85 리액트 - Async&Await&Promise Async/Await/Promise 정리1. 기본 개념Promise비동기 작업의 결과를 담는 객체상태: pending(대기) -> fulfilled(성공) 또는 rejected(실패)체이닝으로 연속 작업 가능async/awaitasync: Promise를 반환하는 비동기 함수 선언await: Promise 완료까지 대기try-catch로 에러 처리2. 실행 패턴순차 실행await로 순서 보장이 필요한 작업 처리예) 질문 조회 후 답변 목록 조회병렬 실행Promise.all()로 독립적인 작업 동시 실행예) 프로필과 작성 글 목록 동시 조회혼합 실행순차 실행과 병렬 실행 조합예) 질문 조회 후 답변/댓글 동시 조회3. Promise 메서드기본 메서드.then() - 성공 처리.catch() - 에러 처리... 2024. 12. 23. 리액트 - Outlet React Router의 Outlet 이해하기Outlet이란?Outlet은 React Router v6에서 도입된 컴포넌트로, 부모 라우트가 자식 라우트 엘리먼트를 렌더링할 수 있게 해주는 도구입니다. 중첩 라우팅을 구현할 때 특히 유용합니다.Outlet의 주요 특징부모 라우트의 레이아웃 내에서 자식 라우트의 컴포넌트를 렌더링할 위치를 지정할 수 있습니다공통 레이아웃을 유지하면서 특정 부분만 동적으로 변경할 수 있습니다코드의 재사용성을 높이고 구조를 더 깔끔하게 만들 수 있습니다기본 사용 예제// App.jsximport { BrowserRouter, Routes, Route } from 'react-router-dom';import Layout from './Layout';import Home from.. 2024. 12. 23. 스프링 - JPA 다대일 처리 JPA 일대다(OneToMany) 관계 처리 방법1. 페치 조인특징한 번의 쿼리로 연관된 엔티티를 모두 조회일대다 페치 조인은 하나만 사용 가능 (데이터 정합성 문제)페이징과 함께 사용하면 메모리에서 페이징 처리 (성능 이슈)예시 코드.leftJoin(question.answerList).fetchJoin()2. 배치 사이즈특징지연 로딩 시 IN 쿼리를 통해 N+1 문제 해결설정한 배치 사이즈만큼 IN 쿼리로 한 번에 조회페이징과 함께 사용 가능 (실제 DB에서 페이징)네트워크 통신 횟수 감소 설정 방법// 엔티티에 직접 설정@BatchSize(size = 100)private List answerList;// 또는 application.yml에 글로벌 설정spring: jpa: propertie.. 2024. 12. 22. 스프링 - OSIV OSIV (Open Session In View)개념영속성 컨텍스트와 데이터베이스 커넥션을 View 렌더링이 끝나는 시점까지 유지하는 패턴사용 고려사항OSIV true장점: 지연 로딩이 가능하여 엔티티 그래프 탐색이 자유로움단점: 데이터베이스 커넥션을 오래 점유사용: 실시간 트래픽이 적은 ADMIN 페이지OSIV false장점: 데이터베이스 커넥션 사용 시간 최소화단점: View 렌더링 시점에 지연 로딩 불가능사용: 실시간 트래픽이 많은 API 서버서버 분리 운영API 서버 (Production)OSIV=false 설정무중단 배포높은 가용성 유지ADMIN 서버OSIV=true 설정일시적인 중단 허용복잡한 화면 구성에 용이OSIV false 시 코드 패턴// 비즈니스 로직용 서비스@Service@Trans.. 2024. 12. 22. 이전 1 2 3 4 5 6 7 ··· 22 다음