로컬 db 사용하기(json server)

로컬 db 간단히 만들어 쓰는 라이브러리 1. 설치 yarn add -D json-server (글로벌 말고 개발로 설치, 용량 커서) https://www.npmjs.com/package/json-server json-server > [!IMPORTANT] > Viewing alpha v1 documentation – usable but expect breaking changes. For stable version, see [here](https://github.com/typicode/json-server/tree/v0). Latest version: 1.0.0-alpha.23, last published: a month ago. Start using json-server in www.npmjs.com..

• format_list_bulleted REACT
• · 2024. 2. 26.
• textsms

React에서 Zustand로 전역 상태 관리 1분 만에 편하게 하기 - 2 devtools 및 상태 추적

Zundand와 DevTools 연동 DevTools 미들웨어의 역할 Zustand의 `devtools` 미들웨어는 상태 관리 과정을 시각적으로 추적할 수 있게 해주는 강력한 도구입니다. 이 미들웨어를 사용함으로써 개발자는 Redux DevTools 확장 프로그램을 통해 상태 변화의 흐름을 명확하게 볼 수 있습니다. 상태가 어떻게 변화하는지, 어느 시점에 변화가 발생하는지 등을 한눈에 파악할 수 있게 해주며, 이는 복잡한 애플리케이션에서 버그를 찾거나 성능을 분석하는 데 있어 매우 유용합니다. 설정 방법 Zustand 스토어를 생성할 때 `devtools` 미들웨어를 사용하는 것은 매우 간단합니다. 우선, `zustand/middleware`에서 `devtools`를 import 한 후, `create`..

• format_list_bulleted REACT
• · 2024. 2. 26.
• textsms

React Query 기본 정리

React Query란? 리액트에서 복잡한 데이터 상태 및 비동기 작업 관리를 간편하게 처리할 수 있는 라이브러리 데이터를 비동기적으로 처리하고, 데이터 캐싱, 리패칭, 뮤테이션 등과 같은 복잡한 데이터 관리 작업을 간 편하게 수행 캐싱 및 성능 최적화: React Query는 자동으로 데이터를 캐싱하여 네트워크 요청을 최소화함 데이터 동기화: 실시간 동기화를 지원하여 데이터가 변경될 때 자동으로 새로운 데이터 업데이트 서버 요청 관리: 쿼리를 통해 서버 요청을 효과적으로 관리 (중복 요청 방지, 요청 취소, 재시도) 그 외: 성숙한 생태계, 타입스크립트 지원, Next.js와의 통합, 비동기 작업 관리 공식문서 : Overview | TanStack Query Docs React Query 주요 기능 ..

• format_list_bulleted REACT
• · 2024. 1. 21.
• textsms

React dangerouslySetInnerHTML, html 렌더링

받아온 데이터가 '테스트\n데이터\n입니다' 와 같을 때 분리하여 JSX에서 HTML로 렌더링할 때 사용하는 속성 예로들면 아래와 같이 사용 ...생략 위코드 const handleConvertContent = (content) => { const lines = content.split('\n'); const html = lines.map((text) => `${text}`).join(''); return html; }; return ( ...생략 {item.CONTENT && } ...생략 ) 하지만 이름자체가 데인저러스 하다는게 보안적인 이슈가 있을 수 있다. 그냥 정규식 쓰자 예시 ..생략 const handleConvertContent = (content) => { const escapedCont..

• format_list_bulleted REACT
• · 2023. 12. 4.
• textsms

React에서 반응형 디자인을 위한 Custom Hooks 만들기

React작업을 하다 보면 화면 크기와 장치에 따라 사용자 경험을 최적화하기 위해 반응형 동작을 구현하는 방법이 필요합니다. css의 mediaquery로도 대부분 가능하지만 어려울 경우 custom hook을 만드는 방법에 대해 알아보겠습니다. useMediaQuery 미디어 쿼리를 활용한 반응형 동작 import { useEffect, useState } from 'react'; export function useMediaQuery(query) { const [matches, setMatches] = useState(false); useEffect(() => { const media = window.matchMedia(query); const handleMediaChange = (media) => {..

• format_list_bulleted REACT
• · 2023. 8. 18.
• textsms