실무개발·2025년 9월 25일
Props로 받은 객체가 undefined일 때
부모에서 전달한 props가 undefined로 나와서 앱이 크래시되는 문제 해결
#React#Props#TypeScript#Debugging
개발과 기술에 대한 이야기를 기록합니다.
부모에서 전달한 props가 undefined로 나와서 앱이 크래시되는 문제 해결
쇼핑몰 목록에서 상품을 보고 뒤로가기를 눌렀는데, 스크롤이 초기화되어 사용자가 이탈했습니다. SPA와 Next.js에서 스크롤 복원(Scroll Restoration) 문제를 해결한 삽질기를 공유합니다.
React에서 클로저가 오래된 값을 참조해서 생긴 버그와 해결 방법
서비스를 운영하다 보면 장애는 피할 수 없다. 구글의 SRE 책을 읽으면서 '운영'이 단순 노가다가 아니라 고도의 엔지니어링 문제임을 이해했다. SLI, SLO, Error Budget 개념을 통해 소방관에서 건축가로 사고방식이 바뀌는 과정을 정리해본다.
테스트 커버리지 100%를 달성하고 기분 좋게 배포했지만, 프로덕션은 에러를 뱉어냈습니다. 원인은 '가짜 객체'를 남발한 것. Mock, Stub, Spy의 차이를 정확히 모르고 사용하다가 겪은 실패담과 올바른 테스트 대역(Test Double) 사용법을 정리했습니다.
useEffect 의존성 배열 때문에 무한 루프에 빠졌던 경험과 해결 방법
한때 저는 테스트 커버리지 100%를 달성하기 위해 집착했습니다. 모든 줄에 초록색 불이 들어오자 안심하고 배포했지만, 결과는 치명적인 버그였습니다. 커버리지가 알려주지 않는 것들과 의미 없는 테스트의 위험성, 그리고 진짜 중요한 테스트 지표에 대해 이야기합니다.
테스트 유형별 차이와 활용
비동기 통신의 함정, 경쟁 상태(Race Condition)를 해결하는 과정을 담았습니다. 플래그 변수부터 AbortController까지, 탭 전환 시 발생하는 버그까지 잡는 법.
은행이 NoSQL 대신 RDBMS를 쓰는 이유. All or Nothing(원자성)부터 트랜잭션 격리 수준(Isolation Levels), 데드락(Deadlock), 그리고 시니어 개발자가 되는 관점까지 완벽 정리.
React의 setState가 비동기로 동작해서 겪었던 삽질과 해결 과정. 사학과 출신 창업자가 겪은 React 상태 관리의 미스터리를 풉니다.
PWA의 특징과 구현 방법
iOS와 Android 개발자를 따로 채용할 돈이 없어서 선택한 React Native. 생산성은 2배였지만, 네이티브 모듈과 버전 업그레이드 지옥에서 겪은 생생한 경험담을 공유합니다. 그리고 왜 Expo가 게임체인저인지 설명합니다.
창업 초기, iOS와 Android 앱을 모두 만들어야 했을 때 저는 과감하게 Native(Swift/Kotlin)를 버리고 Flutter를 선택했습니다. 개발 속도 2배, 비용 절감 50%의 효과를 본 경험과, 크로스 플랫폼 개발의 현실적인 장단점을 '스타트업 생존' 관점에서 공유합니다.
React에서는 잘 돌아가던 코드가 Next.js로 옮기자마자 'window is not defined' 에러를 뿜으며 폭발했습니다. Next.js의 SSR/Hydration 원리를 통해 이 에러가 발생하는 근본적인 이유를 파헤치고, useEffect, typeof 체크, Dynamic Import 등 3가지 확실한 해결책을 제시합니다.
서버 컴포넌트를 클라이언트 컴포넌트 안에 import 했더니, DB 연결이 끊기고 에러가 폭발했습니다. Next.js App Router의 핵심인 'Composition Pattern'을 구멍 뚫린 도넛에 비유해 설명하고, Context Provider를 올바르게 분리하는 방법을 정리해봤습니다.
개발자에게 기술 블로그는 선택이 아닌 필수입니다. 단순히 배운 것을 기록하는 것을 넘어, 커리어에서의 강력한 무기가 되고, 메타인지 학습법을 실천하는 최고의 도구입니다. 블로그를 시작하고 6개월 만에 일어난 변화와 꾸준히 쓰는 노하우를 공유합니다.
Next.js 13 App Router를 처음 쓸 때 가장 많이 하는 실수인 'use client 남발'을 막는 방법을 소개합니다. 서버 컴포넌트와 클라이언트 컴포넌트의 경계(Boundary)를 명확히 이해하고, 성능을 지키면서 인터랙션을 구현하는 실제 패턴을 다룹니다.
회원가입 후 프로필 이미지를 올리는 간단한 로직이었습니다. 그런데 왜 가끔 'User Not Found' 에러가 뜰까요? 자바스크립트의 비동기 처리와 Promise Waterfall 문제를 해결한 과정을 공유합니다.
Redis를 그냥 '빠른 저장소'로만 쓰고 계신가요? Look-aside, Write-Through 전략의 장단점과 LRU 알고리즘, 그리고 데이터가 날아가지 않게 하는 RDB/AOF 지속성 설정을 정리합니다.
