![]()
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
[Office 정품인증 업데이트 방법]1. 엑셀 파일 열기2. 좌측상단 [파일] 메뉴 선택3. 좌측 상단 [홈] 메뉴 선택4. 좌측하단 [계정] 메뉴 선택5. '인증 필요' 박스 내부의 '제품 키 변경' 클릭6. 아래 제품키 복사 붙여넣기7. [Office 정품 인증 ]버튼 클릭* Office2021 제품키 : FXYTK-NJJ8C-GB6DW-3DYQT-6F7TH
![]()
display : flex 값을 가진 엘리먼트는 자식 요소로 인해 넘침이 일어나도 스크롤이 작동되지 않는다. 이 이유 자세히 설명해줘 display: flex;에서 스크롤이 동작하지 않는 이유display: flex;를 가진 부모 요소에서 자식 요소가 넘쳐도 스크롤이 작동하지 않는 이유는 기본적인 Flexbox의 동작 방식 때문입니다.즉, Flex 컨테이너는 기본적으로 자식 요소를 '압축'하지 않고, 오히려 컨테이너의 크기를 조절하려고 하기 때문입니다.1. Flexbox는 기본적으로 컨테이너 크기를 조절한다.Flexbox는 자식 요소가 넘칠 경우, 부모 컨테이너 크기를 늘리는 방식으로 배치합니다.즉, 부모 요소는 자식 요소의 크기에 맞춰 확장되며, 스크롤이 발생하지 않습니다.📌 예제 (스크롤이 안 되는..
![]()
설치npm install notistack 예시 코드src / app / layout.tsximport ClientSnackbarProvider from "@/lib/ClientSnackbarProvider";export default function RootLayout({ children,}: Readonly) { return ( {children} );} src / lib / ClientSnackbarProvider.tsx"use client";import { enqueueSnackbar, SnackbarProvider } from "notistack";const ClientSnackbarProvider = () => ..
