resize Event와 ResizeObserver 비교해보기 🙌

브라우저의 창 크기가 변화했을 때, 어떤 액션을 발생시키고 싶다면, 가장 먼저 떠올릴 코드는 다음과 같을 것이다.window.addEventListener('resize', () => { console.log('Window resized!');}); 바로 resize Event이다.위의 코드는 브라우저 창 사이즈 크기를 탐지한다.다만, 특정 DOM의 사이즈 변화는 탐지하지 않기에 개별 Element 사이즈 변화에 대응하지는 않는다. 때문에, 새로운 방법이 등장했는데 그것이 바로 ResizeObserver이다.ResizeObserver는 특정 Element의 크기 변화를 감지할 수 있다.따라서, 브라우저 창 크기 변화뿐만 아니라 특정 요소의 자체 크기가 변화할 때에도 어떠한 액션이 실행되도록 설정할 수 ..

• format_list_bulleted 웹 개발
• · 2024. 10. 18.
• textsms

requestIdleCallback 알아보기 (브라우저가 idle할 때, 콜백함수를 대기열에 👍)

✨ 주의) requestIdleCallback는 아직 실험적인 기능인 것 같다.... 브라우저가 idle할 때 (메인 스레드가 사용자의 입력, 애니메이션 실행 등으로 한가 때) 콜백 함수를 실행할 수 있도록 해주는 함수가 requestIdleCallback 라고 한다. 브라우저가 여유가 있을 때, 콜백함수를 실행시켜서 여유 시간에 덜 중요한 작업을 효과적으로 처리할 수 있는 장점이 있다.메인 스레드 과부하를 줄이며, 여러 작업을 동시에 처리하여 사용자의 경험을 향상시킬 수 있다.var handle = window.requestIdleCallback(callback[, options]) mdn에서 소개하는 requestIdleCallback 함수는 이렇게 구성되는데, 아주아주 간단하게 실제로 실행할 수 있..

• format_list_bulleted 웹 개발
• · 2024. 9. 5.
• textsms

commonJS, ESM 둘 다 지원하는 package.json 설정법 (feat. rollup)

알다시피, JS 런타임은 크게 브라우저와 Node.js가 있다.그리고 각각 ESM, CJS의 모듈 방식이 있다. 요즘 개발 환경은 웹 개발을 할 때에도 node가 필요한 경우가 많기에, 라이브러리를 구성한다면 두 환경 모두에서 작동할 수 있도록 작성하는 것이 좋다. 이번에 개인적으로 라이브러리를 만져보면서 rollup을 사용하여 mjs, cjs를 생성하고 어떻게 설정했는지, 기록을 남기고자 했다. ✨ rollup.config.js 설정하기import { defineConfig } from 'rollup';import typescript from '@rollup/plugin-typescript';export default defineConfig({ input: { index: 'index.ts', ..

• format_list_bulleted 웹 개발
• · 2024. 8. 18.
• textsms

브라우저 탭 사이의 통신 (chrome postMessage, BroadcastChannel API 사용해보기)

SPA가 대중적으로 많이 퍼지면서 여러 브라우저를 오가며 복잡한 작업을 하는 경우는 적어진 것 같다.하지만, 여전히 다양한 이유로 여러 탭을 사용하여 오가는 웹 앱이 필요하고, 그 때 탭간의 데이터 통신을 위해서 사용할 수 있는 API들이 있다. 그 API들 중에서 이번엔 postMessage와 BroadcastChannel을 사용하는 방법에 대해서 간단하게 알아보았다. 일단 window. postMessage를 사용해보자. postMessage를 통해서 새로 띄워진 창에 메세지를 전달할 수 있다. 일단, window.open 메서드로 새로운 창을 띄운다.const newWindow = window.open("https://www.naver.com");그럼 새로운 네이버 탭이 열린다.이 탭의 콘솔창을 열..

• format_list_bulleted 웹 개발
• · 2024. 7. 14.
• textsms

프론트엔드 개발 생태계에서 Rust 개발 툴들

AWS Submit 2024에서 개발을 할 때 중요하게 고려해야할 요소에 대해서 들었던 기억이 있다.그건 바로 "비용"인데, 비용을 중요한 요소로 고려한다면 프로그래밍 언어부터 효율적으로, 리소스를 적게 사용하는 그런 고성능의 언어를 선택하는 것도 하나의 방법이라는 이야기를 들었다. 그 이야기를 듣고 떠올렸던 게 바로 FE 개발 환경에 사용되는 bundler, compiler, formatter 같은 개발 툴들이 Rust로 작성되는 경우가 많아지고 있다는 점이었다.  AWS를 사용할 때 Rust를 사용해서 비용이 낮아질까?👻 적은 메모리를 사용 -> 더 작은 인스턴스를 사용할 수 있다. (비용 절감) Rust는 다음과 같은 장점을 지니는 언어로, 개발자들 사이에서 인지도가 올라가고 있는 언어이다.Rus..

• format_list_bulleted 웹 개발
• · 2024. 7. 2.
• textsms

Biome.js 사용 후기 (prettier + eslint)

Biome.js는 Rust로 작성된 prettier와 eslint를 합친 기능을 가지는 FE lint, formatter 라이브러리이다.https://biomejs.dev/ BiomeFormat, lint, and more in a fraction of a second.biomejs.devBiome이 가지는 가장 큰 장점은 빠르다는 점이다.빠른 이유는 Rust로 작성되었기 때문인데, 최근 FE 개발 생태계에서 등장하고 있는 Rust로 작성된 라이브러리중에 하나라고 할 수 있다.(이외에도  Rust로 작성된 라이브러리는 turbopack, swc, farm등이 있다) 아쉬운 점으로는 아직 eslint가 쌓아온 생태계를 따라오지 못하기 때문에 커스텀에 제약이 있을 수 있는 점이다.👻 예를 들면, biome..

• format_list_bulleted 웹 개발
• · 2024. 6. 24.
• textsms