공공 API를 활용한 인천 내 도서관 및 서점 정보 검색 Website 구현 2

+ 카카오 MAP API 사용 방법

일단 지난번 포스트와 비교했을 때 사이트 아웃룩이 완전히 달라져 버렸다. ^))^ 하하 약 2주간 웹 사이트를 많이 손 보았는데 사실 앞으로 더 손 봐야 할 곳이 많아서 뭘 리뷰해야 할지도 모르겠지만 그냥 또 의식의 흐름대로 써보려고 한다.

일단 지난 2주간 내가 구독하고 있는 ‘노마드 코더’ 웹 사이트에서 천하제일 Todo-list 콘테스트가 열려서 내 생애 첫 남들과 함께 하는 챌린지에 참여했다. 나는 한 이틀? 걸려서 만들긴 했는데 정말 간단한 기능만 구현하고 리덕스를 사용해보는데 의의를 둔 거여서 다음번에 또 내가 참여할 수 있는 챌린지가 열리면 그 때는 혼을 갈아 구현하고 싶은 기능을 다 넣어 만들어야겠다고 생각했다. 남들이 한 걸 보니 정말 나이와 상관 없이 정말 학생들도 너무 잘하는 걸 보고 많이 자극 받기도 하고 많이 배우기도 했다. 역시 어릴수록 유연한 사고를 할 수 있... 이런 챌린지를 참여하면서 남들은 어떤 화면에 어떤 기능을 넣었는지 보는 것도 재밌고 왜 나는 이런 생각을 하지 못했을까 더 정성스럽게 만들 걸 하고 되게 반성도 많이 했다.

이 챌린지 참여 때 만든 Todo list는 여기서 볼 수 있고 물론 사용도 가능하다! 👉 Supinkim’s Todolist 바로가기
(챌린지 참여 후기는 나중에 기회가 된다면 따로 포스팅 하겠다!)

여튼 그래서 내가 열심히 사이트를 손 본 이유는, 간단한 챌린지이지만 정말 괜찮은 아웃룩과 ux적 요소를 포함한 사이트들이 많아서 기왕에 하나를 만들더라도 나도 잘 만들고 싶다는 생각이 들었다.(챌린지의 순기능!) youbute에서 자주 보는 css 강의들 중 하나 괜찮은 걸 보고 클론 코딩 겸 화면 디자인을 다 뜯어 고쳤다.

그리고 MAP 탭을 누르면 카카오 지도 API를 활용한 기관 위치 확인 기능도 추가하고 싶어서 기능을 구상 중인데 일단 MAP 부분을 SPA처럼 작동하게 코드를 짜서 이벤트 리스너를 못 붙인다… Map 탭을 눌러야 지도가 렌더링되고 hidden으로 설정해 놓은 부분이 나타나게 코드를 짜놔서 그렇다. 아무것도 없는데 거기 공간 차지하게 두기 싫어서 display : none으로 해버렸더니 이제 이벤트 리스너 붙이고 싶은 ul 부분이 null이 되어 addEventListener()를 할 수 없다는 슬픈 사연…

그래서 과감하게 라우터를 포기하고 map.html을 만들어서 아예 새 html을 만들 것인가, home도 map처럼 html에 마크업 없이 자바스크립트로 동적으로 만들어 전체를 다 SPA로 구현해버릴 것인가, 그것이 문제로다의 길목에 서 있다. ^)))^

하여튼 그래서 지금 map 부분이 추가 되면서 코드가 더 더러워졌고 JSX 만세고, 코드 리뷰를 하면 걍 욕 먹을 상황에 처해있는 것이다..!!! 그래서 코드 리뷰보단 새로 추가한 카카오 MAP API로 필요한 정보 불러오는 것을 짧게 소개하고 오늘 포스팅을 마무리 하려고 한다.

일단 카카오 MAP API는 카카오 개발자 센터에 가면 사용 방법이 굉장히 자세히 잘 나와있다. :) (카카오의 UI는 언제나 참 직관적임!) 개발자 센터에 가서 내 애플리케이션 등록을 한 뒤 개인 키를 발급받으면 총 4개의 개인 키를 준다.(web, aos, ios, REST API) API를 사용하는 환경에 맞게 앱 키를 넣으면 되고 추가적으로 제공하는 라이브러리를 쓰고 싶으면 뒤에 라이브러리 조건을 넣어주면 된다. 나는 당연히 제공하는 건 다 써보고 싶으므로 라이브러리 쿼리를 script src 맨 뒤에 추가해주었다.

그리고 Map class에서 기본적으로 위치 세팅을 해주고 맵을 렌더하고 getkakaomap()을 호출해 이렇게 해당 위도 반경 20km 이내에 있는 도서관 정보를 fecth()로 불러왔다. 생각보다 데이터 내용이 알차서 잘 정리해서 list로 노출하면 좋을 거 같은데 원하는 지역을 선택하면 해당 지역 nkm 내에 있는 도서관과 서점 정보를 노출하고 싶어서 y,x 파라미터를 어떻게 넘겨줘야 하나 그것도 고민이다. (아 괜히 라우터로 만들어서 이벤트 리스너 붙여주기가 더 까다로워짐 ㅎ)

콘솔에 찍어보면 이렇게 잘 나온다..!

아 그리고 당분간은 어떤 프레임워크를 또 배우기 보다는 순수 JS를 더 깊게 파봐야겠다는 생각이 든다. js로 할 수 있는 게 엄청 많은데 별로 안 다뤄보고 다른 라이브러리나 프레임워크를 배우면 필요성이나 비교가 어려워서 좀 흥미가 떨어질 거 같아서 코드가 아름답거나 우아하지 않아도 일단은 구현하고 싶은 기능을 vanilla JS로 해볼 때까지 해보고 넘어가고자 마음 먹었다.

그리고 결정적으로 js는 진짜 다양한 이벤트를 발생시키고 처리하는 거랑 function call 하는 게 매력인데 이걸 다 class로 정의해서 컴포넌트로 써버리니까 좀 짜증이 났다. (그래서 내가 자바가 재미가 없었나? 오호 핑계) 내가 만드는 프로그램 자체가 input이나 이런 게 대단히 많은 것도 아닌데 그냥 function으로 뽕뽕 만들어 버리면 되지란 생각을 떨쳐 버릴 수 없는 것이다….!!! ㅋㅋㅋㅋㅋ

나~중에 더 훌륭한 웹 개발자가 되면 지금 이런 어리석은 생각을 한 나 자신을 혼낼 수도 있겠으나 그것은 미래의 나에게 맡기고 난 그냥 더 재밌는 걸 해보고 싶다.

사실 최근에 계속 코테 준비하면서 진짜 알고리즘의 세계는 무궁무진하고 나는 이렇게 멍청할 수 있는가 하면서 자존감이 좀 낮아졌는데, 다시 그렇게 부담을 느끼지 않고자 마음을 고쳐먹었다. 알고리즘 공부한 지 2달? 채 두 달도 안 됐는데 바로 쭉쭉 잘 할 것 같았으면 내가 코딩 천재고 벌써 벌써 구글, 애플, MS, 페이스북 들어갔겠지 ^)))^

그래서 그냥 다시 코딩을 좀 더 즐기면서 하기로 했다. 평생 내 일이 될 것인데 벌써부터 지쳐서 스트레스 받으면 못 쓴다. 그렇고 말고 😎

코딩 문제 푸는 건 좀 덜 풀더라도 간간이 재밌는 것들도 만들면서 흥미를 잃지 말아야겠다.

그리고 나름 프로그래머스에서 열심히 풀어서 4000등 대로 들어왔다..(진심 감격 😂 시작이 12000등? 그 쯤부터 시작한 거 같은데 그래도 매일 매일 열심히 풀어서 엄청 올라옴.. 목표는 1000등 이내다…🔥)