기본 구조
DataGrip에서 데이타를 입력
localhost와 yebalja.com은 DB의 데이타를 받아 페이지를 출력합니다
DataGrip
DataGrip 어플리케이션을 통해 로컬 컴퓨터에서 DB에 시간을 입력해준다.
로컬
로컬은 KST 혹은 GMT+09:00, UTC+09:00를 따른다. (아시아/서울)
웹페이지 - localhost:3000
DB - localhost:5000/api/json/timelinelist
서버
백서버는 UTC를 따른다.
웹페이지 - yebalja.com
DB - api.yebalja.com/api/json/timelinelist
문제점
백서버와 로컬의 시간차
기존의 날짜 형식은 YYYY-MM-DD HH:MM:SS였지만 사파리에서 인식되지않는 문제때문에 YYYY-MM-DDTHH:MM:SS.000Z로 날짜 데이타를 모두 변경했다.
해당 날짜 형식은 모두 UTC로 처리되는데 문제는 백서버 DB와 localhost DB가 입력된 시간을 인식하는 방법이 다르다는 것이었다. 따라서 localhost와 yebalja.com의 웹페이지에 최종적으로 나타나는 시간도 달라진다는 문제가 발생했다.
localhost:3000
00시면 시간이 안 뜨게 되어있으므로 시간이 모두 00시인 것을 확인할 수 있다.
- DataGrip에서 00시를 입력하면
- localhost의 DB는 KST 00시구나 인식
- DB에는 UTC로 변경된 UTC 15시를 입력
- localhost가 가져올 때는 UTC 15시를 KST 00시로 바꿔서 가져옵니다
yebalja.com
00시로 되어야할 부분들이 모두 9:00시로 뜨는 것을 확인할 수 있다. 입력한 시간 +9로 출력
- DataGrip에서 00시를 입력하면
- 백서버의 DB는 UTC 00시구나 인식
- DB에는 그대로 UTC 00시를 입력
- yebalja.com이 가져올 때는 UTC 00시를 KST 09시로 바꿔서 가져옵니다 >> 문제 발생
문제 해결
1. 받아온 날짜를 강제로 변경
기존에는 data.startdate와 data.enddate를 받아와서 시간을 계산하는 각종 함수에 넣어주었다.
- 하지만 yebalja.com에서 모든 시간이 +9되어 나오는 문제를 해결하기 위해 해당 날짜들에서 각각 9시간을 빼준
startdate_KST와enddate_KST라는 새로운 변수들을 선언해주었다.getTime()함수로 날짜를 밀리세컨 형식으로 변한해준다.- 9시간에 해당되는 밀리세컨을 빼준다.
9 * 60 * 60 * 1000
let startdate_KST = new Date(new Date(data.startdate).getTime() - 540*60*1000);
let enddate_KST = new Date(new Date(data.enddate).getTime() - 540*60*1000);- 날짜를 계산하는 함수들에는
startdate_KST와enddate_KST를 대신 넣어주었고 yebalja.com은 제대로 실행되는 것을 확일할 수 있었다. - 다만 localhost는 반대로 -9되어 나올 수밖에 없었고 날짜를 받아 사용하는 모든 컴포넌트들에 위와 같은 날짜 처리를 해줘야한다는 단점이 있었다.
2. mySQL timezone 변경시도
백서버의 타임존이 다르다면 백서버의 타임존을 바꾸자!라는 생각으로 백서버의 mySQL timezone을 변경해보았다.
default-time-zone="+09:00"로 타임존 변경
Taelee의 mysql에서 9시간 차이날 때참조
하지만 이는 백서버와는 또 다른 것으로 백서버와 로컬의 시간차는 여전히 존재할뿐아니라 로컬의 시간이 서버의 시간처럼 바뀌어버렸다. 즉, 서버와 로컬 모두 시간이 안 맞게 되어버렸다.
기본값 (UTC)일 때
KST로 변경했을 때
3. 백서버 타임존 바꾸기
1. timezone: 'KST'
결국 새로운 방법을 시도해야했는데 우연히 mihykim님이 마침 상황에 딱 맞는 해결법을 검색해주셨다.
back/config/db_config.js에서 타임존 옵션을 추가했고 결과적으로 yebalja.com과 localhost:3000 모두에서 잘 작동하는 것을 확인할 수 있었다.
timezone: KST
하지만 여기서 새로운 문제점이 발생했는데 yebalja.com의 DB에서 date 형식이 YYYY-MM-DD HH:MM:SS와 같이 바뀌었다는 점이었다. 애초에 이 형식이 사파리에서 인식되지 않기 때문에 YYYY-MM-DDTHH:MM:SS.000Z로 바꾼 것이었기때문에 이 부분을 해결해야했다.
2. timezone: '+09:00'
mysql github에서 옵션들에 대한 정보를 찾아보니
timezone: '+09:00'위와 같이 변경해주면 그대로 YYYY-MM-DDTHH:MM:SS.000Z 날짜 형식을 유지한 채로 타임존만 바꿀 수 있었다.
yebalja.com과 localhost:3000도 모두 날짜가 제대로 잘 뜨고 각각의 DB에도 올바른 형식으로 날짜가 입력된다. 문제 해결!
