Frontend

React, JavaScript, 브라우저 등 프론트엔드 관련 포스트들입니다.

Async Generator 로 협력적 스케쥴링 구현하기대규모 DFS 순회로 멈춰버린 UI 를 Async Generator, Time Slicing, Macrotask 를활용해 순회시 취소가능하고 반응성 있게 동작하도록 구현한 방법을 소개합니다2026년 7월 15일프론트엔드에서 원자성 보장하기 (feat. 대용량 데이터 배치 업로드)413 Payload 에러 해결을 위한 이미지 압축, API 청크 분할, 부분 성공 복구 로직을 도입하며 프론트엔드에서 All or Nothing을 구현한 경험기2026년 3월 7일정적 좌표 지옥에서 탈출한 동적 별자리 노드 시스템 구축기누비랩 냠냠플러스 "오늘찰칵" 서비스의 별자리 맵 시스템을 하드코딩된 좌표 대신 기하학 알고리즘과 Render Props 패턴으로 해결하며 유지보수성과 확장성을 확보한 경험을 공유합니다.2026년 3월 2일전역상태는 어떤 구조로 저장해야 좋을까? (Nested 한 전역상태에서 탈출하기)전역상태를 그냥 하나의 JSON 객체로 관리하면 생기는 문제점과, Redux Toolkit 의 createEntityAdapter 를 사용하여 정규화된 전역상태를 관리하는 방법을 알아봅니다.2025년 11월 26일SSE를 Async Generator로 : 진짜 스트림처럼 다루기Server Sent Events (SSE) 를 외부에서도 순차적으로 어떻게 다룰수 있을까? 종합설계프로젝트를 진행하면서 LLM으로부터 스트리밍 응답을 깔끔하게 처리하기 위해 Generator 를 활용한 방법을 공유합니다.2025년 11월 23일[번역] 왜 React Context 는 상태 관리 도구가 아니며 Redux 를 대체하지 않는가이 글은 Mark Erikson의 "Why React Context is Not a 'State Management' Tool (and Why It Doesn't Replace Redux)" 을 기반으로 번역 및 보완한 글입니다. 저작권은 원문 저자에게 있습니다. 다소 의역이 포함되어 있을 수 있습니다.2025년 11월 19일리액트에서도 의존성 주입으로 결합도를 낮춰보자! - Renderer Props 패턴 (feat.DIP)의존성 주입이 백엔드에서만 사용되는 패턴이라고? 리액트에서도 의존성 주입을 활용해 컴포넌트 간 결합도를 낮추고 재사용성을 높여보자! Renderer Props 패턴을 의존성 주입과 OCP, DIP 원칙과 연결지어 알아봅니다2025년 11월 1일[Redux 공식문서 번역] 전역상태를 어떻게 설계해야 할까? - Normalizing State ShapeRedux 애플리케이션에서 상태 구조를 정규화하는 방법에 대해 알아봅니다. 이 글은 Redux 공식 번역이 아니며, 개인 학습 및 공유 목적으로 작성된 비공식 번역입니다. (원문 : https://redux.js.org/usage/structuring-reducers/normalizing-state-shape)2025년 10월 31일Isomorphic 이란 뭐고 어떨때 사용하는 네이밍일까 ? (feat. useIsomorphicEffect 는 뭘까)오픈소스를 보다보면 Isomorphic 이라는 단어를 마주치게 됩니다. Isomorphic 이란 무엇인지, 그리고 어떨때 사용하는 네이밍인지에 대해 알아봅니다. 또 리액트에서 자주 사용되는 useIsomorphicEffect 훅도 함께 살펴봅니다.2025년 10월 29일뭣?! 값은 변하지 않는다고? JavaScript 불변성(Immutability) 이해하기불변성(Immutability) 는 개발 공부를 하다 보면 정말 자주 듣는 단어다. 값을 바꾸지 않는다는 말은 이해되지만, 자바스크립트에서 그게 어떻게 동작하는지, 그리고 왜 React 에서는 꼭 지켜야 하는지 알아보자.2025년 10월 24일