리액트 개발자라면 usehooks-ts 라이브러리를 주목해야할 이유

커스텀 훅이란리액트에서 커스텀 훅(Custom Hook)은 이름이 ‘use’로 시작하며 내부에서 useState, useEffect와 같은 훅들이나 다른 커스텀 훅들을 호출하는 함수를 말합니다. 이는 반복되는 상태 관련 로직이나 사이드 이펙트 처리 로직을 컴포넌트로부터 분리하여 재사용 가능하게 합니다. 따라서, 잘 만들어진 커스텀 훅은 압도적인 재사용성과 가독성으로 리액트 개발자를 춤추게할 수 있습니다.참고자료 1 : React : 커스텀 Hook으로 로직 재사용하기usehooks-ts란?usehooks-ts는 타입스크립트를 완벽하게 지원하는 재사용 가능한 리액트 훅 라이브러리입니다. 이 라이브러리는 개발 과정에서 자주 사용되지만 직접 구현하기에는 번거로울 수 있는 다양한 로직들(예: 디바운싱, 스토리지..

• format_list_bulleted 위키
• · 2025. 5. 19.

Supabase 타입스크립트 완벽 가이드 : 타입 생성부터 활용까지

배경Firebase 대체제로 주목받고 있는 Supabase는 PostgSQL에 기반한 오픈소스 프로젝트입니다. 개발자는 Supabase를 사용하여 보다 빠르게 인증, DB 등을 구현할 수 있습니다. Supabase는 데이터베이스 스키마에서 타입스크립트 타입을 추출할 수 있는 강력한 기능을 제공하며, 이는 개발자가 타입을 일일히 작성해야하는 수고로움을 줄여 매우 유용합니다. 이 글에서는 Supabase로 프로젝트를 진행하며 학습한 Supabase의 타입 생성 방법과 실제 활용법을 정리하고 공유합니다.타입 생성하는 2가지 방법대쉬보드에서 다운로드받기Supabase 프로젝트 대시보드에 접속한 후, 좌측 메뉴에서 API Docs > TABLES AND VIEW > Introduction 선택Generate an..

• format_list_bulleted 위키
• · 2025. 5. 14.

react-grid-layout 사용법(with. TypeScript)

react-grid-layout이란?react-grid-layout은 React 애플리케이션에서 드래그 앤 드롭 및 크기 조절이 가능한 그리드 레이아웃을 손쉽게 구현할 수 있도록 도와주는 라이브러리입니다. 사용자가 직접 아이템의 위치나 크기를 변경할 수 있는 동적인 대시보드나 인터페이스를 만들 때 매우 유용합니다.공식 문서와 예제가 잘 마련되어 있음에도 불구하고, 클래스형 컴포넌트 기반의 예시가 주를 이루고 타입스크립트 환경에서의 활용 예시가 부족하여 최신 React 프로젝트에 적용하는 데 어려움을 느끼는 경우가 있습니다. 이에 본 글에서는 react-grid-layout을 타입스크립트와 함께 사용하며 얻은 실용적인 노하우를 공유하고자 합니다.공식문서에는 구체적인 props 설명, 메모이제이션, 예제 ..

• format_list_bulleted 위키
• · 2025. 5. 8.

React.memo()로 무거운 컴포넌트의 불필요한 리렌더링 막기

배경AI 어시스턴스 앱을 개발하면서 채팅 UI를 구현하게 되었습니다. 사용자와 어시스턴트 간의 대화 메시지를 보여주는 Message 컴포넌트를 만들었습니다. 메시지 목록은 부모 컴포넌트인 Chat 컴포넌트가 배열 상태(messages)로 관리하며, 이 배열을 순회하며 각 Message 컴포넌트를 렌더링합니다.//Chat.jsximport { useState } from "React";import { Mesasge } from "./Message.jsx"export fucntion Chat(){ const [messages, setMessages] = useState([]); ... return ( ... {messages.map((message) =..

• format_list_bulleted 회고
• · 2025. 5. 4.

사용자 에이전트 스타일시트와 크로스 브라우징 이슈

배경: 크로스 브라우징 이슈웹 개발을하다 보면 Chrome, Firefox, Safari, Edge 등 브라우저마다 화면이 다르게 보이는 경험을 하게됩니다.이를 크로스 브라우징 이슈라고 하며, 이는 웹 개발자가 일관된 사용자 경험을 제공하는 데 큰 장애물이 됩니다.원인 : 사용자 에이전트 스타일시트 (User Agent Stylesheet)이 문제의 원인은 각 웹 브라우저가 가진 고유한 기본 스타일, 즉 사용자 에이전트 스타일시트 때문입니다. 예를 들어, 태그는 브라우저마다 다른 기본 상하 여백(margin)을 가질 수 있고, 태그의 글자 크기나 굵기, 버튼()의 기본 모양 등도 제 각각입니다.브라우저의 개발자 도구(F12 또는 마우스 우클릭 > 검사)를 열어 특정 요소에 적용된 스타일의 출처를 확인..

• format_list_bulleted 위키
• · 2025. 5. 1.

노션 템플릿으로 1억 버는 8가지 비법

배경평소처럼 유튜브를 보던 중, 흥미로운 영상을 발견했다. 효과적으로 자료를 정리할 수 있는 PARA 노트 정리법과 관련한 내용이였다. 이 노트 정리법의 원리를 적용한 노션 템플릿도 무료로 제공해주었다.나는 기존에 내가 만든 템플릿으로 태스크와 일정을 관리하고 있었는데, 기존의 내 것보다 정말 유용하다고 느꼈고, 곧바로 적용해 사용해보았다. 정말 강력하다고 느꼈다. 이어서, 다른 영상도 찾아보았고, 태스크 관리 기능이 강화된 노션 템플릿을 10만원 정도에 팔고 있음을 발견할 수 있었다. 노션 템플릿이 무려 10만원이나 하다니… 그런데 만약 이것이 내 인생의 생산성을 획기적으로 높여준다면, 이는 합리적인 투자아닐까? 나는 구매하고 싶은 충동이 들었다.결제를 앞두고 혹시나 구글링을 해보았다. 더 저렴한 것이..

• format_list_bulleted 분석
• · 2025. 4. 30.