본문 바로가기

Frontend/JavaScript47

자바스크립트와 비동기 자바스크립트는 기본적으로 싱글 스레드이기 때문에 한 번에 하나의 동작만 할 수 있다. 동기 언어. 따라서 코드가 순차적으로 실행된다. 하지만 이렇게 되면 문제가 있다. 네트워크 요청 등의 작업은 시간이 오래 걸리는데, 이런 코드를 동기식으로만 처리한다면 뒤의 작업들은 모두 대기 상태가 된다. 블로킹이 발생하는 것이다. 이걸 해결하기 위한 것이 비동기! 자바스크립트는 웹 개발을 위해 설계되었기 때문에 비동기 처리가 매우 중요하다. 또한 UI에서 상호작용을 즉각적으로 처리하기 위해서는 백그라운드에서 오래 걸리는 작업들이 비동기로 처리되어야 할 필요가 있다.ex. 버튼 클릭할 때 HTTP 요청을 보내는 동안 UI는 멈추지 않고 반응해야.  자바스크립트에서 비동기 작업을 처리하는 방법콜백함수비동기 작업이 완료되.. 2024. 7. 10.
JS의 sort()는 기본적으로 문자열 정렬이다. JS의 sort() 함수는 기본적으로 문자열 정렬let numbers = [10, 2, 1];numbers.sort(); // ["1", "10", "2"] JS의 sort()는 기본적으로 문자열 정렬을 수행하기 때문에 위와 같은 결과가 나온다.이 결과는 숫자 값에 따른 정렬이 아니라 문자열로 변환된 후의 유니코드 값에 따른 정렬. 예상한 대로 수 비교를 해서 정렬을 하고 싶다면 비교함수를 sort()에 전달해야 한다.  let numbers = [10, 2, 1];numbers.sort((a, b) => a - b); // [1, 2, 10]// 다른 방식으로 써보기numbers.sort((a, b) => { if (a b) return 1; else return 0;}  사실상 가장 위의.. 2024. 6. 4.
Array.at() 뒤에서부터 인덱스 접근 Array.at() let arr = [1,2,3,4,5] console.log(arr[arr.length-1]) // 5 console.log(arr.at(-1)) // 5 뒤에서부터 index를 접근해야할 필요가 있을 때 유용할 듯. 2024. 3. 14.
검색어 입력하는 동안 API 호출 지연하기 - 디바운스(Debounce) 디바운스와 쓰로틀 완벽 이해하기 짧은 시간 내에 연속해서 호출되는 이벤트 핸들러들(검색어 입력, 스크롤 이벤트 등)은 과도한 호출로 인해 성능에 문제를 일으킬 수 있다. 디바운스와 쓰로틀을 적절히 사용하면 성능 문제를 개선할 수 있다. debounce 정의 연이어서 함수가 호출될 때 앞에서 호출된 함수들은 모두 취소하고, 제일 마지막의 함수만 호출되도록 하는 것. 예를 들어 시간을 200ms로 설정한다면 200ms가 다 지나가기 전에 연달아서 함수가 호출된다면 이전의 타이머는 취소하고, 다시 새롭게 타이머를 설정. 이것을 반복하다가 결국 마지막 함수가 호출되면 (더이상 함수가 호출되지 않으면) 함수를 호출한다. 활용 검색어 입력 등의 작업을 할 때, 밑에 연관된 검색어를 보여주는 기능을 많이 봤을 것이다.. 2024. 1. 22.
[JavaScript] e.preventDefault() 로 form 의 기본 동작 막기 문제 상황 document.addEventListener("keyup", (e) => { let newIdx; if (e.key === "Enter") { if (this.state.data.length == 0) return; let selected = document.querySelector(".Suggestion__item--selected"); onSelect(selected.innerText); } }) 바닐라 자바스크립트를 활용하여 언어 검색 사이트를 구현하던 중 마주쳤던 사소한 이슈에 대한 기록이다. 위와 같이 코드를 짠 상태에서 엔터를 눌렀는데 제대로 dom 요소를 받아오지 못하는 상황이 발생했다. 해결 이유는 위의 요소가 태그로 감싸져있기 때문이었다. 태그는 기본 동작으로 submit이 .. 2024. 1. 22.
Proxy 프록시 출처 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy Proxy The Proxy object enables you to create a proxy for another object, which can intercept and redefine fundamental operations for that object. 프록시는 타겟이 되는 객체의 기본동작을 중간에서 가로채 대신 수행. Parameters target: 대신(프록시)할 원본 객체(target!) handler: proxy가 가로챌 수 있는 것들. 핸들러가 비어있다면 대신 수행하는 것이 없다는 것이므로 그냥 원본 객체를 투명하게 감싸고 .. 2023. 12. 29.