Hacker House Day 1 (Saturday)

원래 해커 하우스의 첫 날인 금요일에는 다른 일정이 있었다는 것과 개인적인 휴식을 취했다는 것 때문에 참여하지 못했고, 토요일 저녁부터 해커 하우스 1일차를 시작하게 되었다. 해커 하우스를 시작하고 바로 카이로 1 언어에 대해서 배우고 싶었지만 아직 끝내지 못한 일이 남아 있어서 그것부터 마무리해야 했다.

이 일은 컨퍼런스 이벤트와 관련이 있는 일인데, 우리는 컨퍼런스에 등록한 사람들이 이벤트 장소에 입장하기 전에 해당 사람들에 대한 검증이 필요했다. 전에는 사람의 이름과 컨퍼런스 등록 리스트를 직접 확인하여 검증하는 과정을 진행했다. 해당 과정을 더 편하고 쉽게 하기 위해 사람들이 컨퍼런스에 등록할 때 QR코드가 담긴 메일을 전송해주고, 장소에 와서 QR 코드만 스캔하면 검증 과정이 진행되도록 할 것이다.

등록과 검증이 모두 되었는지, 등록만 되었는지, 등록도 되지 않았는지 총 3개의 페이지를 만들어서 QR코드를 스캔하면 해당 정보를 바탕으로 3개의 페이지 중 하나로 리디렉션하도록 하여 검증 과정을 진행하는 것이 목표다. 이 업무를 진행하기 위해서는 QR 코드 스캐너도 마찬가지로 페이지에 구현해야 한다. 모바일 디바이스의 내장 카메라에 접근하여 QR 코드를 인식하고 스캔한 다음 해당 정보를 디코딩하여 페이지 상에 출력할 필요가 있었는데, 웹플로우에서 해당 업무를 진행하려고 보니 사용하는 코드나 파일에 있어 제한적이었다. 카메라에 접근하는 것까지는 Javascript 코드로 구현할 수 있었지만, 카메라 상에서 QR 코드를 인식하기 위해서는 별도의 라이브러리 파일이 필요했다. 하지만 JS 코드로 이루어져 있는 라이브러리 파일을 웹플로우에 업로드하려고 시도해봤더니 웹플로우는 JS 파일을 지원하지 않아 실패하였다 :( 결국 파일을 통해 QR코드 스캐너를 구현하는 것은 어려워지게 되었고, 다른 방안 중 하나인 CDN을 사용해봤다. CDN은 코드가 담겨있는 url에 접근하여 해당 코드를 참조하는 방식이다. 하지만 이 방식을 사용해도 컴퓨터와 모바일 디바이스 모두 QR코드를 인식하지 못했다. 이에 대해 구글링을 해봤는데 웹플로우의 제한성과 IOS 기종의 문제 등 해당 업무를 진행하기가 쉽지 않아 보였다 :((

계속해서 이 문제를 해결하려고 했다면 물론 해결책을 찾았을 것이다. 하지만 이벤트가 얼마 남지 않았다는 것과 스캐너 기기를 구매하면 간단해지는 업무를 굳이 복잡한 방식으로 구현할 필요가 있을까 하는 생각에 우선 바코드 스캐너를 구매하여 다음 업무로 넘어가기로 하였다. 다음 업무는 스캐너 기기로 QR 코드를 스캔하면 연결된 컴퓨터로 디코딩된 해당 정보를 받을 수 있으므로, 이 정보를 컨퍼런스 등록 리스트를 담고 있는 데이터베이스와 대조하여 3가지 경우 중 맞는 페이지로 리디렉션할 수 있게 서버로 해당 정보를 전송하는 업무다. 모든 페이지에 입력 폼을 만들어 QR코드를 스캔하면 정보를 입력칸에 띄워서 자동으로 서버에 전송하는 것이다.

내일 해당 업무를 진행하고 카이로 1 언어에 대해 공부할 예정이다. 해커 하우스와 이태원의 분위기를 느끼고 일주일 동안 카이로와 스타크넷에 대해 많은 것을 배울 수 있었으면 좋겠다 :))

I was unable to attend the first day of the Hacker House on Friday due to other commitments and a personal break, so I started the first day of the Hacker House on Saturday evening. I wanted to start learning the Cairo 1 language right away, but I still had some unfinished business, so I had to finish that first.

This was related to a conference event, and we needed to verify people who had registered for the conference before they entered the event venue. Previously, this was done by manually checking people's names against the conference registration list. To make this process easier and more convenient, when people register for the conference, we will send them an email with a QR code, and when they arrive at the venue, they will only need to scan the QR code to be verified.

The goal is to create three pages for both registered and verified, registered only, and neither registered nor verified, so that when a QR code is scanned, the user is redirected to one of the three pages based on that information to proceed with the verification process. To make this work, we need to implement a QR code scanner on the page as well. I needed to access the mobile device's built-in camera to recognize and scan the QR code, then decode the information and output it on the page, but when I tried to do this in Webflow, I was limited in the code and files I could use. I was able to implement Javascript code to access the camera, but I needed a separate library file to recognize the QR code on the camera. However, when I tried to upload the library file consisting of JS code to Webflow, it failed because Webflow does not support JS files :( Eventually, it became difficult to implement the QR code scanner through a file, so I tried another option: a CDN. CDNs work by accessing the URL containing the code and referencing it. However, both computers and mobile devices were still unable to recognize the QR code. I did some Googling about this, and it seems like it's not easy to do, with webflow limitations and IOS device issues :((

If I had continued to work on this problem, I would have found a solution. However, since the event was just around the corner, I decided to purchase a barcode scanner and move on to the next task, which is to scan the QR code with a scanner device and receive the decoded information on a connected computer. The next task was to scan the QR code with a scanner device and receive the decoded information to a connected computer, which would then send the information to a server where it would be checked against a database containing the conference registration list and redirected to the correct page in one of three cases. Create an input form on every page so that when the QR code is scanned, the information appears in a field and is automatically sent to the server.

Tomorrow I will be working on those tasks and learning about the Cairo 1 language. I hope to feel the atmosphere of Hacker House and Itaewon and learn a lot about Cairo and StarkNet during the week :))