Kotlin은 Null 안정성, 간결한 문법, 함수형 스타일을 지원하는 JVM 언어로, 안드로이드와 백엔드(Spring Boot)에서 모두 널리 사용됩니다. 이 글에서는 실무에서 자주 사용하는 문법과 패턴을 간략히 정리합니다.1. 변수와 Null 안정성val name: String = "kwkang" // 불변var age: Int = 10 ...

Next.js 16은 React 18을 기반으로 하는 풀스택 웹 프레임워크로, 서버 컴포넌트(App Router), 스트리밍, 캐시, 미들웨어 등 프론트엔드와 백엔드를 모두 아우를 수 있는 기능을 제공합니다. 이 글에서는 Next.js 16에서 핵심적으로 알아야 할 개념과, 실무에서 자주 쓰게 될 부분 위주로 간략히 정리합니다.1. 프로젝트 구조와 App...

React 18은 Concurrent Rendering과 자동 배칭, Suspense 개선 등을 통해 UI를 더 부드럽게 만들고, 서버 렌더링을 강화한 버전입니다. Next.js 13+ / 16 같은 프레임워크에서도 React 18 기능을 전제로 설계되어 있기 때문에, 핵심 개념은 꼭 알고 있어야 합니다.1. 자동 배칭(Automatic Batching)...

Spring Boot는 Spring 기반 애플리케이션을 빠르게 시작하고 운영할 수 있도록 도와주는 프레임워크입니다. 복잡한 XML 설정 없이, 스타터 의존성과 자동 설정(auto configuration)으로 대부분의 기본 구성을 대신해 줍니다.1. 프로젝트 구조가장 기본적인 Spring Boot 프로젝트 구조는 다음과 같습니다.src └ main ...

Spring Boot로 백엔드 서비스를 만들 때 가장 많이 하는 일이 REST API + JPA로 CRUD 서버 만들기입니다. 이 글에서는 프로젝트 구조 → 엔티티/DTO 설계 → 컨트롤러/서비스/리포지토리 레이어 분리 → 예외 처리까지 실무 패턴 위주로 정리합니다. 예제 코드는 Kotlin 기준이지만, Java로도 거의 동일하게 적용할 수 있습니다.1...

MySQL에서 성능 좋은 쿼리를 작성하려면 기본 문법 + 인덱스 구조 + 실행 계획(EXPLAIN) 세 가지를 같이 이해해야 합니다. 이 글에서는 가장 자주 쓰는 SELECT 쿼리 패턴과, 인덱스 설계 시 꼭 챙겨야 할 포인트를 정리합니다.1. 기본 SELECT 쿼리 패턴SELECT id, name, statusFROM usersWHERE status =...

Spring Data JPA를 사용할 때는 쿼리를 어디까지 자동으로 맡기고, 어디부터 직접 작성할지를 정하는 것이 중요합니다. 이 글에서는 Spring Boot + JPA 환경에서 자주 쓰는 쿼리 작성 방법을 단계별로 정리합니다.1. 메서드 이름 기반 쿼리가장 단순한 방법은 메서드 이름을 규칙대로 쓰면 JPA가 알아서 쿼리를 만들어 주는 방식입니다.int...

React Query는 클라이언트에서 서버 상태(데이터)를 관리하는 데 특화된 라이브러리입니다. 이 글에서는 기본 useQuery/useMutation에서 한 단계 나아가, 캐싱 전략, 무한 스크롤, 에러 핸들링을 중심으로 정리합니다.1. 캐시 전략: staleTime, cacheTimeconst { data, isFetching } = useQuery(...

React에서 getBoundingClientRect 활용하기getBoundingClientRect는 DOM 요소의 크기와 화면에서의 위치를 정확히 파악할 수 있는 메서드입니다. 이 메서드는 React에서 특정 요소가 화면에 보이는지 감지하거나, Lazy Loading, 애니메이션 트리거 등을 구현할 때 매우 유용합니다. 아래는 getBoundingClie...

Next.js에서 Utterances 댓글 시스템 구현하기Utterances는 GitHub 이슈를 활용하여 웹사이트에 간단하게 댓글 시스템을 추가할 수 있는 오픈 소스 프로젝트입니다. Next.js 프로젝트에 Utterances를 삽입하는 방법과, 테마 전환 시 깜빡임이 발생하는 방식과 깜빡임을 방지하는 방식을 각각 소개합니다.1. Utterances 기본...

useCallback, useMemo, 그리고 memo는 모두 React에서 성능 최적화를 위해 사용되는 도구이지만, 각각의 목적과 사용 사례가 다릅니다. 아래에서 그 차이점을 설명하겠습니다.1. useCallback목적**: 함수를 메모이제이션하여 불필요한 재생성을 방지.사용 대상**: 함수.사용 예시**: import React, { useCall...

Next.js의 App Router는 13버전부터 도입된 새로운 라우팅 방식으로, 기존의 Pages Router보다 더 현대적이고 유연한 기능을 제공합니다. App Router를 통해 서버 컴포넌트와 클라이언트 컴포넌트를 효과적으로 관리하며 React 18의 기능을 최대한 활용할 수 있습니다. 아래는 App Router의 주요 개념과 특징, 활용법을 정리한...

React Query useMutation 사용법React Query는 React 앱에서 데이터를 fetch하고 캐시하는 것을 간단하게 만들어주는 라이브러리입니다. useMutation은 React Query에서 제공하는 함수 중 하나로, 데이터를 create, update, delete하는데 사용됩니다.useMutation 사용법useMutation 함수...

react query v4 설치yarn add @tanstack/react-queryreact query 브라우저 호환아무 버전이나 다 되는 줄 알았는데, 호환하는 브라이저가 있는걸 알았다.Chrome >= 73Firefox >= 78Edge >= 79Safari >= 12.0iOS >= 12.0opera >= 53react query 설정하기quertCl...

mysql query 순서FROM : 조회 테이블 확인 SELECT부터 처리할 것 같지만, 쿼리의 가장 첫 번째 실행 순서는 FROM 절입니다. FROM 절에서는 테이블의 모든 데이터를 가져옵니다.WHERE : 데이터 추출 조건 확인 FROM절에서 읽어온 데이터중에서 조건에 일치하는 데이터만 가져옵니다.GROUP BY : 컬럼 그룹화 WHERE...