React에 서명판 만들기

최근에 한 고객이 무선 펜 마우스로 서명할 수 있는 폼을 만들어 달라고 요구했다.고객의 목표는 보고서에 사용자 서명을 받는 것입니다. 이 보고서는 미래의 감사에 사용될 것입니다.
처음에 나는 처음부터 자신의 사인판을 만드는 것을 고려하고 있었다.하지만, 나는 이렇게 할 시간이 없다.이 기능은 일주일 내에 출시되어야 한다.불행히도 이것은 현실 생활의 현실이다.이것이 바로 내가 이 구체적인 사례를 쓰고 싶은 이유다.프로그램의 모든 기능을 처음부터 구축할 시간이 항상 있는 것은 아니다.때때로 다른 개발자가 만든 라이브러리에 의존해야 합니다.본고는 초보자들이 서로 다른 라이브러리를 조합해서 사용할 수 있는 제품을 만드는 방법을 이해하도록 도와줄 것이다.
자, 사인판을 구축하겠습니다.우선 나는 user story을 썼다.다음은 우리가 구축하고자 하는 사용자 이야기입니다.

사용자가 본 버튼은 팝업 창

을 여는 데 사용됩니다.

팝업 창이 열리면 캔버스에서

을 보고 그릴 수 있습니다.

사용자는 [닫기] 버튼을 사용하여 팝업 창을 종료하고 [지우기] 버튼을 사용하여 캔버스를 지우거나 [저장] 버튼을 사용하여 서명을 이미지로 저장할 수 있습니다.

이제 우리가 무엇을 구축하고 있는지 알았으니 인코딩을 시작합시다.우리는 사용자 이야기 목록 항목을 이정표로 사용할 수 있다.

사용자가 버튼을 보면 팝업 창을 열 수 있습니다

나는 React를 사용하여 이 작업을 완성할 것이기 때문에create React 프로그램을 사용하여 프로젝트를 안내할 것이다.
이렇게 하려면 터미널에서 다음 명령만 입력하면 됩니다.

npx create-react-app signature-pad

react 응용 프로그램 생성에 대한 자세한 내용은 이 Github Repo을 참조하십시오.
프로젝트가 준비되면 폴더를 탐색하고 코드 편집기를 시작합니다.저로서는 VS Code을 사용하고 있습니다.

# navigate to the project folder in your terminal
cd signature-pad

# command to start VS Code once you are in root folder of the project
code .

이제 다음 명령을 입력하여 프로젝트를 시작하도록 모든 것을 설정합니다.

# start project
npm start

이것은 프로젝트를 시작한 후에 우리가 보아야 할 것이다.
App.js 파일을 열면 다음을 볼 수 있습니다.

이 모든 코드에서 벗어나 우리가 필요로 하는 일을 추가합시다.사용자의 이야기에 따라 서명판이 있는 팝업 창을 열 수 있는 단추

이것이 바로 우리의 응용 프로그램의 현재 모습이다.

이 부분의 마지막 단계는 단추를 눌렀을 때 팝업 창을 표시하는 것입니다.이 점을 실현하는 데 도움을 줄 수 있는 좋은 라이브러리가 있다.설치하려면

npm install --save reactjs-popup

이 라이브러리는 팝업 모형, 도구 설명 및 중첩 메뉴를 만드는 데 사용할 수 있습니다.이 예에서, 우리는 그것을 어떻게 사용해서 팝업 모델을 만드는지 중점적으로 소개할 것이다.그것에 대한 더 많은 정보는 그들이 매우 유용하게 사용하는 documentation page을 보십시오
라이브러리를 설치한 후 App.js 파일을 가져옵니다.다음은 렌더링 방법에 Popup 구성 요소를 추가합니다.이 조립품에는 많은 도구가 포함되어 있다.우리의 예에서, 우리는 주로 두 가지를 주목한다. 그것이 바로 모드 도구 (기본적으로 이것은 잘못된 것이고, 이것은 도구 알림을 얻을 수 있다) 와 트리거 도구이다. 트리거 도구는 트리거 팝업 창의 구성 요소를 수신한다.우리의 예에서, 이것은 우리가 이미 만든 단추입니다.
지금 우리가 버튼을 누르면 팝업 창을 얻을 수 있을 것이다.팝업 창의 내용이 Popup 구성 요소로 들어갑니다.

이것이 바로 우리가 지금 가져야 할 것이다.

우리는 이미 사용자 이야기의 첫 부분을 성공적으로 완성했다.이제 다음 거 가자!

팝업 창이 열리면 캔버스에서 보고 그릴 수 있습니다

팝업 창에 화포를 만들기 위해서,react 서명 화포를 사용합니다.이것은 강력한 라이브러리로 서명판을 사용하기 매우 쉽다.특히pad에clear와save 같은 기능을 추가하는 것을 고려하기 시작했을 때
설치하려면 다음을 입력합니다.

npm install --save react-signature-canvas

설치하면 SignatureCanvas 구성 요소를 가져와 Popup 구성 요소에 넣습니다.이게 다야!
현재, 우리의 팝업 창에 화포가 하나 있다.이것이 바로 코드의 모습이다.

이것이 바로 우리 응용 프로그램이 표시해야 할 내용입니다.

사용자 이야기의 다음 항목으로 넘어가기 전에 캔버스에 스타일을 추가합니다.내가 해야 할 일은 우리의 화포에 테두리를 덧대어 우리가 그것을 쉽게 식별하고 너비와 높이를 주는 것이다.SignaturePad 모듈에는 canvasProps이라는 도구가 있는데, 이것은 우리가 속성을 화포에 전달할 수 있도록 한다.이 예에서, 나는 캔버스에'signatureCanvas'라는 종류를 제공할 것이다.
sigCanvas.css이라는 css 파일을 가져왔습니다.이것은 내가 화포와 관련된 모든 양식을 놓을 곳이다.

결과는 다음과 같아야 한다.

좋아, 우리의 마지막 걸음을 준비했어.

[닫기] 버튼으로 팝업 창을 종료하거나 [지우기] 버튼으로 캔버스를 지우거나 [저장] 버튼으로 서명을 이미지로 저장할 수 있습니다.

닫기 버튼부터 시작합시다.온클릭이 있는 단추를 추가합니다. 온클릭은 팝업 창을 닫는 방식입니다.reactjs-popup 문서에서 함수를 하위 함수로 Popup 구성 요소에 제공하는 것을 권장합니다.이 함수에는 닫힌 이벤트를 처리하고 팝업 창에 필요한 구성 요소를 되돌려주는 인자 close이 있습니다.
이 단추를 통과하지 않으면 팝업 창을 닫을 수 없습니다.이를 위해 closeOnDocumentClick 아이템을 전달하고 진가를 전달해야 합니다.

이것이 바로 우리의 응용 프로그램의 현재 모습이다.

다음에 우리는 캔버스를 제거하기 위해 버튼이 필요하다.react-signature-canvas은 화포를 조종하는 데 도움이 되는 몇 가지 방법을 제공했다.이런 방법을 사용하기 위해서는 화포를 얻는 순간이 필요하다.이는 React REF를 통해 수행할 수 있습니다.
리액션 훅으로 이거 하자.우선, 우리는 sigCanvas 갈고리를 사용하여 useRef이라는 리프를 만들었고, 초기값은 빈 대상이었다.다음에, 우리는 Ref라는 도구를 사용하여 SignaturePad 구성 요소에 전달합니다. 마지막으로, 우리는 clear이라는 함수를 만들었습니다. 이 함수는 '지우기' 단추를 눌렀을 때 호출됩니다.
clear 함수에서, 우리는 canvas ref clear() 호출 방법 sigCanvas을 통해서만 호출할 수 있습니다.나는 이것이 여러 단계라는 것을 깨달았기 때문에 아래의 코드에 주석을 썼다.

이것이 바로 우리의 응용 프로그램의 현재 모습이다.

이제 마지막 단추입니다. 단추를 저장합니다.이 단추는 그림을 대표하는base64 문자열만 출력해야 합니다.이를 사용하여 데이터베이스에 저장하거나 서버에 이미지를 업로드할 수 있습니다.우리의 예에서, 우리는 어떤 서버에도 연결되지 않기 때문에, 베이스 64 코드를 컨트롤러에 기록하기만 하면 된다.react-signature-canvas에는 getTrimmedCanvas()이라는 방법이 있는데 캔버스에서 공백을 잘라내고 그림을 최적화하는base64 문자열을 되돌려줍니다.이 모든 것은 저희 sigCanvas을 통해 참고할 수 있습니다.

이것이 바로 우리의 응용 프로그램의 현재 모습이다.

그래!모든 기본 기능이 완료되었습니다!
나는 정말 이 항목에서 일부분을 더 늘리고 싶다.화면에 저장된 서명을 출력하는 것이지, 기록만 하는 것이 아닙니다.
팝업 버튼 아래에 이미지 태그를 간단하게 추가하여 이미지 URL에 전달할 수 있습니다.물론, 이 이미지 URL은 우리가 컨트롤러에 로그인한 내용일 것이기 때문에, 우리는 그것을 상태가 아니라 상태에 저장할 수 있다.

결과는 다음과 같습니다.

이 사람들만!우리는 우리의 사용자 이야기를 성공적으로 완성했다.물론 개선할 여지는 있지만 모든 기본 기능은 존재한다.
link을 따라 코드를 수정하고 더 많은 기능을 추가할 수 있습니다
질문이 있습니까?댓글 또는
좋아요!이제 와서 공부해요.👨🏿‍💻