내직업은 IT종사자/javascript (19) 썸네일형 리스트형 debounce와 throttle의 개념 및 차이 개요debounce와 throttle은 둘 다 이벤트가 너무 자주 발생하는 것을 제어하기 위한 기법입니다.주로 브라우저 성능 최적화와 불필요한 함수 호출을 방지하기 위해 사용됩니다.하지만 이들의 동작 방식과 사용 목적은 서로 다릅니다. debounce의 개념debounce를 사용하게 되면 이벤트가 여러 번 발생하더라도 마지막 이벤트가 발생한 후 일정 시간이 지나야 콜백 함수가 실행됩니다. 주요특징이벤트 발생 후 대기 시간 동안 새로운 이벤트가 발생하면 대기 시간이 리셋됩니다.연속된 이벤트를 취소하고, 마지막 이벤트만 처리하려고 할 때 사용됩니다. debouce의 사용사례사용자가 입력할 때 마지막 입력만 처리: 검색창에서 사용자가 입력을 멈춘 후에만 서버 요청.리소스 낭비 방지: 화면 크기를 변경.. useRoute()로 라우팅 정보 가져오기 useRoute란? useRoute는 Vue Router의 훅(hook) 중 하나로, 컴포넌트 내부에서 현재의 라우팅 정보를 가져올 수 있게 합니다. useRoute()를 호출하면 현재 활성화된 경로(route)에 대한 정보를 가진 객체를 반환합니다. 이 객체는 Vue Router에서 제공하는 다양한 속성과 메서드를 통해 라우팅 관련 데이터를 확인할 수 있습니다. useRoute()로 얻을 수 있는 주요 속성 1.params: 동적 라우트 매개변수를 담고 있는 객체입니다. (/users/:id에서 id 같은 값) 2.query: URL의 쿼리 문자열을 담고 있는 객체입니다. (/users?id=123의 id 값) 3.path: 현재 라우트의 전체 경로입니다. 4.name: 이름을 가진 라우트의 경우 해당.. lodash 라이브러리 chunk 란? Lodash 라이브러리 chunk 란? Lodash란?javascript에서 데이터를 쉽게 다루기 위한 유틸리티 라이브러리입니다.Lodash를 사용하면 다양한 함수들을 제공하여 배열, 객체, 문자열 등의 데이터 처리를 효율적으로 수행할 수 있씁니다. 특히 반복작업, 깊은객체복사, 배열 변형, 객체비교 등 복잡하게 구현해야하는 코드를 해당 라이브러리를 사용하여 간편하게 처리할 수 있습니다. Lodash chunk란?chunk 함수는 배열을 특정 크기만큼 나누어 여러 개의 하위 배열로 분할하는 유틸리티 함수입니다. 즉, 배열을 일정한 크기의 덩어리로 나누고 싶을 때 유용하게 사용할 수 있습니다. Lodash chunk 사용법 및 예시_.chunk(array, size); array: 분할할 원본 .. ECMA2022.js #을 사용해서 private variable, method 선언 방법 및 구조 정의 및 예시#은 ECMAScript 2022(ES2022)버전에서 클래스안에 프라이빗 필드와 메서드를 정의할 수 있는 기능입니다.해당 기능을 사용하면 클래스 내부에서만 접근 가능한 멤버를 쉽게 만들 수 있어서, 코드의 캡슐화와 보안을 강화하는 데 유용합니다. 예제 (Vanilla JS)class User { #name; // 프라이빗 필드 constructor(name) { this.#name = name; } #greet() { // 프라이빗 메서드 return `Hello, ${this.#name}!`; } sayHello() { return this.#greet(); }}const user = new User("Alice");console.log(user.sayH.. ealry return 은 좋은 것일까? Early Return 패턴코드를 작성할 때 기능에 따라 여러 조건문을 사용하게 되는데 그때마다 어떻게 하면 가독성 높게 코드를 짤 수 있을까 고민하게 됩니다 (매번... 너무어려워 ㅠㅠ)그 중에 Early Return패턴을 종종 사용하게되는데 문득 early return 을 사용하는 것이 좋을까? 안좋을까? 라는 고민을 하게 되었습니다. 1. Early Return 이란? Early Return은 함수에서 조건문을 만족할 때 일찍 반환하는 것을 의미합니다. 2. Early Return 의 장단점 2-1. 장점- early return은 들여쓰기 즉 중첩 조건문을 줄여 코드를 간결하고 읽기 쉽게 만들어 줍니다.- 코드의 비선형적인 흐름을 선형으로 바꾸어 주어 가독성을 높혀줍니다- 조건이 .. 블로킹(Blocking)과 논블로킹(Non-blocking) 그리고 동기(synchronous) 과 비동기(asynchronous)의 정의 및 차이점 (헷갈리지않기!) Blocking 과 Non-Blocking이란? 공부를 하다가 블로킹, 논블로킹, 동기, 비동기가 예전부터 너무너무 헷갈렸어요 머리속으로는 얼추 알겠는데 막상 구현 및 적용해볼때 헷갈리는..?그래서 찾아보다가 제가 이해하기 쉽게 잘 적어주신 두 능력자님 블로그을 보게 되었습니다!해당 내용을 기억하기 쉽게 짬뽕해서 정리해보고자 합니다 :) [요약]동기/비동기는 전체적인 작업에 대한 순차적인 흐름 순서에 관련이 있다면,블로킹/논블로킹은 전체적인 작업의 흐름 자체를 막을 것인가, 아닌가의 차이입니다. 1. 동기와 비동기의 정의동기와 비동기의 핵심 문구는 "결과값을 기다린 다는 것" 입니다 [동기/비동기 ]* synchronous 는 작업 시간을 함께 맞춰서 실행한다는 뜻동기(synchronous): 작.. 1차원 객체를 spread operator(스프레드 연산자)로 복사하면 얕은 복사 일까 깊은 복사 일까? ✍깊은복사와 얕은 복사 관련 게시글 https://joyhong-91.tistory.com/41 [javascript] 변수 참조타입 메모리 접근 방식, 참조타입 복사가 필요한 이유 (shallow copy, deep copy) 목차 원시값, 참조값이란? 그리고 복사가 필요한 이유 얕은 복사의 정의와 방법 깊은 복사의 정의와 방법 들어가기전에! 자바스크립트 엔진은 가상머신으로 돌아가는데 버츄얼 머신 메모리 모 joyhong-91.tistory.com ✔1차원 배열, 1차원 객체는 복사를 하면 깊은 복사(deep copy)가 됩니다 복사한 객체를 수정하면 기존 객체에 영향 없습니다. const arr1Dth = [1,2,3,4]; const obj1Dth = {key: 'key1', value: 'valu.. 쿠키, 세션, 웹 스토리지 차이 (cookie, session, web storage) 1. 쿠키, 웹스토리지 (로컬스토리지, 세션스토리지) 생성 배경 HTTP는 요청과 응답을 주고 받아 한 사이클이 종료되면 연결이 끊어지는 무상태성을 가지고 있기 때문에 클라이언트의 상태를 보존하지 않습니다. 클라이언트의 상태를 서버가 아닌 클라이언트에 저장해두고 필요시마다 데이터를 꺼내서 사용하는 방식으로 HTTP단점을 보완하고자 쿠키와 웹 스토리지를 사용합니다. 2. 쿠키(cookie)란? 만료기간이 있는 클라이언트(브라우저) 단에 저장하는 키와 값이 들어가있는 작은 데이터 파일 입니다. 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효시간이 정해지면 브라우저가 종료되도 인증이 유지됩니다. 쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조합니다. 클라이언트에 300개의 쿠키 저장 가능, 하나.. 이전 1 2 3 다음
