토피넛라떼조아

검색 기능을 구현하다보면 다양한 검색 방식을 사용할 수 있습니다. 그 중 검색 버튼, 엔터 키 등 트리거가 명확한 경우도 있지만, 입력을 마친 시점에 자동으로 검색이 진행되는 경우를 원할 수도 있습니다. 이때 입력할 때마다 검색이 된다면 원치 않는 검색어로 검색을 시도하기 때문에 쿼리 낭비가 심해질 수 있습니다. 이를 개선하기 위해 Debounce를 활용합니다. Input 입력 여기 단순한 Input이 있습니다. 해당 컴포넌트는 다음과 같이 Input 값이 변경될 때마다 onChange함수를 실행합니다. onChange함수는 상위 컴포넌트에서 검색을 요청할 때 사용합니다. 이렇게 구현한다면 입력할 때마다 검색을 실행할 수는 있습니다. 만약 토피넛라떼를 검색하고 싶어 입력을 했다 생각해보겠습니다. 이 경우..

파일 업로드를 할 때, Input태그를 활용하여 기존의 선택 방식이 아닌 영역을 지정해 drag & drop로 업로드하는 방법을 알아보겠습니다. Input과 Label 연결시키기 일단 파일을 업로드시킬 영역을 지정합니다. input 대신 사용할 커스텀 버튼을 만들 때 처럼 label을 활용하여 영역을 설정합니다. // Upload.tsx const Upload = () => { return ( Drag&Drop File Here // 첨부된 파일 리스트 ); }; export default Upload; input의 id와 label의 htmlfor을 연결시켜 주고 입맛에 맞게 css처리합니다. 이벤트 등록 useEffect를 활용해 이벤트 처리를 합니다. const handleDragIn = useCa..

이번 프로젝트에서 이미지 파일을 업로드하여 그것과 비슷한 그림체의 웹툰을 추천해주는 부가기능이 있었습니다. 이 페이지의 기능 구현을 담당하여 필요한 기술들을 학습하면서 배운 내용을 기록해두려합니다. 다음과 같은 화면에서 그림을 업로드 할 수 있게 버튼을 만들어주었는데, 파일을 업로드하는 버튼이 너무 밋밋하여 이를 커스텀하고자 input과 버튼을 연결해서 css를 입혔습니다. // upload.jsx ... // 버튼의 for와 input의 id를 일치시켜 연결시켜준다. {fileImage ? "다시 업로드 하기" : "그림 업로드 하기"} ... const InputBtn = styled.label` box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.5); border: 0.3vw ..