Sub you 개발기 5

1. Framer Motion에서 layout attribute를 사용하여 반응형 UI를 만들 때

AnimatePresence 를 같이 사용하지 않으면 UI가 이상하게 변하는 현상이 발생하므로 꼭 같이 사용하자.

 

2. 경매 시스템에서 Timer 구현

맨 처음에는 express 서버로 경매 생성 요청을 보내면 setInterval을 이용해 1초마다 Realtime Database에 있는 경매 남은 시간을 갱신 시키고 setTimeout으로 30분 후에 경매를 종료시키는 방법을 사용할려고 했으나 setInterval을 사용 할 때 생기는 delay가 setInterval로 실행하는 함수를 한 번 실행 할 때마다 약 7.2ms가 발생하여 30분동안 약 18초가 발생하여 너무 큰 오차가 발생했다. (JavaScript engine thread의 execution stack에 다른 작업들이 있어서, database 요청 때문에 생긴다고 추정 중.)

 

바꾼 방법은 다음과 같다. express 서버에서는 경매 생성 요청을 받으면 setTimeout으로 30분을 맞춰놓고 realtime databse로 현재 시각 + 30분인 시각의 unix timestamp를 전송한다. 그리고 client가 경매 탭으로 접근하면 database로 그 unix timestamp를 받아오고 현재 시각과 계산하여 남은 시간을 계산하여 setInterval로 시간을 보여준다.

 

한마디로 setInterval을 server에서 client로 이동했다. 하지만 후자의 경우 client 쪽에서 1초마다 현재 시각과 종료 시각의 차이를 계산하므로 지연이 발생하여 갑자기 1초 이상이 줄어들 수는 있지만, 남은 시간은 정확하게 보여준다.

 

결과적으로 오차가 0.013초 미만으로 감소하였다.

3. 예외 처리

promise를 return하는 함수는 await로 호출하지 않으면 try...catch문에서 제대로 예외처리를 하지 못하고 Unhandlederror 가 발생한다.

try...catch문 안에 promise를 return하는 함수에 then을 사용하고 그 then 안에 promise.reject를 하거나 throw를 해도 가장 위에 있는 catch문에서 알아차리지 못한다. then을 확실하게 예외처리하고 싶다면 then...catch를 사용해야한다.

 

4. firebase transaction

firestore.runTransaction(updateFunction, transactionOptions) → {Promise.<T>}

updateFunction에서 transaction이 이루어진다. (get, set, update) 꼭 get set update 중 하나를 return 해야한다.

transaction.get()은 promise를 return 하지만 transaction.update()는 Transaction을 return 하므로 chaining이 가능하다.