반응형 UX 개발/JS 썸네일형 리스트형 바닐라 JS로 UI 핸들링 위한 속성 및 셀렉터 설정 방법 권장안 사용자 인터페이스를 구축할 때, 요소를 식별하거나 상호작용하기 위한 적절한 방법을 선택하는 것은 유지 보수 가능하고 의미론적이며 확장 가능한 코드를 작성하는 데 매우 중요합니다. 이 글에서는 UI 요소를 다루는 데 일반적으로 사용되는 방법을 비교하고, 각 방법을 언제 사용해야 하는지에 대한 실용적인 지침을 제공합니다. UI 요소 처리에 대한 일반적인 접근법 비교 HTML 요소를 작업할 때, 개발자들은 특정 구성 요소를 식별하거나 상호작용하기 위해 속성(attributes)을 자주 사용합니다. 다음은 널리 사용되는 네 가지 접근 방식을 비교한 내용입니다: 1. data-* 속성 • 목적: 특정 요소와 관련된 추가 데이터를 저장하는 데 사용되는 사용자 정의 속성. • 주요 장점: • 의미론적이고 현대적임... 템플릿 리터럴(Template Literals) 속 HTML 포맷팅, 하이라이팅 하기 Javascript의 백틱을 활용한 Template Literals는 여러모로 유용한데, 그 중 여러 줄의 마크업 코드를 쉽게 작성하고 관리할 수 있다는 점도 들 수 있습니다. 다만 포매터나 하이라이트가 없는 상태가 기본이기 때문에, 기본 상태로는 코드 가독성이 매우 낮다고 볼 수 있습니다. 손쉽게 자바스크립트 Template Literals 속에 있는 HTML을 포맷팅하고 하이라이팅 할 수 있는 방법을 안내하고자 합니다.템플릿 리터럴(Template Literals) 속 HTML 포맷팅 하기일단 Prettier를 사용할 수 있는 환경이 준비되어야 합니다. VSCode를 사용한다는 가정하에 Prettier 익스텐션을 먼저 설치해 주셔야 합니다. 이후 Formatter의 선택도 Prettier로 해 주셔야.. 자바스크립트로 여러 CSS 클래스 추가하기 여러 클래스를 요소에 추가하려면 classList.add 메서드에 여러 인수를 전달하면 됩니다. 각 인수는 추가하려는 클래스를 나타냅니다. 다음은 그 방법입니다:기본 방법Element.classList.add('container', 'class1', 'class2', 'class3');배열과 apply 활용여러 인수와 함께 classList.add를 사용하여 여러 클래스를 직접 추가합니다.apply 메서드를 사용하여 배열에서 클래스를 추가합니다.스프레드 연산자(...)를 사용하여 배열 요소를 개별 인수로 펼쳐 classList.add에 전달합니다.const classes = ['container', 'class1', 'class2', 'class3'];Element.classList.add.apply(t.. window.onload vs DOMContentLoaded 둘 다 window.onload와 DOMContentLoaded는 문서가 로드된 후 JavaScript 코드를 실행하는 데 사용됩니다. 그러나 이 두 방법은 트리거되는 시점에서 중요한 차이가 있으며, 약간 다른 시나리오에서 사용됩니다.window.onloadwindow.onload 이벤트는 이미지, 스타일시트 및 iframe과 같은 모든 종속 리소스를 포함하여 페이지 전체가 완전히 로드될 때까지 기다립니다.외부 리소스가 완전히 로드될 때 스크립트가 필요할 경우 유용할 수 있습니다.DOMContentLoadedDOMContentLoaded 이벤트는 스타일시트, 이미지 및 서브프레임을 기다리지 않고 초기 HTML 문서가 완전히 로드되고 구문 분석되었을 때 발생합니다.일반적으로 HTML이 로드되고 구문 분석되.. 동적 임포트(Dynamic Import) 이해하기 동적 임포트의 개념자바스크립트에서 동적 임포트를 사용하면 코드의 나머지 부분과 함께 초기에 로드하는 대신 자바스크립트 모듈을 동적으로 로드할 수 있습니다. 이는 웹 페이지나 애플리케이션의 초기 로드 시간을 줄이거나 사용자의 행동이나 기타 런타임 조건에 따라 모듈을 조건부로 로드할 필요가 있을 때 유용합니다.사용법 및 구문동적 임포트는 import() 함수를 사용하며, 이 함수는 모듈 객체를 포함하는 프라미스를 반환합니다. 이 모듈 객체는 일반적으로 모듈의 모든 내보내기를 포함합니다. 다음은 그 사용 방법입니다:import('module-name').then(module => { // 모듈 사용});동적 임포트와 함께 async/await을 사용할 수도 있습니다:async function loadMo.. forEach() IE 11 호환 오류 문제 대응하기 ‘forEach()’는 IE 11에 ‘fully supported’ 되는 메소드로 기재가 되어 있습니다. 다만 ‘querySelectorAll’로 여러 요소를 선택하는 경우 정상적으로 작동을 하지 않습니다. 그 이유는 ‘querySelectorAll’은 ‘NodeList’를 반환하며, ES5에서 ‘forEach()’는 ‘Array’에만 작동하도록 되어 있기 때문입니다. ‘NodeList’는 ES6부터 적용 대상으로 포함이 됩니다. 이 이슈는 ‘babel’로 ‘IE 11’을 타겟으로 잡고 트랜스파일링을 진행해도 수정이 되지 않습니다. ‘NodeList’ 등 배열이 아닌 요소를 대상으로 ‘forEach()’를 적용하기 위해서는 해당 요소들을 배열화하여 활용해 줘야 합니다. var alltable = docu.. HTML 페이지(정적 웹사이트) 비밀번호로 접근권한 제어하기 문서정보 (최종 업데이트: 2022-10-13) v1.0 2022-10-13: 최초 작성 일반정보 클라이언트 단에서 사이트에 비밀번호 제어를 위해서는 별도 자바스크립트 구현체를 통한 기능 구현 가능. 하지만 별도 고도화를 병행하지 않는다면 페이지의 접근만을 제어할 뿐 콘텐츠 암호화가 불가능하며, 접근 경로(URL)만 알면 접근이 가능하다는 점 등 제약사항이 많음 보통 서버 단에서 처리하는 것이 일반적임 서버리스 환경이라면 Cloudflare 등의 서버 제어 기능을 활용하거나, Netlify와 같은 정적웹사이트 호스팅 서비스 자체 제공 보안 기능 활용 정적 웹사이트 비밀번호 제어 방법 모음 Gitlab Pages Access Control 프로젝트 권한에 따른 접근권한 제어 가능 (깃랩 계정 기반) 관련 .. 이전 1 다음
단순함연구소 UX개발실
