분류 전체보기

디바운스(Debounce)와 쓰로틀(Throttle)은 Javascript에서 특정 함수의 실행 빈도를 조절하는 기법으로 최적화 기법으로 사용해 본 경험이 있다. 디바운스(Debounce)이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술이다.즉, 순차적 호출을 하나의 그룹으로 '그룹화'할 수 있다.연이어 호출되는 함수들 중 마지막 함수만 호출하도록 하는 것이다.검색창에 '개발하는데 다 이유가 있지'를 검색하려고 한다. enter 없이 input 이벤트로 API 검색 요청이 된다고 가정한다.그러면 'ㄱ', '개', '갭', '바', '발',  ... 이런식으로 불필요한 API 요청이 많이 발생하게 된다. 글자가 어느정도 입력이 됐을 때 요청이 가도록 일정 시간동안 입력이 없을 때..

문제 상황작업을 하던 중 `localStorage is not defined`에러가 출력됐다.말 그래도 localStorage가 정의되지 않았다는 것이다.localStorage(로컬 저장소)브라우저 환경에서만 사용할 수 있는 웹 스토리지 API 중 하나이다. 클라이언트 측에서 데이터를 영구적으로 저장하는데 사용된다.`window` 객체의 하위 객체로 존재하며, `window`객체가 존재하는 환경(브라우저)에서만 사용할 수 있다.Next.js와 같은 SSR 환경에서 서버측 렌더링 시에는 브라우저 환경이 아닌 서버 환경에서 코드가 실행되기 때문에 `localStorage`를 사용할 수 없었던 것이다.Next.js에서 에러가 발생하는 이유1. SSR의 특징 : Next.js는 기본적으로 SSR을 지원하여 초기..

자바스크립트의 Promise 객체는 비동기 작업의 최종 완료 또는 실패를 나타내는 배열이나 객체처럼 독자적인 객체이다. 비동기 작업이 끝날 때까지 결과를 기다리는 것이 아니라, 결과를 제공하겠다는 '약속'을 반환한다는 의미에서 Promise라고 이름이 지어졌다. 사용 방법Promise 객체 생성Promise 객체를 생성하려면 new 키워드와 Promise 생성자 함수를 사용하면 된다. Promise 생성자 함수 안에 두 개의 매개변수를 가진 콜백 함수를 넣게 되는데, 첫번째 인자는 작업이 성공했을 때 성공(resolve)을 알리는 객체, 두번째 인자는 작업이 실패(reject)했을 때 실패를 알려주는 오류 객체이다.// Promise 생성자 안에 들어가는 콜백 함수를 executor라고 함const my..

reflow와 repaint는 웹 페이지가 렌더링 되는 과정에서 발생하는 작업들이다. reflowreflow는 브라우저가 페이지의 레이아웃을 다시 계산하는 과정을 말한다.DOM 구조가 변경되거나 CSS 스타일이 변경되면, 브라우저는 각 요소가 화면에 어떻게 배치될지 다시 계산을 해야한다.이 과정에서 모든 자식 요소와 관련된 부모 요소까지 영향을 주기 때문에 비용이 많이 소요되는 작업이다.너비(width)나 높이(height) 속성을 수정하게 되면, 브라우저는 해당 요소뿐만이 아니라 연관된 모든 요소의 배치를 다시 계산해야 한다. repaintrepaint는 요소의 모양이나 스타일이 변경될 때 발생한다. 요소의 레이아웃은 그대로이고, 색상이나 배경 등의 스타일만 변경되는 경우를 말한다.background-..

Intersection Observer란?기존 자바스크립트의 'scroll' 이벤트는 스크롤시 짧은 시간 내에 수 백, 수천의 이벤트를 동기적으로 실행될 수 있어 성능의 악영향을 끼쳤다.페이지 내의 다양한 요소(Lazy Loading, 무한 스크롤 등)의 이유로 'scroll' 이벤트를 리스닝하기 때문에 무수한 콜백함수가 실행될 수 있었다.위의 문제는 메인 쓰레드에 큰 부하를 줄 수 있다.또한 Intersection Observer는 reflow를 발생시키지 않는다.reflow, repaint에 대해서는 다음 번에 자세히 정리하도록 하겠다.Intersection Observer는 루트 요소와 타겟 요소의 교차점을 관찰(Observe)해 타켓과 루트 요소가 교차(Intersection)하는지 아닌지 구별하..

최근에 포트폴리오를 작성하면서 shadcn-ui를 처음 접해보게 됐는데 사용하기 무척 쉽고 좋았었다.shadcn/uishadcn/ui는 Vercel의 shadcn이 만든 UI 도구로, Radix UI(Primitives)와 Tailwind CSS라는 상당히 최신 기술을 기반으로 하는 Component Collection이다.전통적인 컴포넌트 라이브러리들을 번들된 소스 코드를 패키지 매니저를 통해 프로젝트 의존성(dependencies)에 추가해서 사용한다.shadcn/ui는 번들되지 않는 컴포넌트 소스 코드를 프로젝트 의존성에 추가하지 않고, 복사해서 붙여넣은 컴포넌트 코드를 사용할 수 있다. 설치 방식npx shadcn-ui@latest init- Would you like to use TypeScri..

function add (num1, num2) { console.log(num1 + num2);}add(); // NaNadd(1); // NaNadd(1,2); // 3add(3,4,5); // 7add('hello','world'); // 'helloworld'function showItems(arr) { arr.forEach((item) => { console.log(item); });}showItems([arr]);showItems(1,2,3); // TypeError: arr.forEach is not a function위와 같이 자바스크립트는 우리가 원하는 결과가 아님에도 어떠한 경고도 주지 않았고 실수가 분명한 코드임에도 에러를 일으키지 않는다.💡 자바스크립트는 동적언어이다.→..