본문 바로가기

Frontend145

JavaScript의 내장함수 : 타이머함수 타이머함수함수명설명setTimeout(function, millisecond)일정 시간이 지난 후 함수를 한번 실행한다.clearTimeout(id)일정 시간이 지난 후 함수를 한 번 실행하는 것을 중지한다.setInterval(function, millisecond)일정 시간마다 함수를 반복해서 시행한다.clearInterval(id)일정 시간마다 함수를 반복하는 것을 중단한다.  See the Pen setTimeout by coding-ji (@coding-ji) on CodePen.위의 예제에서 let val1 = setTimeout(writeHello, 1000);으로 설정하고 clearTimeout(val1);을 시행하면 setTimeout이 시행되지 않는 모습을 볼 수 있다.  >더보기 .. 2024. 8. 4.
JavaScript : 예외처리에 대해서 알아보자 예외처리란JavaScript에서 코드 실행 중에 정상적인 문법인데도 불구하고 예기치 못한 에러가 발생했을 때, 이때 코드의 실행 흐름을 복구할 수 있는 기능을 얘기한다. try{예외 발생되는 코드}catch{예외처리 코드}finally{예외가 발생하지 않아도 무조건 실행되는 코드}; 예외처리 객체예외에 대한 로직을 처리하면서 예외 객체를 사용하여 예외가 발생했을 때 뜨는 예외명(name), 예외설명(description), 예외메시지(message)의 값을 가져올 수 있다. 오류 유형execption.name 기준으로 오류 유형을 잡아낼 수 있다. 오류 유형설명EvalError전역함수eval()에서 발생하는 오류RangeError숫자변수나 매개변수가 유효한범위를 벗어났음을 나타내는 오류ReferenceE.. 2024. 8. 2.
JavaScript : DOM 변화 감지하기 - MutationObserver 웹 컴포넌트에 대해 공부하면서 커스텀 엘리먼트의 메서드 중에 attributeChangedCallback이 있었다. 커스텀 엘리먼트의 속성에 변화가 있을 때 호출 되는 메서드였다. 이 메서드의 경우에는 오로지 자기자신의 속성변화만 읽어냈기 때문에, 사용하기에 한계가 있었다. 이러한 점을 개선하기 위해서 DOM 요소의 변화를 관찰하고, 해당 요소에 변화가 있을 때 콜백을 시행하는 객체 MutationObserver가 나왔다.  const observer = new MutationObserver(callback);콜백 함수에 연결된 감지기 인스턴스 생성한다.  observer.observe(target, options);요소의 변화를 감지를 시작한다. target은 DOM 트리 내에서 변경을 감지할 노드 또.. 2024. 8. 2.
JavaScript : 웹 컴포넌트(Web Component)란? 웹 컴포넌트기능을 캡슐화 시켜서 재사용이 가능한 하나의 커스텀 엘리먼트를 생성하여 웹에서 활용할 수 있도록 한다. 웹 컴포넌트의 경우 순수 자바스크립트에서 사용이 가능하다는 장점이 있어 높은 상호운용성을 가지고 있다. 웹 컴포넌트는 세 가지 주요 기술로 구성된다. Custom element사용자 정의 요소 및 동작을 사용자가 원하는 대로 정의할 수 있는 JavaScript API 이다. Shadow DOM메인 document DOM으로부터 독립적으로 렌더링 되어 캡슐화된 DOM트리를 추가 및 제어할 수 있다.HTML 템플릿 과 엘리먼트를 사용하여 렌더링 된 페이지에 나타나지 않은 마크업 템플릿을 작성할 수 있다.Cutom Element아래의 명령어를 사용하면 해당 태그 이름으로 커스텀 엘리먼트가 등록이.. 2024. 7. 31.
JavaScript: Date 객체에 대해서 Data 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담고있다. Date 객체를 활용하면 현재 날짜를 출력 및 현재까지의 시간 측정 등의 여러가지로 활용할 수 있다.new Date()새로운 Date 객체를 만들어서 인스메서드를 사용할 수 있다.날짜 정보를 가져오는 함수설명날짜 정보를 수정하는 함수getFullYear()연도 정보setFullYear()getMonth()월 정보setMonth()getDate()일 정보setDate()getDay()요일 정보(일:0~토:6) getHours()시 정보setHours()getMinutes()분 정보setMinutes()getSeconds()초 정보setSeconds()getMillisecond()밀리초 정.. 2024. 7. 31.
JavaScript : DOM 요소의 높이 / 너비를 알아보자(client / offset / scroll / getBoundingClientRect()) 웹페이지, 또는 요소의 높이 / 너비 값에 대한 정보를 얻는 속성에 대해 소개해보고자 한다. 우선 client, offset, scroll에 대해 알아보자clientelement.clientWidth | element.clientHeight | element.clientLeft | element.clientTop해당 요소의 패딩을 포함한 크기를 나타낸다. clientWidth는 요소의 패딩을 포함한 너비, clientHeight는 요소의 패딩을 포함한 높이, clientLeft와 clientTop은 border기준 가장 바깥 끝부분으로부터 해당 요소가 얼마나 떨어져 있는지에 대한 정보를 제공한다.  offsetelement.offsetWidth | element.offsetHeight | element... 2024. 7. 30.

티스토리툴바