원문: When Do You Really Need startTransition? 소개리액트 개발자 대부분은 startTransition에 대해 들어본 적이 있습니다. 하지만 이것이 실제로 어떤 역할을 하는지 제대로 이해하는 사람은 드뭅니다. 언제 사용해야 하는지 아는 사람은 더욱 적습니다. 이제 기초부터 차근차근 설명해 드리겠습니다.startTransition 없이 리액트가 렌더링하는 방식startTransition을 이해하려면, 먼저 리액트가 일반적으로 상태 업데이트를 어떻게 처리하는지 알아야 합니다. setState를 호출하면 리액트는 렌더링을 예약합니다. 렌더링이란 리액트가 컴포넌트 함수를 실행하고, 새로운 요소 트리를 생성한 뒤, 이를 이전 트리와 비교하여 차이점을 DOM에 적용하는 과정을 의미합..
"한빛미디어 서평단 활동을 위해서 책을 협찬받아 작성된 서평입니다."도서 링크: https://www.hanbit.co.kr/store/books/look.php?p_code=B2498421283 처음 이 책을 읽게 되었을 때는 ‘리눅스 명령어를 배우는 입문서’ 정도로 가볍게 읽을 수 있겠다고 생각했다. 기본적인 명령어와 개념을 중심으로 설명하는 책일 것이라고 예상했는데, 실제로 읽어보니 이 책의 방향은 조금 달랐다. 단순히 리눅스를 설명하는 데 그치기보다, 하나의 서버 환경을 직접 구성하고 운영해보는 흐름 속에서 자연스럽게 리눅스를 이해하게 만드는 구조였다. 그래서 이 책을 읽는 경험은 ‘리눅스를 공부한다’기보다 ‘서버를 직접 만들어보면서 익힌다’는 느낌에 가까웠다. 이 책이 흥미로웠던 점은 설명의 ..
원문: If you are good at code review, you will be good at using AI agents AI 에이전트를 올바르게 사용하는 일은 코드 리뷰 과정과 닮아 있습니다. 코드 리뷰에 익숙하다면 Claude Code, Codex, Copilot 같은 코딩 에이전트 도구도 더 잘 활용할 수 있을 것입니다. 왜 그럴까요? 대규모 언어 모델은 많은 양의 코드를 생성하는 데는 뛰어나지만, 숙련된 소프트웨어 엔지니어가 내리는 깊이 있는 판단까지는 아직 충분히 갖추지 못했습니다. 감독 없이 맡겨두면 잘못된 설계 결정을 따라가느라 많은 시간을 허비하게 됩니다.AI 에이전트와 나쁜 설계지난주 저는 VicFlora Offline을 만들었습니다. (식물 분류 키를 사용할 수 있도록 VicFl..
"한빛미디어 서평단 활동을 위해서 책을 협찬받아 작성된 서평입니다." 처음 이 책을 읽게 되었을 때는 ‘AI를 설명하는 수학 교양서’ 정도로 가볍게 읽을 수 있겠다고 생각했다. 그런데 책을 조금 보다 보니 이 책의 목적이 단순히 수학 개념을 소개하는 소개하는 것보다는 우리가 매일 사용하는 검색, 추천, 음성 인식, 생성형 AI 같은 기술이 어떤 원리 위에서 작동하는지를 따라가다 보면, 자연스럽게 그 배경에 있는 수학과 만나게 되는 구조다. 그래서 책을 읽는 경험이 ‘수학을 공부한다’기보다 ‘기술을 이해하는 과정에서 수학을 다시 만난다’는 느낌에 가까웠던 것 같다. 이 책이 읽기에 흥미로웠던 점은 설명의 출발점이 항상 현실의 기술이라는 데 있다. 예를 들어 추천 시스템이나 LLM 같은 익숙한 주제에서 시..
원문: Fault Tolerance 현대적인 웹 애플리케이션을 구축하는 일은 많은 구성 요소가 맞물려 있는 복잡한 과정입니다. 때로는 이러한 구성 요소들이 멈추면서 문제가 발생하기 시작합니다. 우리는 이러한 상황을 예방하기 위해 최선을 다하지만, 현실적으로 애플리케이션을 완전히 에러 없이 유지하는 것은 불가능합니다. 즉 예기치 않은 방식으로 문제가 발생할 수 있음을 항상 염두에 두고, 그러한 상황을 우아하게 처리할 수 있어야 합니다. 다시 말해, 장애허용성이 필요합니다.장애허용성이란 시스템을 구성하는 일부 구성 요소에서 장애가 발생하더라도(하나 이상의 결함이 존재하더라도) 시스템이 정상적으로 동작을 계속할 수 있도록 해주는 특성입니다.제 경험상 웹 애플리케이션에서 장애허용성은 종종 간과되거나 과소평가됩..
원문: Stop turning everything into arrays (and do less work instead)대부분의 프론트엔드 코드는 데이터가 화면에 표시되기 훨씬 이전에 데이터를 처리합니다. 우리는 목록을 가져오고, 수정하고, 줄이고, 이 과정을 반복합니다. 하지만 보통 그 과정에서 우리가 얼마나 많은 작업을 하고 있는지 깊이 생각하지 않습니다. 수년간 현대 자바스크립트는 우리를 익숙한 패턴으로 이끌어 왔습니다.data .map(...) .filter(...) .slice(...) .map(...)가독성이 좋고 표현력도 풍부합니다. 하지만 즉시 평가되고(eager), 여러 배열을 할당하고 불필요한 작업을 자주 수행합니다. 자바스크립트의 이터레이터 헬퍼는 대규모 데이터셋, 스트림, UI..
원문: Serving Video with HTTP Range Requests 최근에 가족과 친구들을 위한 간단한 사진 공유 앱을 만들게 되었습니다.주변에서 근황을 놓치고 싶지 않은 일이 있었는데, 그걸 위해 클라우드 서비스에 의존하는 건 별로 마음에 들지 않았거든요. 대신 Next.js로 작은 프로그레시브 웹 앱을 만들기로 결정했습니다. 몇 시간 만에 첫 버전을 완성했는데, 사진 디렉터리를 지정하면 그리드 형태의 썸네일과 섀도우박스 형태의 전체 크기 이미지로 렌더링하는 기본적인 자체 호스팅 앱이었습니다. 새 사진이 디렉터리에 추가되면 푸시 알림까지 받을 수 있도록 설정해 두기도 했습니다. 그러다가, 이제 끝이라고 생각하고 이 프로젝트를 대성공으로 결론 내리려는 순간, 문득 한 가지가 생각났습니다. 비디오..
"한빛미디어 서평단 활동을 위해서 책을 협찬받아 작성된 서평입니다." 소프트웨어 아키텍처 The Basics (2판)는 소프트웨어 아키텍처를 기초부터 폭넓게 정리한 실용서입니다. 이 책은 단순히 아키텍처의 개념을 나열하는 데 그치지 않고, 현대 소프트웨어 개발 환경에서 아키텍처를 정의하고 적용하는 데 필요한 사고의 틀과 실전적 기준을 제시합니다. 아키텍처 스타일, 품질 속성, 컴포넌트 설계, 도식화, 진화적 아키텍처 등 아키텍처의 핵심 주제를 망라하고 있어 개발자에서 아키텍트로 성장하고 싶은 엔지니어에게 실질적 방향성을 제시합니다. 책의 초반에는 아키텍트에 대한 정의와 필요한 내용들을 잘 정리하고 있어 팀에서 어떤 역할이 되어야 하는지 명확하게 이해할 수 있습니다. 이 책의 큰 특징은 아키텍처를 하나..
