atsc의 블로그 atsc의 블로그

1. 전체 소스 구조 전체 소스 구조는 위와 같다. public 폴더 아래 js 폴더에는 각 차트에 대한 frontend script 코드들이 포함되어 있다. route는 차트 페이지, 지도 페이지, 검색 테이블 페이지로 분리하였다. (getdata에는 backend에서 사용되는 공통 함수들을 따로 분리해놓았다.) app.js 코드에는 route 분리, view engine, middleware에 대한 최소한의 설정을 위한 코드로만 구성하였다. app.js const express = require('express'); const path = require('path'); const charts = require('./routes/charts'); const map = require('./routes/m..

1. 엘라스틱서치, 키바나 다운로드 https://www.elastic.co/kr/downloads/elasticsearch https://www.elastic.co/kr/downloads/kibana 위 페이지를 참고하여 사용하는 OS에 맞게 다운로드를 한다. 리눅스나 맥을 사용하는 경우 package managers 부분의 링크를 클릭하면 다운로드/설치, 실행 방법에 대한 설명이 있으므로 그대로 따라가면 된다. 윈도우의 경우 다운로드를 받고나서 별도의 설치과정 없이 압축 해제만 해주면 바로 사용이 가능하다. 엘라스틱서치를 다운로드 받고 압축 해제를 완료하고 나서 bin 폴더 아래에 있는 elasticsearch.bat을 실행한다. 엘라스틱서치 실행 후 브라우저에서 localhost:9200로 접속한다..

Charts: 백신 접종 현황 집계 데이터에 대한 차트 시각화 페이지 Map: 국가별 백신 접종 현황 시각화 search: 일일 접종 기록 데이터에 대한 국가별 검색 기능을 제공하는 테이블 시각화 페이지 backend: node.js, elasticsearch frontend: javascript, jquery, highcharts, highmaps, datatable 데이터 출처: kaggle (COVID-19 World Vaccination Progress) 소스코드: https://github.com/atscksk/es_covid_vacc

kaitai sturct는 binary 데이터 파일을 해석하는 기능을 지원한다. (kaitai struct에 대한 자세한 내용은 사이트 참조: kaitai.io/) 이 kaitai struct를 사용해서 binary 데이터 파일인 wtmp를 읽어볼 것이다. 리눅스에서는 로그인/로그아웃 등 사용자의 접근 관련 기록이 /var/log 경로 내 wtmp, utmp 등의 파일에 기록되는데, 이 파일들은 binary 데이터로 이루어져 있다. 따라서 그냥 텍스트 에디터를 통해 읽으면 읽을 수 없는 형태로 출력이 된다. 따라서 이 데이터를 읽을 수 있는 데이터로 해석을 해야 하는데 이 때 사용하면 편리한 것이 kaitai struct다. 사이트 상단에 Format Gallery를 클릭하면 다음 화면이 뜬다. 리눅스 ..

미세먼지 수치 데이터를 크롤링하기 위해 에어코리아 페이지를 접속한다. https://www.airkorea.or.kr/web 에어코리아는 미세먼지 정보 뿐만 아니라 대기 관련 여러 데이터를 함께 제공한다. 접속했을 때의 초기 화면은 초미세먼지 정보 페이지인데 각각에 대한 정보를 확인하려면 좌측 메뉴에서 선택을 해야한다. 우선 이번 예제에서는 페이지 초기화면에서 곧바로 활인할 수 있는 초미세먼지(PM 2.5) 데이터를 가져올 것이다. 에어코리아에서는 위와 같이 지도상에서 측정소를 표시해주고 특정 측정소에 마우스를 올렸을 때 툴팁 형태로 위치정보와 1시간 수치, 24시간 수치를 보여준다. 크롤링을 통해 위 데이터를 가져와볼 예정이다. const puppeteer = require('puppeteer'); c..

문제 게임개발자인 죠르디는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. 죠르디는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다. 게임 화면은 1 x 1 크기의 칸들로 이루어진 N x N 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 5 x 5 크기의 예시입니다). 각 격자 칸에는 다양한 인형이 들어 있으며 인형이 없는 칸은 빈칸입니다. 모든 인형은 1 x 1 크기의 격자 한 칸을 차지하며 격자의 가장 아래 칸부터 차곡차곡 쌓여 있습니다. 게임 사용자는 크레인을 좌우로 움직여서 멈춘 위치에서 가장 위에 있는 인형을 집어 올릴 수 있습니다. 집어 올린 인형은 바구니에 쌓이게 되는 데, 이때 바구니의 가장 아래 ..

기준점(pivot)을 정해서 기준점보다 작은 데이터는 기준점 좌측에, 큰 데이터는 우측에 배치하는 함수를 작성 각 왼쪽, 오른쪽은 재귀용법을 사용하여 다시 동일 함수를 호출하여 위의 작업을 반복함 함수는 (왼쪽 + 기준점 + 오른쪽) 배열을 리턴함 function quickSort(data) { if (data.length data[i]) { left.push(data[i]); } else { right.push(data[i]); } } return quickSort(left).concat([pivot].concat(quickSort(right))); }

재귀 용법을 활용한 정렬 알고리즘 과정 리스트를 절반으로 잘라 비슷한 크기의 두 부분 리스트로 나눔 각 부분 리스트를 재귀적으로 병합 정렬을 이용해 정렬함 두 부분 리스트를 다시 하나의 정렬된 리스트로 합병 두 개의 함수를 통해 작업이 수행됨 첫 번째 함수: 리스트를 분리하고 각 분리된 리스트를 두 번째 함수를 통해 병합하여 리턴 리스트의 중간 인덱스를 기준으로 왼쪽, 오른쪽 리스트로 분리 각 분리된 리스트는 재귀 함수로 동일한 과정 진행 - 정렬 및 합병 과정 최종적으로 합병된 리스트가 리턴됨 두 번째 함수: 첫 번째 함수에 의해 쪼개진 리스트를 정렬된 하나의 리스트로 리턴 분리된 왼쪽, 오른쪽 리스트가 파라미터이며, 두 리스트를 정렬된 하나의 리스트로 만들어 반환 작업 시작 시, 각 리스트의 첫 번째..