시스템 설계·2026년 1월 9일
검색 시스템: Elasticsearch vs 자체 구현
SQL LIKE 검색으로 시작했다가 한계를 느꼈고, Elasticsearch를 도입했다가 운영 비용에 놀랐다. 검색 시스템의 트레이드오프를 정리했다.
#System Design#Search#Elasticsearch#Database
개발과 기술에 대한 이야기를 기록합니다.
SQL LIKE 검색으로 시작했다가 한계를 느꼈고, Elasticsearch를 도입했다가 운영 비용에 놀랐다. 검색 시스템의 트레이드오프를 정리했다.
결제 API 연동이 끝이 아니었다. 중복 결제 방지, 환불 처리, 멱등성까지 고려하니 결제 시스템이 왜 어려운지 뼈저리게 느꼈다.
인스타그램처럼 피드를 만들려고 했는데, 팔로워 100만 명인 사람이 글을 올리면 어떻게 되는 걸까? Push와 Pull 모델의 트레이드오프를 정리했다.
1:1 채팅은 쉬웠는데 그룹 채팅, 읽음 표시, 오프라인 메시지까지 고려하니 완전히 다른 문제였다.
URL 줄이는 거 뭐가 어렵겠어? 했는데, 해시 충돌, 만료 정책, 리다이렉트 성능까지 고려하니 시스템 디자인의 축소판이었다.
느리다고 느껴서 감으로 최적화했는데 오히려 더 느려졌다. 프로파일러로 병목을 정확히 찾는 법을 배운 이야기.
앱을 오래 쓰면 느려지는 이유가 메모리 누수였다. Chrome DevTools Memory 탭으로 범인을 찾는 과정을 정리했다.
배포 후 '잘 되는데요?' 했는데 사용자만 에러를 겪고 있었다. Sentry 도입 후 에러를 실시간으로 잡게 된 이야기.
빨간 에러 메시지가 뜨면 당황해서 그냥 구글에 복붙했는데, 스택 트레이스를 읽는 법을 알고 나니 디버깅 속도가 10배 빨라졌다.
React 앱이 느린 이유를 찾지 못해 코드만 뒤지고 있었는데, React DevTools의 Profiler와 Components 탭이 범인을 바로 찾아줬다.
API 응답이 이상한데 코드 문제인지 서버 문제인지 구분이 안 될 때, 브라우저 네트워크 탭 하나로 원인을 찾는 방법.
console.log 100개 찍어가며 디버깅하던 시절을 끝내고, 브라우저 debugger와 breakpoint로 효율적으로 버그를 잡는 방법.
검색창에 글자 하나 칠 때마다 API 콜이 날아가고, 스크롤할 때마다 이벤트가 폭주하는 문제를 디바운스와 스로틀로 해결한 이야기.
복잡한 페이지 깊숙이 있는 컴포넌트를 수정할 때마다 로그인을 다시 하고 클릭을 5번 해야 하나요? Storybook으로 컴포넌트를 격리(Isolation)해서 개발하는 CDD 방법론.
컴포넌트 하나에서 에러가 났는데 전체 페이지가 흰색이 됩니다. `react-error-boundary`로 에러를 격리하고, 우아한 폴백 UI를 보여주는 방법.
TypeScript만 믿고 있다가 런타임 에러로 앱이 터졌습니다. 컴파일 타임이 아닌 '런타임'에 데이터를 검증해야 하는 이유와 Zod 활용법.
`useEffect`와 `useState`로 범벅된 비대해진 컴포넌트. Custom Hook으로 로직을 분리하여 UI와 비즈니스 로직을 깔끔하게 나누는 실제 리팩토링 가이드.
기능 추가할 때마다 늘어나는 번들 사이즈, 그대로 두면 사용자는 떠납니다. Code Splitting, Tree Shaking, Dynamic Import로 JS 다이어트하는 실제 기법.
API 요청 상태를 관리할 때 불리언 플래그 여러 개를 쓰시나요? 'impossible state(불가능한 상태)'를 방지하고, if 문 도배를 없애는 Discriminated Unions 패턴.
습관적으로 모든 변수에 `useMemo`를 감싸고 있나요? 그게 오히려 성능을 망치고 있습니다. 메모이제이션 비용과 올바른 최적화 타이밍.
