![]()
로그인 컴포넌트 ( src / components / signIn / SignIn.tsx )"use client";import { useState } from "react";import useAuth from "@/hooks/auth/useAuth";export default function SignIn() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const { handleSignIn } = useAuth(); // 로그인 처리 함수 const signIn = async (e: React.FormEvent) => { e.preventDefault(); handleSign..
![]()
이 글은 Next.js, MUI, styled-component, zustand 환경에서 작성된 코드를 공유합니다. 소개어디서든 열 수 있는 모달 컴포넌트입니다. 코드모달 개발src / components / InfoModal.tsx"use client";import styled from "styled-components";import Modal from "@mui/material/Modal";import Fade from "@mui/material/Fade";import { Box, Button } from "@mui/material";import { useModalStore } from "@/store";const InfoModal = () => { const {isOpen, title, conte..
![]()
이 글은 Next.js, MUI, styled-component 환경에서 작성된 코드를 공유합니다. 모달1 ( 주변 어둡게 )"use client";import styled from "styled-components";import Backdrop from "@mui/material/Backdrop";import Modal from "@mui/material/Modal";import Fade from "@mui/material/Fade";import Button from "@mui/material/Button";import { useState } from "react";import { Box } from "@mui/material";const InfoModal = () => { // React 상태: 모..
![]()
메모리와 브라우저의 관계리액트를 활용해 애플리케이션을 개발하면서, 상태 관리의 메커니즘을 정확히 이해하는 것은 매우 중요합니다.이번 글에서는 React의 useState와 Zustand의 상태 데이터가 어디에 저장되는지, 그리고 브라우저와 어떤 관계가 있는지 알아보겠습니다. 브라우저와 자바스크립트의 역할브라우저는 HTML, CSS, JavaScript를 해석하고 실행하는 도구입니다.브라우저 내부에는 자바스크립트 코드를 실행하기 위해 JavaScript 엔진(V8, SpiderMonkey 등)이 포함되어 있습니다.이 엔진은 콜스택(Stack), 힙 메모리(Heap), 이벤트 루프(Event Loop) 등의 런타임 환경을 통해 자바스크립트를 실행합니다.React와 Zustand의 상태 데이터는 브라우저의 J..
소개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
https://de-velop-humus.tistory.com/32
![]()
안녕하세요.이번 시간에는 Next.js 15버전에서 error.tsx와 useErrorHandler.ts 를 활용한 전역 에러 처리에 대해 학습합니다. - 미리보기 -error.tsx를 통해 에러 처리 후 의도적으로 컴포넌트 마운트 시 에러를 발생시키자 위와 같이 에러 컴포넌트를 렌더링합니다.useErrorHandler.ts를 통해 에러 처리 후 의도적으로 장바구니 아이콘 클릭 시 에러를 발생시키자 위와 같이 미리 정의한 에러 메시지가 출력됩니다. - 설명 - 1. error.tsxerror.tsx는 컴포넌트 레벨에서 렌더링 중 발생하는 에러를 감지합니다.Next.js에서는 error.tsx를 통해 에러를 처리하고 화면을 렌더링합니다.즉, 특정 컴포넌트에서 렌더링 도중 에러가 발생하면 error.tsx가..
