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

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

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

자바스크립트 Proxy 객체를 사용해서 State 만들어 보자

React를 사용하면 useState를 통해서 데이터를 바꿔서 DOM을 다시 그리는 기능을 사용할 수 있다. 생각해보면, 순수 자바스크립트로 화면을 바꾸고자 한다면 DOM에서 element를 찾은 뒤에 데이터를 직접 수정해줘야 하는 부분이다. 그래서 어떻게 React는 이런 반응성, Reactivity를 구현했을까 고민해보고 자바스립트의 Proxy 객체를 사용해서 State를 비슷하게 구현해보자 하였다. 🙌 직접 구현한 예제 최대한 React와 비슷하게 구현해보려고 노력했다. 다음은 구현한 코드 내용인데, 일단 HTML이다.  root에 element가 삽입되는 것으로 생각했고, 하나의 js를 통해서 이를 통제할 수 있도록 구현해봤다. Proxy를 사용해서 구현했는데, Proxy..

• format_list_bulleted JavaScript
• · 2024. 8. 25.
• 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

타입가드 사용하여 안전하게 타입스크립트 타이핑하기

타입스크립트에서 타입 가드는 런타임에 변수의 타입을 확인하고, 이를 통해 타입스크립트가 해당 변수의 타입을 특정 블록 안에서 더 정확하게 추론할 수 있도록 돕는 방법이다. 타입 가드를 잘 활용하면 코드의 타입 안전성을 높이고, 가독성과 유지보수성을 향상시킬 수 있다. 때문에 타입가드를 잘 사용하는 것은 타입스크립트에서 중요하다.타입가드에 어떤 방법들이 있는지 확인하고, 어떤 방법을 사용하는 것이 좋을지 알아보았다. 1. 타입 단언(`as` 키워드) - 추천하지 않음타입 단언은 변수의 타입을 명시적으로 지정하는 방법이다.let str: string | undefined;str = "Hi" as string; 그러나 런타임에 아무런 검사를 하지 않기 때문에 잘못된 단언으로 인해 런타임 에러를 유발할 수 있다..

• format_list_bulleted TypeScript
• · 2024. 8. 4.
• textsms

React Context API 잘 사용하기 (re-render 방지법 - selector & atom)

React의 Context API를 사용하면, Provider 하위의 어떤 컴포넌트에서나 함께 공유하는 데이터를 사용할 수 있는 장점이 있다.👻 그러나 Context API를 사용할 때 발생할 수 있는 문제 중 하나는 빈번한 리렌더링이다.이 re-render 문제 때문에 Context API는 종종 사용되는 것이 꺼려지는데, 어떻게 하면 이를 최적화하여 잘 사용할 수 있을지 알아보았다. 내가 알아본 방법은 두 가지로, selector와 atom을 사용하는 두 가지 방법이다.타입스크립트로 작성한 예제와 함께 어떻게 하면 re-render 문제를 해결하여 Context API를 사용할 수 있을지 확인해보았다. Context API의 리렌더링 문제Context API를 사용하면 Provider로 데이터를 전..

• format_list_bulleted React
• · 2024. 7. 24.
• 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