개요 브라우저에서 API 호출이 분명 성공한 것 같은데, 콘솔에는 CORS 에러가 뜨는 상황 자주 마주함 문제의 본질은 서버가 망가진 게 아니라 브라우저의 보안 정책에 의해 응답 사용이 차단된 것임 CORS는 차단을 풀기 위한 협상 절차이자 규칙 세트이며, 정확히 이해하면 재현과 해결이 쉬워짐 핵심 개념 Origin 정의 Origin = scheme + host + port 조합 세 요소 중 하나라도 다르면 서로 다른 출처로 판단 SOP(Same-Origin Policy) 동일 출처 간 상호작용 허용, 교차 출처는 기본 차단하는 브라우저 보안 정책 XSS, CSRF 등 교차 사이트 공격 리스크 완화 목적 출처 비교와 차단 판단 주체는 서버가 아니라 브라우저 예외적으로 허용되는 리소스 ...
개요 CSS에서 선택자는 DOM에서 스타일을 적용할 대상 요소 집합을 정의하는 식 컴포넌트 스코프와 일관된 스타일링, 유지보수 비용에 직접 영향 핵심 유형과 매칭 원리, 명시도와 베스트프랙티스 중심 요약 핵심 개념 타입 선택자 tag 특정 태그 타깃 클래스 선택자 .class 재사용 가능한 스타일 단위에 적합 아이디 선택자 #id 고유 요소 타깃, 명시도 높음 속성 선택자 [attr], [attr=value], [attr*=substr] 속성 값 기반 매칭 가상 클래스 :hover, :focus, :active, :not(), :is() 상태나 집합 표현 가상 요소 ::before, ::after 논리적 하위 요소 생성 결합자 A B 하위, A > B 자식, A + B 인접 형제, A ~ B 일반 형제 관계 표현 그룹 A, B 동일 스타일의 대상 묶음 최신 선택자 :has() 부모가 특정 자식을 가질 때 매칭, 브라우저 지원 범위 확인 권장 동작 원리와 명시도 브라우저는 각 규칙의 선택자를 DOM 노드에 대조해 매칭된 규칙을 수집 후 명시도와 소스 순서로 충돌 해결 명시도 계산 규칙 요약 ...
개요 HTML5의 data-* 속성은 마크업에 보이지 않는 커스텀 데이터를 담기 위한 전역 속성 UI와 스크립트 사이 값 전달, 기능 감지 플래그, 간단한 지역화 메타데이터 등에 유용 DOM에서는 element.dataset으로 접근해 읽기/쓰기 가능 핵심 개념 속성명 규칙: data- 접두사 + 소문자 케밥케이스 사용 접근 규칙: data-foo-bar → dataset.fooBar 로 매핑 값 타입: 문자열 저장, 필요 시 직접 직렬화/파싱 처리 필요 보안 유의: 민감정보나 토큰 저장 금지, 노출 전제 데이터만 저장 표준 속성과 역할 혼동 금지, 의미적 데이터는 적절한 속성이나 요소 사용 권장 ...