forEach와 Promise.all

ForEach의 동작먼저 예시 프로그램을 하나 보겠습니다.function test() { const testFunction = num => new Promise((resolve) => setTimeout(() => resolve(`${num}`), num)); const list = [3000, 2000, 3000, 4000, 1000, 1000, 2000, 3000, 1000, 1000]; list.forEach( val => { const result = testFunction(val); result.then(cosole.log); })}test(); list 에는 순서대로 timeout의 값들이 들어가 있고, forEach를 통해 순회하면서 testFunction을 실행하여 해..

2025.02.05

Web Components : Custom Elements

기본 설명Custom Elements는 사용자 HTML Element를 만들게 해준다. 그리고 이는 DOM의 모든 기능을 다 사용할 수 있다.기본적으로 두 가지 타입으로 생성한다.표준 HTML 요소를 상속하지 않은 Elements. 요소는 상속하지 않지만 HTML Element는 상속 한다.표준 HTML 요소를 상속한 Element.이렇게 생성한 Element는 Lifecycle callback을 class 안에 정의하여 특정 시점에 동작 하도록 한다.  기본 사용법독립적인 사용자 정의 요소class MyComponent extends HTMLElement { constructor() { // 항상 super를 호출 해야 한다. super(); this.innerHTML = `T..

2025.01.24

javascript scroll event 제어

스크롤 기능을 막아야 하는 상황에서 대부분은 body 에 `overflow-y: hidden` 을 주는 방법이 제시되지만, 그렇지 않은 경우 자바스크립트로 이를 처리해야 한다. javascript로 `scroll`, `mousewheel`, `touchmove` 등의 이벤트를 걸어 `e.preventDefulat()`로 이벤트를 막아볼 수 있겠지만, `mousewheel` 이벤트와 같이 스크롤과 관련 된 이벤트는 기본적으로 `passive`로 처리되어 있어 추가 옵션을 설정 할 수 없다. 아래와 같은 오류 발생[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. ..

2024.07.03

프론트엔드 성능 최적화

브라우저 동작 원리브라우저 로딩 과정: 파싱 > 스타일 > 레이아웃(리플로우) > 페인트 > 합성 & 렌더 프론트엔드의 성능 최적화를 확인하기에 앞서 브라우저가 어떻게 화면을 사용자에게 보여주는지를 알아야 한다.https://velog.io/@kmlee95/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%8F%99%EC%9E%91%EA%B3%BC%EC%A0%95%EB%B6%80%ED%84%B0-React  프론트엔드 성능 최적화프론트 엔드 성능 최적화에는 `웹 페이지 로드 최적화`, `웹 페이지 렌더링 최적화`가 있다. 1. 웹 페이지 로드 최적화(1) 브라우저 상에서 최적화`DOMContentLoaded': html, css 파싱이 끝난 시점`Loaded`: h..

2024.06.28

history API로 SPA 구현

history API브라우저는 페이지 로딩 시 세션 히스토리를 갖는다.세션 히스토리는 페이지를 이동할 때마다 쌓이며, 이를 통해 뒤로가기 시 이전 페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능하다.사용자가 페이지를 새로고침 하거나 뒤로가기/앞으로가기 버튼을 클릭하지 않아도, 웹 애플리케이션 내에서 프로그래밍 방식으로 페이지를 이동할 수 있다.`history.back()`: 브라우저의 '뒤로' 버튼과 같은 역할. 세션 기록에서 한 단계 이전 페이지로 이동`history.forward()`: 브라우저의 '앞으로' 버튼과 같은 역할. 세션 기록에서 한 단계 다음 페이지로 이동`history.go(n)`: 현재 위치에서 상대적으로 n페이지 만큼 앞이나 뒤로 이동. n이 음수일 경우 n 페이지..

2024.06.24

Debounce & Throttle

Debounce & Throttle이벤트 오버클럭(overclock - 과도한 이벤트 발생)은 리소스 사용량을 증가시키기 때문에 성능문제를 야기하고 사용자 경험을 떨어트립니다.과도한 이벤트나 함수들의 빈도수를 줄여서 성능을 향상시키는 프로그래밍 기법 중, 자주 언급되는 두 가지를 알아봅니다. Debounce와 Throttle은 둘 다 함수의 연속적인 실행을 제한하는 목적을 가지고 설계되었습니다.그 중 `Debounce`는 특정 기간 동안 함수의 실행을 모두 취소하고, 마지막 실행만 수행합니다.반대로 `Throttle`은 함수 실행 후 특정 기간 동안 추가적인 함수의 재실행을 모두 취소합니다.이 둘은 매우 비슷해 보이지만 서로 다른 특성을 갖고 있는, 정해진 시간 동안 얼마나 많은 함수의 실행을 허가할 것..

2024.05.23