IT

JPA N+1 문제 해결하기 JPA 사용시 발생하는 N+1 문제를 해결하는 방법에 대해 정리한 내용입니다. 1. N+1 문제가 발생하는 이유 N+1 문제는 1:N 또는 N:1 연관관계가 설정된 엔티티를 조회했을 때 발생하는 문제입니다. 연관관계가 설정된 엔티티를 한 번에 조회하지 않고 조회된 데이터의 개수(N) 만큼 연관관계의 엔티티에 대해 추가로 조회 쿼리가 실행되는 문제입니다. 조회한 엔티티의 데이터 개수가 10개이면 연관관계의 엔티티를 조회하는 SQL도 10번 실행되어 10번 + 1번 조회하게 됩니다. 이러한 문제는 많은 양의 쿼리가 발생했을 때 성능 저하의 원인이 됩니다. 1.1. 즉시 로딩에서 발생하는 N+1 문제 즉시 로딩이 설정된 연관관계의 엔티티를 조회하는 경우에 N+1 문제가 발생할 수 ..

Spring Boot Test 작성 및 실행하기 Spring Boot Test를 작성하고 실행하는 방법에 대해 정리한 내용입니다. 1. Spring Boot Test Spring Boot에서는 애플리케이션을 테스트할 때 도움이 되는 테스트 스타터를 제공합니다. 스타터는 크게 spring-boot-test와 spring-boot-test-autoconfigure 두가지 모듈로 구성됩니다. spring-boot-test는 테스트를 위한 핵심 기능을 지원하고 spring-boot-test-autoconfigure는 테스트를 위한 자동 구성을 지원합니다. 일반적으로 Spring Boot 테스트 모듈과 JUnit, Jupiter, AssertJ, Hamcrest 및 다른 유용한 라이브러리들이 포함되어 있는 spr..

Gradle 설치 및 사용하기 Gradle을 설치하고 사용하는 방법에 대해 정리한 내용입니다. 1. Gradle Spring 프로젝트의 빌드 도구로는 Maven을 많이 사용하지만 XML 기반의 설정 파일인 pom.xml은 동적인 구성에 제약이 있었습니다. 이러한 Maven의 대안으로 나온 Gradle은 Groovy 기반의 스크립트 언어로 구성되어 있으며 변수 선언 및 조건문(if-else, for) 등을 사용하여 로직 구현이 가능합니다. Gradle Build Tool Accelerate developer productivity. Gradle helps teams build, automate and deliver better software, faster. gradle.org Gradle의 특징은 다음과..

React Query 알아보기 React Query의 기본적인 내용에 대해 알아보고 정리한 내용입니다. 1. React Query React Query는 리액트 애플리케이션에서 서버의 데이터를 조회하거나 캐싱, 업데이트, 에러 처리와 같은 비동기 로직을 지원하는 fetching 라이브러리입니다. Server-side와 Client-side 사이에서 비동기 로직을 보다 쉽게 다루게 해주며 Server State를 관리해줍니다. React Query Hooks for fetching, caching and updating asynchronous data in React react-query.tanstack.com React Query에서는 Server State를 다음과 같이 정의합니다. Client가 제어..

React ESLint + Prettier 적용하기 React에 ESLint와 Prettier를 적용하는 방법에 대해 알아보겠습니다. 1. ESLint 설치 ESLint는 JavaScript 코드를 분석하여 문법 검사를 지원하고 런타임 이전에 오류를 찾아주는 도구입니다. 커스터마이징이 쉽고 확장성이 뛰어나다는 장점이 있습니다. 좀 더 편리하게 사용하기 위해 airbnb 또는 google의 스타일 가이드를 많이 사용하기도 합니다. 다음 명령어를 실행하여 ESLint를 설치해줍니다. $ yarn add eslint 설정에 사용할 plugin과 parser를 다음과 같이 설치해줍니다. $ yarn add eslint-plugin-react @typescript-eslint/parser @typescript-e..

React Craco 설정하기 React에서 Craco를 이용하여 절대경로를 설정하는 방법에 대해 알아보겠습니다. 1. Craco Craco(Create React App Configuration Override)는 보다 쉽게 CRA 설정이 가능하도록 지원해주는 라이브러리입니다. GitHub - gsoft-inc/craco: Create React App Configuration Override, an easy and comprehensible configuration layer for create-rea Create React App Configuration Override, an easy and comprehensible configuration layer for create-react-app - G..

React Recoil 비동기 처리하기 React에서 Recoil을 이용하여 비동기 데이터를 처리하는 방법에 대해 알아보겠습니다. 1. Selector를 이용한 비동기 요청 사용하기 Recoil의 Selector를 이용하면 비동기 액션에 대한 처리가 가능합니다. 기존의 Redux에 비해 보다 간단하게 비동기를 처리할 수 있습니다. Asynchronous Data Queries | Recoil Recoil provides a way to map state and derived state to React components via a data-flow graph. What's really powerful is that the functions in the graph can also be asynchronou..

React Recoil 사용하기 React에서 Recoil을 사용하는 방법에 대해 알아보겠습니다. 1. Recoil Recoil은 메타(구 페이스북)에서 만든 상태 관리 라이브러리입니다. 기존의 Redux와 같은 상태 관리 라이브러리들은 store 구성을 위해 많은 boilerplate 코드들을 필요로 하였고 이로 인하여 설정이 복잡해지게 되었습니다. Recoil은 이러한 문제의 해결과 전역 상태 관리의 최적화 및 성능과 효율성 향상을 위해 만들어졌습니다. 또한 React를 공식적으로 지원하는 상태 관리 라이브러리이기 때문에 React 내부에 접근이 가능하며 Concurrent 모드, Suspense 등을 손쉽게 사용할 수 있습니다. 이전에 React의 Hooks를 사용해봤다면 쉽게 적응하여 사용할 수 ..

React Redux Toolkit 사용하기 React에서 Redux Toolkit을 사용하는 방법에 대해 알아보겠습니다. 1. Redux Toolkit Redux Toolkit은 Redux를 더 쉽게 사용하기 위해 만들어졌습니다. 리덕스는 Flux 아키텍처를 기반으로 잘 설계된 라이브러리이지만 다음과 같은 문제점을 보였습니다. 리덕스의 복잡한 스토어 설정 리덕스를 유용하게 사용하기 위해서 추가되어야 하는 많은 패키지들 리덕스 사용을 위해 요구되는 다량의 상용구(boilerplate) 코드들 이러한 문제점을 개선하기 위해 Redux Toolkit이 만들어지게 되었습니다. 리덕스 툴킷에서 제공하는 주요 함수들을 사용하면 기존 리덕스의 복잡도를 낮추고 사용성을 높여서 코드를 작성할 수 있습니다. Gettin..