Web (25) 썸네일형 리스트형 [React] react-mentions MentionsInput 한글 두번 입력되는 이슈 해결 react mention에서 MentionsInput을 이용하여 텍스트 입력 기능을 만들던 중 영어는 괜찮은데 한글만 두번씩 입력되는 버그가 있었다 문서에서 제공하는 onKeyDown 대신 문서에 없는 onKeyPress을 사용하면 이슈 해결 완료 [React] AxiosError, 401 (Unauthorized), Request failed with status code 401 챗 보내는 기능을 구현 중에 Axios api post 중 다음과 같은 에러를 마주하였다. Request failed with status code 401..? 로그인이 필요하단다. 그치만 나는 login 후 사용자의 데이터를 받아오고 있는 상태 useCallback을 사용해서 캐시 때문에 그런건가? 싶어서 userData, myData, chatData 등 다 추가해보지만 안되는 상황 표준 CORS요청은 기본적으로 쿠키를 설정하거나 보낼 수 없기 때문에, 결과적으론, 수동으로 CORS 요청에 쿠키값을 넣어줘야 하는 데 이를 빼먹었던 것 withCredentials의 값을 true로 설정하여 client 와 server 가 쿠키 값을 공유해주자 해결완료!! [Javascript] 자바스크립트 라이브러리 Socket.io 사용하면서 socket을 콘솔로 찍어봤을때 sendBuffer가 []이 아니라 값이 담겨있다? 데이터를 서버로 보내야 하는데 서버가 끊겨서 못 보내고 있다는 것을 의미 웹소켓에서는 제공하지 않는 기능 id의 8번으로 로그인했다는 것을 서버에 알림 서버에서 onlineList에 로그인한 8번을 뿌려줌 2, 3, 2, 3 은 Pingpong으로 Socket.io가 연결이 잘 유지되고 있나 확인하는 것 [Typescript] is not assignable to type 'Dispatch<SetStateAction<T>>' 리액트 훅을 커스텀해서 만들던 중 typescript 관련해서 다음과 같은 에러 문구를 만났다 useState의 함수의 타입을 제너럴타입 T만 받는다고 선언해놓고 실제로는 undefined값을 받고 있으니 나는 에러 useState의 초기값을 설정해주면 해결완료 import { useCallback, useState, Dispatch, SetStateAction, ChangeEvent } from "react"; type ReturnTypes = [T, (e: any) => void, Dispatch]; const useInput = (initialData: T): ReturnTypes => { // const [value, setValue]: [T, (value: T) => void] = useStat.. [TS] Typescript 설정 파일, tsconfig에 대하여 create-react-app 없이 React 설정 중에 만들게 된 tsconfig.json 파일. 이것은 무엇이며, 왜 필요한 걸까? tsconfig.json 파일에 대한 얘기를 하기 전에 Javascript와 Typescript에 대해서 간단히 짚고 넘어가야 보자. BACKGROUND.. Javascript는 어떤 타입을 반환하는 지에 대해 명시되지 않는 동적 타입의 인터프리터 언어이다. 런타임에서 오류를 발견할 수 있다. 반면, Typescript는 Javascript의 확장형으로 어떤 타입을 반환하는 지에 대해 명시된 정적 타입의 컴파일 언어이다. 컴파일 단계에서 오류를 발견할 수 있다. Typescript를 사용하면 타입을 명시하는 만큼 손이 더 많이 가겠지만, 타입을 명시하였기 때문에 Java.. [React] CRA 없이 React 개발 환경 구축하기(2) - tsconfig, webpack, plugin 설정 보호되어 있는 글입니다. [React] CRA 없이 React 개발 환경 구축하기(1) - npm, eslint, prettier 설정 평소 리액트 프로젝트를 생성할 때 CRA(create-react-app)를 사용하여 손쉽게 개발 환경을 셋팅할 수 있다. 이렇게만 개발 환경을 구축하다 보니 바벨, 웹팩에 대해 제대로 모르는 것 같아 직접 셋팅을 해보면서 공부하는 기회를 가져보았다. node가 설치되어 있다는 전제 하에 다음과 같이 진행한다. 1. npm package 셋팅 node 프로젝트의 시작은 > npm init 명령어 입력시 아래와 같이 나오는 데, 이때 package name만 npm의 패키지명과 겹치지 않도록 주의하기해서 정해도록 한다 eongjieun@jeongjieun-ui-MacBookPro alecture % npm init This utility will walk you through creating a packag.. [NPM] npm i gyp 에러 npm install 시, 아래와 같이 에러가 발생하는 경우가 있다. jeongjieun@jeongjieun-ui-MacBookPro back % npm install npm ERR! code 1 npm ERR! path /Users/jeongjieun/Documents/dev/sleact/back/node_modules/bcrypt npm ERR! command failed npm ERR! command sh -c node-gyp rebuild npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@8.3.0 npm ERR! gyp info using node@16.13.2 | darwin | arm64 npm ER.. 이전 1 2 3 4 다음
