검색 컴포넌트의 Focus,Blur 처리를 고민하다가 결국 해결하던 중 회원가입 API가 완료 되어 회원가입 수정을 하였다. 다 대등을 해뒀다고 생각했지만 아직 덜 된 곳이 꽤 있었다. 역시 실제로 다시 한번 테스트를 해보아야 정확히 파악 할 수 있다...

제품을 검색해서 가져오는 경우 이름이 너무 길어 form이 깨지는 경우가 발생하여 텍스트가 정해진 크기를 벗어나면 잘리게 되는 css 를 적용 하였다. text 길이를 제한 할 때는 아래와 같은 조건이 필요하다. i. width 또는 height가 고정적일 것 ii. overflow: hidden; 을 사용해 영역을 감출 것 iii. 아래줄로 내려가는 것을 막기위해 white-space: nowrap 등이 필요 URL을 /search?product="검색어" 이런식으로 넣어 주기 위해서 쿼리 스트링을 사용 하였다. next를 사용하고 있가에 Router.pushRouter(`/saerch?product=${keyword}`를 적용하고 routes 파일로 가서 URL을 지정해 주었는데 URL에 쿼리스트링을..

검색 기능에서 자동완성 부분 때문에 키워드를 받아오는 부분에 디바운스를 걸어 두었는데 사용자가 검색어를 입력하고 바로 엔터키를 눌러서 검색하는 경우에는 디바운스가 값을 받아오기 전이라서 빈값으로 API를 날리게 되어 에러가 났다. 자동완성의 경우는 타자를 입력할때마다 API가 날아가기 때문에 디바운스를 걸어 입력을 멈추었을때 API가 실행이 되도록 만들었고 엔터키로 검색을 하는 경우의 값은 API를 엔터키를 입력할때 실행하기 때문에 디바운스를 걸지않은 값으로 받아오도록 처리를하여 해결 하였다.

새로운 서비스의 컴포넌트 작업을 진행했다. 디자인과 API가 아직 나오지 않아서 간단한 구현을 목표로 진행을 하였다. 검색 컴포넌트를 이어서 진행을 하였는데 거의 완성 됐다고 생각한 부분이 아직 부족한 부분이 많았다. 검색을 할 경우 자동 완성이 되어 나오는데 자동 완성되어 나온 글자를 클릭할 경우 해당 단어가 검색되도록 그리고 "비타민" 하고 엔터를 치면 해당 단어가 검색되어 지도록 만들었다. 이 부분에서 고민이 되었는데 제품명이 자동완성 되어 지는 경우 해당 단어를 클릭할 경우 바로 제품 상세 페이지로 이동이 되어야 하는지 일단 검색결과 페이지로 이동을 시킬지 아니면 필터 버튼을 만들지 고민이 되었다. 에어비엔비의 검색방식을 이용했으면 좋겠다라는 생각이 들었지만 백엔드 부분의 작업이 동반되어야 해서 ..

라이브러리 버전을 갱신하면서 나는 문법 오류들을 수정해 주었다. () => void 타입 void를 반환하는 함수 타입의 경우 onClick = {() ⇒ handle} 와 같이 처리해야한다. 클릭하는 기능을 원하는 onClick함수에는 void를 반환하는 것은 맞지 않기 때문이다.

오늘은 setValues 부분에서 나는 에러를 해결하였다. setValues는 Formik에서 변경된 값을 적용시켜주는 함수이다. shcema가 일치 하지 않는다는 에러가 발생하였는데 setValues가 실행되는 부분을 지우면 에러가 발생하지 않았다. 에러를 살펴보니 Promise 에러인 것 같았다. 검색을 해보았을때 원인은 2가지 인것 같았다. 1. Promise 객체를 반환하기 때문에 콜백함수를 사용해주어야 한다. 2. onSubmit 이란 form을 제출하는 함수가 있는데 이 함수와 충돌을 한다. 그래서 setValuse의 2번째 인자가 유효성 검사를 할지 말지를 boolean 값으로 받는 인자인데 이 부분을 false로 만드는 것으로 해결을 하였다. onSubmit에서 유효성 검사를 하기 때문에 ..