분류 전체보기

방법1. Next.js https 개발 서버 실행npx next dev --experimental-httpsCA 인증서 관련 안내문 팝업 시 수락합니다. 방법2. mkcert를 이용한 방법(추천)프로젝트 경로에서 cmd 실행파일 편집기에서 프로젝트 폴더 경로로 이동합니다.  폴더 경로에 cmd 입력 후 엔터를 치면 해당 경로에서 cmd가 실행됩니다. mkcert 설치winget install mkcert해당 경로에서 mkcert를 설치합니다. local CA 생성mkcert -install next local server 연동mkcert localhost 서버 파일 생성const { createServer } = require("https");const { parse } = require("url");c..

미리보기 코드"use client";import { useState, useEffect } from "react";import { Button, Snackbar, Alert, styled } from "@mui/material";import { GetApp, Close } from "@mui/icons-material";/** * PWA 설치 프롬프트 이벤트 인터페이스 * 브라우저 표준이 아니므로 직접 타입 정의가 필요함 */interface BeforeInstallPromptEvent extends Event { prompt: () => Promise; userChoice: Promise;}/** * PWA 설치 버튼 컴포넌트 * 사용자가 PWA를 설치할 수 있도록 UI를 제공함 */const In..

src / components / KakaoAdFit.tsx// KakaoAdfit.jsximport {useEffect, useRef} from "react";// any 타입 대신 명시적 타입 정의interface KakaoAdFitProps { unit: string; width: number; height: number; disabled?: boolean;}// window 타입 확장declare global { interface Window { adfit?: { destroy: (unit: string) => void; }; }}function KakaoAdFit({unit, width, height, disabled}..

cmd 실행cmd에 접속합니다. ip 주소 확인ipconfig위 명령어를 통해 ip주소를 확인합니다.IPv4 주소를 복사합니다(위에서는 192.168.154.161) 모바일에서 접속휴대폰에서 복사한 ip주소로 접속합니다.http://{ip주소}:3000ex) http://192.168.154.161:3000

"use client";import { useState, useEffect } from "react";import { Switch, FormControlLabel, Typography, Box } from "@mui/material";import { NotificationsActive, NotificationsOff } from "@mui/icons-material";import { requestNotificationPermission, getNotificationPermissionStatus } from "@/service/notification";import { enqueueSnackbar } from "notistack";const NotificationToggle = () => { const [..

MUI 애니메이션이 적용되지 않는 이유MUI의 컴포넌트를 사용할 때 애니메이션이 정상적으로 적용되지 않는 경우가 있다. 이번 글에서는 그 원인과 해결 방법을 정리해본다.1. 애니메이션이 적용되지 않는 이유MUI 애니메이션이 동작하지 않는 주된 원인은 드로어 내부 아이템이 별도 컴포넌트로 분리되지 않았기 때문이다.MUI의 는 내부 아이템을 렌더링할 때 React.cloneElement 등을 활용해 애니메이션을 관리하는데, 이 과정에서 같은 내부 요소가 별도 컴포넌트로 분리되지 않으면 애니메이션 적용이 제한될 수 있다.즉, 내부에서 리스트 아이템을 직접 렌더링하면 애니메이션이 정상적으로 실행되지 않을 가능성이 크다.2. 해결 방법: 분리❌ 기존 코드 (애니메이션 미적용) {na..

Next.js 애플리케이션을 개발하다 보면 다음과 같은 경고 메시지를 만날 수 있습니다:⨯ useSearchParams() should be wrapped in a suspense boundary at page "/cases". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout이 경고는 무엇을 의미하며, 왜 Suspense로 감싸야 하는지 알아보겠습니다.useSearchParams()와 Suspense 경계 문제의 원인Next.js 13 이상에서는 App Router를 사용할 때 기본적으로 서버 컴포넌트를 사용합니다. 그러나 `useSearchParams()`와 같은 클라이언트 훅을 사용하면 해당 컴포넌트는 클라이언..

Supabase를 사용하여 관계형 데이터를 조회할 때 종종 중첩된 데이터 구조를 마주하게 됩니다.이런 데이터를 React 컴포넌트에서 효과적으로 처리하는 방법을 알아보겠습니다.Supabase 조인 쿼리의 응답 구조Supabase에서 외래 키 관계가 있는 테이블을 조인하여 조회할 때(예: `select("cases(*)")`), 응답 데이터는 다음과 같은 중첩 구조로 반환됩니다[ { cases: { id: 1, title: "사례 1", ... } }, { cases: { id: 2, title: "사례 2", ... } }, ...]이 데이터를 단순히 `map`으로 변환하면:const formattedData = response.data?.map((item) => item.cases);// 결과:[..