본문 바로가기

FE/Javascript22

Throttling & Debouncing at Search 보통 쓰로틀링(Throttling)과 디바운싱(Debouncing)은 다른 개념이라 동시에 비교할 일이 없다. 그러나, 검색할 때는 흔히 비교되는 친구다. 단어 그대로 번역하면 쓰로틀링은 목을 조른다는 뜻이고, 디바운싱은 떨리지 않게한다는 의미다. 전혀 다른 의미 2개가 검색에선 비교대상인지 참 궁금해졌다. 검색은 보통 onChange를 통해 검색을 구현한다. onChange할 때마다 서버 데이터를 요청한다면 꽤 많은 트래픽이 발생한다. 회사 입장에선 모두 비용이다. 쓰로틀링과 디바운싱을 사용하면 이런 비용을 줄일 수 있다. Throttling 쓰로틀링은 그 뜻에서 착한해 무언가를 억제한다는 표현으로 된다. 검색 시 억제할 것은 역시 데이터 전송이다. 쓰로틀링은 onChange될 때마다 서버 요청하지 않.. 2022. 10. 4.
Object.keys, values, entries, assign 알고리즘을 풀다보면 메서드가 은근 유용할 때가 많다. 물론 효율성을 따지지 않는다는 조건에서다. 초보라면 효율성이나 속도보다 일단은 풀어내는 게 중요하기 때문에 알고리즘에 익숙해지기 전까진 메서드를 사용하더라도 풀어내는 데 의의를 두는 게 좋다고 본다. 그런 점에서 이번엔 객체 메소드 중 keys, values, entries, assign 4가지를 정리하려고 한다. Object.keys() keys() 메서드는 객체 키값을 배열로 반환한다. const heart = { one: 'love', two: 82, three: true }; console.log(Object.keys(heart));// ["one", "two", "three"] Object.values() values() 메서드는 객체 값을 .. 2022. 10. 3.
Shallow Copy & Deep Copy 객체를 열심히 만들고 새로운 객체에 이전 객체 값을 복사해 사용하다보면 난감한 일이 생긴다. 복사본을 수정했음에도 원본 객체가 바뀌는 일이다. 이때 깊은 복사(Deep Copy)와 얕은 복사(Shallow Copy)를 알아야할 때다. 이는 지난 번에 올렸던 원시 타입과 참조 타입을 알고 있다면 상대적으로 이해하기 쉽다. 참조 타입 특성으로 인해 나타나는 차이기 때문이다. 얕은 복사 const first = { name:"코난", age:8, school:"타이탄초등학교" } const second = first; console.log(second) // { name: '코난', age: 8, school: '타이탄초등학교' } 위와 같이 코드를 작성했다면 second에 first에 객체가 그대로 복사된다.. 2022. 9. 24.
== & === 자바스크립트를 배우면서 제일 어색했던 게 비교 연산자가 아닐까 싶다. 그 중에서도 동등연산자(==)와 일치연산자(===)가 탑이다. 학교 다닐때 배운적이 있나 싶을 정도다. 아주 간단하지만, 프로그래밍에선 꼭 인지하고 있어야할 두 연산자. 비슷하면서도 확연이 다른 이 두 연산자를 비교했다. 동등 연산자(==) 두 피연산자가 동일한지 확인하며, boolean 값을 반환한다. 이때 타입 즉 자료형이 다르면 동일한 타입으로 변환한다. 숫자와 문자열 비교면 숫자 타입으로, 하나의 피연산자가 boolean일 경우 true라면 1을 반환하고 false라면 +0을 반환한다. 객체와 숫자 혹은 객체와 문자열이라면 객체를 valueOf()나 toString()으로 변환 후 비교한다. 일치연산자(===) 두 피연산자가 동.. 2022. 9. 23.
Primitive type & Reference type Primitive type(원시타입)과 Reference type(참조타입)은 프로그래밍의 근간이다. 이에 대한 이해도가 없다면 for문을 배워도 if를 배워도 금방 한계에 봉착한다. 어려운 것은 아니나, 그렇다고 빠르게 이해할 수 없었떤 두 가지를 정리한다. 간단 비교하고 시작하자면 원시타입은 정수, 실수, 불린 등 실제 데이터를 담은 것이고, 참조타입은 해당 데이터가 담긴 주소를 갖고 있다. Primitive type 원시타입은 객체나 메서드가 아닌 데이터 그 자체를 갖고 있는 것을 말한다. 대부분의 저급 언어가 가진 특징이며, 이미 생성한 원시타입의 값은 불변하다는 특징을 갖는다. 자바스크립트에서 원시타입은 7개만 알면 끝이다(ES6 기준). 원시타입의 종류와 기본 특징은 아래와 같다. string.. 2022. 9. 20.

티스토리툴바