src / service / auth / signUp.tsimport { supabase } from "@/lib/supabaseClient";import { signUpType } from "@/types/auth/signUp.type";export async function signUp({ email, password }: signUpType) { const { data, error } = await supabase.auth.signUp({ email, password }); return { data, error };} src / hooks / useAuth.tsimport { useModalStore } from "@/store";import { useRouter } from "next/navi..
루트 라우터 경로에서만 글로벌 스타일이 적용되는 버그를 해결했습니다.이로 인해 기본 경로에서는 앱바에 스타일이 적용되지만 다른 경로로 이동하면 앱바의 색상이 변경되었습니다.결론부터 말씀드리자면 이유는 어이없게도 본인 과실이었습니다.(역시 컴퓨터는 잘못이 없습니다.) 원인scr / app / page.tsximport GlobalStyles from "@/styles/GlobalStyles";import Home from "@/pages/Home";export default function page() { return ( {/* 루트 라우터 경로에만 글로벌 스타일이 적용되어 있었습니다. */} );} 해결 방법모든 경로에 글로벌 스타일을 적용하기 위해 레이아..
로그인 컴포넌트 ( 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