드디어 끝을 보았다
11월 중순에 시작한 프로젝트가 드디어 끝이 났다.
사실 마감 계획은 12월 말 이었지만 중간에 스터디도 있었고
생각보다 리액트가 감이 안잡혔다. (백엔드 프로젝트로 시작해서 프론트엔드 프로젝트로 끝이 나버렸다..)
중간 중간 포스팅을 자주 하려고 했지만 생각보다 쉽지 않았다.
그래도 완성 했으니 회고를 해보자.
결과
나름 반응형으로 만든다고 했지만 모바일과 데스크톱만 적용되고
태블릿 대응은 못하였다...
구성
위와 같은 기술을 사용하였다.
오라클 클라우드에 NGINX를 이용하여 배포했고 redis를 이용하여 캐싱하였다.
여담으로 react의 크기가 커지다 보니 오라클 클라우드 프리티어에서 빌드가 불가능하게 되었다... 로컬에서 빌드하여 scp로 전송하는 방법을 택하였다.
서버
API 호출
서버의 로직은 생각보다 매우 단순하였다. 다만 openweather API의 시간이 UTC시간이기 때문에 이를 맞추기 위한 과정이 힘들었다.
만약 우리나라 시간으로 어제 날씨를 호출 하려면 "어제와 오늘시간"으로 두번 요청하여 필요한 부분만 파싱하는 과정이 필요하였다.
이 프로젝트는 어제, 오늘, 내일 3일치의 날씨를 제공하기 때문에 시간에 따라 3~4번 API를 호출하게 되는 구조이다.
promise
request모듈을 이용하여 API로부터 데이터를 받아왔다.
사실 비동기를 알고 있다고 생각하였는데 이를 적용하는 것이 생각보다 쉽지 않았다.
수 많은 삽질 끝에 비동기를 이해할 수 있었다.
데이터 파싱
위에서 말했다시피 호출한 여러개의 데이터를 필요한 부분으로 나눠야 했다.
이 과정이 너무 끔찍하였다..
매 시간 단위로 변하는 데이터값을 확인하고 로직을 완성하기 위해 일주일이 걸렸다. UTC와 9시간 시차가 발생하기 때문에 오전 9시에 변하는 데이터를 맞추기 어려웠다. 이를 확인하기 위해 오라클 클라우드에 서버를 띄우고 winston으로 로그를 찍고 postman으로 테스트코드를 작성하여 확인하였다.
그렇게 해서 나온 결과이다. 변수명이 끔찍하지만 이것을 바꿀 자신이 없기에 그냥 두기로 하였다...
시간은 1800초로 30분 후에 만료되도록 하였다.
캐싱
redis를 이용하여 캐싱하였다.
캐싱은 데이터가 단순하기 때문에 어렵지 않게 구현하였다.
다만 처음 로직이 비효율적이어서 도중에 리팩토링을 하였다.
키값은 좌표를 기반으로 하여 소수 둘째자리까지를 키값으로 하여 대략적인 구역으로 구분하였다.
프론트엔드
다음 포스팅으로 넘기겠다.
Coming soon...
