TanStack Query 란 ?지금 회사 프로젝트에서 서버 상태 관리 도구로 tanstack query 를 사용하고 있다.react query로 널리 알려졌지만, 리액트뿐만 아니라 vue, svelte 등 여타의 프론트엔드 프레임워크에서도 활용할 수 있도록 확장되면서 TanStack Query라는 이름으로 변경되었다.query key란 ?TanStack query에서는 데이터를 조회할 때 queryKey를 활용하여 캐시를 관리한다.쿼리키는 특정 데이터 요청을 고유하게 식별하는 역할을 하고, 쿼리키를 기반으로 데이터 캐싱, 재용청, 무효화 등을 효율적으로 관리할 수 있다. 쿼리키는 문자열 또는 문자열로 구성된 배열 형태로 지정할 수 있다.특히 쿼리키는 배열을 사용할 경우, 첫 번째 요소는 보통 쿼리의 대..

관리자 프로그램 특성 상 테이블이 많이 사용되는데, 테이블에 그려진 데이터를 엑셀 파일로 다운로드하는 기능이 필요했다. 테이블을 컴포넌트화 시켜두었기에 테이블 컴포넌트에 구현해도 되었겠지만 관심사 분리를 위해 커스텀 훅으로 구현하였다. SheetJS의 xlsx 라이브러리를 사용하여 테이블 데이터를 엑셀 파일로 변환하는 기능을 구현해 보았다. 설치하기npm install xlsx구현하기1. useRef로 테이블 요소 참조하기먼저 테이블 데이터를 엑셀로 변환하려면 원하는 테이블 요소에 직접 접근해야 한다. React에서는 useRef를 사용해서 직접 테이블 DOM 요소에 접근할 수 있는데, HTMLTableElement 타입을 지정해서 테이블 요소만 참조할 수 있도록 하였다.export default fun..

모달이나 드롭다운, 툴팁과 같은 요소들은 외부 영역을 클릭했을 때 닫히는 기능이 필요하다. 다양한 컴포넌트에서 공통으로 필요한 부분이기에 재사용 가능한 커스텀 훅으로 구현해 보았다. 👍🏻 구현 사항 1. 특정 요소에 대한 ref를 통해 해당 요소 외부에서 발생한 mousedown 이벤트를 감지한다.2. 외부 클릭이 감지되면 핸들러 함수를 실행한다.useRef 이해하기JavaScript vs React에서의 DOM 접근JavaScript: querySelector, getElementById 등의 DOM 선택자를 사용해 직접 DOM에 접근 React: Virtual DOM을 사용하는 특성상 직접적인 DOM 조작은 지양됨. 대신 useRef를 통해 DOM에 접근useRef란 ? useRef는 함수형 컴포..

토스트란 ? 토스트(toast)는 사용자에게 일시적인 알림을 표시하는 UI 컴포넌트이다. 기술 스택 Next.js 14 (app router)ZustandtailwindCSSTypeScript왜 직접 구현했나 ? 라이브러리 경량화사실 기존에 사용하던 react-toastify(536kb)가 특별히 무거운 라이브러리는 아니었다. 번들 크기 감소만을 목적으로 직접 구현하는 데 큰 이점은 없었다.그러나 서비스 특성 상 토스트 사용 빈도가 높지 않았고, 백엔드 API 일정 지연으로 인해 프론트 개발 일정에 시간적 여유가 확보되었던 상황이었다 ! 주요 구현 사항 특징상태 관리 Zustand를 사용하여 전역으로 상태를 관리한다.토스트를 사용할 때마다 개별 상태를 만들 필요 없이 전역에서 토스트를 관리할 수 있도록 ..

. zustand는 전역 상태 라이브러리로 간단하고, hook 기반 API를 활용해서 전역상태를 관리할 수 있다는 장점이 있다. 하지만 Next.js에서 zustand를 사용할 때는 react와 다른 접근이 필요한데 나같은 경우엔 이렇게 생각해서 크게 헷갈렸다… ^^Next.js 에서 서버에서 실행되는 건 서버 컴포넌트만 렌더링하고 클라이언트 렌더링은 모두 클라이언트 단에서 실행되고(아님), 그래서 zustand 도 'use' 훅을 사용하는 클라이언트 컴포넌트에서만 동작하니까, React처럼 그냥 사용해도 되지 않을까? 스토어 생성 자체도 클라이언트 모듈에서만 이루어지는 거 아닌가? (아님) 나처럼 생각했다면 ! 차근차근 Next.js 렌더링 방식부터 이해해 보자 React와 Next.js의 렌더링 방식..

한 서비스에서 사용되는 버튼은 위 사진처럼 다양한 스타일과 크기를 가지고 있다. 이외에도 텍스트 버튼뿐만 아니라 아이콘과 함께 사용되는 버튼 등 다양한 요구사항이 존재한다. 이 버튼을 하나의 컴포넌트로 어떻게 만들 수 있을까 ? 🤔  기존 코드 '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..

14장 웹사이트 보안을 위한 리액트와 웹페이지 보안 이슈14.1 리액트에서 발생하는 크로스 사이트 스크립팅 (XSS)XSS : Cross-Site Scripting웹사이트 개발자가 아닌 웹사이트에 악성 스크립트를 삽입해 실행할 수 있는 취약점사용자가 입력할 수 있고 이 입력을 다른 사용자에게 보여줄 수 있는 경우 발생사용자가 프론트엔드 개발자처럼 script도 실행될 수 있으면 쿠키를 획득해 사용자 정보(토큰)를 탈취할 수 있음❓리액트에서의 XSS 이슈는 어떻게 발생하나?14.1.1 dangerouslySetInnerHTML propdangerouslySetInnerHTML브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법사용자가 입력한 내용을 브라우저에 표시하는 용도로 사용_ ..

12장 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표12.1 웹사이트와 성능사용자가 웹사이트 방문 시 기대하는 사항웹사이트를 방문한 목적을 쉽게 달성해야 함위 목적을 달성하는 시간이 짧아야 함개인정보 누출 등의 사고 X ,보안 철저이러한 목적만 잘 달성된다면 웹사이트의 기술은 사용자에게 중요하지 않음.최신 기술을 활용하더라도 결국엔 사용자가 느끼는 성능이 가장 중요한 것웹사이트의 성능과 사용자 경험 사이의 상관관계로딩 속도가 빠를수록 구매율 증가로딩이 늦어질수록 전환률 감소페이지 로드 시간 0 ~ 2초 사이가 가장 높은 전환율 달성사용자가 민감한 성능소비자 70%가 커머스 사이트 방문에 영향빠르게 로딩할 수 있으면 애니메이션, 동영상 X구글 웹 사이트 성능에 관한 통계전체 웹페이지를 표시하는데 필요한..