프론트엔드

이 글은 Next.js 15버전을 기준으로 작성되었습니다. 이 글에서는 아래 내용을 스텝 바이 스텝 방식으로 설명합니다.1. Next.js + styled-components 세팅2. Next.js + styled-components 글로벌 스타일 적용3. Next.js + MUI 글로벌 테마 적용  0. 설치// Next.js 프로젝트 세팅$ npx create-next-app@latest {프로젝트 이름}// 예시$ npx create-next-app@latest nextJsProject// styled-components 설치$ npm install styled-components// MUI 관련 라이브러리 설치$ npm install @mui/material @mui/styled-engine-sc..

설명src/│├── app/ // 라우터 폴더│ └── admin/ // /admin 라우터│ └── page.tsx // /admin으로 접근 시 렌더링 되는 컴포넌트│ └── page.tsx // 루트 라우터│├── components/ // 컴포넌트 폴더│ ├── admin/ // admin 페이지에서만 사용하는 컴포넌트│ │ ├── container/ // core와 view를 합친 컨테이너 컴포넌트(페이지 컴포넌트에서 호출)│ │ └── core/ // 비즈니스 로직 포함 컴포넌트(ex - 로그인 버튼)│ │ └── view/ ..

루트 라우터 경로에서만 글로벌 스타일이 적용되는 버그를 해결했습니다.이로 인해 기본 경로에서는 앱바에 스타일이 적용되지만 다른 경로로 이동하면 앱바의 색상이 변경되었습니다.결론부터 말씀드리자면 이유는 어이없게도 본인 과실이었습니다.(역시 컴퓨터는 잘못이 없습니다.) 원인scr / app / page.tsximport GlobalStyles from "@/styles/GlobalStyles";import Home from "@/pages/Home";export default function page() { return ( {/* 루트 라우터 경로에만 글로벌 스타일이 적용되어 있었습니다. */} );} 해결 방법모든 경로에 글로벌 스타일을 적용하기 위해 레이아..

이 글은 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..

https://de-velop-humus.tistory.com/32 복잡한 애플리케이션을 위한 프론트엔드 아키텍처프론트엔드가 점점 복잡해지면서 프론트엔드 코드베이스를 아키텍처 수준에서 구조화하고 관리하는 것의 중요성이 점점 높아지고 있다. 필자도 이 주제에 대해 굉장히 오랫동안 고민해 왔는데de-velop-humus.tistory.com

https://de-velop-humus.tistory.com/32