본문 바로가기

Project

 (63)
[팀플 - Travel Jeju] 15th course - Travel Course XII [ 오늘 할 일 ] 여행경로 모달 구현 [ 전체적인 흐름 ] Oven 웹 페이지를 이용하여 모달에 사용할 이미지들 만들기 Carousel를 사용하여 모달 슬라이드식으로 구현 맵 위에 위치한 이용방법 버튼을 클릭 시 모달 형식으로 이용방법에 대한 설명이 나오는데, Oven을 사용해서 이용방법 이미지를 만들어 슬라이드식으로 구현할 예정이다 이미지는 Oven 페이지에서 쉽게 구현할 수 있었다 https://ovenapp.io/ OvenApp.io Oven(오븐)은 HTML5 기반의 무료 웹/앱 프로토타이핑 툴입니다. (카카오 제공) ovenapp.io https://getbootstrap.com/docs/5.0/components/carousel/ Carousel A slideshow component for..
[팀플 - Travel Jeju] 14th course - Travel Course XI [ 오늘 할 일 ] 경로 저장 클릭 시 로그인한 세션 값을 이용하여 해당 유저의 마이 경로 DB에 저장한 여행 경로 추가 [ 전체적인 흐름 ] DB 설계 JSP에서 모달 값 Controller에 필요한 데이터(제목/이미지) 보내기 Controller에서 받은 데이터를 통해 DB에 INSERT 비로그인시 로그인 페이지로 redirect 여행경로를 모두 선택하고 여행경로 저장 버튼을 클릭 시 위 사진과 같이 모달 창이 뜨면서 선택한 여행경로를 모두 보여준다 이후에 사용자가 저장하기 버튼을 클릭 시 DB에 경로를 리스트 형식으로 저장해주어야 한다 (사용자가 마이페이지에서 저장한 여행경로를 볼 때 DB에 저장한 여행경로를 가져와서 보여주는 형식) 테이블은 2개를 만들었다 mycourse 테이블은 PK 값으로 여..
[팀플 - Travel Jeju] 13th course - Travel Course X [ 오늘 할 일 ] 선택한 카드 Drag & Drop 기능 구현 맵 마커 이미지 변경 & 사이즈 축소 오버레이 카드 순서 기입 Drag & Drop 기능 실행 시 마커/오버레이/카드 순서 해당사항에 맞게 변경 오늘 한 결과물 동영상 첨부 Drag & Drop Js 파일이다 사실 상 드로그앤 드롭 기능은 코드 3줄만 있으면 기능 구현은 가능하다 맨 윗줄 $(function()) , .sortable , 맨 아랫 줄 disableSelection() 하지만, 드로그앤 드롭 기능 후에 맵에 찍혀있는 마커들과 오버레이, 그리고 나중에 모달에 쓸 카드들의 타이틀을 담은 names 배열 등 추가해야 할 코드들이 많았다 stop 함수는 드로그앤 드롭을 한 후에 함수를 실행시키는 것이다 모든 순서가 바뀌기 때문에 좌표..
[팀플 - Travel Jeju] 12th course - Travel Course IX [ Trouble ] Jsp에서 For문과 Ajax를 동시에 사용했을 때, 각각의 처리 속도가 달라 보낸 데이터의 순서와 다르게 값을 가져오는 오류 기존 코드 = names 배열 안에 있는 추가한 카드들의 제목들을 반복문을 통해 (,) 기준으로 전부 더해주고 GET방식으로 파라미터를 통해 RestController로 보내는 방식이었다 하지만 스프링 자체에서 배열로 보내면 자동으로 각각의 배열 사이사이에 (,)를 더해주기 때문에 반복문을 제거해도 똑같이 기능이 작동하였다 또한, 반복문에서 비동기 처리를 동기적으로 처리하였다 이 부분에는 자세히 포스팅되어 있는 블로그를 첨부 (본문 맨 아래) https://tecoble.techcourse.co.kr/post/2020-09-01-loop-async/ 반복문에..
[팀플 - Travel Jeju] 11th course - Travel Course VIII [ 오늘 할 일 ] 여행경로 저장 클릭 시 추가했던 카드들을 모달에 순서대로 띄워주기 모달 UI 재구성 지도 마커 이미지 변경 [ 전체적인 흐름 ] 모달에 들어갈 카드 UI 만들어 놓기 여행경로 저장 버튼 클릭 시 순서대로 이름값 가져오기 지도 마커 이미지 변경 ajax를 통해 원하는 데이터만 가져와서 카드 형식으로 모달에 추가 카드 사이사이에 화살표 이미지 넣기 모달에 들어갈 카드 UI는 부트스트랩에서 제공하는 디자인 카드를 가져왔다 각 클래스에 css를 가져와서 아래 이미지처럼 모달에 띄울 카드 UI를 구성했다 그다음으로는 기존 카드 UI를 이용하여 순서대로 카드들을 배치해주는지 테스트를 해봤다 하지만 선택한 순서대로 카드들을 가져오지 않았고 여행경로 저장을 누를 때마다 중복해서 들어가는 문제가 발생..
[팀플 - Travel Jeju] 10th course - Travel Course VII [ 오늘 할 일 ] 전체적으로 css 부분 수정 여행경로 보기 클릭 시 사용자가 카드를 추가한 순서대로 마커끼리 점선을 이어준다 여행경로 저장 클릭 시 모달을 띄워 선택 목록 카드들을 리스트 형식으로 보여준다 [ 전체적인 흐름 ] css 수정 버튼 생성 및 버튼에 이벤트 달기 마커끼리 선 이어주기 (마커들의 좌표를 이용해서) 모달 구현하기 여행경로 보기 버튼을 자바스크립트 단에서 이벤트를 추가하여 addLine 함수를 실행시킨다 addLine 함수는 markers(현재까지 추가된 카드들의 마커들을 담은 배열)를 매개변수로 받아서 반복문을 돌면서 각 마커들의 getPosition(좌표)을 linePath 배열에 push 해준다 카카오 맵 API에서 제공하는 선 만드는 코드를 가져와서 마커끼리 이어주는 선을..
[팀플 - Travel Jeju] 9th course - Travel Course VI [ 오늘 할 일 ] 카드 검색 기능 구현하기 [ 전체적인 흐름 ] input에 사용자가 입력한 값을 ajax를 통해 RestController로 전송 SQL문에 ResultType 모델 작성 RestController는 받은 입력값을 XML로 보내어 원하는 SQL문 작성 DB에서 가져온 정보를 다시 View로 보냄 View에서 받은 데이터를 원하는 형식에 맞게 코드를 작성하여 화면단에 띄워줌 search 함수는 사용자가 검색란에 검색어를 입력하였을 때 그 값을 textValue에 담고 기존에 있던 카드들을 jQuery로 모두 제거한다 그 후에 ajax를 이용하여 파라미터 값을 textValue로 GET방식으로 컨트롤러로 보낸다 그리고 나중에 원하는 데이터들을 가져왔을 때 addToList 함수를 이용하여..
[팀플 - Travel Jeju] 8th course - Travel Course V [ 오늘 할 일 ] 오른쪽 맛집&관광지 카드 리스트에서 카드를 선택했을 때 왼쪽 선택 목록에 선택한 카드를 띄워준다 동시에 오른쪽 카드리스트에서 해당 카드를 삭제한다 동시에 지도에 마커를 생성한다 [ 전체적인 흐름 ] 오늘 할 일을 순서대로 진행 중복제거 및 경우의 수 (총 7가지) 제거 addCard 함수는 반복문을 돌면서 names 배열(선택 목록 배열)과 추가하려는 카드의 Title을 같을 때는 alert으로 추가된 항목인것을 알려주고 그렇지 않을때는 names 배열에 추가한 후에 value(해당 카드의 좌표)를 위도, 경도로 split 한 후에 그 좌표를 가지고 마커를 생성하여 준다 그리고 마커를 만듬과 동시에 position(카드 오버레이)를 만들어주어서 마커 위에 해당 카드의 제목을 같이 띄워..

티스토리툴바