검색 엔진을 어떻게 구현할지 고민을 해보았다. 기존 프로덕트에 있는 검색 서비스를 가져와서 이용해 보기위해서 기존의 코드를 살펴 보았다. 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/*'..

오늘은 next.js 에서 koa를 사용하여 custom server를 셋팅하는 방법에 대해서 공부하고 지금 프로젝트에 적용된 server 가 어떻게 돌아가는지에 대해서 파악했다. 아직 완전히 이해는 안가지만 대충 어덯게 돌아가는지 정도는 알게 되었다. 직접 만들어 보면 좀 더 이해가 될거 같다. 비타민 검사 서비스에서 지난번 발생한 IE에서만 질문이 넘어가지 않는 버그가 이번엔 사파리에서도 발견이 되었다. 저번에도 그냥 두니 갑자기 실해이 되었는데 이번에도 한창 해결하려고 보는중에 갑자기해결이 되었다. 사수 말로는 useRef의 문제 같다고 하여 그 부분을 살펴 보았는데 별 다른 이상은 발견하지 못하였다.

i18n 을 적용하기 위해 next.js 에 대해서 공부를 하다가 webpack에 대해서 간략하게 공부를 하게 되었다. 웹팩이란 모듈 번들러로 아래의 그림과 같이 다양한 자원들을 조합해서 하나의 결과물을 만드는 도구이며 모듈 번들링이란 많은 자원들을 하나의 파일로 병합,압축 해주는 동작을 말한다고 한다.

속이 찬 버튼, 보더라인이 있는 버튼, 텍스트 버튼, 아이콘을 가지는 버튼, 원형 버튼을 전부 만들었고 만든 버튼들을 다시 한번 확인하고 수정하는 작업을 진행하였다. 그리고 기존의 버튼들을 이 버튼들로 바꿔주는 작업을 진행 하였다.