axios 인스턴스를 사용하는 이유는 여러 가지가 있습니다. 주된 이유는 다음과 같습니다:1. 공통 설정 관리axios.create()로 생성된 인스턴스는 기본 URL, 타임아웃, 헤더, 파라미터 직렬화 방식 등 공통적으로 사용되는 설정을 하나의 인스턴스에 정의할 수 있습니다. 이렇게 하면 특정 API와 통신할 때 매번 동일한 설정을 반복할 필요 없이, 인스턴스를 사용해 간단하게 요청을 보낼 수 있습니다.예를 들어, API의 기본 URL이나 공통적으로 필요한 인증 토큰, 또는 기본 헤더 등을 인스턴스에 설정해 두면, 개별 요청 시에 이러한 정보를 일일이 지정할 필요가 없어집니다.2. 코드의 재사용성 향상공통된 설정을 가진 인스턴스를 여러 곳에서 재사용할 수 있어 코드의 중복을 줄일 수 있습니다. 이는 코..

현재 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...

현재 구현하고 있었던 기능이  Next.js에서  터치 이벤트 발생 시 옆으로 스와이프되는 기능을 구현하고 있었다.    에러 발생 내용   e.touches[0]에서 개체가 'undefined' 인 것 같다는 에러가 발생... 근데 작동은 잘됨.   // 스와이프 관련 핸들러 -> 터치 종료 지점 const handleTouchMove = (e: React.TouchEvent): void => { if (e.touches && e.touches.length > 0) { touchEndX.current = e.touches[0].clientX; } };  에러 해결 방법  널 병합 연산자를 사용해서 해결했다.   // 스와이프 관련 핸들러..

Session 방식세션은 클라이언트가 로그인을 위해 인증 정보를 서버에 전송서버는 메모리에 사용자를 저장하고, 세션 아이디를 쿠키로 전달클라이언트는 쿠키에 저장된 세션 아이디를 이용하여 요청함서버는 일치하는 세션 아이디를 메모리에서 검색한 후 응답 Session 방식의 한계 웹 Application 서버 측에 저장한다는 것은 서버 메모리에 인증 정보를 저장한다는 것이다. 세션은 사용자의 인증 정보를 서버에 저장하며, 서버의 과부하를 유발한다.특히 동시 사용자가 많아질수록 서버 메모리를 비례하여 사용하게 된다.  이러한 세션 방식의 한계를 보완하기 위해 아래의 방법들이 있다. 1. 인증 서버의 메모리 증설-  메모리 부족을 보완하기 위해서 메모리를 늘리는 것이다. - 물리적으로 서버 컴퓨터의 RAM을 업그..

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..

버전 관리  프로젝트를 진행할 폴더로 가서   1.  git init 으로 현재 디렉터리를 버전관리한다. git init  git 파일을 생성한다.   ls -al (현재 파일목록을 보여주는 명령어)   2.  Add vim f1.txt ( 파일명이 f1 인 텍스트 파일 생성) 키보드 I를 누르면 insert로 바뀜 그리고 입력하면 입력이 되고 esc 누르면 읽기만 가능해진다.  Insert 상태에서 입력하고자 하는 텍스트를 입력하고  :wq 를 입력 후 엔터를 누르면 위의 창에서 나가지고  터미널로 돌아온다. 다시 ls -al 로 파일이 추가됐는지 확인해보면 아래와 같이 텍스트 파일이 추가된 것을 확인할 수 있다.    그리고 만약  f1 파일에 내용이 정상적으로 반영이 됐는지 확인하고 싶으면 cat ..

https://vercel.com/ Vercel: Build and deploy the best web experiences with the Frontend Cloud – VercelVercel's Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized web.vercel.com  add new -> project를 누르면됨  여기서 배포할 프로젝트를 import  하면된다.    deploy 하기전에 프로젝트에서 build시에 오류가 있는지 확인하기 위해서 터미널에 npm run build로 확인해 준다.   이런식으로 에러가 발생하게 된다.    발생하..

📌 에러 발생 배포하기 전에 프로젝트에서 npm run build를 통해 확인해 보는데, 아래와 같은 에러가 발생했다.    이 문제는 해당 프로젝트에서 사용하고 있는 meterial-tailwind 에서 제공하는 태그들을 사용했을 때  이렇게 해당 태그에 필요한 프로퍼티들을 제공하지 않아서 발생하는 에러이다. 하지만 해당 속성들은 실제로 필요하지 않는 (코드만 길어짐) 것들이라 해결 방안은 1. 에러가 나는 모든 태그에 필수 프로퍼티들을 넣어주기  2. index.d.ts 파일을 만들어서  typecript는 이미 존재하는 라이브러리라도 강제로 타입 지정을 다시 해 줄 수 있음  그래서 두 번째 방법으로 에러 해결하였다.  🛠️ 에러 해결    declare module "@material-tail..

📌 에러 발생 배포하기 전에 프로젝트에서 npm run build를 통해 확인해 보는데, 아래와 같은 에러가 발생했다.    확인해 보니,   해당 프로젝트에서 사용중인 Meterial-tailwind-theme-provider에서 문제가 발생한거 같다.  찾아보니 나와 완전 똑같은 에러를 겪고 있는 사람을 찾았음 https://github.com/creativetimofficial/material-tailwind/issues/593: ERROR(TypeScript) Type 'ReactNode' is not assignable to type 'NonNullable'. · I" data-og-description="import { ThemeProvider } from '@material-tailwin..

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(); ..