codinghatso

DOMContentLoaded와 window.onload는 모두 웹 페이지 로딩 과정에서 발생하는 이벤트입니다만, 각각의 이벤트가 발생하는 시점과 그 의미에는 중요한 차이점이 있습니다. DOMContentLoadedHTML문서가 완전히 로드되고 파싱 되었을 때 발생합니다.DOM 트리가 완성되었으며, 스크립트 실행을 위한 준비가 완료된 상태입니다.외부 리소스(이미지, 스타일시트, 프레임 등)의 로딩을 기다리지 않습니다.주요 포인트실행 시점 : 이 이벤트는 HTML 문서가 완전히 파싱되고, DOM 트리가 완성되었을 때 발생합니다. 하지만 이미지, 스타일시트, 프레임 등 외부 리소스의 로드는 기다리지 않습니다.사용 이유 :  이 이벤트 리스너는 문서가 완전히 로드되었을 때 JavaScript 코드가 실행될 준..

JS로 재사용가능한 태그 만들어 사용하기 let 변수이름 = document.createElement("태그이름"); - 변수에 원하는 태그를 생성하여 담아놓는 패턴. let 텍스트변수 = document.createTextNode("문자열 또는 HTML Symbols"); - 변수에 문자열이나 특수문자를 담아놓고 사용하는 패턴. https://www.htmlsymbols.xyz/unicode/U+00D7 HTML Symbols ... www.htmlsymbols.xyz 담아놓은 '태그변수'에 Class를 부여하고 태그의 자식인자로 '텍스트변수'를 할당한다. 이렇게 활용 가능한 태그가 완성된다. 접근자 이해하기 선택된 태그의 위치를 파악하고, 선택된 태그를 기준으로 상대적인 경로로 접근합니다. 예) no..

자바스크립트의 Array는 객체(함수)이기 때문에 new Array()로 특정 길이의 배열을 생성할 수 있지만 초기값이 undefined로 설정되는 문제가 있다. 하드코딩을 통한 초기값 지정 방법이 있지만 좋은 방법은 아닌 듯합니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from Array.from() - JavaScript | MDN Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만듭니다. developer.mozilla.org Array.from() 메서드는 유사 배열..

1. (Element) h2.setAttribute('class', 'classname');

1. append() / appendChild() 제일 아래에 삽입 된다. 2. parentNode.insertBefore( newNode, referenceNode) referenceNode 기준 위쪽에 삽입된다.

브라우저에서 좌표찾기 getBoundingClientRect() 사용법 Element.getBoundingClientRect(); 예시 const sbox = document.querySelector(".sbox"); document.addEventListener("click", (e) => { const rect = sbox.getBoundingClientRect(); console.log(rect); console.log(`clinet: ${e.clientX}, ${e.clientY}`); console.log(`page: ${e.pageX}, ${e.pageY}`); });

nullish 병합 연산자(nullish coalescing operator) ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 ‘확정되어있는’ 변수를 찾을 수 있습니다. a ?? b의 평가 결과는 다음과 같습니다. a가 null도 아니고 undefined도 아니면 a 그 외의 경우는 b nullish 병합 연산자 ??없이 x = a ?? b와 동일한 동작을 하는 코드를 작성하면 다음과 같습니다. x = (a !== null && a !== undefined) ? a : b; 예시 let firstName = null; let lastName = null; let nickName = "바이올렛"; // null이나 undefined가 아닌 첫 번째 피연산자 alert(firstName ?? las..

Javascript는 함수형 개발 언어에 최적화 되어있습니다. 우리가 개발을 할 때 함수를 만들때는 주의사항이 있습니다. 함수는 항상 어떤 목적을 수행하기 위한 하나의 기능 단위로 만들어져야 한다는 것입니다. 함수를 사용하는 이유 1. 여러가지 기능을 하는 코드를 한 단어로 묶고 싶을 때(그리고 나중에 재사용할 때) 2. 입출력기능을 만들 때 Arrow fucntion 장점 1. 함수 본연의 기능을 아주 잘 표현하는 문법입니다. 함수 본연의 입출력기능을 아주 직관적으로 잘 표현해줍니다. input을 집어 넣어 output을 출력하는 함수의 본 개념을 뜻함. 파라매터로 값을 받아 return을 이용하여 뱉어내는 것. 2. 소괄호 생략이 가능합니다. var someFunc = x => { return x *..