소개Zustand는 React의 상태 관리를 간단하고 효율적으로 할 수 있게 도와주는 경량 상태 관리 라이브러리입니다.Redux보다 보일러플레이트 코드가 적고, 사용법이 직관적이며 Hooks 기반으로 동작합니다. 특징1. 간단한 사용법: React Hooks 스타일로 상태를 관리합니다.2. 가벼운 라이브러리: 약 1KB로 매우 가볍습니다.3. 보일러플레이트 최소화: 리듀서, 액션 정의 등이 필요 없습니다.4. 직관적: 상태 정의 및 사용이 단순하고 명확합니다.5. React에 최적화: React에서 사용하기 편리합니다. 설치npm install zustand 기본 사용법1. 상태 스토어 생성Zustand는 create 함수를 사용해 상태 스토어를 정의합니다.예시: store/CounterStore.ts..
전체 글
https://de-velop-humus.tistory.com/32 복잡한 애플리케이션을 위한 프론트엔드 아키텍처프론트엔드가 점점 복잡해지면서 프론트엔드 코드베이스를 아키텍처 수준에서 구조화하고 관리하는 것의 중요성이 점점 높아지고 있다. 필자도 이 주제에 대해 굉장히 오랫동안 고민해 왔는데de-velop-humus.tistory.com
안녕하세요.이번 시간에는 Next.js 15버전에서 error.tsx와 useErrorHandler.ts 를 활용한 전역 에러 처리에 대해 학습합니다. - 미리보기 -error.tsx를 통해 에러 처리 후 의도적으로 컴포넌트 마운트 시 에러를 발생시키자 위와 같이 에러 컴포넌트를 렌더링합니다.useErrorHandler.ts를 통해 에러 처리 후 의도적으로 장바구니 아이콘 클릭 시 에러를 발생시키자 위와 같이 미리 정의한 에러 메시지가 출력됩니다. - 설명 - 1. error.tsxerror.tsx는 컴포넌트 레벨에서 렌더링 중 발생하는 에러를 감지합니다.Next.js에서는 error.tsx를 통해 에러를 처리하고 화면을 렌더링합니다.즉, 특정 컴포넌트에서 렌더링 도중 에러가 발생하면 error.tsx가..
Next.js + styled-components 글로벌 스타일 적용1) 글로벌 스타일 생성src / styles / GlobalStyles.tsx"use client";import { createGlobalStyle } from "styled-components";const GlobalStyles = createGlobalStyle` :root { /* 기본 색상 */ --main-color: #2ECC71; /* 서브 색상 (보조 색상) */ --secondary-color: #FFFFFF; --third-color: #FFA726; } /* Anchor 태그 기본 스타일 */ a { text-decoration: none; color: inherit; } /*..
이 글에서는 Next.js 15버전 환경에서 MUI 테마를 적용하는 방법에 대해 스텝 바이 스텝 형식으로 설명한다. 문제 상황Next.js 15 버전에서 MUI를 활용한 UI 개발 중 반복되는 UI 스타일링과 상속 중첩에 따른 가독성 저해 문제가 발생했다.(쉽게 말하자면 일일히 UI 스타일링 하는 것과 다른 UI를 상속 받아 스타일링을 추가했을 때 부모 요소 스타일링을 추적하는 것이 지겨웠다.)필자는 MUI 전역 스타일링(테마)을 활용하여 위 문제들을 해결하려 했지만 Next.js 환경 특성(서버 컴포넌트, 클라이언트 컴포넌트의 분리 등)에 따라 테마 적용에 어려움을 겪었다. 해결 방법종속성 설치npm install @mui/material-nextjs @emotion/cache app/layout.t..
Q1. 서버 컴포넌트 하위의 use client 로 선언된 컴포넌트는 CSR 방식으로 동작되는 거야? 네, use client로 선언된 컴포넌트는 CSR 방식으로 동작합니다.즉, 브라우저에서만 실행되며, React의 클라이언트 전용 기능(useState, useEffect, DOM 조작 등`)을 사용할 수 있습니다.하지만 Next.js의 App Router 환경에서 클라이언트 컴포넌트를 서버 컴포넌트와 조합해서 사용하는 방식은 기존 CSR 방식과는 약간의 차이가 있습니다. use client가 선언된 컴포넌트의 동작 원리CSR 방식으로 동작:use client가 선언된 컴포넌트는 브라우저에서 렌더링되며, React의 클라이언트 라이프사이클(useState, useEffect 등)을 사용할 수 있습니다.서..
문제 상황React에서는 SVG를 임포트해서 바로 컴포넌트처럼 사용할 수 있었다.하지만 Next.js에서는 해당 기능을 지원하지 않았다.Next.js에서는 태그의 src 속성에 SVG 경로를 넣어 사용했고 이에 따라 SVG 스타일 커스터마이징이 용이하지 않았다.이 글에서는 Next.js에서 SVG 파일을 컴포넌트로 사용하는 방법을 설명한다. 문제 원인위 문제 상황의 원인은 Next.js의 Webpack 기본 설정 때문이다. 1. Create React App(CRA)는 기본적으로 SVGR을 포함하여 .svg 파일을 React 컴포넌트로 처리할 수 있었다.2. Next.js는 성능 최적화와 커스터마이징에 초점을 맞췄기 때문에 SVGR이 포함되어 있지 않다.3. Next.js는 Webpack을 사용해 프로..