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);// 결과:[..
관련 문서https://github.com/LDK1009/Next_Start_Template GitHub - LDK1009/Next_Start_Template: Typescript + Next15 + styled-components + MUI 프로젝트 템플릿입니다.Typescript + Next15 + styled-components + MUI 프로젝트 템플릿입니다. - LDK1009/Next_Start_Templategithub.com 방법supabase 프로젝트 생성 카카오톡 로그인 활성화 카카오톡 디벨로퍼 세팅 [Supabase] Supabase 카카오톡 로그인 기능 사용방법 A to Z카카오톡 디벨로퍼 세팅1. 로그인 및 어플리케이션 생성1) 카카오 디벨로퍼 로그인 2) '내 애플리케이션' 클릭..
설치npm install @next/third-parties@latest 예시 코드구글 애널리틱스에서 제공된 GA(gtag.js) 값 복사 app > src > layout.tsx 에 아래와 같이 붙여넣기import { GoogleAnalytics } from '@next/third-parties/google' // ✨export default function RootLayout({ children,}: Readonly) { return ( {children} // ✨ );} 배포 후 구글 애널리틱스를 확인하면 정상적으로 GA가 등록된 것을 확인할 수 있습니다. 참고자료https://nextjs.org/docs/messages/nex..
https://noteofdeveloper.tistory.com/20 COSY 블루투스 키보드 Fn키 ESC키 설정COSY 블루투스 키보드 KB3140BT Fn키 설정방법 윈도우에서 ESC키 DEL키 F1-12키 기능키 사용하기 COSY 블루투스 키보드 대부분이 이런 문제를 겪는 걸로 보이는데 윈도우 환경에서 ESC키, F1-F12키, DEL키가noteofdeveloper.tistory.comFn + E