Hengxi's 개발 블로그

이번에는 이미지 크롭 기능을 구현해보았다. 여러 라이브러리가 있겠지만, 사용하기 쉽고 간단한 react-easy-crop이라는 라이브러리를 사용했다. 라이브러리 사용보다는 스타일을 커스텀하는 게 더 어려웠던 듯...ㅎ react-easy-crop 공식 github https://github.com/ricardo-ch/react-easy-crop 기본 예제 코드들을 볼 수 있어 많은 도움이 되었다. 완성된 영상부터 올려보았다. 일단 기본적인 설치부터 하자 yarn add react-easy-crop or npm install react-easy-crop --save image crop 컴포넌트 만들어주기 //imageCropper.js import React, { useCallback, useState }..

현재 진행하는 프로젝트에서 이메일 자동완성 기능을 필요로 하여 기능 구현을 해보았다. 처음에는 구글링을 하면 간단하게 구현할 수 있을 것이라고 생각했지만, 이메일 자동 완성 기능을 구현해 놓은 코드는 없었다... 그래서 HTML에 datalist 태그를 이용하여 간단하게 구현을 했는데, 안타깝게도 스타일을 줄 수 없어 빠꾸 먹고... javascript로 열심히 기능을 구현했다. 아래는 쿠팡의 로그인 화면으로 이메일 자동완성 기능을 쿠팡처럼 구현하고자 했다. 자주 사용하는 이메일 리스트와 기능 구현에 필요한 state 선언 const FrequencyEmails = [ '@naver.com', '@gmail.com', '@daum.net', '@hanmail.net', '@yahoo.com', '@out..