개요 반응형 레이아웃과 접근성 요구가 커지면서 px 고정값 대신 em, rem 같은 상대 단위 사용 빈도 증가 두 단위 모두 글꼴 크기(font-size)를 기준으로 동작하지만 기준점이 다름 핵심은 기준이 어디인지 명확히 이해하고 일관된 스케일로 적용하는 것 콘텐츠가 없어도 블록 요소 높이를 유지해야 하는 경우 같은 실무 이슈에서 min-height를 em이나 rem로 정의해 타이포 스케일에 연동하는 방식 유용함 상대 단위 개념 상대(relative) 단위는 주어진 기준에 따라 유동적으로 값이 변하는 길이 단위 em, rem, %, vw, vh 등이 대표 절대(absolute) 단위는 상황과 무관하게 고정된 길이로 취급하는 단위군으로 px, pt, cm, in 등이 포함됨 참고 기준으로 CSS에서 1px는 1/96in에 해당하는 길이로 정의됨. 실제 디바이스의 물리 픽셀과는 분리된 개념 ...
개념/배경 Unobtrusive JavaScript는 HTML 구조와 JS 동작을 분리하는 접근 철학 HTML은 의미와 콘텐츠, CSS는 표현, JS는 상호작용과 상태 제어 담당 인라인 스크립트와 이벤트 속성 제거, 외부 스크립트에서 안전하게 바인딩하는 방식 지향 핵심 목표는 접근성 보장, 점진적 향상, 유지보수성과 테스트 용이성 개선, 캐시 효율 상승, 보안 취약점 노출 감소 핵심 원칙 HTML은 의미 중심 마크업 유지 CSS는 표현만 담당 JS는 DOMContentLoaded 이후 동작 주입 인라인 onclick 등 이벤트 속성 사용 금지 기능 감지 우선, UA 스니핑 지양 데이터 훅은 data-* 속성 사용, 스타일 훅과 분리 JS 미동작 상황에서도 기본 기능 유지, 점진적 향상 고려 모듈 분리와 의존성 최소화 동작 방식 마크업은 링크와 폼이 기본 동작을 스스로 제공하도록 설계 JS는 존재하면 기본 동작을 확장하거나 향상 이벤트 바인딩은 외부 스크립트에서 선택자 기반으로 수행, 인라인 스크립트 제거 ...
개요 링크를 새 탭에서 열 때 a 태그에 target="_blank"를 많이 사용함 이 경우 window.opener로 원본 페이지에 접근 가능한 취약점과 리소스 간섭 이슈가 발생할 수 있음 rel=“noopener noreferrer"를 함께 지정해 리버스 태브내빙(reverse tabnabbing) 방지와 리퍼러 차단을 적용하는 것이 권장됨 핵심 개념 target: 링크 대상 브라우징 컨텍스트 지정 window.opener: 새 탭에서 원본 창을 참조하는 브라우저 객체 rel=noopener: 새 탭에서 window.opener를 끊어 원본 페이지 접근 불가로 만듦, 리버스 태브내빙 방지 rel=noreferrer: 새 탭으로 이동 시 Referer 헤더 전송 차단, 원본 페이지 URL 비공개 target 값 정리 _self: 현재 탭에서 열기, 기본값이라 명시 생략 가능 _blank: 새 탭에서 열기 target="_blank"만 사용할 때의 문제 보안 취약점 발생 가능 악성 페이지가 window.opener를 통해 부모 창의 location을 임의 변경하여 피싱 페이지로 리디렉션하는 리버스 태브내빙 위험 존재 원본 페이지의 데이터 접근 시도 등 추가 피해 가능성 있음 성능 간섭 가능성 새 탭이 원본과 같은 브라우징 컨텍스트 그룹에서 실행될 수 있어 이벤트 루프나 리소스 경쟁으로 지연이 커질 수 있음 무거운 스크립트가 열린 탭 간에 체감 성능 저하를 유발할 수 있음 해결책 rel=“noopener” 새 탭의 window.opener를 null로 만들어 원본 페이지 참조 차단 탭 간 연결이 끊겨 보안 위험과 리소스 간섭 완화 rel=“noreferrer” 이동 시 Referer 헤더를 제거해 원본 URL과 경로 노출 방지 분석이나 리퍼러 기반 측정이 필요한 경우에는 생략을 고려 사용 예시 필수 최소 속성만 명시 ...
개요 차세대 프론트엔드 빌드 도구 Vite 요약 Vue.js 창시자 Evan You가 만들었고, 개발 중 대기 시간을 줄이는 데 초점 맞춤 프랑스어로 vite는 빠름을 의미함 핵심 가치 개발 서버 즉시 기동에 가까운 체감 속도 HMR이 가볍고 빠르게 동작 의존성 프리번들을 esbuild로 처리해 개발 경험 가속 프로덕션 빌드는 Rollup으로 안정적 번들 생성 배경과 문제 기존 번들러(Webpack) 방식은 시작 시 전체 그래프를 사전 번들링하는 구조 프로젝트 규모가 커질수록 첫 기동이 지연 코드 변경 반영 또한 번들 재생성 비용으로 지연 발생 개발 체감 문제 ...
개념/배경 Array.prototype.map은 배열의 각 요소에 대해 콜백을 호출해 변환된 결과로 새 배열을 만드는 메서드임 원본 배열 불변 유지, 동일 길이의 새 배열 생성이 핵심 특징임 기본 문법 const newArray = array.map((element, index, array) => { return element; }); element 현재 요소 index 현재 인덱스 array 원본 배열 참조 콜백은 요소 수만큼 호출되고, 콜백의 반환값이 새 배열의 같은 위치에 배치됨 사용 예시 숫자 배열 변환 const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((n) => n * 2); // [2, 4, 6, 8, 10] 객체 배열에서 특정 속성 추출 ...