리엑트/넥스트 위주로 부트캠프를 수료하고 공부를 해온 나지만 이번 면접 들어온 곳은 제이쿼리와 html, css를 사용하는 곳이였다. 수질관련 공공기관 데이터를 수집해서 실시간으로 반영하는 플랫폼인걸 홈페이지에서 확인할 수 있어서, 공부를 하고 써보는건 아니지만 ai챗을 이용해 클라우드 서버 / 백 구축 / 프론트를 간단하게라도 혼자 구현해보고 과연 신입인 내가 이 회사에 필요한 이유가 무엇일까를 파악해볼까 한다.
마리아DB
관계형 데이터베이스인 RDBMS는 테이블 간 관계를 설정하여 데이터를 체계적으로 관리하고, SQL을 사용하여 데이터를 조회,입력,수정,삭제를 할 수 있는 데이터베이스라고 할 수 있다
대용량 데이터를 안정적으로 처리할 수 있고, MySQL과 완벽한 호환성으로 마이그레이션이 쉽다.
오픈소스, 무료이고 대규모 커뮤니티가 존재해 문제 해결이 쉽다.
NoSQL 데이터 베이스들에 비해 유연성은 떨어짐
즉 공공기관 데이터를 관리하기엔 정형화된 데이터를 다루기 적합한 db인 듯 싶다
마리아 DB를 윈도우환경인 내 컴퓨터에 설치해주고
-- 현재 있는 데이터베이스 목록 확인
SHOW DATABASES;
-- 새로운 데이터베이스 생성
CREATE DATABASE water_quality;
-- 생성된 데이터베이스 선택
USE water_quality;
-- 데이터베이스가 잘 선택되었는지 확인
SELECT DATABASE();해당 마리아 db를 백코드에 연결지어준다
비밀번호는 고유의 비밀번호를 넣으면 성공
이후 테이블 스키마와 INSERT 쿼리 불일치하여 source 컬럼 제거하고 기본 컬럼으로 수정
BigInt 데이터를 JSON으로 변환시 오류가 나는 부분은 Number(result.insertId)로 변환하여 응답
이후 공공기관 데이터는 decoding된 api 인증키를 사용했으나 에러가 나서 Encoding된 인증키로 변경
백엔드 서버 (Node.js + Express)
- 공공 API 넣어서 수질 데이터 가져옴
- MariaDB에 저장
- WebSocket 이용해 실시간 데이터 프론트엔드에 전송
Express - HTTP 서버 프레임워크(REST API 제공)
MariaDB - 수질 데이터 저장하는 데이터베이스
Axios - 공공 API에서 데이터 가져올 때 사용
Websocket - 프론트엔드와 실시간 데이터 주고받기 위한 프로토콜
express() - 백엔드 서버 생성
cors() - 다른 도메인(프론트엔드)에서 API 호출할 수 있도록 허용
axios - 외부 API 호출
즉 공공데이터를 axios로 가져오고 마리아 db에 저장후 최신 데이터를 반환해서 프론트에 뿌려주면 됨
이후 웹소켓연결 유지하면서 setInterval로 정한 시간5초마다 데이터 업데이트 시켜서 프론트에 뿌려주면 됨
프론트엔드(HTML + JS + Chart.js)
- WebSocket 통해 백엔드에서 받은 데이터를 차트와 표로 표시
- 실시간 데이터 업데이트
최초 setInterval()로 5초마다 서버 호출해서 데이터를 불러왔으나,
다양한 프론트단에서 서버를 지속적으로 호출한다면 서버과부하가 날 수 있으므로 다른 방안으로 채택한게 websocket이였다.
한번만 연결하면 이후엔 쭉 서버와 연결된 상태이므로, 네트워크 사용량도 감소하고 서버 호출수도 감소하고 여러모로 필요한 기능이라는걸 깨우칠 수 있었던 연습이였던 것 같다.
