JS UI 라이브러리를 instance로 만들어 React 이식하기 (with useImperativeHandle & Tui Grid) 💘

가끔 좋은 JS 라이브러리를 발견해서 써보려고 했는데, 해당 라이브러리가 직접 React를 지원하지 않는 경우들이 있다.이런 경우에 UI 컴포넌트 instance를 생성해서 React에 직접 연결해주는 작업이 필요한데, 이를 어떻게 잘 할 수 있을지 고민해보았다 😃(이런 경우는 인스턴스를 직접 컨트롤해야 하는 UI 컴포넌트가 많아서 더욱 고민이 필요하다) 보통 React에서는 useRef를 통해서 인스턴스를 관리하는데, 여기에 추가로 useImperativeHandle을 활용해 Tui Grid를 React에서 자연스럽게 사용하는 예제를 한번 만들어 보았다.(tui는 react 까지 레핑된 라이브러리를 하긴 하는데.., 유지보수가 멈췄다 🤣)1️⃣ 기본적인 그리드 설정Tui Grid는 JavaScrip..

• format_list_bulleted JavaScript
• · 2025. 4. 1.
• textsms

JavaScript로 shell 스크립트 작성하기 😎 Google’s zx 라이브러리

JavaScript는 브라우저뿐만 아니라 Node.js 덕분에 서버에서도 자주 사용된다.그런데 이 언어를 활용해 터미널 명령어를 실행하는 shell 스크립트를 작성할 수 있다면 얼마나 좋을까? 이런 요구사항을 Google의 zx 라이브러리가 만족한다 👍이번엔 zx 라이브러리를 실제로 사용해본 경험을 공유하기로 했다. zx란 ❓zx는 Google이 개발한 Node.js 기반의 라이브러리로, JavaScript나 TypeScript를 사용하여 터미널 명령어를 실행하는 스크립트를 간단하고 직관적으로 작성할 수 있게 해준다.✨ 따라서, shell 스크립트가 생소한 JS 개발자가 손쉽게 스크립트를 작성할 수 있게 해준다기존의 스크립트와 비교했을 때 더 강력한 기능과 유연성을 제공한다.zx의 장점 😎간결한 문법..

• format_list_bulleted JavaScript
• · 2025. 1. 22.
• textsms

[Javascript] 이벤트의 실행순서 파악하기 (onMouseDown은 onClick보다 먼저 실행된다 👻)

프론트엔드 개발을 할 때 많이 사용되는 이벤트들이 있다. 그중에 onClick 이벤트가 있는데, onClick은 사용자가 마우스로 무언가를 클릭했을 때 이벤트가 발생하도록 하는 것이다. 다만, onClick 이외에도 또 다른 마우스 클릭 관련 이벤트들이 있고, 때로는 더 섬세한 동작을 위해서 onMouseDown, onMouseUp과 같은 이벤트들을 사용할 수 있다. 여기서, 더 생각해볼만한 점은 이 셋이 모두 한번에 사용되었을 때이다. 세 개의 이벤트는 어떤 순서로 동작할까?  사용자가 UI 요소와 상호작용할 때 마우스 이벤트가 실행되는 일반적인 순서는 다음과 같다.onMouseDown사용자가 마우스 버튼을 누를 때 발생한다.onMouseUp사용자가 마우스 버튼을 놓을 때 발생한다.onClick마우스 ..

• format_list_bulleted 웹 개발
• · 2024. 12. 21.
• textsms

TextEncoder를 활용하여 텍스트 인코딩하기 (문자열 byte 계산하기 🎶)

새삼스럽지만 프로그래밍에서 데이터는 byte단위의 용량을 가진다.당연히 작성하는 코드의 String 데이터도 byte 단위의 용량을 가지는데, 그 용량은 다음과 같다. (UTF-8 기준)영어, 공백, 숫자, 특수문자 : 1byte한글 : 3bytes대부분의 이모지 ❤️ : 4 bytes가끔은 데이터를 바이트로 바꾸어 사용하거나, 작성된 텍스트가 몇 바이트인지 체크해야할 경우가 있을 수 있다.파일 입출력네트워크 전송바이트 크기 계산이럴 경우에는 Javascript 내장 객체 TextEncoder를 활용하여 손쉽게 바이트로 데이터를 다룰 수 있다 👍 const encoder = new TextEncoder();  간단한 예제를 통해서 문자열을 바이트로 변환해보자.const encoder = new Text..

• format_list_bulleted JavaScript
• · 2024. 11. 7.
• textsms

resize Event와 ResizeObserver 비교해보기 🙌

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

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

node.js CLI 사용성 높이기 - 질문을 통해서 사용자가 옵션 값 선택하게 하기 - 프롬프트 CLI (with inquirer.js)

이전에 node.js 환경에서 CLI 라이브러리를 만드는 작업을 진행했었다. https://citron031.tistory.com/entry/commanderjs%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%9C-js-CLI-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EA%B5%AC%ED%98%84-with-%EC%98%88%EC%A0%9C commander.js를 사용한 js CLI 라이브러리 구현 (with 예제)CLI 라이브러리를 구현하기 위해서는 여러 키워드들에 대해서 알아야 한다. - bin 등록 (package.json의 bin)- 커맨드를 통해 인자를 받기 위한 process.argv- shell 스크립트 작성등등... 위와 같이 CL..

• format_list_bulleted Node
• · 2024. 10. 5.
• textsms