개발 일기 : Kakao Map API로 맛집 지도 만들기[1]

매번 클론 코딩을 하다, 오랜만에 개인 토이 프로젝트로 Kakao Map API를 건드려보기로 했다. 

Kakao Map API를 쓰는 법은 여타 API와 유사했다. 

 

1) Kakao Developer에 가입하고

2) Application을 새로 만들고 

3) 내 도메인 정보를 입력해준 다음

4) API Key값을 받아오면 끝!

github에서 실제 동작하는 걸 확인하기 위해 도메인을 따로 올려주었다.

 

 

[ API 사용에 주의해야 할 점! ]

kakao map API는 async / defer 처리가 안 된다는 것!

이걸 모르고 defer 처리를 했다가 빈 화면을 봤다.

또, 본인이 작성하는 map script는 무조건 다운받는 API 하단에 존재해야 한다고 한다!

Kakao Maps API Document를 보고 처음 불러온 화면

예제를 따라 출력했더니 무사히 화면에 뜨는 것을 확인할 수 있었다.

Github pages에 올린 웹 페이지 역시 무사히 출력되었다.

 

 

[  CSV 파일 데이터를 JSON으로 변경해주기  ]

PHP와 MySQL로 서버를 다룰 수 있지만, 이번 프로젝트에선 굳이 데이터베이스를 만들지 않고

간단하게 미리 만들어진 json 파일을 받아와 화면에 뿌려주는 작업을 진행하기로 했다. 

 

인터넷에 검색해보면 엑셀로 정리된 맛집 리스트가 많은데 그 중 데이터가 대략 70개 정도 되는 "영자로드 맛집 파일"을 사용하기로 했다. 

 

웹에 있는 CSV to JSON 기능을 사용할까 하다가, 직접 변환 알고리즘을 제작해보기로 마음먹었다. 

아래는 아주 간단하게 정리해둔 큰 틀이다. 

//Test code
/*
1. 각 문자열을 ',' 단위로 분리시켜준다. 
2. 만약 배열 안에 \r\n, 앞자리 공백, 뒷자리 공백이 있다면 제거해준다. 
3. 배열이 전부 공백이라면 제외해준다.
4. 변환한 배열의 길이가 2보다 짧다면 '-'을 출력해준다.
*/

const testData = [
  " X",
  " a, b, ",
  ", , , ,",
  "\r\ndet, 0, test",
  "abe,d, e",
  "asdfae,sefas, efasef",
  " 고봉삼계탕,삼계탕,서울 강남구 봉은사로 524 삼성동 159 ",
];
testRemoveNull(testData);

function testRemoveNull(rows) {
  const data = [];

  for (let i = 0; i < rows.length; i++) {
    let tempArr = rows[i] //
      .split(/[\,/\r\n]+/)
      .map((row) => row.replace(/^[\s]+|[\s]+$/, ""))
      .filter((e) => e === 0 || e);

    if (tempArr.length !== 0) {
      if (tempArr.length === 3) {
        data.push(tempArr);
        continue;
      } else {
        const len = tempArr.length;
        for (let j = len; j < 3; j++) {
          tempArr.push("-");
        }
        data.push(tempArr);
      }
    }
  }
  console.log(data);
}

만약 CSV파일 속 자료가 이상한 경우 데이터 값이 이상하게 출력될 수 있으므로, 

온갖 특이한 문자열이 들어가는 경우를 예외처리 해주기 위해 테스트 코드를 작성해보았다. 

(테스트 코드 작성법은 모르지만 그래도 우선 할만큼 해보는 게 목표니까...)

 

여기서 아직 정규표현식과 Array API 사용법이 미숙해 큰 고생을 했다... 

특히 문자열 맨 앞과 맨 끝에 공백을 제거해주는 표현식을 어떻게 해야할 지 몰라 난감했는데, 인터넷 검색과 정규표현식 테스트 https://regexr.com/5mhou 사이트를 이용해 어찌저찌 작업을 진행했다. 

다른 블로그에서 위 이미지처럼 [ ]공백을 이용해 처리를 많이 해주던데, 그 처리 방법들이 대부분 적용되지 않았다...!

열심히 뒤적거리다, \s (Whitespace) 를 이용해 문제를 해결할 수 있었다.

사실 가장 골머리를 앓은 것은 문자열 맨 뒤에 있는 공백을 처리해주는 것이었지만... /[\s]+$/ 를 이용해 문제를 해결할 수 있었다.

결과: row.replace(/^[\s]+|[\s]+$/, "")); 

 

예쁘게 코드를 짜고 싶은데 그래도 아직은 돌아가는 것에 만족하기로 하고, 코드 리팩토링은 더 공부한 뒤 해보기로 했다.  

여담이지만 어느정도 내가 원하는 프로그램을 제작할 실력이 되면 TDD를 공부하고, 클린 코드와 Refactoring 책을 읽는 것이 목표이다.

 

코드를 짜던 중간에 obj를 얕은 복사하는 바람에 계속 같은 값이 전달되는 문제가 발생했다. 휴!  

(2022.03.03 추가 : Object.assign(); 도 역시 얕은 복사라고 한다. 만약 복사하려는 object 안에 또다른 object가 있다면 복사 되지 않는 문제가 발생한다고.... 

[ 얕은 복사 방법 ]

[ 깊은 복사 방법 ]

복사하고자 하는 Object를 JSON으로 변환해주고, 이걸 다시 Object로 변환한 값을 저장해주면 완벽하게 객체를 카피할 수 있다고 한다. 

let wantCopy = JSON.parse(JSON.stringify(text));  

 

 

무사히 문자열 처리된 데이터가 출력...!

최종 저장된 값! 한국어로 된 영자 로드를 > YungjaRoad로만 변경해줬다.

 

javascript에서 만든 json을 파일로 저장하고 내보내는 방법을 찾는 것도 일이었다.

그리고 슬픈 문장을 하나 발견하고 만다. 

 

" Due to security restrictions, client-side Javascript cannot directly access the file system. "

 

클라이언트 사이드 자바스크립트는 보안 문제로 파일 시스템에 직접 접근이 불가능하니, 간접적인 방법만 사용할 수 있었다.

나는 잠시 JSON파일만 만들고 웹에서는 별도로 사용하지 않을 목적으로 제작하는 것이었지만... 보안 문제라면 따를 수밖에. 

 

이번엔 데이터가 작으니 Local Storage에 저장해서 사용하기로 했다.  

만약 웹에 접근한 사람의 Local Storage에 정보가 없을 경우, 이를 처리해서 넣어주는 것이다. 

조금 무겁게 동작하겠지만 연습용이니 우선은 이렇게 처리해보기로 했다.

실제 Local Storage에 저장된 값

 

다음엔 대망의 UI 작업을 진행해봐야겠다. 

(2022.03.03 추가 : project 경로에 있는 파일을 읽어들이는 방법을 아직 찾지 못했다.

관련 이슈 https://github.com/HaleyJe0ng/map-foodlist/issues/3 

우선 편법을 이용했는데, 해결 방법을 더 찾아봐야겠다.)