TanStack query 쿼리키 관리 개선하기 (query-key-factory)
·
React
TanStack Query 란 ?지금 회사 프로젝트에서 서버 상태 관리 도구로 tanstack query 를 사용하고 있다.react query로 널리 알려졌지만, 리액트뿐만 아니라 vue, svelte 등 여타의 프론트엔드 프레임워크에서도 활용할 수 있도록 확장되면서 TanStack Query라는 이름으로 변경되었다.query key란 ?TanStack query에서는 데이터를 조회할 때 queryKey를 활용하여 캐시를 관리한다.쿼리키는 특정 데이터 요청을 고유하게 식별하는 역할을 하고, 쿼리키를 기반으로 데이터 캐싱, 재용청, 무효화 등을 효율적으로 관리할 수 있다. 쿼리키는 문자열 또는 문자열로 구성된 배열 형태로 지정할 수 있다.특히 쿼리키는 배열을 사용할 경우, 첫 번째 요소는 보통 쿼리의 대..
[React]React에서 테이블 엘리먼트 엑셀 파일로 다운로드하기
·
React
관리자 프로그램 특성 상 테이블이 많이 사용되는데, 테이블에 그려진 데이터를 엑셀 파일로 다운로드하는 기능이 필요했다. 테이블을 컴포넌트화 시켜두었기에 테이블 컴포넌트에 구현해도 되었겠지만 관심사 분리를 위해 커스텀 훅으로 구현하였다. SheetJS의 xlsx 라이브러리를 사용하여 테이블 데이터를 엑셀 파일로 변환하는 기능을 구현해 보았다. 설치하기npm install xlsx구현하기1. useRef로 테이블 요소 참조하기먼저 테이블 데이터를 엑셀로 변환하려면 원하는 테이블 요소에 직접 접근해야 한다. React에서는 useRef를 사용해서 직접 테이블 DOM 요소에 접근할 수 있는데, HTMLTableElement 타입을 지정해서 테이블 요소만 참조할 수 있도록 하였다.export default fun..
[React] 외부 클릭 감지하는 custom hook 만들기 (with useRef)
·
React
모달이나 드롭다운, 툴팁과 같은 요소들은 외부 영역을 클릭했을 때 닫히는 기능이 필요하다. 다양한 컴포넌트에서 공통으로 필요한 부분이기에 재사용 가능한 커스텀 훅으로 구현해 보았다. 👍🏻 구현 사항 1. 특정 요소에 대한 ref를 통해 해당 요소 외부에서 발생한 mousedown 이벤트를 감지한다.2. 외부 클릭이 감지되면 핸들러 함수를 실행한다.useRef 이해하기JavaScript vs React에서의 DOM 접근JavaScript: querySelector, getElementById 등의 DOM 선택자를 사용해 직접 DOM에 접근 React: Virtual DOM을 사용하는 특성상 직접적인 DOM 조작은 지양됨. 대신 useRef를 통해 DOM에 접근useRef란 ? useRef는 함수형 컴포..
[React] 라이브러리 없이 토스트 컴포넌트 구현하기(with zustand)
·
React
토스트란 ? 토스트(toast)는 사용자에게 일시적인 알림을 표시하는 UI 컴포넌트이다. 기술 스택 Next.js 14 (app router)ZustandtailwindCSSTypeScript왜 직접 구현했나 ? 라이브러리 경량화사실 기존에 사용하던 react-toastify(536kb)가 특별히 무거운 라이브러리는 아니었다. 번들 크기 감소만을 목적으로 직접 구현하는 데 큰 이점은 없었다.그러나 서비스 특성 상 토스트 사용 빈도가 높지 않았고, 백엔드 API 일정 지연으로 인해 프론트 개발 일정에 시간적 여유가 확보되었던 상황이었다 ! 주요 구현 사항 특징상태 관리 Zustand를 사용하여 전역으로 상태를 관리한다.토스트를 사용할 때마다 개별 상태를 만들 필요 없이 전역에서 토스트를 관리할 수 있도록 ..
[Zustand] Next.js에서 zustand 사용하기
·
React
. zustand는 전역 상태 라이브러리로 간단하고, hook 기반 API를 활용해서 전역상태를 관리할 수 있다는 장점이 있다. 하지만 Next.js에서 zustand를 사용할 때는 react와 다른 접근이 필요한데 나같은 경우엔 이렇게 생각해서 크게 헷갈렸다… ^^Next.js 에서 서버에서 실행되는 건 서버 컴포넌트만 렌더링하고 클라이언트 렌더링은 모두 클라이언트 단에서 실행되고(아님), 그래서 zustand 도 'use' 훅을 사용하는 클라이언트 컴포넌트에서만 동작하니까, React처럼 그냥 사용해도 되지 않을까? 스토어 생성 자체도 클라이언트 모듈에서만 이루어지는 거 아닌가? (아님) 나처럼 생각했다면 ! 차근차근 Next.js 렌더링 방식부터 이해해 보자 React와 Next.js의 렌더링 방식..
[React] 재사용 가능한 버튼 컴포넌트 만들기(with tailwind-merge, cva)
·
React
한 서비스에서 사용되는 버튼은 위 사진처럼 다양한 스타일과 크기를 가지고 있다. 이외에도 텍스트 버튼뿐만 아니라 아이콘과 함께 사용되는 버튼 등 다양한 요구사항이 존재한다. 이 버튼을 하나의 컴포넌트로 어떻게 만들 수 있을까 ? 🤔  기존 코드 'use client';import { ReactNode } from 'react';interface ButtonProps { variant: 'default' | 'ghost' | 'outline'; children: ReactNode; onClick?: () => void; addClassName?: string; type?: 'button' | 'submit' | 'reset'; disabled?: boolean;}export default fu..
[7장] 코어 자바스크립트 클래스
·
Javascript/코어 자바스크립트
7장 클래스7-1. 클래스와 인스턴스의 개념 이해음식은 과일의 상위 클래스, 과일은 음식의 하위클래스하위 개념은 상위 개념을 포함하면서 더 구체적인 개념을 가짐클래스는 하위로 갈수록 상위 클래스의 속성을 상속하면서 더 구체적인 요건이 추가/변경됨인스턴스(instance) : 어떤 클래스의 속성을 지니는 실존하는 개체사례 : 어떤 조건에 부합하는 구체적인 예시한 인스턴스는 하나의 클래스만을 바탕으로 만들어짐위 사진에서 감귤, 오렌지, 레몬 등이 해당프로그래밍에서는 클래스가 먼저 정의돼야만 그로부터 공통적인 요소를 지니는 개체들을 생성할 수 있음7-2. 자바스크립트의 클래스자바스크립트는 프로토타입 기반의 언어이므로 클래스의 개념 존재 X프로토타입 체이닝에 의한 참조로 클래스와 유사한 기능을 구현한 것인스턴스..
[6장] 코어 자바스크립트 프로토타입
·
Javascript/코어 자바스크립트
6장 프로토타입클래스 기반 언어 : 상속을 사용자바스크립트프로토타입(prototype) 기반 언어어떤 객체를 원형(prototype)으로 삼고 이를 참조함으로써 상속과 비슷한 효과6-1. 프로토타입의 개념 이해6-1-1. constructor, prototype, instancevar instance = new Constructor();어떤 생성자 함수를 new 연산자와 함께 호출하면Constructor에서 정의된 내용을 바탕으로 새로운 인스턴스 생성새롭게 생성된 인스턴스에는 __proto__ 라는 프로퍼티가 자동으로 부여이 프로퍼티는 Constructor의 prototype 이라는 프로퍼티를 참초🔍 prototype 과 __proto__prototype객체인스턴스가 사용할 메서드 저장생성자 함수로부터..
[5장] 코어 자바스크립트 클로저
·
Javascript/코어 자바스크립트
05장 클로저5-1. 클로저의 의미 및 원리 이해💡 클로저(Closure)Closure : 닫혀있음, 폐쇄성, 완결성자바스크립트 고유 개념 X, 함수형 프로그래밍 언어의 보편적인 특성A closure is the combination of a function and the lexical environment within which that function was declared.클로저는 함수와 그 함수가 선언될 당시의 lexical environment의 상호관계에 따른 현상 (MDN)lexicalEnvironment 중에서도 outerEnvironmentReference에 해당lexicalEnvironment의 environmentRecord와 outerEnvironmentReference에 의해 변..
[4장] 코어 자바스크립트 콜백 함수
·
Javascript/코어 자바스크립트
4장 콜백 함수4-1. 콜백 함수란?콜백 함수 (callback function)다른 코드의 인자로 넘겨주는 함수(with 제어권)함수의 제어권이 위임받은 코드에게 있음제어권 - 호출 시점, 인자callback : 부르다, 실행하다 call + 뒤돌아오다, 되돌다 back → 되돌아 호출해달라.콜백 함수를 위임받은 코드가 자체적인 내부 로직에 의해 콜백 함수를 적절한 시점에 실행4-2. 제어권4-2-1. 호출 시점콜백 함수 예제 - setInterval()var intervalID = scope.setInterval(func, delay[, param1, param2, ...]);scope : window 객체 (생략하고 함수처럼 사용)delay(밀리초)마다 func 실행하며 리턴값 없음반복적으로 실행되..
[3장] 코어 자바스크립트 this
·
Javascript/코어 자바스크립트
3장 this3-1. 상황에 따라 달라지는 thisjs에서 this는 실행 컨텍스트가 생성될 때 함께 결정됨함수를 호출할 때 결정3-1-1. 전역 공간에서의 this전역 공간에서의 this : 전역 객체전역 컨텍스트를 생성하는 주체가 전역 객체브라우저 환경 this: windowNode.js: globalvar a = 1;console.log(a); // 1console.log(window.a); // 1console.log(this.a); // 1전역변수 선언 시 js 엔진은 전역객체의 프로퍼티로 할당js의 모든 변수는 특정 객체의 프로퍼티로서 동작하기 때문특정 객체란 실행 컨텍스트의 LE실행 컨텍스트는 변수를 수집해서 LE의 프로퍼티로 저장전역 컨텍스트 LE는 전역 객체를 그대로 참조console에 ..
[2장] 코어 자바스크립트 실행 컨텍스트
·
Javascript/코어 자바스크립트
2장 실행 컨텍스트실행할 코드에 제공할 환경 정보들을 모아놓은 객체2-1. 실행 컨텍스트란?🔍 스택후입선출stack overflow : Stack 영역의 메모리가 지정된 범위를 넘어갈 때 발생🔍 큐선입선출실행 컨텍스트동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트 구성동일한 환경전역공간, 함수 등이를 콜 스택(call stack)에 쌓아 올리고가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하여 전체 코드의 환경과 순서를 보장실행 컨텍스트와 콜 스택// ---------------------------- (1) var a = 1; function outer() { function inner() { console.log(a); // undefined var a = ..
ssseeo0
서영이의 개발 블로그
상단으로

티스토리툴바