JS QR Code generator 사용하기

• 프로젝트: Co-Building
• 키워드: qr code generator, qr code library, window.location
• 상황
  1. Co-Building의 'Room' 페이지는 동시에 5명까지 접속 가능한 대기방이다.
  2. 대기방을 개설한 후 친구들에게 방 정보를 공유하는 시나리오가 있다. 이 때 단순한 URL 복사에 더해 QR Code를 추가하면 옆에 있는 친구에게 쉽게 공유가 가능할 것이다.
  3. 대기방마다 고유의 QR Code를 삽입하여 URL 공유 기능을 구현하고자 한다.

     

     완성된 Room QR Code 예시

• 해결 방법
  1. QR code를 generate 해주는 라이브러리를 찾아 설치한다.
     https://www.npmjs.com/package/qrcode
     

     qrcode

       yarn add qrcode

     
     
     
  2. Room 페이지의 HTML 렌더링 부분에 canvas tag를 추가한다.
     

       <canvas id="roomCode" style={{ borderRadius: 20 }}></canvas>

     
     
     
  3. QRCode.toCanvas API를 이용해 QR code를 생성한다.
     renderers options를 참고하여 QR code의 색상(color), 크기(scale, width, small) 등을 조절할 수 있다.(https://www.npmjs.com/package/qrcode#renderers-options)
     

       useEffect(() => {
       const canvas = document.getElementById('roomCode');
       QRCode.toCanvas(canvas, location.href, { color: { dark: '#226AF6' } });
     }, []);

     
     + toCanvas 뿐만 아니라, toString, toDataURL 등 다양한 API를 지원한다.
     
     
  4. toCanvas의 두 번째 parameter로 제공하고 싶은 text를 넣으면 된다. 현재 상황에서는 해당 Room의 URL을 제공하고 싶은 것이므로 window.location.href를 넘겨준다.
     
     
  5. 이제 휴대폰으로 QR 코드를 스캔하면 해당 페이지로 바로 접속할 수 있다!