- 호텔에서 객실문을 열 때 키를 이용하는데 이것은 분실의 우려가 있다. 그래서 QR code로 간단하면서 키를 분실하지 않도록 하는 어플리케이션.
- Front: React, Typescript
- Back: go
- hardware: python
- 디자인
- 서비스 접속 초기화면으로 로그인 또는 회원가입 화면으로 이동할 수 있습니다.
| 초기화면 |
|---|
|
- 서비스에 로그인 할 수 있습니다.
- 아이디 또는 비밀번호에 오류가 발생하면 오류 메시지가 보이고 로그인을 할 수 없습니다.
| 로그인 화면 |
|---|
 |
- 서비스에 회원가입 할 수 있습니다.
- 개인 또는 기업으로 가입을 할 수 있습니다.
- 아이디가 중복될 경우 또는 비밀번호가 특정형식에 맞지 않는 경우 비밀번호가 일치하지 않는 경우 경고 문자가 보이며 회원가입을 할 수 없습니다.
| 회원가입 화면 |
|---|
 |
- 예약할 수 있는 호텔 리스트를 볼 수 있습니다.
- 검색을 통해 특정 호텔을 찾을 수 있습니다.
| 예약 화면 |
|---|
 |
- 호텔에 대한 상세 정보를 볼 수 있으며 예약을 할 수 있습니다.
| 호텔 상세 화면 |
|---|
 |
- 내가 예약한 호텔에 대한 정보를 볼 수 있습니다.
- 해당 페이지에 나오는 QR code를 통해 체크인을 할 수 있습니다.
| 내 예약 화면 |
|---|
 |
- 클라이언트의 qr code 값과 도어락의 값을 어떻게 일치 시켜야 하는지.
- 어떻게 보안이 허술하지 않게 할 수 있는지.
- 이미지가 불러와지지 않는 문제점.
- JQuery로 작성된 코드 개선.
- 클라이언트에서 호텔이름과 방정보를 넘겨주면 서버에서 넘겨받은 qr값과 미리 정해놓은 seed값으로 랜덤함수를 통해 QR code 값을 만듭니다. 이 때 seed값은 클라이언트와 하드웨어와 값이 같아야하고, 랜덤함수 또한 같아야한다. 이렇게하면 seed값이 알려지지 않는 이상 보안적인 부분이 해결됩니다.
- js의 number 자료형의 범위가 64비트 부동 소수점이고, python의 int의 범위는 arbitrary-precision을 가지므로 크기의 제한이 없다. 그래서 js의 자료형의 범위에 맞추어 seed값을 설정하였습니다.
- React에서 form을 관리할 때 어떻게 더 성능을 좋게 관리할 수 있을까에 대해 고민을 하던중 react hook form 라이브러리를 찾게되었습니다. react hook form은 제어되는 폼 컴포넌트를 사용하지 않기 때문에 불필요한 렌더링을 방지하고 더 빠른 성능을 제공해줍니다 또한 코드가 매우 직관적이며 간단하여 불필요한 코드를 줄일 수 있었습니다. 그 외에도 커스텀을 통해 다양한 기능을 제공해주어 전보다 적은 코드로 폼을 처리하고 더 빠른 성능을 얻을 수 있었습니다. 그리고 유효성 검사가 내장되어있어서 간단하게 유효성을 검사할 수 있습니다.
- 호텔 예약 정보를 모아서 빅데이터를 생성할 것이다. 그리고 이것을 이용하여 어떤 방이 언제 어느 시기에 자주 이용되는지를 관리자에게 보여주는 기능을 추가할 것이다.