체유의 IT일지

clearTimeout : setTimeout으로 생성한 타이머의 실행을 취소하는 기능 clearTimeout(취소할 타임아웃의 식별자) 디바운싱 빈번하게 발생하는 이벤트를 '특정 시간 이후에 한번만' 실행 시키는 최적화 기법 예를 들어 사용자가 300밀리초 동안 버튼을 5번 클릭 했다고 하면 디바운싱은 클릭에 의한 이벤트 실행이 바로 되지 않는다. 디바운싱 시간이 300밀리초로 설정되어 있다면, 사용자가 클릭을 멈추고 300밀리초가 지나고 나서야 해당 함수가 한번 실행된다. 디바운싱은 성능뿐 아니라 요청 하나하나도 모두 돈인 유료 API를 사용할 때 큰 효과를 볼 수 있다. 디바운싱은 주로 연이어 발생하는 이벤트를 단일 이벤트로 만들고 싶은 곳, 즉 빈번하게 발생하는 타이핑 이벤트의 결과 표시(검색 결..

동기, 비동기 요청 작업을 순서를 지켜서 순차적으로 처리를 하는지 여부에 따라 동기와 비동기로 나눌 수 있다. 동기 처리 방식은 직렬적으로 작업을 수행하고 비동식 처리 방식은 병렬적으로 작업을 수행한다. 비동식 처리 방식에는 네트워크 요청 작업이나 이미지 의 작업들이 해당된다. 비동기 작업을 처리하기 위한 패턴으로 콜백 함수를 이용해서 동시에 작업을 처리할 수 있도록 해준다. 자바스크립트는 싱글 쓰레드로 작동하는 언어이다. 하나의 쓰레드 = 하나의 콜 스택 = 한 번에 하나의 작업 수행 즉, 쓰레드가 하나만 있기 때문에 한 번에 하나의 작업만 수행할 수 있다. 그러나, 비동기 작업 처리를 가능하게 해주는 것이 있는데 바로 이벤트 루프이다. 이벤트 루프 기본적으로 자바스크립트가 실행되는 과정에 메모리 할당..

Mission 1. 주어진 배열의 요소가 정수인지 확인 2. 주어진 배열의 요소가 모두 정수의 제곱인지 확인 3. 빈 배열이라면 undefined를, 제곱근이 정수가 아니거나 음의 정수가 있을 경우 false를 출력 Number.isInteger() : 정수인지 확인하는 메서드 Math.sqrt() : 제곱근 계산하는 메서드 ✅ filter const isSquare = (array) => { if (array.length === 0) return undefined; let result = array.filter((e) => Number.isInteger(Math.sqrt(e))); if (result.length === array.length) return true; else return false; ..

✅ DOM요소 getElement~ 함수 getElement~ 함수의 종류가 다양함. 그 중 "getElementByID"는 html에서 id를 찾는 함수로, html 파일당 id는 1번만 사용해야함 중복이 되면 안됨 -> 's'가 붙지 않음 + 요소로 출력됨 + 인덱싱 불필요 이 외에 getElementsByTagName, getElementsByClassName, getElementsByName 등은 's'가 붙음 -> 요소들의 모음으로 출력되어 인덱싱이 필요 ✅ setInterval 함수 setInterval(func/code, delay, arg0...N) func/code: 밀리초(delay)마다 실행되는 함수나 선택적 구문을 사용한 문자열 delay: option으로 지정된 함수 및 코드 실행..

✅ 유사배열객체 : 유사배열객체는 이름 그대로 배열과 '유사한' 것으로, 배열처럼은 보이지만 실제는 key값과 length 값을 가지고 있는 개체이다. 이거처럼 0, 1, 2의 key 값들이 있고 length가 있는 객체 형태이다. getElementsByTagName, getElementsByClassName 등은 유사배열객체로 가져오기 때문에 forEach문, map, filter, reduce 등의 메서드를 사용할 수가 없다 사용하기 위해서는 배열 형태로 바꿔주는 작업이 필요하다 0️⃣ 유사배열객체 그대로 가져오는 방법 -> for문 사용 const strong = document.getElementsByTagName('strong'); for (let i=0; i 배열 1️⃣ 전개구문 전개구문은 ..

✅insertBefore()와 removeChild()를 활용한 DOM 요소 변형 실습문제 1. ↓↓↓↓↓↓ 초기값 Mission 1. 첫 번째 묶음의 나열된 값들 중 첫번째 요소를 삭제하고 하나의 값을 추가하기 2. 두 번째 묶음의 나열된 값들 앞에 텍스트 추가하고 '과일'은 굵게 표시하기 ↓↓↓↓↓↓ 실행 결과 let fruits = document.getElementById('fruits'); let fruits_li = document.createElement('li'); fruits_li.textContent = 'Tomato'; fruits.insertBefore(fruits_li, fruits.firstElementChild); - 하나의 값을 추가할 때, 그냥 추가하는 것이 아닌 "li" ..

✅ HTMLCollection와 NodeList DOM API가 여러 개의 요소 노드 객체를 반환할 때 사용되는 객체. 유사 배열 객체이면서 이터러블 ✅ HTMLCollection - getElementByTagName() - getElementByClassName() - 자식노드 가져오려면, children 프로퍼티 호출 1) DOM에 새로운 요소 추가되면, 새로운 요소 가져옴 -> "동적" 2) , , 와 같은 요소 노드만 포함 3) id, name, 인덱스로 자식 요소 노드에 접근 가능 -> id와 name은 ".nameItem(id명 or name명)" 메서드로 가능 4) forEach문 x. 유사배열객체로 각 요소 접근을 위해 for of문 사용 ✅ NodeList - getElementByNa..

✅ Map map(callback함수(요소, 인덱스, 배열) // 첫 글자가 m인 단어의 수 구하기 const fruits = ["apple", "banana", "mango", "orange", "blueberry", "melon", "strawberry"]; let sum = 0; fruits.map(item => { if (item[0] == 'm') sum++; }); console.log(sum); // 2 fruits에서 아이템들을 하나씩 가져오고, 그 아이템의 첫 번째 글자(item[0])이 'm'이라면 sum에 값 하나씩 추가 ➕ reduce와 결합 let sum = fruits.map((item) => item[0]=='m').reduce((total, num) => total+num);..

✅ reduce 메서드 배열고차함수 중 하나로, 배열 각 요소에 대해 주어진 reducer 함수를 실행하고 하나의 결과값을 반환 reducer 함수 -> 누적 값 / 현재 값 / 현재 인덱스(op) / 원본 배열(op) let answer = arr.reduce((prev, next) => (prev.concat(next))) ✅ 전개 문법 하나로 뭉쳐 있는 여러 값들의 집합을 펴서 개별적인 값들의 목록으로 나타내줌 ex> 'Hello' -> H e l l o let answer = [].concat(...arr) https://ul0511.tistory.com/16 [JS] 전개문법(+배열 복사, rest 파라미터), Splice() 메서드 ✅ splice 배열의 기존 요소를 삭제 또는 교체하거나 새 ..

✅ Object.values() 객체의 value들만 모아서 배열로 생성 var scores = { kor: 55, mat: 75, eng: 50, }; let arr = Object.values(scores); document.write(arr); // [55, 75, 50] ✅ Reduce let avg = arr.reduce((total, num) => total + num) / arr.length; ✅ Find 주어진 판별 함수를 만족하는 첫 번째 요소를 반환 console.log(arr.find((item) => item item..