Map The Seoul

---

Overture

• 때는 2020년 여름. repo 주인은 공공기관 아르바이트에 추첨 선발되어 도로과에 배치되게 된다.
• 맡은 업무를 대강 설명하자면 엑셀 파일에 적힌 위치를 실제로 도로시설물이 얼마나 있는지 로드뷰로 확인하고 파일을 수정하는 작업.
• 열심히 일하다 보니 불현듯 드는 생각. 이 길.. 왜 본 거 같지?
  • 3일차에 이 생각을 하게 되었고 이것이 개발 계기가 되었다.

설명

• 시설물이 위치한 도로명 주소를 툴팁으로 한 위도, 경도 마커를 지도에 찍는다.
• 만든 이유 : 좌표 찍었던 데를 계속 또 찍는 거 같아서 만들었다.
  • 로드뷰를 보다 보면 그 길이 그 길인 경우가 꽤 있다.
  • 건물 특징이 별로 없는 주택가라든가, 똑같은 길인데 로드뷰 방향이 다르게 설정되어 있으면 같은 길도 다르게 보여서 굉장히 헷갈린다. 가능한 중복 데이터를 없애고 정확히 일하고 싶었기 때문에 만들게 됐다.
• 이 파일의 사용법에 적힌 규칙대로 엑셀 파일을 작성하고 순서대로 실행하면, 어떤 것이라도 위치들을 지도에 전부 찍어서 확인할 수 있다.

개발환경 & 모듈

• Windows 7
• Node 14.7.0
• npm 6.14.7
• express 4.17.1
• express-session 1.17.1
• helmet 3.23.3
• multer 1.4.2
• pug 3.0.0
• xlsx 0.16.3
• session-file-store 1.4.0
• cors 2.8.5
• KakaoMap API

설치 및 사용 법

1. node를 설치한다. node LTS 버전 설치

2. 적당한 데 폴더를 하나 만들어 이 저장소를 그대로 붙여넣는다.
   github 사용법을 잘 모른다면 초록색 Code 버튼을 눌러서 zip 파일로 다운로드받는다.
   2-1. 압축을 풀었을 때 파일들이 바로 있는 게 아니라 Map-The-Seoul 폴더가 있고 그 안에 파일들이 있을 수 있다.
   그 경우 그 안의 파일들만 복사한다.
   절대 폴더 자체를 복사하지 않는다. 파일과 그 안의 폴더만 복사한다.

3. cmd 창을 열고 해당 폴더로 이동한다. cd [폴더의 경로] 하면 이동 가능하다.
   (ex) 폴더의 경로가 'C:\Users\road\Documents'라면 cd C:\Users\road\Documents 입력
   그리고 npm install 을 입력하고 잠시 기다린다.

4. 해당 폴더에 key.js 파일을 만들어준다. 그냥 메모장 열고 확장자를 .txt가 아닌 .js로 바꿔서 저장하면 된다. 템플릿은 다음과 같다.

   const key = '카카오에서 받은 API 키';
   module.exports = key; 
   

   카카오 개발자 사이트에 가서 키를 받는 방법은 여기를 참고하면 된다.
   이 때 카카오 개발자 사이트의 '내 애플리케이션 > 플랫폼 > Web 플랫폼 등록'에서 http://localhost:5001을 등록해야 한다.

5. 해당 폴더에 auth.js 파일을 만들어준다. key.js 파일 만드는 방법과 동일하다. 템플릿은 다음과 같다.

   const obj = { id: '지정 id', pwd: '지정 암호' };
   module.exports = obj;
   

   id와 pwd는 이 서비스로 함께 작업할 사람들과 상의해서 정하면 된다.

6. 엑셀 파일을 준비한다.
   이 엑셀 파일은 1번째 행에 '동명', '소재지도로명주소', '설치장소', '위도', '경도' 5가지를 갖춰야하며 이름은 map.xlsx이다.
   단 이건 시트가 1개일 때 얘기고 시트가 여러 개라면 '동명' 셀은 없어도 되며 나머지 4개 조건만 필요하다. 이 경우 시트 이름이 곧 '동명'이 된다.
   5가지 조건은 순서가 상관없고 A1부터 ZZ1까지 자유롭게 배치하면 된다.
   위 5가지 조건은 1번째 행(ex. A1, B1, C1, ...)에 배치해야 하며 1번째 행에 '위도'라고 적힌 셀이 2개 이상 있는 등의 중복은 허용하지 않는다.
   6-1. 이 때 엑셀 파일을 준비하는 방법은 두 가지인데 (1) 직접 폴더에 넣기, (2) 서비스를 통해 업로드하기가 있다.
   (1)을 택했다면 그냥 처음부터 map.xlsx 파일을 해당 폴더에 넣으면 되고 (2)를 택했다면 로그인 이후 파일 업로드 과정을 통할 수 있다.
   서버 컴퓨터가 없거나 작업 규모가 그리 크지 않아서 굳이 운영할 필요가 없다면 (1)이 제일 편한 방법이므로 (1)을 추천한다.

7. 엑셀 파일의 시트가 1개이거나 첫 시트 정보만 띄우고 싶은 경우에는 바로 8번으로 넘어가면 된다.
   하지만 만약 파일의 시트가 2개 이상이고 전체 시트의 위도경도 마커를 지도에 띄우고 싶은 경우 node multi-excel-read를 입력한다. 이 경우 7-3 항목을 필수로 확인해야 한다.
   7-1. 시트가 여러 개인데 어느 한 시트의 좌표 정보만 보고 싶다면 침착하게 excel-read.js 파일을 연다.
   코드 에디터 전용 소프트웨어(ex. vscode, atom 등)가 없다면 메모장으로 연다. 한글이나 워드로 여는 건 비추
   Ctrl+F로 excel.SheetNames[0]을 찾는다. 이 0을 목표로 하는 시트 번호 - 1(ex.Sheet3을 보고 싶다면 2)로 바꿔준다.
   7-2. 왜 3번째 파일인데 2로 하냐면 번호를 0부터 센다는 내부적 규칙 때문이다. 그냥 시트 번호-1로 적으면 된다.
   7-3. node multi-excel-read를 입력했다면 public/js/loadMap.js 파일을 열어 Ctrl+F로 './latlng.json'을 찾는다.
   이것을 './multi-latlng.json'으로 바꿔준다.

8. cmd 창에 node app을 입력한다.

9. 브라우저를 켜서 주소창에 localhost:5001을 입력해서 결과를 확인해본다.
   로그인 페이지에서 여기서 5번에 입력한 id와 pwd를 입력하면 파일 업로드 페이지로 넘어가게 된다. 여기서 파일을 업로드해도 되고 파일을 업로드하지 않고 그냥 제출 버튼을 눌러도 된다.
   단, 아무것도 업로드하지 않고 제출할 경우 폴더에 미리 map.xlsx 파일이 있어야만 지도에 마커가 제대로 나온다.
   지도 페이지는 URL로 접근이 불가능하고 오직 업로드 페이지에서 제출 버튼을 클릭하는 것으로만 이동이 가능하므로 주의하기 바란다.

파일

• app.js
  • 앱에 대한 전처리와 주소에 따른 분기 처리
• excel-read.js
  • 시트가 1개 있는 엑셀 파일을 읽어서 /public/latlng.json 파일로 저장
  • 이 때, 시트의 세로축에는 '동명', '소재지도로명주소', '설치장소', '위도', '경도'가 있어야 함
• multi-excel-read.js
  • excel-read 파일과 기본적으로 사용법은 같지만, 시트가 여러 개 있는 파일에 사용 가능
  • 이 때, 시트 이름이 '동명'이 됨
• public/css
  • 웹 CSS 파일
• public/js/loadMap.js
  • 실제로 카카오 API와 연결해 작업을 실행하는 코어 파일. 뭔가 동작이 마음에 들지 않는다면, 이 파일을 수정해야 동작을 변경 가능
• views/
  • 템플릿 엔진 pug 파일들

주의사항

• cmd 창을 끄면 localhost:5001로 접근할 수 없다.
• 만약 map.xlsx 파일을 수정했거나 일부 파일을 변경했다면 Ctrl+C 버튼을 눌러 중지시키고 새로 node app을 입력해야 한다. 일종의 새로고침이다.
• 아쉽지만 로드뷰 모드에서 마우스로 찍어서 위성 보기는 할 수 없다.

나 보려고 적는 것

• 상황 봐서 추가할 기능
  • 주소 검색
  • 주소-좌표 간 변환
  • 동별로 마커 이미지 다르게 만들기
  • 마커를 클릭하면 도로명 주소나 위도/경도를 복사할 수 있게 하기
  • 혹은 마커를 클릭했을 때 도로명 주소와 위도/경로가 인포윈도우(말풍선)로 나타나게 하기
  • 마커 클러스터러 (갯수 보기)
  • 마커를 찍은 지도를 이미지로 저장

라이센스

• 이 코드는 MIT 라이선스를 준수하여 사용 가능합니다.

생성 : 2020-07-16
최종수정 : 2020-08-07