전체 글

브라우저 기본 동작 vs 이벤트 동작1️⃣ 브라우저 기본 동작HTML 태그와 브라우저가 제공하는 고유 기능.예: 클릭 시 페이지 이동, 제출 시 새로고침, 스크롤 등.자동 실행: JavaScript 코드 없이도 동작.중단 방법: event.preventDefault().2️⃣ 이벤트 동작JavaScript로 addEventListener 또는 React의 onClick 등으로 등록한 사용자 정의 동작.예: 클릭 시 알림 표시, 키보드 입력 감지.수동 실행: 프로그래머가 리스너를 추가해야 동작. 이벤트 버블링 정의**이벤트 버블링(Event Bubbling)**은 DOM 요소에서 발생한 이벤트가 타깃 요소에서 시작해 부모 요소로 전파되는 동작입니다.이벤트는 타깃 요소 → 부모 → 조부모 순으로 상위 요..

dd const ImgNutritionalWrap = styled.div` width: 160px; display: flex; scroll-snap-type: x mandatory; overflow-x: auto; /* 스크롤바 제거 */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ &::-webkit-scrollbar { display: none; /* Chrome, Safari */ }`;const Img = styled.img` width: 100%; height: auto; border-radius: 12px; scroll-snap-align: start;`;const Nut..

MUI 컴포넌트를 styled-component로 덮어씌울때 CSS가 적용되지 않는 경우가 있다.이럴 때에는 !important를 사용해 나의 스타일을 최우선으로 적용하도록하면 된다.const FindPassword = styled(Typography)` display: block; margin-top: 12px !important; color: var(--gray);`;

MUI + styled-components로 구현하였습니다. 코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다코카콜라 제로 맛있겠다const Name = styled(Typography)` display: -webkit-box; /* 플렉스 박스처럼 동작 */ -webkit-box-orient: vertical; /* 수직 방향으로 텍스트 정렬 */ overflow: hidden; /* 넘치는 텍스트 숨김 */ -webkit-line-clamp: 2; /* 최대 2줄까지만 표시 */ text-overflow: ellipsis; /* 잘린 텍스트 뒤에 '...' 추가 */`;

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

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 ( {/* 루트 라우터 경로에만 글로벌 스타일이 적용되어 있었습니다. */} );} 해결 방법모든 경로에 글로벌 스타일을 적용하기 위해 레이아..