본문 바로가기

Web11

Debounce / Throttle을 알아보자 - feat. Lodash Browser Event는 짧은 시간안에 많이 발생될 수 있습니다. 브라우저에서 저희는 Drag and Drop, Draggable, Resize, Infinite Scroll과 같이 다양한 기능을 개발하기 위해 Event를 감지하는 Handler를 등록합니다. document.addEventListener('scroll', function Handler () { // 로직 }) 그렇다면 Handler 또한 짧은 시간안에 많이 호출될 수 있습니다. Handler는 서버와의 API 통신, 위치 계산 등 비교적 시간이 오래걸리는 작업을 포함할 수 있습니다. 이러한 로직이 짧은 시간 동안 많이 실행된다면 사용자는 불편함 UI/UX를 경험하게 될 것입니다. 결국, 성능상 이슈가 발생합니다. 최적화 방법 Brow.. 2023. 9. 18.
JS Date - GMT, UTC, Timezone에 대해 알아보자 개요 GMT, UTC, 타임존(시간대)가 무엇인가? 시간을 표시하는 방법에는 무엇이 있는가? 시간을 네트워크 전송하거나 DB에 저장할 때는 어떠한 형태로 전송,저장하는 것이 좋을까? Date 객체 사용예시 GMT(🍗 존맛탱?) / UTC / Timezone은 무엇인가? 1. GMT (Greenwich Mean Time) : 경도 0도에 위치한 영국 그리니치 천문대를 기준으로 하는 태양 시간을 의미 GMT는 자연적인 변동으로 인해 정확한 시간 표준을 제공하지 못하고, 이를 보완하기 위해 UTC가 도입 과거에는 GMT가 국제적인 시간 표준으로 사용 2. UTC (Coordinated Universal Time): 원자 시계를 기반으로 하여 초당 정확한 시간을 제공하여 GMT보다 정확한 시간 표준을 위해 사용.. 2023. 7. 31.
Chrome: Illegal invocation. / IE: 호출 개체가 잘못되었습니다. Error에 대해서 알아보자. Javascript의 경우 this가 자유로운 편이다. 객체가 method를 가지고 있더라도 해당 method를 다른 객체가 호출할 수도 변수에 저장했다가 호출할 수도 있다. 예를 들어보면 Person class가 printName method를 가지고 있다. 이를 객체화 했지만 어느 시점에 person 객체가 가지고 있는 printName이라는 메서드만 필요하다고 가정한다면 다음과 같이 사용할 수 있다. class Person { constructor(name) { this.name = name; } printName() { console.log(this.name); } } const person = new Person("choi"); const printName = person.printName; p.. 2021. 2. 14.
JavaScript Method Chaining(메서드 체이닝) Method Chaining 객체가 여러 Method를 편하게 사용하기 위한 Pattern이다. 구현 방법은 Method의 리턴 값은 해당 Method를 가지고 있는 객체이다. 예시를 보면서 빠르게 이해해보자! Method Chaining을 사용할 수 없는 코드 // Person 객체 생성 let Person = function () { this.age = 0; this.height = 0; this.weight = 0; }; // Method 설정 Person.prototype.setAge = function (a) { this.age = a; }; Person.prototype.setHeight = function (h) { this.height = h; }; Person.prototype.setWe.. 2020. 8. 5.