프론트엔드 개발을 하다 보면 한 번쯤은 꼭 마주치는 CORS 에러.Postman에서는 응답이 잘 오는데, 웹에서만 시도하면 브라우저가 막아버리니 "왜?"라는 생각이 먼저 들 수밖에 없다.🌝 CORS란 무엇인가?**CORS(Cross-Origin Resource Sharing)**는 다른 출처(Origin) 간의 리소스 요청을 제어하는 브라우저의 보안 정책이다.예를 들어, 내 로컬에서 돌아가는 localhost:3000 프론트에서 api.myservice.com으로 API 요청을 보내면, 브라우저는 "이건 다른 출처인데, 이 요청을 정말 허용해야 할까?"라고 의심한다.🔍 여기서 출처(Origin)는 protocol + domain + port 조합이다.🚫 CORS 에러가 나는 상황브라우저는 다른 출처..

사용자 인터페이스를 구현하다 보면, 클릭 이벤트가 예상치 못한 요소까지 전달되는 현상을 마주할 때가 있다. 예컨대 버튼을 클릭했는데, 그 상위 div에 걸어둔 이벤트 리스너도 함께 실행되는 것이다.이러한 문제를 더 개념적으로 파고들어보자. 이벤트 전파란?이벤트 전파(Event Propagation)는 HTML 요소에서 이벤트가 발생했을 때, 그 이벤트가 DOM 트리를 따라 전파되는 흐름을 말한다. 이 흐름은 총 세 단계로 나뉜다:캡처링 단계 (Capturing Phase)타깃 단계 (Target Phase)버블링 단계 (Bubbling Phase) 이벤트가 발생하면 먼저 캡처링 단계에서 최상위 요소(document)부터 타깃 요소까지 내려가고, 타깃 요소에서 이벤트가 실행된 후, 버블링 단계에서 타깃 ..

null, undefined, undeclared, NaN을 헷갈리면 어떤 일이 생길까?없는 값을 체크한다고 생각했는데, 그 값이 NaN이라 의도치 않게 연산이 꼬인다.undefined라고 생각한 값을 null만 체크해서 조건문이 통과되지 않는다.선언된 줄 알았던 변수가 실제로는 undeclared 상태라 런타임 에러가 난다.이러한 실수를 줄이기 위해, 네 가지 개념을 한 번에 정리해보자.1. null – 의도적으로 비어있음을 표현정의: 명시적으로 "값이 없음"을 나타내기 위해 사용하는 값타입: object (설계 오류로 인해 typeof null은 "object" 반환)특징:의도적으로 비어 있음을 명시주로 객체 초기화에 사용null == undefined → true (느슨한 비교: 형 변환 발생)nu..

각 저장소의 기본 특성저장소용량지속성서버 전송접근 방식특이사항Cookies약 4KB설정 가능✅ 자동 전송document.cookie도메인/경로 설정 가능, HttpOnly 및 Secure 설정으로 보안 강화 가능, 크기 제약 큼LocalStorage5~10MB영구 저장❌동기적 API도메인 기준으로 저장, 같은 출처에서만 접근 가능, XSS 공격에 취약할 수 있음SessionStorage약 5MB탭 종료 시 삭제❌동기적 API탭 단위 저장, 새로고침 시 유지되며 탭 닫으면 삭제됨, 다른 탭에서는 접근 불가IndexedDB수백 MB 이상영구 저장❌비동기 API객체 저장 가능, 인덱싱 및 검색 지원, 트랜잭션 처리 가능, 구조화된 데이터에 적합 ✅ 상황별 추천 정리1. 로그인 상태를 유지해야 할 때Cookie..

1. padding (안쪽 여백) 내용 콘텐츠와 테두리 사이에 공간이 생김. 내부 여백을 만들어줌. 붉은 점선 내부가 padding 영역. 2. margin (바깥쪽 여백) 요소 바깥쪽에 공간이 생김. 다른 요소와의 거리 확보용. 3. position: static static 기본값. 요소는 문서 흐름에 따라 배치됨. top, left 등 오프셋 속성은 적용되지 않음. 4. position: relative relative 요소는 원래 자리 기준으로 오프셋(top, left 등..