https://www.npmjs.com/package/react-month-picker react-month-pickerMonth-Picker Component offers a popup month selection panel with responsive layouts.. Latest version: 2.2.1, last published: 4 years ago. Start using react-month-picker in your project by running `npm i react-month-picker`. There are 13 other projects in twww.npmjs.com   https://www.react-lite-month-picker.dev/ React Lite Month P..

1. React Fragment? 여러 개의 자식을 하나의 부모 요소로 묶기 위해 사용하는 컴포넌트. HTML 구조 상에 불필요한 DOM 요소를 추가하지 않고도 여러 요소를 그룹화할 수 있게 해줌 import React from "react";function Example() { return ( Title This is a paragraph. );}export default Example;위의 예제에서 와 는 Fragment의 축약 문법으로, 렌더링 시 실제 DOM에 추가적인 노드를 생성하지 않음 이를 활용하기 좋은 예제가 map 을 사용할 때이다.map 의 경우 최상위 컴포넌트에 key를 부여해야하는데  key를 부여하고자 불필요한 div를 만들기보단 React.Fr..

API Routes ?NEXT.JS 에서 API를 구축할 수 있도록 도와주는 기능임 간단한 API를 구축해서 클라이언트, 즉 브라우저로 부터 요청을 받아 데이터베이스에서 데이터를 꺼내온다던가아니면 또 다른 서드파티에서 데이터를 불러와서 전달을 해주는 일련의 동작들을 할 수 있음.   Next앱에서는 pages -> api 라는 폴더 내에 hello.ts를 보면 자동으로 api 파일이 생성되어있는 것을 확인할 수 있는데, // Next.js API route support: https://nextjs.org/docs/api-routes/introductionimport type { NextApiRequest, NextApiResponse } from "next";type Data = { name: str..

Pre-Fetching이란?    -  페이지를 사전에 불러오는 것을 의미한다.    -  예를 들어 현재 페이지에서 링크로 연결되어 있는 페이지를 현재 페이지가 실행될 때 사전 미리 다 불러와 놓는 기   -  페이지 이동을 빠르게 지체없이 하기 위해 NEXT.JS에서 지원한다.   이는 개발자모드의 네트워크 탭에서 눈으로 확인이 가능하다. 이해를 쉽게 하기 위해 아래에는 각 페이지로 이동하는 Link와 버튼을 클릭했을 때 이벤트 핸들러를 통해 이동하는 경우 두 가지를 작성하여 확인해 보겠다. import "@/styles/globals.css";import type { AppProps } from "next/app";import Link from "next/link";import { useRouter..

Client Side Rendering(CSR) 의 단점을 효율적으로 해결하는 기술- 페이지 이동이 매우 빠르고 쾌적하다는 장점이 있음   단점? 초기 접속 속도가 느려짐 화면에 나타나는데까지 걸리는 이 시간을  FCP(First Contentful Paint) 이라고 함 이는 웹 페이지의 성능을 대표할 정도로 중요한 지표  NEXT.JS 는 이런 단점을 해결하기 위해 사전 렌더링을 사용함  TTI : 상호작용까지 걸리는 시간     출처 : 한 입 크기로 잘라먹는 Next.js (15+)https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs/dashboard

나는 이때까지 map을 사용해서 리스트를 랜더링 할 때 보통 데이터에 이미 고유한 ID가 있다면 그 ID를 사용하지만 없는 경우에는 index를 넣는 경우가 있었는데이는 권장하지 않는 방법이라고 한다.   key에 index 값을 넣지 않는 것이 권장되는 이유는 리스트 항목의 순서나 내용이 변경될 때 예상치 못한 렌더링 문제를 일으킬 수 있기 때문이다.1. 항목 순서 변경 시 문제리스트 항목의 순서가 바뀌면, index 값은 그대로 유지되기 때문에 리액트는 항목 자체가 변경되었음을 인식하지 못한다. 이는 결과적으로 불필요하거나 잘못된 렌더링을 유발할 수 있다. 예를 들어, 항목이 삽입되거나 삭제될 때, 각 항목의 key가 여전히 같은 index 값을 가지면 리액트는 항목이 그대로 있다고 잘못 판단할 수 ..

현재 react-hook-form을 사용해서 폼을 만들고 있는데 ,  분명 number 타입으로 만들었는데 아래와 같이 한글 자음도 입력을 받는것임.    아래의 링크와도 동일한 현상이 발생함.https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number - HTML: HyperText Markup Language | MDN" data-og-description=" elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries." data-og-host="developer...

Typescript - 타입스크립트(Typescript)는 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어.- 타입스크립트를 사용하여 컴파일 시점에 에러를 확인할 수 있음1. 타입 애너테이션 기초아래와 같은 형태로 타입을 명시한다.  그 외의 다른 타입의 값을 할당할 때 에러 발생 let myVar: type = value// 문자열 타입 stringlet movieTitle: string = "Apple";movieTitle = "Pie";//movieTitle = 9; // errormovieTitle.toUpperCase();// 숫자 타입 numberlet numCatLives: number = 9;numCatLives += 1;//numCatLives = "zero" //erro..

https://supabase.com/docs/guides/realtime/presence Presence | Supabase DocsShare state between users with Realtime Presence.supabase.com        Pressence 는 채널에 config를 넣어줘야함 (아래 예시와 같이)import { createClient } from '@supabase/supabase-js'const channelC = supabase.channel('test', { config: { presence: { key: 'userId-123', }, },})        const supabase = createBrowserSupabaseClient(); ..

Realtime 기능을 구현하기 전에  사용하고 있는테이블에 Realtime 기능을 on 해줘야한다.  현재는 off로 설정되어 있으므로  enable realtime을 통해   on으로 활성화를 해준다.   이제 코드를 구현하면되는데 , 현재 필요한 액션은 두 개다. 1. 메시지를 보내는 기능 (insert)export async function sendMessage({ message, chatUserId }) {  const supabase = await createServerSupabaseClient();  //현재 접속중인 유저의 정보를 getSession으로부터 가져온다.  const {    data: { session },    error,  } = await supabase.auth.get..