TECH NOTES
기술노트
현장에서 검증된 개발 지식을 기록합니다.
131713161315131413131312131113101309130813071306
Backend
Express에서 async 에러가 안 잡힐 때 — 핸들링 패턴
async 라우트에서 throw한 에러가 서버를 죽이거나 응답이 멈춘다. try/catch 래퍼나 express-async 패턴으로 중앙 처리.
Backend
Node.js EADDRINUSE, 포트가 이미 사용 중일 때
"address already in use :3000" 에러 해결. 점유 프로세스 찾아 종료, 우아한 종료(graceful shutdown)로 재발 방지.
Frontend
React 상태관리, Context·Zustand·Redux 언제 무엇을
전역 상태가 필요하다고 무조건 Redux는 아니다. 규모·갱신 빈도·팀 규약 기준으로 Context, Zustand, Redux를 가른다.
Frontend
Tailwind 클래스가 안 먹힐 때 체크리스트
content 경로 누락, 동적 클래스 문자열 조합, 빌드 캐시. Tailwind가 클래스를 못 찾아 purge하는 흔한 원인들.
Frontend
localStorage vs cookie vs sessionStorage, 뭘 써야 하나
토큰·설정·임시값을 어디 둘지 헷갈릴 때. 수명·용량·서버 전송·보안(XSS/CSRF) 기준으로 선택한다.
Frontend
CORS 에러, 프론트엔드 잘못이 아니다 — 원인과 해결
CORS 에러는 브라우저가 띄우지만 해결은 서버에서 한다. 프록시·프리플라이트·credentials 설정까지 원인별 정리.
Frontend
debounce와 throttle, 검색 입력엔 무엇을 써야 하나
둘 다 호출 빈도를 줄이지만 목적이 다르다. 검색 자동완성은 debounce, 스크롤·리사이즈는 throttle. 차이와 구현.
Frontend
CSS z-index가 안 먹히는 진짜 이유 — stacking context
z-index 9999를 줘도 안 올라오는 건 부모가 만든 쌓임 맥락(stacking context)에 갇혀서다. transform·opacity·position이 맥락을 만든다.
Frontend
next/image를 쓰면 정말 빨라지나? img 태그와 비교
next/image는 자동 리사이즈·포맷 변환·lazy·CLS 방지를 준다. 하지만 외부 도메인·정적 export·단순 아이콘엔 오히려 부담일 수 있다.
Frontend
무한 스크롤, IntersectionObserver로 깔끔하게 구현
scroll 이벤트 + offset 계산은 성능도 나쁘고 버그도 많다. IntersectionObserver로 sentinel을 감시하는 방식이 표준이다.
Frontend
React.memo, useMemo, useCallback 언제 쓰고 언제 안 쓰나
세 가지 메모이제이션은 "비싼 계산"이나 "memo된 자식에 넘기는 참조"에만 의미가 있다. 무지성 남발은 오히려 느려진다. 판단 기준 정리.
Frontend
Next.js App Router에서 "use client" 경계 제대로 긋기
서버 컴포넌트가 기본, 상호작용이 필요한 잎 컴포넌트만 클라이언트로. use client를 트리 위쪽에 박으면 번들이 통째로 커진다.