sol의 개발로그

🔎 Symbol 이란? ES6(ECMA2015)에서 추가된 새로운 원시 데이터 타입으로 sYMBOL은 고유하고 변경 불가능한 값을 나타내며 이러한 고유성은 주로 객체 속성(property) 이름으로 사용된다. 즉, 변경이 불가한 데이터로 유일한 식별자를 만들어 데이터를 보호하는 용도로 사용 🔎 Symbol 생성방법 const mySymbol = Symbol(); // 설명 문자열 없는 Symbol const anotherSymbol = Symbol('Hello'); // 설명 문자열이 있는 Symbol Symbol('설명') : '설명'은 단순 디버깅을 위한 용도일 뿐, 심볼 값과는 관계없다. const sKey = Symbol("Hello!"); const user = { key: "일반정보", [sK..

🔎 포커스 이벤트(Focus Events) 제출 초기화 1. focus : 요소가 포커스를 받았을 때 발생하는 이벤트로 주로 입력 필드나 버튼과 같은 요소가 포커스를 받았을 때 사용자에게 시각적인 피드백을 제공하거나 특정 동작을 수행하는데 활용된다. 2. blus : 요소가 포커스를 잃었을 때 발생하는 이벤트로 포커스 이벤트와는 반대로 요소가 포커스를 잃었을 때 처리할 동작을 정의할 수 있다. const formEl = document.querySelector("form"); const inputEls = document.querySelectorAll("input"); inputEls.forEach((el) => { el.addEventListener("focus", () => { formEl.class..

🔎 Mouse & Pointer Events 웹 애플리케이션에서 마우스, 터치 스크린, 트릭패드 등과 같은 입력 장치와 상호 작용하기 위한 이벤트를 다루는데 사용이 된다. 사용자가 웹 페이지와 상호 작용하고 동적인 기능을 제공하는데 중요하다. 📌 주요 마우스, 포인터 이벤트 1. click: 요소를 클릭할 때 발생하는 이벤트로 마우스 버튼을 클릭하거나, 터치 스크린을 터치하거나, 트랙패드를 탭할 때 발생 const parentEl = document.querySelector(".parent"); const childEl = document.querySelector(".child"); childEl.addEventListener("click", () => { childEl.classList.toggle("..

🔎 이벤트 옵션 이벤트 리스너 메서드를 사용할 때 이벤트 옵션을 설정할 수 있는데 이벤트 옵션은 이벤트의 동작을 조절하고 제어하는데 사용된다 이벤트 옵션은 세 번째 매개변수로 전달되며, 일반적으로 객체 형태로 지정된다. 📌주요 이벤트 옵션 1. capture(캡처링 단계) : true 또는 false 값을 가지며 이벤트 핸들러가 캡처링 단계에서 실행될지 여부를 지정한다 true로 설정하면 캡처링 단계에서 실행, false로 지정하면 버블링 단계에서 실행 기본값은 false이다. 2. once(한번만 실행) : true 또는 false 값을 가지며 이벤트 핸들러가 한 번만 실행되고 나서 자동으로 제거되어야 하는지 여부를 지정한다. true로 설정하면 이벤트가 한 번만 발생한 후 핸들러가 자동 제거 된다. ..

🔎 기본 동작 방지 기본동작이란 브라우저에서 제공하는 기본적인 동작을 의미 즉, HTML, CSS만 작성하더라도 사용할 수 있는 동작 대표적으로 요소에서 위아래로 화면을 스크롤할 수 있는 개념이나 a태그를 통해 페이지이동을 할 수 있는 동작들을 말할 수 있다. const parentEl = document.querySelector(".parent"); parentEl.addEventListener("wheel", (event) => { event.preventDefault(); console.log("Wheel!"); }); const anchorEl = document.querySelector("a"); anchorEl.addEventListener("click", (event) => { event.p..

🔎 이벤트 추가 및 제거 이벤트 추가 : addEvenetListener을 사용하여 이벤트 등록을 할 수 있으며 대상에 이벤트 청취(Listen)를 등록한다 대상에 지정한 이벤트가 발생했을 때 지정한 함수(Hendler)가 호출된다 이벤트 제거 : removeEventListener을 사용하여 이벤트를 제거하며 메모리 관리를 위해 등록한 이벤트를 제거하는 과정이 필요할 수 있다. HEROPY! 📌이벤트 추가 const parentEl = document.querySelector(".parent"); const childEl = document.querySelector(".child"); parentEl.addEventListener("click", () => { console.log("Parent"); ..

1. innerWidth / innerHeight 현재 화면(Viewport)의 크기를 얻는다. console.log(window.innerWidth); console.log(window.innerHeight); 2. scrollX/ scrollY 페이지의 좌상단 기준, 현재 화면(Viewport)의 수평 혹은 수직 스크롤 위치를 얻는다. 3. scrollTo 지정된 좌표로 대상(화면, 스크롤 요소)을 스크롤한다. Window, Element 각각 사용이 가능하다. 대상.scrollTo(X좌표, Y좌표) 대상.scrollTo({top : Y, left : X, behavior: "smooth"}) // window setTimeout(() => { window.scrollTo(0, 500); }, 100..