My Voice, My Space

웹 개발과 인프라를 다루는 기술 블로그. 실전에서 부딪힌 문제와 해결 과정을 기록합니다.

최신 글

API 에러 응답 형식 설계하기: 제각각인 에러 응답을 RFC 9457 Problem Details로 통일하는 법

어떤 API는 문자열을, 어떤 API는 { error }를, 어떤 API는 { message, code }를 돌려준다면 프론트엔드는 에러마다 다른 코드를 써야 한다. 좋은 에러 응답의 조건과 표준 형식인 RFC 9457 Problem Details, 필드별 검증 에러, 내부 정보 숨기기, Node.js로 한 곳에서 처리하는 방법까지 정리했다.

2026.10.086분

백엔드 HTTP 웹 보안 Node.js

CORS 에러 완전 정리: 왜 막히는지부터 preflight, credentials까지 올바르게 해결하기

'has been blocked by CORS policy' 에러는 서버가 아니라 브라우저가 막은 것이다. 같은 출처 정책, 단순 요청과 preflight, 쿠키를 보내는 요청, 응답 헤더 노출까지 실제 브라우저로 확인한 결과와 함께 정리하고, mode: 'no-cors' 같은 잘못된 해결법도 짚어봤다.

2026.10.087분

프론트엔드 CSS

CSS :has() 선택자 실전 가이드: 자바스크립트 없이 부모를 선택하는 법

체크하면 카드가 강조되고, 입력이 틀리면 폼 전체가 반응하고, 별점에 마우스를 올리면 앞의 별까지 칠해진다. 예전엔 자바스크립트가 필요했던 일을 CSS :has() 한 줄로 해결하는 실전 예제를 직접 눌러보며 정리했다.

2026.10.086분

프론트엔드 HTML

자바스크립트 없이 HTML만으로 되는 것들: 아직도 div로 다 만들고 있다면

아코디언, 팝오버, 모달, 자동완성, 폼 검증, 이미지 지연 로딩까지. 라이브러리 없이 HTML 태그와 속성만으로 해결되는 기능을 예제와 함께 정리했다. 코드는 줄고 접근성은 덤으로 따라온다.

2026.10.088분

백엔드 HTTP Vercel

HTTP 캐시 제대로 쓰기: Cache-Control, ETag, no-cache와 no-store의 차이

no-cache는 '캐시하지 마라'가 아니다. Cache-Control의 max-age, no-cache, no-store, s-maxage, immutable이 각각 어떻게 동작하는지 실제 브라우저로 서버에 요청이 몇 번 가는지 확인하고, ETag와 304, 배포해도 옛날 파일이 보이는 문제, Vercel CDN 캐시까지 정리했다.

2026.10.086분

백엔드 HTTP API 설계

HTTP 상태 코드 올바르게 쓰기: 400 vs 422, 401 vs 403, 200 vs 201 vs 204 헷갈릴 때 보는 정리

에러인데 200에 success: false를 담고 있다면, 클라이언트와 모니터링 도구가 실패를 알 수 없다. 상황별로 어떤 상태 코드를 써야 하는지, 401과 403, 400과 422처럼 헷갈리는 코드의 차이, 301과 308처럼 POST가 GET으로 바뀌는 리다이렉트 함정까지 정리했다.

2026.10.087분

프론트엔드 JavaScript

자바스크립트 비동기 에러 올바르게 처리하기: try/catch가 못 잡는 경우부터 Promise.all vs allSettled까지

try/catch로 감쌌는데 에러가 새어 나가고, 404인데 fetch는 성공했다고 한다. await 빠뜨린 try/catch, return vs return await, fetch의 res.ok, Promise.all과 allSettled, 반복문 속 await, 타임아웃과 요청 취소까지 비동기 에러 처리의 함정을 직접 실행해보며 정리했다.

2026.10.087분

개념 정리 JavaScript Node.js

자바스크립트 이벤트 루프 완전 정복: 마이크로태스크와 매크로태스크의 실행 순서

setTimeout(0)보다 Promise.then이 먼저 실행되는 이유는? 콜 스택, 태스크 큐, 마이크로태스크 큐가 어떤 순서로 돌아가는지 예제로 정리하고, 브라우저와 Node.js의 차이, 실무에서 UI 멈춤을 피하는 방법까지 알아보자.

2026.10.087분

프론트엔드 JavaScript

자바스크립트 고차 함수 완전 정복: map, filter, reduce부터 직접 만드는 once, memoize까지

함수를 인자로 받거나 함수를 반환하는 고차 함수. map, filter, reduce를 제대로 쓰는 법부터 once, memoize, pipe, 커링처럼 실무에서 바로 쓰는 고차 함수를 직접 만들어보고, ['1','2','3'].map(parseInt) 같은 함정까지 정리했다.

2026.10.087분

프론트엔드 JavaScript

자바스크립트 ?? vs || 완벽 정리: null, undefined, 0, 빈 문자열을 올바르게 처리하는 법

볼륨 0이 50으로 바뀌고, 빈 닉네임이 '익명'이 되는 버그는 대부분 || 때문이다. ??와 ||의 차이, ?. 옵셔널 체이닝, ??=, 기본 매개변수가 적용되는 조건, null 검사하는 올바른 방법까지 직접 값을 넣어보며 정리했다.

2026.10.086분