riberio

React Server Components, 반년 쓰면서 정리한 핵심 개념Next.js App Router로 새 프로젝트를 시작하면서 RSC(React Server Components)를 처음 마주쳤을 때, "그냥 서버에서 렌더링되는 컴포넌트 아닌가?" 싶었다. 그런데 막상 쓰다 보니 이전 SSR과는 개념이 다른 부분이 있었고, 'use client'를 어디에 붙여야 할지, 서버 컴포넌트에서 이벤트 핸들러를 쓰면 왜 오류가 나는지, Server Actions는 어떻게 쓰는 건지 헷갈리는 게 많았다. 이 글은 그 경험을 바탕으로 RSC의 핵심 개념과 실전에서 자주 저지르는 실수를 정리한 것이다.RSC가 나온 배경 — 기존 SSR과 무엇이 다른가기존 Next.js Pages Router의 SSR기존 Page..

TypeScript, 제네릭, 조건부 타입, infer, 매핑 타입, 유틸리티 타입카테고리: 개발 관련 > JAVASCRIPT-->TypeScript 제네릭, 유틸리티 타입 뜯어보면서 완전히 이해했다TypeScript를 쓰면서 Partial, ReturnType 같은 유틸리티 타입을 아무 생각 없이 가져다 쓴 적이 많다. 그러다 어느 날 직접 유틸리티 타입을 만들어야 하는 상황이 생겼는데, infer 키워드가 뭔지, 조건부 타입이 어떻게 동작하는지 몰라서 한참 헤맸다. 이 글은 그때 제대로 파고든 내용을 정리한 것이다. 기초 제네릭 문법은 알고 있다고 가정하고, 조건부 타입·infer·매핑 타입까지 실전 예제 중심으로 다룬다.제네릭 기초 복습과 extends 제약기본 제네릭// 가장 단순한 제네릭 함수f..

MySQL EXPLAIN, 이것만 알면 쿼리 튜닝이 보인다개발하면서 쿼리가 느리다 싶을 때 가장 먼저 해야 할 게 EXPLAIN이다. 그런데 처음 EXPLAIN 결과를 보면 컬럼이 열두 개나 되고 뭐가 뭔지 헷갈린다. 나도 처음엔 type 컬럼만 보고 ALL이 나오면 인덱스 없다는 건 알겠는데 그 이상을 읽지 못했다. 실무에서 수십만 건 테이블 조인 쿼리가 5초 넘게 걸리는 상황에서 EXPLAIN을 제대로 읽으면서 튜닝하는 경험을 쌓고 나서야 각 컬럼이 실제로 무슨 의미인지 체감했다. 이 글에서는 EXPLAIN의 핵심 컬럼들을 실제 쿼리 예시와 함께 정리한다.EXPLAIN 기본 사용법기본 EXPLAINEXPLAIN SELECT * FROM orders oJOIN users u ON o.user_id = ..

Spring Security 6 OAuth2로 구글·카카오 로그인 직접 붙여봤다소셜 로그인 하나 붙이는 게 뭐가 어렵겠냐 싶었는데, Spring Security 5에서 6으로 넘어오면서 설정 방식이 꽤 많이 바뀌어서 기존 예제들이 동작하지 않는 경우가 많다. 특히 WebSecurityConfigurerAdapter가 deprecated되고 완전히 제거된 부분, 람다 기반 DSL로 바뀐 부분 때문에 처음 마주치면 당황스럽다. 팀 내 신규 프로젝트에서 구글 + 카카오 소셜 로그인을 Spring Security 6 기반으로 구현하면서 겪은 내용을 정리한다. JWT 발급까지 연결하는 전체 흐름을 다룬다.Spring Security 5 → 6 주요 변경점WebSecurityConfigurerAdapter 제거Sp..

Java 21 가상 스레드, 실무에서 쓸 만한지 직접 확인해봤다Java 21이 LTS로 릴리즈되면서 가장 많이 언급된 기능이 바로 가상 스레드(Virtual Thread)다. Project Loom으로 수년간 인큐베이터 상태로 머물다가 드디어 정식 피처로 들어왔는데, 처음 들었을 때는 솔직히 "그냥 비동기 API 쓰면 되는 거 아닌가?" 싶었다. 그런데 팀 내에서 Spring Boot 3.2 업그레이드 작업을 하면서 직접 적용해보니 생각이 많이 바뀌었다. 특히 I/O 바운드 작업이 많은 서비스에서는 코드 복잡도를 크게 줄이면서도 성능은 유지할 수 있다는 게 실감이 났다. 이 글에서는 가상 스레드가 정확히 무엇인지, 기존 스레드 풀 방식과 어떻게 다른지, Spring Boot에서 어떻게 활성화하는지를 정리..

MSA는 단일 서비스를 독립적으로 배포 가능한 작은 서비스들로 분리하는 아키텍처다모놀리식으로 시작한 서비스가 커지면서 배포 시간이 30분을 넘고, 팀 간 코드 충돌이 잦아지고, 특정 기능의 트래픽만 증가해도 전체를 스케일아웃해야 하는 상황이 생깁니다. 이때 고려하게 되는 게 MSA입니다. 하지만 MSA는 공짜가 아닙니다 — 어떤 문제를 해결하고 어떤 복잡도를 떠안는지 명확히 이해하고 시작해야 합니다.모놀리식 vs MSA 비교항목모놀리식MSA배포전체 재배포 필요서비스별 독립 배포스케일링전체 스케일아웃트래픽 많은 서비스만기술 스택단일서비스별 최적 선택장애 격리하나 죽으면 전체 영향서비스 단위 격리개발 복잡도낮음높음 (분산 시스템)운영 복잡도낮음높음 (서비스 수 × 복잡도)서비스 분리 기준 — 도메인 중심도메..

Vue 3 Composition API는 Options API의 로직 분산 문제를 composable 함수로 해결한다Vue 2의 Options API로 컴포넌트가 커지면 같은 기능의 코드가 data, methods, computed, watch에 흩어져서 파악하기 어려워집니다. Vue 3의 Composition API는 관련 로직을 한 곳에 모아두고, React 훅처럼 재사용 가능한 composable 함수로 분리할 수 있습니다.Options API vs Composition API 비교script setup — 가장 간결한 문법 로딩 중... {{ error }} {{ item.name }} 새로고침 페이지네이션 Composable// composables/..

React 19의 핵심은 Actions와 use() API — 서버 상태 관리와 비동기 처리가 크게 단순해진다React 18에서 Concurrent Rendering이 왔다면, React 19는 그걸 개발자가 실제로 활용하기 쉽게 만드는 릴리즈입니다. 새 Actions API로 form 처리와 낙관적 업데이트가 획기적으로 줄어들고, Server Components가 안정화됐습니다. React 18에서 19로 넘어갈 때 알아야 할 변경사항을 정리합니다.React 19 주요 변경사항 한눈에기능내용Actions폼 제출 등 비동기 상태 전환을 자동 관리useActionStateAction의 pending/error/result 상태 통합 관리useOptimistic낙관적 업데이트를 hook 하나로 처리use()..

Docker는 "내 로컬에선 되는데" 문제를 컨테이너로 완전히 없애준다개발 환경, 테스트 환경, 프로덕션 환경이 달라서 생기는 문제를 해결하는 게 Docker의 핵심입니다. 애플리케이션과 그 실행 환경을 함께 묶어 이미지로 만들면, 어디서 실행해도 동일하게 동작합니다. 이 글에서는 Java/Spring Boot 애플리케이션을 기준으로 Docker 실무 패턴을 정리합니다.Docker 핵심 개념용어설명Image컨테이너 실행에 필요한 파일 스냅샷. 불변. Dockerfile로 빌드Container이미지를 실행한 인스턴스. 격리된 프로세스Registry이미지 저장소. Docker Hub, AWS ECR, GHCR 등Volume컨테이너 외부 데이터 저장소. 컨테이너 삭제 후에도 유지Network컨테이너 간 통신...

MySQL 슬로우 쿼리 로그를 켜고 EXPLAIN으로 분석하면 95%의 성능 문제를 찾을 수 있다서비스 응답이 갑자기 느려졌다면 십중팔구 DB 쿼리 문제입니다. 그런데 어떤 쿼리가 느린지 모르면 최적화할 수가 없죠. 슬로우 쿼리 로그로 범인을 찾고, EXPLAIN으로 원인을 파악하고, 인덱스와 쿼리 수정으로 해결하는 전체 워크플로우를 정리합니다.슬로우 쿼리 로그 활성화-- 현재 설정 확인SHOW VARIABLES LIKE 'slow_query%';SHOW VARIABLES LIKE 'long_query_time';-- 동적 활성화 (재시작 없이)SET GLOBAL slow_query_log = 'ON';SET GLOBAL long_query_time = 1; -- 1초 이상 걸리는 쿼리 기록SE..