카카오 지도 API로 서블릿&JSP 게시판 글쓰기 구현하기

🎯 서블릿&JSP 게시판에 카카오 지도 API를 사용한 글쓰기 기능을 구현해본다.

 

카카오 지도 API를 사용하여 지도 정보를 포함한 게시글 작성 기능을 구현했습니다. 지도 검색창에 키워드로 위치 검색 후 나타나는 마커를 클릭하면 지도 아래에 선택된 좌표가 표시됩니다. [저장]버튼 클릭시 게시물 내용과 함께 선택된 좌표가 DB에 저장됩니다.

 

 

개발환경: 서블릿&JSP, 마이바티스, 오라클DB

준비사항: 게시판 DB, 게시판 모델 DTO

 

 

1. 카카오 App Key 발급받기

카카오 지도 API 가이드 👉 https://apis.map.kakao.com/web/guide/

[준비하기] 영역을 읽어보고 카카오 개발자 사이트에서 자바스크립트 App Key를 발급받으세요.

 

 

2. 사용할 지도 샘플 선택

https://apis.map.kakao.com/web/sample/keywordList/

저는 키워드 검색기능을 사용하기 위해 [키워드로 장소검색하고 목록으로 표출하기] 샘플을 사용했습니다.

HTML을 포함한 스크립트 코드를 참고했습니다.

 

 

3. JSP페이지에 API 스크립트 삽입

freeBoardWrite.jsp:

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요&libraries=services"></script>

발급받은 APP KEY를 사용하세요 부분에 1번에서 발급받은 자바스크립트 앱 키를 넣습니다.

 

 

4. 스타일태그 삽입

상단에 있는 아주 긴 스타일 태그를 head에 복붙합니다.

 

 

5. Body 작성

<%

//로그인 정보 얻어오기

MemberDTO dto = (MemberDTO)session.getAttribute("login");

String userid = dto.getUserID();

%>

회원가입과 로그인기능이 구현되어있을 경우 로그인 정보를 DB에서 얻어옵니다. 작성자명으로 사용하기 위해 사용자 id를 파싱했습니다.

 

 

게시물 작성 폼 만들기

<form action="FreeBoardWriteServlet" method="post">

폼 데이터 입력 후 submit 하면 FreeBoardWriteServlet에서 게시물 insert 로직을 처리하게 됩니다.

 

<label for="title">제목</label>

<input type="text" name="title" id="title">

제목영역입니다. 서블릿에서 파싱할 수 있게 name 속성을 꼭 지정해줍니다.

 

<label for="userid">작성자</label>

<input type="text" name="userid" id="userid" value="<%= userid %>" readonly>

작성자 영역입니다. 위에서 파싱한 userid를 기본값으로 지정해주고 수정 불가능하게 readonly를 지정해줍니다.

 

<label for="content">내용</label>

<textarea name="content" id="content" cols="30" rows="7" style="padding:20px"></textarea>

글내용 영역입니다.

 

 

지도 표시 영역 만들기

이 부분을 복붙합니다. 이미 지도영역이 form 태그 안에 있기 때문에 이 부분에 있는 form 태그는 지우고 검색버튼에 클릭이벤트 속성을 지정했습니다.

<input type="button" id="searchBtn" onclick="searchPlaces()" value="검색">

searchPlaces() 이 함수는 스크립트 코드에 있는 함수입니다.

 

 

스크립트 코드 전체 삽입

스크립트 코드를 전체 복붙하고 필요한 부분을 수정했습니다.

 

for ( var i=0; i<places.length; i++ ) {

반목문 돌아가고 있는 이 부분 살펴보기

 

 

   Error !    

좌표 정보와 위치이름을 가져오기 위해 마커에 클릭이벤트를 추가하기로 했습니다. 그런데 이 부분에서 mouseover를 단순히 'click'으로 바꾼다고 원하는 결과가 나오진 않았습니다.

 

https://apis.map.kakao.com/web/sample/multipleMarkerEvent/

반복문 안에 있기 때문에 클릭 이벤트를 걸었을 경우 마지막 마커에만 이벤트가 등록되어서 계속 똑같은 좌표만 찍고있었습니다. 검색해보니 클로저 형태가 필요했습니다.

 

 

   Fix !   

(function (marker, title) {

    kakao.maps.event.addListener(marker, 'click', (function(placePosition) {

    displayInfowindow(marker, title);

    return function() {

        // 좌표정보를 파싱하기 위해 hidden input에 값 지정

        $("#latitude").val(placePosition.La);

        $("#longitude").val(placePosition.Ma);

        $("#placeName").val(title);

        // #result 영역에 좌표정보 출력

        var resultDiv = document.getElementById('result');

        resultDiv.innerHTML = '선택하신 위치는 ' +'"'+title+'"' +placePosition+' 입니다';

    }

})(placePosition));

https://www.phpschool.com/link/qna_html/300536

이 유용한 댓글 덕분에 문제를 해결할 수 있었습니다.

핸들러 함수는 좌표정보가 담긴 placePosition 변수를 받아오고 함수를 리턴합니다.

placePosition 객체를 콘솔에 찍어보니 La와 Ma로 경도 위도 정보를 갖고있어서 그 데이터를 서블릿에 넘겨주기 위해 hidden input의 value값으로 지정해줬습니다.

클릭한 위치정보를 div 영역에 innerHTML로 출력까지 하고 클릭핸들러는 즉시호출됩니다.

 

 

// 키워드 검색창에서 엔터 칠 경우 페이지 이동 방지

$("#keyword").on("keydown", () => {

    if (event.keyCode === 13) {

        event.preventDefault();

    }

})

지도 검색창에서 습관적으로 엔터를 쳤다가 페이지가 전환되는 경우를 막기 위해 검색창에 이벤트를 하나 추가했습니다. 이제 스크립트 안에서 수정할 부분은 끝났습니다.

 

<input type="hidden" id="placeName" name="placeName" value="">

<input type="hidden" id="latitude" name="latitude" value="">

<input type="hidden" id="longitude" name="longitude" value="">

<div id="result"></div>

여전히 폼 안에서 필요한 요소를 작성합니다. 위에서 select했던 hidden 인풋과 위치결과를 출력하는 div 영역입니다.

 

<input type="submit" value="저장">

</form>

마지막으로 submit 버튼까지 만들고 폼이 끝났습니다.

 

 

6. Servlet 작성

FreeBoardWriteServlet:

// 데이더 파싱

String title = request.getParameter("title");

String userid = request.getParameter("userid");

String content = request.getParameter("content");

String placeLa = request.getParameter("latitude");

String placeMa = request.getParameter("longitude");

String placeName = request.getParameter("placeName");

폼에서 넘어온 데이터를 파싱합니다.

 

// 게시판DTO 타입으로 객체생성

FreeBoardDTO fDTO = new FreeBoardDTO(0, title, userid, content,null, 0, placeName, placeLa, placeMa);

미리 만들어둔 게시판 DTO 타입으로 생성자 형식에 맞게 파싱한 데이터를 세팅해줍니다.

 

// service 객체 생성 후 db insert 처리

FreeBoardService service = new FreeBoardService();

service.insert(fDTO);

서비스 객체를 생성하고 세팅된 게시판 dto를 insert로직으로 넘겨줍니다.

 

// 게시판 목록으로 이동

response.sendRedirect("FreeBoardListServlet");

insert 처리 후 게시판 목록으로 페이지를 이동시킵니다.

 

 

7.  게시글 데이터 insert

// service

public void insert(FreeBoardDTO dto) {

SqlSession session = OracleSqlSessionFactory.getSession();

  FreeBoardDAO dao = new FreeBoardDAO();

  try {

    dao.insert(session, dto);

    session.commit();

  } catch (Exception e) {

    e.printStackTrace();

  } finally {

    session.close();

  }

}

 

// dao

public void insert(SqlSession session, FreeBoardDTO dto) {

    session.insert("FreeBoardMapper.insert", dto);

}

 

// mybatis Mapper

<insert id="insert" parameterType="FreeBoardDTO">

    insert into freeBoard(num, title, userid, content, writeday,

            readcnt, placeName, placeLa, placeMa)

    values(freeBoard_seq.nextval, #{title}, #{userid}, #{content}, sysdate,

            0, #{placeName}, #{placeLa}, #{placeMa})

</insert>

 

DB에 잘 들어갔나요? 이제 모든 글쓰기 기능이 끝났습니다 👏

 

 

 

😜 NEXT : 카카오 지도 API로 서블릿&JSP 게시물 상세보기 구현해보기