file input 다루는 법
다루는 법 리액트 앱에서 다루기 어려운 것 중 하나가 바로 form이다. form 안의 input 값의 상태를 일일히 관리해주어야 하고, 각각 validation까지 해준다면 더욱 복 잡해진다. 그래서 react-hook-form…
다루는 법 리액트 앱에서 다루기 어려운 것 중 하나가 바로 form이다. form 안의 input 값의 상태를 일일히 관리해주어야 하고, 각각 validation까지 해준다면 더욱 복 잡해진다. 그래서 react-hook-form…
React의 forwardRef react-hook-form은 기본적으로 를 심어주는 비제어 컴포넌트를 사용한다. 에서 리턴 받은 register를 input의 에 담아, input의 이름으로 값을 가져온다. 그런데 사용하는 input…
타입스크립트의 index signature 앱에서 사용하는 feed의 필드를 아래와 같이 정의했다. 그리고 사용자가 feed를 새로 업로드할 때, 하나의 form 안의 각각의 input에서 가져온 값을 FormData에 key-value…
ModalProvider 만들기 context API를 사용하여 Modal Provider를 만들어보자. (사실 페어가 다 했 다!) Context의 Provider에 과 메서드를 정의하여 Context의 API의 value…
우테코 24주차 기록 놀토 프로젝트 이미지 처리 백엔드와 사진 데이터를 어떻게 보내고 받을 것인지 많은 논의가 있었다. 결국 JSON 형식 대신 form-data 형식으로 body…
babelrc와 webpack.config webpack으로 React App 세팅을 설정해나가다가, TypeScript 설정을 위해 를 설치하게 되었다. babel 공식 문서를 따라 모듈을 세팅하다가, 위 코드의 가 .babelrc…
CRA 없이 svg를 React component로 사용하기 그동안은 CRA로만 리액트 앱을 만들어왔는데, webpack 설정부터 하나하나 하고 보니 svg가 먹통이었다. 원래 svg는 따로 설정을 해줘야 하는데, CRA…