["oo나들이", 웹 개발자를 향한 첫 발걸음]
저는 "oo나들이" 프로젝트를 진행하면서, "Web Programming"역량을 키웠습니다. 한강나들이는 한강 정보를 제공하는 서비스입니다. 다양한 정보를 제공하기 위해, 한강의 위치와 편의시설 위치 등의 정보와 날씨 정보 그리고 커뮤니티 게시판으로 구성했습니다.
저는 다양한 기능을 구현해보고자 DB구조를 설계하고 관리하는 업무를 담당했습니다. 그리고 네이버지도 API를 이용하여 식수대, 자전거대여소 등 편의시설의 위치를 제공하는 안내지도를 제작했습니다. 또한 오시는 길과 사이트 맵, 관리자 페이지를 제작하며 간단한 웹 퍼블리싱 작업도 진행했습니다.
[oo나들이의 첫 번째 수난, 지도 API 사용]
첫 번째로 네이버지도 API의 Marker기능을 사용할 때, 이전에 생성되었던 Marker를 초기화하는 부분에서 많은 어려움을 겪었습니다. 저는 편의시설 안내지도를 제작할 당시, 자전거 보관소와 자전거 대여소 등 편의시설들의 정확한 위치를 표시하기 위해 Marker를 사용했습니다.
그렇기에 선택된 목록이 변경될 때마다 Marker가 초기화되어야했습니다. 하지만 새로운 요청을 했음에도 불구하고, Marker는 초기화되지 않고 계속 쌓이기만 했습니다.
이러한 문제를 해결하기 위해, API에서 제공하는 Overlay Classes의 setVisible() 메서드를 사용했습니다. 하지만 setVisible() 메서드는 가장 최근에 생성한 Marker에만 영향을 주었기에, 2개 이상 Marker가 표시되는 지도에는 적용할 수가 없었습니다.
저는 Marker에 관련된 메서드만을 고려해서 다양한 방법을 시도해봤지만, 계속 똑같은 결과가 나타났습니다. 그렇기에 기존 Overlay를 삭제하고, 새로운 Overlay를 생성하여 Marker를 표시하는 방법을 생각했습니다. 그리고 그 결과, clearOverlay() 메서드를 통해, 결국 원하던 결과를 얻을 수 있었습니다.
[oo나들이의 두 번째 수난, jsp파일에서 js파일로 값 넘기기]
두 번째로 jsp파일의 값을 js파일로 넘기는 부분에서도 어려움을 겪었습니다. 비록 메서드를 jsp파일에 작성하여 사용할 수 있었지만, 관련 메서드를 새로운 파일에 모으기 위해 js파일을 생성하였습니다. 그렇기에 선택된 편의시설의 번호와 위도, 경도를 동시에 넘기는 방법이 필요했습니다.
먼저 input 태그의 hidden 타입을 이용하여, value값으로 편의시설의 번호를 넘길 수 있었습니다. 하지만 두 개의 정보를 어떻게 보내야할지 막막했습니다. 인터넷과 jQuery 자료를 검색하던 중, 여러 개의 값을 넘길 때 class와 title를 사용할 수 있음을 알게 되었습니다. 그리고 그 결과, value와 class, title을 사용하여 세 종류의 정보를 성공적으로 넘길 수 있었습니다.
글자수 1,428자2,264Byte