[JS]QR code생성기 (qrcode generator)

우리 일상에서 qr코드는 흔하게 사용되는 기술이고 매우 유용하게 사용되고 있습니다

간편하게 신원을 조회하거나 사이트에 접근하기 편하기 때문인거 같아요 

 

그 qr코드를 어떤 식으로 만드는 지 실습을 통해 알아보도록 하겠습니다

 

이 프로그램에 들어가게되면 텍스트나 url을 입력하는 Input창과 생성하기 버튼이 먼저 눈에 들어옵니다. 

input에 원하는 사이트를 입력하면 해당 사이트에 대한 qr코드가 생성이됩니다.

이 qr코드가 잘 생성이 된건지 확인 해보기 위해서 카메라를 통해 확인을 해보았습니다. 

오호라 사이트가 뜨는 걸 보니 잘 작동이 되고 있습니다.

---

이번에는 어떤식으로 코드가 진행이되었는지 살펴 보도록 하겠습니다.

1. 변수 선언 및 DOM 요소 선택

let imgBox = document.getElementById("ImgBox");
let qrImage = document.getElementById("qrImage");
let imgText = document.getElementById("qrText");

이 프로젝트에서 사용되는 변수들은 다음과 같습니다. 

- imgbox는 QR코드가 생성될 때 이미지를 보여줄 <div id="imgBox">입니다. 나중에 이 div에 show-img클래스를 추가하여 이미지가 보이도록 제어할 수 있습니다. 

- qrImage는 <img>태그로 QR코드 이미지가 표시될 곳으로 사용자가 입력한 텍스트로 QR코드를 생성한 후, 이 태그의 src속성을 변경해 이미지가 나타나게 됩니다. 

- imgText는 사용자가 텍스트 또는 URL을 입력하는 input필드를 선택합니다. 이 값을 읽어서 qr코드를 생성하는데 사용합니다. 

2. QR 코드 생성 함수 (generateQR)

function generateQR() {
  if (qrText.value.length > 0) {
    qrImage.src =
      "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" +
      qrText.value;
    imgBox.classList.add("show-img");
  } else {
    qrText.classList.add("error");
    setTimeout(() => {
      qrText.classList.remove("error");
    }, 1000);
  }
}

generatorQR함수는 QR코드 생성버튼을 눌렀을 때 호출됩니다. 

 

1. 입력값 확인 

if(qrText.value.length>0)

사용자가 텍스트 또는 URL을 입력했는지 확인하는 조건문입니다. 만약 입력 값이 있다면 QR코드를 생성하는 단계로 넘어가고, 입력값이 없으면 오류처리가 실행됩니다. 

 

2. QR코드 생성 및 이미지 업뎃

qrImage.src =
  "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" +
  qrText.value;

입력값이 있을 경우 QR코드 이미지를 생성합니다. qrImage.src는 img태그의 src속성을 변경하여 이미지를 로드하는 역할을 합니다. 여기서 src에 설정된 URL은 QR코드 생성 API인 

https://api.qrserver.com/v1/create-qr-code/

입니다. 여기서 이 API는 size와 data라는 두개의 파라미터를 사용합니다. size=150x150으로 이 사이즈로 코드를 생성합니다. data=뒤에는 사용자가 입력한 텍스트나 URL이 추가됩니다. 즉 입력한 데이터가 QR코드에 인코딩 됩니다. 

 

3. 이미지 박스 표시 

imgBox.classList.add("show-img");

qr코드가 성공적으로 생성되면, imgBox에 show-img클래스를 추가합니다. 이 클래스는 CSS에서 정의된대로 이미지 박스의 max-height값을 늘려 QR코드 이미지를 보여주도록 합니다. 초기에는 이미지 박스의 높이가 0이므로 QR코드가 보이지 않다가 show-img클래스가 추가되면 이미지가 자연스럽게 나타납니다. 

 

4. 오류 처리 

qrText.classList.add("error");
setTimeout(() => {
  qrText.classList.remove("error");
}, 1000);

만약 입력 값이 없다면 qrText에 error클래스를 추가하여 입력 필드가 흔들리는 애니메이션이 적용됩니다. 

이건 css 에서 @keyframes shake로 정의된 애니메이션 입니다. 

setTimeout함수는 1초 후에 error클래스를 제거합니다. 이는 애니메이션이 반복되지 않고 한번만 실행되게 합니다. 

 

 

이번 실습은 생각보다 코드가 짧았지만 유용한 결과를 얻을 수 있었습니다. 

재밌는 실습이었어요