어제 Formik render를 children으로 고쳐준 부분이 다른 형식에서 에러가나서 찾아 보았다. //부모 {props => } //Field Component {props => React.cloneElement(children, props)} 위와 같은 형식에서는 에러가 나는 것이였다. 검색을 하고 여러가지 시도를 해본 결과 내 생각에는 부모에서 부모의 props를 건내주고 다시 자식에서 또 자식의 props를 건내주는 형식이 되어버려 에러가 나는게 아닐까란 생각이 들었다. 그래서 children이 아닌 render와 형식은 똑같지만 지금 버전에서도 지원하는 component로 바꿔주어 해결을 하였다.

Formik 1 버전에서 2 버전으로 업뎃을 하면서 생긴 수정사항들에 대해서 대응하는 작업을 하였다. Formik 2 는 Hook을 기반으로 만들어져 React 16.8.x 이상이어야 하고 타입스크립트를 사용한다고 하면 unknown 타입을 사용하기 때문에 TypeScript 3.0 이상을 사용해야 한다. 1. resetForm // Formik 1 resetForm(nextValues); // Formik 2 resetForm({ values: nextValues /* errors, touched, etc ... */ }); 2. 필드에서 기존에는 render로 props를 내려 주었는데 앞으로 버전에서는 children으로 받는 방식을 사용할 것이기 때문에 아래와 같은 방식으로 변경을 해야한다. (공..

withFormik 을 사용하요 formReset을 적용해 주려고 했는데 프로젝트 구조상 적용이 불가능해 보였다. 근데 어차피 Formik을 업데이트 하고 그에 맞게 Form을 수정해야 했기에 일단 뒤로 미뤄뒀다. 프레임워크와 라이브러리 업데이트를 안한지 꽤 지나서 버전 차이가 나게 되었다. 그래서 버전 업을 시키고 우선 적으로 에러나는 부분들을 수정해 주었다. 이번주는 계속 버전 업하고 에러 난느 곳들 찾아서 수정해 나가는 작업을 진행할 것 같다.

검색 엔진을 어떻게 구현할지 고민을 해보았다. 기존 프로덕트에 있는 검색 서비스를 가져와서 이용해 보기위해서 기존의 코드를 살펴 보았다. lodash 의 debounce를 사용하여 fetch를 키를 누르고 난 후 750ms 뒤에 실행이 되도록 설정을 해두었다. 그리고 제품이 있을 경우와 없을 경우를 나눠 onChange 함수를 만들어 나뉘어져 있었다. input tag가 하위 컴포넌트이기 때문에 input 창의 포커스를 확인하기 위해 useRef 를 사용하여 참조하는 형태로 만들어져 있었다. 내가 필요한 부분들을 가져와 간단하게 만들어 보았는데 타입 설정에서 에러가 발생 하였다. 타입 공부를 좀더 해보아야 겠다.

react pagination 라이브러리들을 살펴 보았다. 여러 라이브러리들 중 hook를 사용하는 라이브러리 두가지를 선택하였다. 사용법은 다 비슷비슷 하였다. 컴포넌트에 props를 내려주어 내가 어떻게 페이지네이션 할지 선택하는 방식이였다. 1. react-hook-paginator https://www.npmjs.com/package/react-hooks-paginator 위에 나와 있는 API들 외에 더많은 API 가 있으니 위 링크로 들어가서 확인해보면 되겠다. 여기서 아쉬운 점은 pafeNeighbours가 2가 최대값이고 pageLimit 도 20이 한계였다. 그래서 라이브러리 코드를 수정해줘야 할 필요가 있다. typescript가 아닌것도 아쉬웠다. 2. react-pagination-..

이미지 업로더 라이브러리인 react-dropzone 에 대해서 공부를 하였다. const Previews = (props) => { //업로드하려는 파일의 정보를 담는다. const [files, setFiles] = useState([]); // 업로드 하려는 파일의 URL을 생성하고 파일 name 등의 정보를 files 에 담아준다. const onDrop = (acceptedFiles) => { setFiles(acceptedFiles.map(file => Object.assign(file, { preview: URL.createObjectURL(file) }))); } const { getRootProps, getInputProps } = useDropzone({ accept: 'image/*'..