Team Project 17

제주도 여행 프로젝트의 마무리.

6개월간의 공부의 마침표인 마지막 프로젝트가 끝났다! 첫 번째 프로젝트때에는 실력은 부족한데 마음만 앞서 번역기능, 광고페이지 등... 여러 페이지와 기능을 넣고싶었으나 팀원들 모두 팀프로젝트가 처음이기에 공유DB 및 git hub을 다같이 사용하는데 시간이 꽤나 걸렸고 나의 열정과 모두 열정적이 같지는 않아서 아쉬웠었다. 마지막 프로젝트때에는 첫번째 프로젝트와 달리 친구와 둘이 토이프로젝트로 진행하고있던 제주도 여행 프로젝트를 팀프로젝트로 진행하면 좋을것 같다는 생각이들어 사전발표를 통해 같이 마음맞는 열정적인 사람들을 모집하여 팀프로젝트로 진행하였다. 마지막 프로젝트는 3주라는 짧은 기간안에 완성해야했기때문에 간트 차트를 이용하여 시간관리를 하였고 6명의 팀원 안에서도 둘씩 짝을지어 1팀 2팀 3팀으..

게시물 저장

(게시물 페이지는 글쓴이가 만든 페이지가 아니며 구성된 UI에 저장기능 백앤드 부분만 만들어주었다.) 기능 : 게시물 저장 기능 특징 : 카카오 맵 api를 이용하여 위도 경도를 받는다. (사용자가 맛집,관광지를 등록할때에 맛집의 위치를 알아야 경로만들기 페이지에서 맛집을 클릭했을때에 지도위에 위치가 표시되며 경로를 만들 수 있기 때문이다.) 글쓴이가 가장 고민하였던 문제는 태그안에 제목,명소이름,장소,해시태그,내용,위도,경도 값들이 들어가야하는데 카카오 맵 Api에서 제공하는 검색기능을 이용할때에 태그를 이용하여 검색하는데 바깥쪽에 태그가 한번더 감싸고 있으면 바깥쪽의 태그가 작동한다는 문제였다. 그래서 맵 아래쪽에 위치하는 위도,경도를 태그 바깥쪽으로 뺏는데 값을 어떻게 전해줘야 할지라는 문제가 생긴..

Polygon의 원하는 지역 클릭 후 게시물 띄우기

기능 : 폴리곤의 원하는 지역을 클릭시 상세보기 모달이 나오며 상세보기 클릭시 게시판 페이지로 이동하여 그 지역에 해당하는 맛집이 나오게된다. 구현방법 : 폴리곤에서 원하는 지역 클릭 -> 지역을 소개하는 모달이 띄워진다 -> 지역명 게시판 페이지의 검색바에 전달 -> 검색바안에 값이 있는지 없는지를 체크 -> 값이 있다면 그 값에맞는 지역명을 띄워줌, 없을시에는 원래 게시판 목록을 띄워준다. 문제점 : 게시판에서 원하는 지역만을 검색하는 기능을 애초부터 가지고 있었어야 했으나 기능이 구현되있지 않아서 검색창에 지역명값을 넣고 지역만 따로 검색하는 번거로운 방법을 사용하였다. (게시판은 내가 담당한 페이지가 아니여서 여러 문제점이 발견되었으나 프로젝트 마무리까지 시간이 촉박하여 수정해 줄 수는 없었다....

MyCourse 모달에 띄우기 및 DB에 값 저장

1.MyCourse 모달에 띄우기 2.DB에 값 저장하기 # 1. MyCourse 모달에 띄우기 여행 경로 저장 버튼을 누를시에 선택목록에 담아두었던 목록들을 모달로 띄워주는 기능이며 마이 경로페이지에서 내가 만들어 경로를 저장하여 나중에도 볼 수있게 하기 위해서 만들었다. 경로의 순서는 Drag & drop을 이용하여 선택목록에서 변경한 순서대로 모달에 출력하여준다. 모달은 비동기 처리방식(ajax)으로 값을 띄워주며 선택목록에 있는 카드들에 id값을 querySelectorAll을 이용하여 변수에 담아주었고 이후 반복문을 이용하여 names배열에 id값을 모두 담아주어 submitModal에 매개변수로 전달하여준다. submitModal은 비동기 처리방식으로 값을 처리하는 펑션이며 GET방식으로 na..

드로그 앤 드롭 기능 구현.(경로 및 순서 다시 그리기)

드로그앤 드롭을 이용한 기능구현이다. 드로그 앤 드롭을 사용할때에 생각해야할 포인트가 2가지가 있었다. 첫 번째로는 드로그 앤 드롭으로 순서를 바꿀때에는 맵의 경로를 표시해주는 선이 전부 사라져야한다는것이고 두 번째로는 텍스트 마커에 표시된 순서가 지워져야한다는 것이였다. 사실 드로그 앤 드롭 자체는 제이쿼리 3줄이면된다 어렵지않다 https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 위의 링크 3줄과 위의 이미지와같이 드래그 앤 드롭을 사용할 요소의 id또는 class를 넣어주면된다. (#leftSiderbar-3의 하위 요소들을 드로그 앤 드롭할수 있게된다) html단의 구성된 모습..

카카오 맵API를 이용하여 경로, 텍스트 순서 그리기 및 경로,마커 삭제방법

저번글에서는 API를 이용하여 마커와 텍스트(커스텀오버레이)를 구성하여 카드가 선택목록으로 넘어갈때마다 맵에 추가되는 글을 작성하였었다. 이번 글에서는 경로를 그려주는 방법 및 경로,마커를 삭제하는 방법에 대해서 작성한다 사실 모든 경로와 마커를 지우는것은 그리 어렵지않으나 마커를 하나씩만 지우는 방법에 대해서는 꽤나 고민이 필요하였다. 좋은방법으로 구성한것같지는 않으나 지금 실력으로는 이 방법바께는 생각나지 않음이 아쉬웠다. 앞에 작성한 글과 이어지는 내용이므로 링크를 참조하였다. https://choidoosic.tistory.com/148 카카오 맵 API를 이용하여 마커와 텍스트 그려주기 해당 이미지에는 경로 이외에도 텍스트를 통하여 순서를 표기하여주었는데 순서 표기에 대한 부분은 해당 글에서는 ..

카카오 맵 API를 이용하여 마커와 텍스트 그려주기

해당 이미지에는 경로 이외에도 텍스트를 통하여 순서를 표기하여주었는데 순서 표기에 대한 부분은 해당 글에서는 다음 글에서 다루도록 하겠다. 일단 해당 기능을 구현하기에 앞서서 맛집과 관광지 카드들이 좌표를 들고있어야 해당 기능을 구현할수 있다. 맛집과 관광지에 대한 게시물은 유저가 작성하기 때문에 어떻게해야할까 라는 생각을하였고 게시물을 등록할때에 좌표를 찍어주면 되겠다 라는 생각을하였고 유저의 불편함을 최대한 없에기 위하여 아래의 영상과 같은 방법을 생각하여 구현해두었다. 게시물을 작성하는 게시판에 들어간 모습은 아니지만 위의 영상과 같은 방법으로 유저에게 좌표를 입력받을 생각이다. 카카오 맵API에서 제공해주는 검색기능을 통하여 자신이 원하는 관광지 또는 맛집을 검색후 마커를 클릭하여주면 위도,경도값..

기상청 날씨 api를 이용해 제주도의 실시간 날씨정보 띄워주기

경로를 짤수있는 페이지를 만드는데 제주도의 날씨를 알수있으면 참 좋겠다 싶어서 기상청 날씨api를 이용하여 실시간 날씨정보를 받아왔다. 현재는 1일 분량의 정보를 가져오기만 하였는데 일주일치를 가져와서 띄워주는것은 조금더 생각해봐야겠다. 현재 제주도의 하늘상태에따라 이모티콘이 바뀌고 현재온도와 강수량을 띄워준다. weather-con : 이모티콘의 값, temp : 현재온도, pty : 강수량의 값을 innerHTML을 통해서 넣어준다. 처음 코드를 구성할때에는 ajax 방식을 통해서 데이터를 주고받는것이 아닌 Controller에서 jsp페이지를 호출할때에 기상청 데이터의 값을 모두 들고넘어가는 방식을 사용하였었다. 하지만 이 방식에는 크나큰 문제가 있었다... Controller에서 바로 데이터를 가..

카카오 맵 Api Polygon 을 이용한 구역 나누기 + 모달

※ 깃허브로 팀원들과 코드를 합치기 전이라 코드의 정리와 변수명의 정리가 아직 이루어지지않았다. 글쓰기에 앞서 이번 기능은 카카오 맵 API의 Polygon을 이용하여 구역을 나누고 모달을 띄운후 메인페이지에서 원하는 지역을 클릭시 해당 지역을 모달로 간략하게 소개시켜주고 글 클릭시 해당 구역의 맛집 게시판으로 이동시켜주는 기능을 만들었다. 제주시와 서귀포시 좌표를 처음 받았을때에는 아래 이미지와 같이 세분화되어있었다. 이 부분에대한 좌표를 얻는법과 나눠진 구역을 병합하고 너무 세분화된 꼭지점을 최소화시켜주는 방법은 아래 주소에 포스팅을 따로해두었다. QGIS 프로그램 , MapShaper 사이트, 대한민국 최신 SHP행정구역 파일 등 필요한 사용방법과 주소를 모두 적어두었다. 아래 포스팅 글을볼때에 꼭..

제주도 여행 프로젝트 ERD, 유스케이스

이번 프로젝트의 ERD와 유스케이스다. 마지막 프로젝트이나 기간이 3주밖에 주어지지않아 친구와 둘이서 프로젝트 시작전 테이블을 구성하였고 테이블을 구성하는것이 첫번째 프로젝트때 해보고 하지않았기에 미숙했지만 미숙한 부분을 보안하기 위해 테이블을 맞아서 프로젝트 시작전에 미리 구성하였고 잘 짰다고는 할 수 없으나 중간중간 수정을 하며 사용하였다. ERD를 작성하였던 사이트 입니다. ERDCloud ERDCloud Draw ERD with your team members. All states are shared in real time. And it's FREE. Database modeling tool. www.erdcloud.com 유스케이스는 PPT로 만들어둔것이라 따로 사이트는 없습니다 ㅎㅎ

728x90