Web/react (11) 썸네일형 리스트형 [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 가 쿠키 값을 공유해주자 해결완료!! [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.. [NPM] 모듈 삭제시 주의사항 회사에서 프로젝트에 대한 개발을 완료했는데 서버담당자로부터 현재 사용중인 서버가 제공하는 용량을 초과하여 배포를 할 수 없다는 답을 받았다. 여러 사람들의 손을 거쳐왔다보니 같은 기능을 구현하는데도 서로 다른 라이브러리를 사용하고 있고 여러모로 코드가 깨끗하지 않은 프로젝트였다. 결국 사용중이지 않은 모듈을 삭제하거나 모듈을 통일하는 작업을 노가다로 진행하기로 했는데, package json을 직접 건드려보는 나의 첫 경험이였다. 이때, 했던 실수가 package-lock.json에는 있는 모듈이 package.json에는 없으면 무조건 삭제를 해버렸던 것이다. 굉장히 초보적인 실수지만, 혹시나 나 같은 실수를 하지 않기를 바라는 마음에 글을 적어본다. package.json에는 없는 모듈인데 pack.. [React.js] 노마드코더 Movie App 서비스 만들기 #4 Making the Movie App Data fetch하기 일반적으로 자바스크립트에서 data을 fetch할 때 Fetch()를 사용하지만, 여기선 Aixios를 사용할 것이다. 1. Axios를 설치 + import 하기 Axios - Axios는 fetch를 감싼 얇은 레이어라고 볼 수 있다. - Axios 설치 : npm i axios - Axios import : import axios from 'axois'; (import Axios from 'axois'; X) 2. Axios.get() 사용하기 omponentDidMount() 에 axios.get( url )을 입력한다. 다음 내가 사용할 Movie API는 노마드표 API (https://yts-proxy.now.sh/list_movies.json)이다 여기서 axios를.. [React.js] 노마드코더 Movie App 서비스 만들기 #3 State 여태 사용한 Component는 function App( ){} 가 function component 형태라면, class App extends React.Component {} 는 class component형태이다. 여기서 class는 javascript에서 왔다. 이때 extends React.Component 를 하는 이유? React.Component가 가진 것들 중 State를 불러오겠다는 의미이다. 왜냐하면 컴포넌트를 만들 때마다 모든 것을 만들고 싶지 않으니까 있는 것에서 가져다 사용하여 쓰겠다는 것이다. 이러한 예 : Human에서 확장된 Baby, Cell phone에서 확장된 iphone 정도가 있겠다. ex) Baby가 Human에서 확장되고, Human의 모든 것(특징)을 가져올 .. 이전 1 2 다음
