2차 프로젝트 후기 그리고 Nginx 무중단 배포 중 이슈 해결 (엘리스) - Airpang!

2차 프로젝트 기간 : 2024.07.22 ~ 2024.08.09 ( 3주 )

엘리스에서의 2차 프로젝트가 끝났다 !

 

환경 데이터를 활용한 웹 프로젝트 제작 이였는데, 주제 선정부터가 너무 어려웠다..

 

허나 데이터를 활용하며, 다수의 유저가 사용할 만한 프로그램이 무엇일지 고민 하던 중, 제시된 실시간 대기질 제공 서비스! 

 

그저 대기질만 보여주는건 딱히 사용하지 않을 것이라 생각이 들었고 뭐가 부가적인 시스템이 더 필요할 것이라 판단했다.

 

그렇게 탄생하게 된 기능이 해당 지역별 대기질 등급과, 점수 그리고 환경 챌린지였다.

 

먼저 해당 지역의 대기오염물질 들을 각각 AQI지수로 변경 한뒤 등급은 종합 AQI지수로 등급 범주를 통해 산출되도록 로직을 구성했다. ( 보통 종합 AQI지수는 AQI 지수로 변환된 대기오염 물질 중에서 가장 높은 AQI를 말한다. )

 

점수는 해당 지역의 작년(2023년) 종합 AQI의 평균과 실시간 종합 AQI를 비교하여, 50점을 base score로, 작년 종합 AQI의 평균에 비해 실시간 종합 AQI가 높으면 점수가 낮아지도록 하고, 반대로 낮으면 점수가 높아지도록 로직을 구성했다.

 

즉, 등급은 오늘의 대기질이 어떤지 판별할 수 있고, 점수는 해당 지역의 대기질이 작년에 비해 개선되고 있는지 아니면 더 악화되고 있는지 판별을 할 수 있기에, 등급은 오늘 내가 사는 곳의 대기질을 확인 할 수 있고 점수는 내가 관심이 있는 지역 혹은 이사 예정인 지역을 고를 때 이용 할 수 있겠다.

 

1차 HELLO FOLIO 웹 프로젝트 때는 유저와 관련한 모든 기능을 담당했던지라, 다른 파트를 담당하고 싶었다.

 

때문에 프로젝트 전반적인 db관리, 지역 별 과거 대기질과 실시간 대기질 데이터 정리 및 환경 챌린지 CRUD와 검색기능 그리고 무중단 배포를 담당했는데 정말 좋은 경험이였다.

 

openAPI를 통해 실시간으로 정보를 받아오는 방법과, node-cron을 이용하여 스케쥴러를 사용 해 보았는데 일일 트래픽이 500이라 그런지 테스트 하는 점에 있어 힘겹고 귀찮은 점이 있었다.

 

특히, 데이터를 불러올 때 트랜잭션 개념을 적용해야 했는데 프로젝트 기간동안 트랜잭션을 이해하고 적용해야 하는지라 골머리를 앓았었다. 하지만 데이터를 성공적으로 불러오면 트랜잭션 커밋을 하여 DB에 저장, 하나라도 에러가 나면 이전 작업을 취소시키는 트랜잭션 롤백을 통해 안전하게 데이터를 불러오고 저장 할 수 있었다.

 

성공적으로 실시간 데이터를 불러오고 이 데이터가 내가 만든 등급과 점수 로직에 적용되어 화면에 디스플레이 되었을 때는 쾌감이 상당했다.

 

배포에 있어, VM을 사용하여 PM2와 REACT, NGINX를 사용하는데 처음에 프론트엔드 팀원들과 협의를 할 때, 서버 API 요청 경로와 클라이언트 API 요청 경로를 통일시키고, 클라이언트 라우터를 분리 시켜야 했는데 이 점에 미숙하여 모두 중복되게 사용했다가 UI 버튼을 눌렀을 때는 페이지가 정상적으로 디스플레이 되나, URL을 직접 타이핑 하여 입력했을 때는 서버의 데이터만 화면에 디스플레이 되는 결과가 발생했다.

 

때문에 뒤늦게 원인을 찾아낸 뒤, 클라이언트 라우터는 현행 유지를 하고 서버 API 요청 경로와 클라이언트 API 요청 경로만 변경 하였다.

 

어려운 점은 딱히 없었다. 그냥 /api로 서버와 클라이언트 API 요청 경로 시작점을 모두 통일 시켰다. 

 

기존에는 모두 /locations 로 되어있었다면,

수정 후에는 서버,클라 api => /api/locations | 클라 라우터 => /locations 로 변경을 한 점.

 

이후, NGINX 기본 설정파일에서 아래와 같이 API 프록시 설정을 해주었다.

 

그랬더니 UI 버튼을 클릭 했을 때와 URL을 직접 입력했을 때 모두 화면이 정상적으로 디스플레이 되었다.

 

덤으로 구글 소셜로그인의 REDIRECT URL을 위해 certbot 을 통해 SSL 무료인증서를 발급받고, https 설정을 해 주었다.

 

결과적으로 프로젝트는 성공적이었고, 유저는 특정 지역의 실시간 대기질, 그리고 해당 지역의 등급, 점수 및 그 지역의 2023년 월별 AQI의 변화 추이를 확인 할 수 있게 되었으며, 환경 챌린지를 통해 약간의 커뮤니티 성질을 띄는 환경보호를 위한 기록을 남길 수 있다. 덤으로 관심지역 설정까지!

7월 한달간 TypeScript를 배우고 이를 프로젝트에 적용하는 점에 있어 복잡하고 머리를 싸매는 시간이 많았지만, 아 이래서 TypeScript를 사용하는구나 하고 깨닫게 되는 점이 되게 많았다.

 

특히나 타입과 관련하여 에러가 발생 할 시, 에러 발생지점을 찾기 되게 간편했고, 실수를 굉장히 많이 줄일 수 있었다. 

 

팀원들과 협업을 하며, 소통과 관련한 이슈가 많았지만 그래도 협의점을 찾아가고 해결방법을 찾아가며 문제를 하나씩 해결했다.

 

 프로젝트가 끝났지만, 아직 리팩토링을 해야하는 사안이 남아있다.

 

첫 번째는 /locations 라우터에서 get 요청을 날릴 시, pending이 너무 오래 걸리는점.

두 번째는 실시간 데이터가 undefined로 들어올 경우 서버가 작동을 안 한다는 점.

세 번째는 controller에 전반적으로 DTO를 적용하고, class-validator 라이브러리를 사용하여 직렬화와 역직렬화 개념을 적용하는 점이다.

 

리팩토링을 모두 마친 뒤, 포트폴리오로 활용할 수 있도록 해야겠다.

https://github.com/Lsiron6661/AIR-PANG

GitHub - Lsiron6661/AIR-PANG