개발자가 된 감자

next-auth 를 사용한 로그인 토큰 설정 중 해당 오류가 발생했다.이 오류는 TypeScript에서 User 또는 AdapterUser 타입에 accessToken 속성이 정의되어 있지 않기 때문에 발생했다.이를 해결하려면 User 타입에 accessToken 속성을 추가하여 타입 선언을 확장해야 한다. 1. types/next-auth.d.ts 파일 생성프로젝트 루트 디렉토리에 types 폴더를 만들거나, 본인이 기존에 사용하고 있는 types 폴더 하위에types/next-auth.d.ts 파일을 생성한다. 이 파일에서 User 타입을 확장시킨다.import NextAuth from "next-auth";declare module "next-auth" { interface User { i..

React 프로젝트 진행 중 TS + Recoil 을 이용한 sessionStorage에서 받아온 데이터를 수정하면서 해당 오류가 발생했다. Uncaught TypeError: Cannot assign to read only property '0' of object '[object Array]'위 내용처럼 read only인, 즉 읽기 전용인 데이터를 수정하려고 하면서 발생한 것으로 보인다. 아래 코드처럼 받아온 배열 데이터를 reverse() 시키면서 오류가 났다.const result = e.keyPath?.reverse().map((path) => { return { title: path };}); 해당 데이터를 스프레드 연산자를 통한 깊은 복사 처리 후, 다시 reverse() 했더니 문제없이 ..

nextJS 개발 도중 antd 오류가 발생했다.warning: [antd: compatible] antd v5 support react is 16 ~ 18. see https://u.ant.design/v5-for-19 for compatible. 이상하게 자꾸 버튼 클릭할 때마다 웹 좌측 하단에 에러 메세지가 떴다. "> 해결 방법package.jsonnext version 15.1.4 > 14.1.0 next의 버전을 낮춰주니 해결됐다.

env란?환경 변수 파일을 의미하고, 중요한 key 값이나 DB 비밀번호 등 보안이 필요한 특정 값을 변수에 담아어플리케이션에서 활용할 수 있도록 해주는 설정 파일이다.1. 루트 디렉토리에 .env 파일 생성 후 .gitignore 파일에 .env 추가 하기2. 환경 변수 생성하기REACT_APP_{변수명} 형식 및 대문자로 작성 하는 규칙이 있으므로 참고하자. 3. 환경 변수 사용하기사용하려는 컴포넌트에서 process.env.REACT_APP_{변수명} 으로 접근이 가능하다.  환경 변수가  정상적으로 적용 됨을 확인할 수 있다.

antd 를 이용한 채팅방 개발 중 스크롤 조정이 필요해졌다.채팅 박스 내에 말풍선이 많아져 일정 높이를 넘길 경우 가장 하단의 말풍선을 볼 수 있도록 해야했다.나는 태그의 row 추가 방식으로 말풍선을 추가하고 있었고, 그래서 Table 스크롤을 조정했다.  1. React.useRef 훅을 사용하여 Table 컴포넌트에 대한 참조를 생성하기아래 코드는 Table 컴포넌트의 ref 속성 타입을 사용하여 tblRef라는 참조를 생성한다. 이를 통해 Table 컴포넌트의 하위 DOM 요소나 React 인스턴스에 직접 접근할 수 있게 된다.const tblRef: Parameters[0]["ref"] = React.useRef(null);- tblRef: 생성된 참조의 이름.- Parameters[0]["..

리액트에서 fetch() 를 이용한 데이터를 요청하는 도중 오류가 발생했다. CORS교차 출처 리소스 공유 (Cross-Origin Resource Sharing, CORS)는 브라우저가 자신의 출처가 아닌 다른 어떤 출처(도메인, 스킴 혹은 포트)로부터 자원을 로딩하는 것을 허용하도록 서버가 허가 해주는 HTTP 헤더 기반 메커니즘.  보안 상의 이유로 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한한다.예를 들어, fetch() 와 XMLHttpRequest 는 동일 출처 정책을 따른다. 이는 이러한 API를 사용하는 웹 애플리케이션이 애플리케이션이 로드된 동일한 출처에서만 리소스를 요청할 수 있으며, 다른 출처의 응답에 올바른 CORS 헤더가 포함되어 있지 않는 한 오류가 발생할 수 ..

1. 다운로드 사이트 접속https://nodejs.org/en/download/package-manager Node.js — Download Node.js®Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 2. PowerShell 에서 fnm 다운로드fnm을 설치하면 fnm 명령어로 빠르게 node.js를 다운로드 받을 수 있다.# installs fnm (Fast Node Manager)winget install Schniz.fnm 3. PowerShell 프로필 변경~\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1** 만약 해당 프로필 파일..