221120 TIL 지저분했던 코드 한줄로 해결하기

오늘은 경기 일정 페이지를 만들 때 해당 경기의 경기 시간을 보여줘야 하는데 api를 요청해서 받아오는 경기 시간이 영국 시간 기준(UTC)이라 한국 시간으로 계산(+9 시간)을 해줘야 하는 작업이 필요했다.

우선 받아오는 경기 시간의 데이터는 아래와 같다.

이 중 연도는 필요 없고 월, 일만 필요했기 때문에 substring으로 문자열을 잘라 14:00의 시간만 가져와서 시차 계산을 해주는 함수를 만들어서 화면에 보여주도록 했다. 시차 계산하는 함수는 UTC기준으로 가져오는 시간에 +9를 해주는데 24가 넘어가면 00:00부터 계산하는 로직을 작성했다.

위 사진과 같이 원하는 모양으로 만들고 11:00분이 잘 나오는지 테스트를 돌려보는데... 테스트가 통과가 되지 않는 문제가 있었다.

분명 화면에는 11:00으로 정상적으로 나오는데 테스트에는 :00 이렇게 substring이 이상하게 잘려서 나오고 있었다.

 

그래서 뭐가 문제인 건지 substring 한 결과를 console 찍어봤는데 터미널에서는 아래의 왼쪽 사진처럼 나오고 화면에는 오른쪽 사진처럼 서로 다른 결과를 출력하고 있었다.

 

문자열을 자르는 위치가 달라지다 보니 테스트 결과에는 :00처럼 이상하게 나오고 있었다.

 

시간을 가져올 때 Date 객체의 날짜의 시간 부분을 지역에 맞는 언어로 변환해주는 toLocaleTimeString 메서드를 이용해서 가져왔는데

toLocaleTimeString 메서드의 인자로 "ko-KR"을 입력하니 테스트에서도 웹 브라우저에서 출력되는 화면과 똑같이 나오는 것을 확인했다.

 

datepicker 라이브러리를 이용해서 달력을 만든 다음에 선택한 날짜 범위 안의 경기 일정들을 조회하는 기능을 만들었다.

 

여기서도 문제가 있었는데 영국 시간을 기준으로 데이터를 가져오다 보니 시차를 계산해줘야 했고 24시가 넘어가면 날짜도 하루 지나는 계산을 해줘야 했는데 이러면 문제가 하나 발생한다.

예를 들어 경기 api를 요청할 때 11월 8일부터 11월 15일의 경기를 요청한다 하자.

해당 경기들을 화면에 보여주는데 만일 영국 기준 15일 날짜의 16시 경기가 있으면 해당 경기의 시차 계산을 위해 +9 해주면 24가 넘어가기 때문에 한국 기준 11월 16일 경기가 되는데 화면에 보여줄 때는 15일까지의 경기만 보여주게 해 놨는데 16일의 경기도 화면에 노출되는 문제가 발생했다.

 

그래서 해당 문제를 해결하기 위해 시차 계산 후 종료 기간을 설정해준 15일이 넘어가는 경기는 안 보이도록 map안에 filter를 써주는 방법을 떠올려서 해결했었는데  아무리 생각해도 비효율적인 것 같았다.

그래서 다른 방법을 생각하다 차라리 데이터를 가져올 때 영국 시간이 아닌 한국 시간으로 가져오는 방법이 없을까 찾아보다 params에 timezone을 서울로 넘겨주면 경기 시간을 알아서 한국 시간으로 전달해주는 것을 알게 되었다.

이렇게 되면 위에서 했던 시차 계산해주는 함수도 다 필요 없고 그냥 params로 한국 timezone만 넘겨주면 되는 문제였었다.....

 

오늘 하루 동안 영국 기준 날짜와 시간을 변환해서 어떻게 보여줄지에 대한 고민을 했던 것들이 코드 단 한 줄로 해결할 수 있었던 문제라는 걸 알게 되었을 때는 너무 허무했지만 page 컴포넌트에서 시차 계산해주는 복잡하고 지저분했던 로직의 코드를 정리하는 수확을 얻을 수 있었다.