오늘은 우테코를 진행하면서 배운 디바운스와 스로틀 개념에 대해서 정리해 보겠다. 이 정리는 우테코 수업과 모던 자바스크립트 딥 다이브 책을 읽고 정리해보았다. 짧은 시간에 과도한 이벤트가 연속으로 발생한다면? 이러한 이벤트에 바인딩한 이벤트 핸들러가 과도하게 호출되어서 성능에 문제를 일으킬 수 있다. 또 데이터 호출 버튼을 매우 빠르게 연속해서 눌러 생기는 성능 저하를 막고 싶다면? 사용자가 창 크기 조정을 멈출 때까지 기다려다가 resize event 를 해주고 싶다면? 입력창에 자동완성을 보여주고 싶은데 키보드 입력키 하나하나마다 해주고 싶지 않다면? 디바운스와 스로틀을 사용하여 불필요한 잦은 요청 제어와 일정 주기마다 원하는 동작을 제어하게 할 수 있다. debounce 디바운스는 짧은 시간에 연속..

*우테코 딥 다이브 스터디 준비 중 작성한 정리본으로 필자의 잘못 이해한 부분이나 부족한 부분이 있을 수 있습니다. 동기 처리와 비동기 처리 일반적인 함수 호출 ⇒ 함수 호출 → 함수 코드 평가 → 함수 실행 컨텍스트 생성 → 실행 컨텍스트 스택 (콜 스택) 에 푸시 → 함수 코드 실행 → 종료 시 콜 스택에서 팝 돼서 제거됨 함수가 실행되려면 함수 코드 평가에서 생성된 함수 실행 컨텍스트가 실행 컨텐스트 스택에 푸시 → 함수의 실행 순서는 실행 컨텍스트 스택으로 관리함 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. (싱글 스레드 방식) : 동시에 2개 이상의 함수를 실행할 수 없다는 것을 의미함. == 한 번에 하나의 태스크만 실행할 수 있음 그래서 작업이 오래 걸리는 태스크를 실행하게 ..

*우테코 딥 다이브 스터디 준비 중 작성한 정리본으로 필자의 잘못 이해한 부분이나 부족한 부분이 있을 수 있습니다. Object 생성자 함수 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. const person = new Object(); 생성자 함수 (constructor)란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다. 생성자 함수에 의해 생성된 객체를 인스턴스라고 한다. const strObj = new String('Lee'); // String 생성자 함수에 의해 String 객체 생성 생성자 함수에 의한 객체 생성 방식의 장점 객체 리터럴에 의한 객체 생성 방식의 문제점 동일한 프로퍼티를 갖는 객체를 여러개 생성하려면 매번 같..

*우테코 딥 다이브 스터디 준비 중 작성한 정리본으로 필자의 잘못 이해한 부분이나 틀린 부분이 있을 수 있습니다. 프로퍼티란? 자바스크립트에서 "프로퍼티(Property)"는 객체(object)의 특징이나 상태를 나타내는 값(value)을 가리키는 이름-값 쌍(name-value pair)을 의미합니다. 이러한 프로퍼티들은 객체의 특정한 기능을 정의하거나 객체의 상태를 나타내는 데 사용됩니다. 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트(속성)를 기본 값으로 자동 정의합니다. → 프로퍼티의 상태 프로퍼티의 값 (value) 값의 갱신 가능 여부 (writable) → false 시 값 변경 X 열거 가능 여부 (en..

package.json 속 dependencies와 devDependencies의 차이가 뭘까?  리액트를 하다보면 npm i 를 통해 많은 라이브러리를 설치하면서 dependencies 가 늘어나는 걸 본 적이 있을 것이다.나도 처음엔 두 차이에 대해서 잘 알지도 못했고 사실 궁금하지도 않았던거 같다.그저 패키지를 설치하게 되면 어떤 패키지가 설치되었는지 확인하는 용도로만 사용했던거 같다.  그러다가 우테코 3번째 미션을 진행하면서 이러한 코멘트가 달렸다. 헉! 그리고 그제서야 부랴부랴 이 차이에 대해서 찾아보았던거 같다.        dependencies    는 프로덕션 환경에서 필요한 패키지를 말하여 어플리케이션이 실행될 때 필요한 패키지들을 정의하는 것이었다. 리액트 같은 프레임워크를 사용하여..

이번 우테코 웹 기반 미션 로또를 진행하면서 HTML 내의 텍스트를 다루어야 하는 일이 있었습니다. 미션을 진행하면서 어떤 텍스트 요소를 사용하는 것이 좋은 코드일까 고민하면서 공부한 개념들을 살짝 정리해 보았습니다. 웹 개발에서 JavaScript를 활용하여 HTML 요소의 텍스트를 다루는 것은 아주 흔한 일입니다. 이를 다루기 위해서는 innerHTML, innerText, textContent 등의 다양한 속성들을 사용하여 다룰 수 있고, 각각 다른 특성을 가지고 있어 이를 이해하고 사용해야 합니다. 1. innerHTML innerHTML은 HTML 요소의 속성으로, 해당 요소 내에 포함된 HTML 또는 XML 마크업을 가져오거나 새 내용으로 설정할 수 있는 기능을 제공합니다. 이를 통해 쉽게 내..