Coding/javascript

기존에는 JSON.parse(JSON.stringfy(o)) 방식을 많이 사용했다. 기존 JSON API의 문제 Date 객체가 문자열이 되는 문제 const Person = { name: "John", date: new Date("2022-03-25"), friends: ["Steve", "Karen"] } // JSON.stringify `date`를 문자열로 변환합니다. const buggyCopy = JSON.parse(JSON.stringify(Person)) { name: 'John', date: '2022-03-25T00:00:00.000Z', friends: [ 'Steve', 'Karen' ] } console.log(typeof buggyCopy.date); // string JSON은..

debounce와 throttle은 성능 저하 방지를 위한 방법들이다. 클로저라는 개념을 안다면 이해하기 쉽다. IIFE(Immediately Invoked Function expression) 즉시 호출 함수를 통해 이벤트 발생 전에 이미 리턴된 함수가 이벤트 리스너에 콜백함수로 할당된다. 이벤트 리스너가 호출되기 전에 이미 리턴된 함수들이 계속해서 이벤트 발생으로 인해서 호출될 때마다 클로저 함수로서 이전의 timeId에 접근하는 컨셉이다. 1️⃣Debounce 동작 예시 이벤트를 그룹화하여 하나의 이벤트만 호출되도록 한다. 일정 시간(waiting time) 함수 호출이 없는 경우 가장 마지막 이벤트를 선택한다.(trailing) 이 대신에 가장 처음 호출된 이벤트를 선택하는 방법도 있다.(lead..

removeEventListener를 일일이 달아주다가 너무 귀찮아서 한 번에 지울 수 있는 방법을 검색해서 AbortController라는 것을 알게 되었다. 처음 본 것은 아니고 `AbortSignal`이라고 예전에 react-query와 axios를 함께 쓰면서 signal이라는 전달인자로 axios request header에 넘겨서 사용했던 기억이 있다. /* Component.ts */ export const getCommentQuery = (id: string): UseQueryOptions => ({ queryKey: ['comment', parseInt(id, 10)], /** * TIL: 쿼리 취소: 쿼리 취소는 요청 중인 쿼리를 취소하는 방법입니다. axios v0.22.0+ 버전을 ..

`target`과 `currentTarget`의 차이점을 공부하면서 Event에 대해서 다시 공부하게 되었습니다. 1. 이벤트(Event)란? 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 이벤트란 예를 들어 사용자가 버튼을 클릭했을 때, 웹페이지가 로드되었을 때와 같은 것인데 이것은 DOM 요소와 관련이 있다. 이벤트가 발생하는 시점이나 순서를 사전에 인지할 수 없으므로 일반적인 제어 흐름과는 다른 접근 방식이 필요하다. 즉, 이벤트가 발생하면 누군가 이를 감지할 수 있어야 하며 그에 대응하는 처리를 호출해 주어야 한다. 브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시에는 통지해 준다. 이 과정을 통해 사용자와 웹페이지는 상호작용(Interaction)이 가능하게 된다. 2. 이벤트 ..

🔗이 글의 내용 중 중요한 부분을 표시하며 이해하기 쉽게 첨언한 글입니다. 🔗DOMContentLoaded, load, beforeunload, unload 이벤트 그리고 defer, async 한 번에 이해하기 글과 이어지는 내용입니다. 모듈 소개 개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는 시점이 옵니다. 이때 분리된 파일 각각을 '모듈(module)'이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다. 일반적으로 모듈은 파일 단위로 분리되어 있으며 애플리케이션은 필요에 따라 명시적으로 모듈을 로드하여 재사용합니다. 즉, 모듈은 애플리케이션에 분리되어 개별적으로 존재하다가 애플리케이션의 로드에 의해 비로..

HTML 이벤트를 공부하다가 `document.addEventListener("DOMContentLoaded", ...)`과 `window.addEventListener('load',...)`에 대한 분별을 하지 못해 정확한 이해가 부족하다고 생각하여 기존 글 내용의 중요한 부분을 표시하고 이해가 쉽도록 첨언하여 흐름에 따라서 정리한 내용입니다. DOMContentLoaded, load, beforeunload, unload 이벤트 HTML 문서의 생명주기엔 다음과 같은 3가지 주요 이벤트가 관여합니다. `DOMContentLoaded` - 브라우저가 HTML을 전부 읽고 DOM 트리를 완성(=DOM 구성 완료)하는 즉시 발생합니다. 이미지 파일(` `태그의 src 속성 값 대상)이나 스타일시트(``태그..

값(value) 값(value)이란 식(표현식)이 평가되어 생성된 결과를 의미합니다. 평가란 식을 해석해서 값을 생성하거나 참조하는 것을 말합니다. 예를 들어 보겠습니다. 10 + 20; // 30 위 식이 진행되면 10 + 20 이 아닌 그 결과인 30이 저장됩니다. 이게 바로 값(30)입니다. 모든 값은 데이터 타입을 가지며, 2진수(비트)의 나열로 저장됩니다. 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있습니다. Comment: 값은 비트의 나열이며, 평가된 모든 것은 값이 된다. Tip: 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 메모리 공간을 식별 하기 위해 붙인 이름입니다. Remind: 값은 식을 평가하여 생성된 결과물 Remind: 평가는 식을 해석하거..

🔗 링크참고 함수 호출 방식에 의해 결정되는 this 완전히 이해하고 와야 함. (🔗tistory 대체 링크) 1. this function 키워드로 생성한 일반 함수와 화살표 함수의 가장 큰 차이점은 this입니다. 일반 함수의 this 자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정됩니다. 다시 말해, 함수를 선언할 떄 바인딩할 객체가 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 할당되는 것입니다. 콜백 함수 내부의 this는 browser환경에서는 전역 객체 window를 가리킵니다. function Prefixer(prefix) { this.prefix = prefix; } Prefixer...

🔗 모던 자바스크립트 Deep dive - 이웅모 중 일부를 가져와서 중요 포인트를 표시하고 이해하며 기록하였습니다. 🔗 예전에 this에 관해 썼던 글 자바스크립트의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체와 this 를 암묵적으로 전달받습니다. 1. 전달인자 값 2. arguments(전달인자) 객체 3. this 객체 function square(number) { console.log(arguments); console.log(this); return number * number; } square(2); 자바스크립트의 this keyword는 Java와 익숙한 언어의 개념과 달라 개발자에게 혼란을 줍니다. Java에서의 this는 인스턴스 자신(self)을 가리..

TL;DR Object.defineProperty()의 특징 객체의 속성을 세밀하게 추가하거나 수정할 수 있습니다. 객체에 getter / setter 를 지정할 수 있습니다. IE 9 부터 지원합니다. Object.defineProperty()의 문법 `Object.defineProperty(obj, propertyName, descriptor)` `obj`와 `propertyName`: 각각 설명자(속성 서술자)를 적용하고 싶은 객체와 그 객체의 프로퍼티를 의미합니다. `descriptor`: 적용하고자 하는 프로퍼티 설명자(속성 서술자) 객체를 의미합니다. 속성 서술자 객체 내부에는 값(value)과 데이터 서술자(플래그 정보)와 접근자 서술자(getter, setter)가 위치하고 있습니다. 서술..