Electronic Jeremy Record

웹 개발, 특히 프론트앤드 개발을 하다 보면 Form Control을 할 일이 자주 있다. 로그인, 회원 가입, 게시물 작성 등 꽤 자주 활용하게 된다. 보통 Form에 입력된 값들은 DB에 넣거나 조회하는 등 할 때 사용되는데 Submit 하기 전에 입력을 제대로 했는지, 빠진 값들은 없는지 하는 Validation 과정을 거친다. 이런 일련의 과정들을 매우 쉽게 구현할 수 있는 것이 있어 소개하고자 한다. "React Hook Form" 이다. React Hook Form 의 장점은 1. 코드 량이 적다. 2. Validation이 강력하다. 3. Error 잡기 좋다. 4. Input Control 유용하다 5. 이벤트를 신경쓰지 않아도 된다. 6. Input 처리가 간편하다 그럼 React Hoo..

Input 의 자동 완성 기능은 이런 걸 말한다. 특정 키워드를 입력하였을 때 해당 키워드가 포함되어 있는 키워드를 제공해주는 것을 말한다. 예전 카카오 코딩 테스트 시에도 해당 기능을 구현하라 는 문제가 나온 적이 있다. 많은 Front-End 개발자들은 대부분 Javascript를 통해 onChange event를 통해 키워드를 받고 해당 키워드를 API 등으로 DB에 비교해서 List Tag를 띄워주는 식 이었을 것이다. 나도 그랬다. 그런데 이번에 새로운걸 발견하면서 놀라움을 금치 못했다. 그것이 바로 DataList다 바로 코드로 보겠다 Naver 검색창 select 구문을 사용해본 사람이라면 저 옵션이 무엇을 뜻하는지 알 것이다. 여기서 필요한 것은 검색 입력을 받을 input과 검색 결과를 ..