글

필터 8개

React

React와 Intersection Observer API: 스크롤 성능 최적화와 사용자 경험 개선

프론트엔드 개발자가 React 환경에서 Intersection Observer API를 활용하여 스크롤 성능을 최적화하고 사용자 경험을 개선하는 실질적인 방법들을 코드 예제와 함께 깊이 있게 설명합니다. 지연 로딩, 무한 스크롤 구현 방법과 커스텀 훅 활용법, 그리고 성능 개선을 위한 체크리스트까지 제공합니다.

2026.04.28· 3분· 15· 0· 0

#React#Intersection Observer API#지연 로딩#웹 성능#UX 개선

React

TypeScript로 복잡한 React 컴포넌트 프롭스 설계하기: 조건부 타입과 고급 타입 추론 활용법

프론트엔드 개발자의 실무 경험을 바탕으로, TypeScript의 조건부 타입과 고급 타입 추론을 활용하여 복잡한 React 컴포넌트 프롭스를 설계하는 실용적인 방법을 코드 예제와 함께 깊이 있게 다룹니다. 타입 안정성과 재사용성을 높이는 핵심 기법들을 소개합니다.

2026.04.28· 3분· 15· 0· 0

#TypeScript#React#컴포넌트 설계#조건부 타입#타입 추론+2

React

React/Next.js 애플리케이션을 위한 Playwright E2E 테스트 실전: 안정적인 UI 보장하기

프론트엔드 개발자가 React/Next.js 프로젝트를 위한 Playwright E2E 테스트 실전 경험을 공유합니다. 크로스 브라우저 테스트, 자동화, 코드 예제, 비교 테이블, 핵심 정리 및 체크리스트를 포함하여 안정적인 UI 보장 방법을 알아봅니다.

2026.04.28· 3분· 14· 1· 0

#E2E 테스트#Playwright#React#Next.js#테스트 자동화+2

React

Zustand vs Jotai: 2024년, 당신의 리액트 상태 관리 라이브러리는?

리액트 프로젝트에서 상태 관리는 언제나 중요한 고민거리입니다. Redux의 복잡함에 지쳤다면, 미니멀리스트 상태 관리 라이브러리인 Zustand와 Jotai가 훌륭한 대안이 될 수 있습니다. 이 글에서는 두 라이브러리의 특징, 장단점, 실용적인 코드 예시를 통해 어떤 상황에 더 적합한지 심층적으로 비교 분석합니다.

2026.02.26· 4분· 15· 1· 0

#Zustand#Jotai#State Management#React

Frontend

React 컴포넌트 설계: Compound Component 패턴 완전 정복

React Compound Component 패턴을 활용하여 Prop Drilling 문제를 해결하고, 유연하고 재사용 가능한 컴포넌트를 설계하는 방법을 알아봅니다.

2026.02.05· 1분· 28· 2· 1

#React#Design Pattern#Frontend

React

React에서 전역 모달 시스템 구축하기: Singleton + Observer 패턴

디자인 패턴(Singleton, Observer)과 History API를 활용해 window.alert를 대체하는 전역 모달 시스템을 구축하는 방법을 알아봅니다. React 커스텀 훅으로 간편하게 사용할 수 있습니다.

2025.12.16· 1분· 33· 5· 0

#React#TypeScript#Design Pattern#Modal#Singleton+1

React

React useRef 완벽 가이드: DOM 접근부터 컴포넌트 통신까지

useRef의 핵심 사용법을 알아봅니다. DOM 직접 접근, 렌더링 없이 값 저장, 그리고 forwardRef와 useImperativeHandle을 활용한 부모-자식 컴포넌트 통신 패턴까지 실전 예제와 함께 설명합니다.

2025.12.09· 1분· 34· 3· 0

#React#TypeScript#useRef#Hooks#forwardRef

React

React에서 JWT Access/Refresh Token 인증 시스템 구현하기

JWT Access/Refresh Token 인증 시스템을 React와 Redux Toolkit으로 구현하는 방법을 상세한 코드 예시와 함께 알아봅니다.

2025.12.03· 1분· 40· 4· 2

#React#TypeScript#JWT#Authentication#Redux Toolkit

글

필터 8개

React

React와 Intersection Observer API: 스크롤 성능 최적화와 사용자 경험 개선

2026.04.28· 3분· 15· 0· 0

#React#Intersection Observer API#지연 로딩#웹 성능#UX 개선

React

TypeScript로 복잡한 React 컴포넌트 프롭스 설계하기: 조건부 타입과 고급 타입 추론 활용법

2026.04.28· 3분· 15· 0· 0

#TypeScript#React#컴포넌트 설계#조건부 타입#타입 추론+2

React

React/Next.js 애플리케이션을 위한 Playwright E2E 테스트 실전: 안정적인 UI 보장하기

2026.04.28· 3분· 14· 1· 0

#E2E 테스트#Playwright#React#Next.js#테스트 자동화+2

React

Zustand vs Jotai: 2024년, 당신의 리액트 상태 관리 라이브러리는?

2026.02.26· 4분· 15· 1· 0

#Zustand#Jotai#State Management#React

Frontend

React 컴포넌트 설계: Compound Component 패턴 완전 정복

React Compound Component 패턴을 활용하여 Prop Drilling 문제를 해결하고, 유연하고 재사용 가능한 컴포넌트를 설계하는 방법을 알아봅니다.

2026.02.05· 1분· 28· 2· 1

#React#Design Pattern#Frontend

React

React에서 전역 모달 시스템 구축하기: Singleton + Observer 패턴

2025.12.16· 1분· 33· 5· 0

#React#TypeScript#Design Pattern#Modal#Singleton+1

React

React useRef 완벽 가이드: DOM 접근부터 컴포넌트 통신까지

2025.12.09· 1분· 34· 3· 0

#React#TypeScript#useRef#Hooks#forwardRef

React

React에서 JWT Access/Refresh Token 인증 시스템 구현하기

JWT Access/Refresh Token 인증 시스템을 React와 Redux Toolkit으로 구현하는 방법을 상세한 코드 예시와 함께 알아봅니다.

2025.12.03· 1분· 40· 4· 2

#React#TypeScript#JWT#Authentication#Redux Toolkit