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

TypeScript에서 __brand 패턴 알아보기 ✈️ (타입 안정성 높이기)

보통 객체 데이터는 Id 값을 가진다.그리고 때때로 각 데이터는 특정 Id값이나 카테고리에서 좀 다른 데이터 패턴을 보일 때가 있다.또는, 하나의 객체에서 여러 Id값을 지닐때 같은 number 타입의 Id긴 하지만 굳이 따지면 다른 데이터값이기는 하는... 이런 경우도 종종 있다. 이런 경우 타입을 짜는게 참으로 곤란한데, 이때 __brand 라는 걸 사용해서 더 구체적으로 타입을 구별하는 기법을 사용한다고 한다 👻+ 객체가 아닌 타입에도 intersection을 통해서 객체로 __brand 타입을 집어넣어 같은 number지만 같지 않은 그런 타이핑이 가능하다 ! 요약하자면, 좀 더 엄격하게 객체들의 타입을 구분할때 고려할 수 있는 방법이다.(+ 런타임에서는 영향이 없고, 컴파일 타임에서만 타입을 ..

• format_list_bulleted TypeScript
• · 2025. 3. 30.
• textsms

TypeScript에서 객체 타입 비교 및 extends 활용하기 🏘️

TypeScript는 구조적 타이핑(structural typing) 을 기반으로 동작한다. 즉, 객체의 타입을 비교할 때 객체가 가진 속성들을 기준으로 판단하게 된다 🫰이를 활용하면 extends 키워드를 통해 타입 간의 관계(할당 가능 여부)를 쉽게 판별할 수 있다. 이번에는 타입스크립트에서 객체를 비교하는 다양한 예제를 테스트해보는 글을 남겨보기로 했다.(extends와 함께하는... ⭐)구조적 타이핑과 객체 타입 비교 먼저, 간단한 두 객체 타입을 예제로 들어보자. 아래와 같은 예제, 기본 데이터 구조를 나타내는 BasicRecord와 추가 정보를 담은 DetailedRecord로 구조적 타이핑에 대해서 살펴보자.type BasicRecord = { values: string[] };type D..

• format_list_bulleted TypeScript
• · 2025. 3. 21.
• textsms

vite 플러그인 만들기 (with 간단한 예제 & vite-plugin-pages 분석) 😊

vite는 rollup을 기반으로 만들어졌고, 빌드시 rollup이 사용된다.또한 vite의 플러그인은 rollup을 기반으로 vite의 특정 옵션이 추가된 형태로 개발되었기에,vite에서 제작한 플러그인은 기본적으로 개발 환경과 빌드 환경에서 모두 호환이 된다. (물론, 각 환경에서만 실행되는 특화된 기능을 제공하는 플러그인도 있다) 실제로 vite 플러그인을 만들어보는 것도 재밌는 경험이 될 것 같아서, 어떻게 만들 수 있는지 간단한 예제를 만들어 알아보기로 했다 😙 🌟 일단 가장 간단한 예제로 일단 플러그인을 만들어보자.// vite-plugin-hello.tsimport { Plugin } from 'vite';export default function vitePluginHello(): Plu..

• format_list_bulleted 웹 개발
• · 2025. 3. 18.
• textsms

Input 이벤트에서 한글 처리하기. event.isComposing이란? (한글 두 번 입력 방지 😸)

프론트엔드 개발을 하다 보면 input 이벤트나 keydown, keyup 이벤트를 다룰 때, 예상치 못한 버그를 마주할 때가 있다. 특히 IME(Input Method Editor)를 사용하는 환경(예: 한글 입력)에서 이벤트 핸들러가 엉뚱한 동작을 하거나, 입력값이 두 번 처리되는 등의 문제가 발생할 수 있다. 이때 유용하게 활용할 수 있는 속성이 바로 event.isComposing이다. event.isComposing 🎉event.isComposing은 사용자가 IME를 사용하여 입력을 조합(Composing)하는 중인지 여부를 나타내는 불리언 값이다.(한글의 경우에는 자음과 모음, 혹은 또 하나의 자음이 합쳐져 하나의 글자가 되므로, 조합형 글자이다)true 사용자가 아직 글자를 완성하지..

• format_list_bulleted JavaScript
• · 2025. 3. 12.
• textsms

stylelint 🎨 스타일에도 린트 적용하기

프론트엔드 개발에서 코드 스타일을 일관되게 유지하는 것은 매우 중요하다.협업을 할수록, 여러 사람이 동일한 스타일로 코드를 작성하는 것은 나중의 유지보수를 위해서도 아주 중요한 일이다.(동일한 스타일이면, 당연하게도 가독성이 높아진다 🙌) 동일한 스타일로 코드를 작성할 수 있게 ESLint가 JavaScript 코드 스타일을 검사하는 것처럼, CSS 코드 스타일을 검사해주는 도구가 바로 Stylelint다. 🍰 Stylelint는 CSS, SCSS, LESS 등의 스타일 코드에서 오류를 잡고, 일관된 코드 스타일을 유지하도록 도와주는 린터(Linter)이다. + scss와 함께 사용하기 위해 stylelint-config-standard-scss 플러그인을 설치할 수 있다. scss 설정 공식문서St..

• format_list_bulleted 웹 개발
• · 2025. 3. 1.
• textsms