웹 개발·2025년 9월 1일
번들러: Webpack, Rollup, Vite가 하는 일의 본질 (대규모 업데이트)
수천 개의 JS 파일을 하나로 합치는 마법. Tree Shaking, HMR, Code Splitting의 원리와 차세대 번들러(Vite, Turbopack)의 등장 배경.
#Web#JavaScript#Tooling#Performance
개발과 기술에 대한 이야기를 기록합니다.
수천 개의 JS 파일을 하나로 합치는 마법. Tree Shaking, HMR, Code Splitting의 원리와 차세대 번들러(Vite, Turbopack)의 등장 배경.
사용자가 '앱이 느리다', '고장 났다'고 느끼는 진짜 이유는 API 속도가 아니라 불친절한 UI 때문입니다. 덜덜거리며 깜빡이는 화면 대신 스켈레톤 UI를 도입하고, alert() 창 대신 우아한 에러 처리를 구현하여 UX를 개선한 경험을 공유합니다.
멱등성의 개념과 구현 방법을 경험을 통해 이해한 과정
기능 테스트는 통과했는데 트래픽이 몰리니 서버가 뻗었다는 사례는 흔하다. '나 혼자 100번' 테스트와 '100명이 동시에 1번' 테스트는 완전히 다른 이야기다. k6로 부하 테스트를 시작하고 병목을 찾아 해결하는 과정을 정리해본다.
ChatGPT가 처음 나왔을 때 개발자들은 공포에 떨었습니다. '이제 코딩은 끝났구나.' 저도 그랬습니다. 하지만 1년간 LLM을 실제에 도입하며 깨달았습니다. AI는 신이 아니라, 엄청나게 똑똑하지만 가끔 헛소리하는 인턴이라는 것을요.
React 콘솔에 뜨는 'unique key prop' 경고, 귀찮아서 index로 때우셨나요? 그 사소한 습관이 입력 폼 데이터를 뒤죽박죽으로 만들고 사용자를 미치게 만듭니다. Virtual DOM의 동작 원리와 함께 왜 index를 key로 쓰면 안 되는지, 제 '삽질' 경험을 통해 파헤칩니다.
사용자가 회원가입 버튼을 누르면 이메일을 보낼 때까지 로딩 바가 돌아가고 있었습니다. 이메일 서버가 죽으면 회원가입도 실패했죠. 이 강결합(Tightly Coupled) 문제를 해결하기 위해 메시지 큐(Redis/BullMQ)를 도입하고, '식당 주문표' 비유로 비동기 처리를 이해한 과정을 공유합니다.
'요즘 힙한 기술이니까', '확장성이 좋으니까' 무작정 쿠버네티스(k8s)를 도입했다가 인프라 비용 폭탄과 YAML 지옥을 맛본 경험담입니다. 오버엔지니어링의 위험성과, 언제 쿠버네티스를 써야 하는지에 대한 솔직한 회고를 담았습니다.
any를 쓰면 타입스크립트를 쓰는 의미가 없습니다. 제네릭(Generics)을 통해 유연하면서도 타입 안전성(Type Safety)을 모두 챙기는 방법을 정리합니다. infer, keyof 등 고급 기법 포함.
서비스 런칭 일주일 만에 '작업하던 거 다 날아갔어요!'라는 항의 메일을 받았습니다. 원인은 JWT 토큰 만료. 보안과 편의성 사이에서 줄타기하며 배운 Refresh Token 전략, Axios Interceptor 구현, 그리고 보안 사고를 막기 위한 저장소 선택 기준을 공유합니다.
은행 계좌의 잔액이 왜 0원인지 궁금해본 적 있나요? 단순히 현재 상태(잔액)만 저장하는 대신, 입금, 출금 같은 모든 '사건(Event)'을 저장하여 시스템을 구축하는 이벤트 소싱 패턴. CQRS와 함께 사용되는 이유와 구현 시 마주하는 현실적인 문제들을 깊이 있게 다룹니다.
편리함을 위해 시작한 스마트 홈 구축, 하지만 보안을 놓치면 집이 털릴 수도 있습니다. 와이파이 전구부터 스마트 도어락까지, IoT 기기들을 안전하게 연결하고 '로컬 제어' 시스템을 구축한 저의 삽질 기록을 공유합니다.
AWS 콘솔에서 EC2 인스턴스를 정리하다가, 실수로 프로덕션 DB 서버를 종료했습니다. 식은땀을 흘리며 복구했던 그날의 경험을 통해, 왜 인프라를 코드로 관리해야 하는지(Infrastructure as Code), 테라폼(Terraform)이 어떻게 우리를 구원하는지 이야기합니다.
SSRF 공격의 원리와 방어 방법을 경험을 통해 이해한 과정
HTTP로 접속하는 사용자를 단순히 HTTPS로 리다이렉트하는 것만으로는 부족합니다. 중간자 공격(MITM)에 취약하기 때문이죠. 브라우저에게 '이 사이트는 무조건 HTTPS로만 접속해!'라고 각인시키는 HSTS(HTTP Strict Transport Security)의 원리와 적용 방법을 정리합니다.
어느 날 내 서비스가 낯선 도메인의 iframe 안에서 돌고 있는 걸 발견했습니다. Clickjacking 공격을 막기 위해 HSTS, X-Frame-Options, CSP, Permissions-Policy 등 필수 보안 헤더 6가지를 상세히 설명하고, Nginx와 Next.js에 적용하는 방법을 공유합니다.
개발 중에 코드를 수정했는데 브라우저가 반응이 없나요? 새로고침을 백만 번 하다가 지쳐서 찾아낸 HMR(Hot Module Replacement)의 원리와 고장 원인, 그리고 해결 방법을 '노가다 개발자'의 시선으로 정리했습니다.
내 서버가 해킹당하지 않는 이유. 포트와 IP를 검사하는 '패킷 필터링'부터 AWS Security Group까지, 방화벽의 진화 과정.
서비스 런칭 3일 차, 갑자기 DB CPU가 100%를 찍었습니다. 로그를 보니 SQL Injection 공격이 들어오고 있었죠. 급하게 AWS WAF를 도입하여 공격을 차단하고, 더 나아가 Rate Limiting으로 DDoS까지 방어한 경험담입니다. Positive/Negative 보안 모델과 OWASP CRS의 개념도 함께 다룹니다.
애플 앱스토어와 구글 플레이 심사에서 광탈하지 않는 법. Privacy Manifest, 인앱결제 우회 금지, 저작권 문제부터 '사람이 직접 검수한다'는 사실을 이용한 심사 통과 전략까지.
