본문 바로가기

Frontend146

JavaScript 내장함수 : 인코딩 / 디코딩 함수 인코딩은 문자를 컴퓨터에 저장 또는 통신에 사용할 목적으로 부호화하는 것이고, 그 반대가 디코딩이다. URI의 경우 전세계의 컴퓨터가 동일한 주소를 입력하면 동일한 페이지로 이동해야하는데, 한국어판 OS가 아닌 컴퓨터에서는 한국어가 작성된 url을 정상적으로 입출력하는 것이 불가능하다. 이 문제를 인코딩을 통해 모든 컴퓨터가 처리할 수 있도록 변경한다. 함수명설명escape()영문알파벳, 숫자, 일부특수문자를 제외한 문자만 인코딩*일부특수문자: @, *, -, _, +, ., /unescape()영문알파벳, 숫자, 일부특수문자를 제외한 문자만 디코딩encodeURI(uri)URL에 사용되는 일부특수문자를 제외한 문자만 인코딩*일부특수문자: :, ;, /, =, ?, & decodeURI(encodedUR.. 2024. 8. 4.
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.

티스토리툴바