본문 바로가기

teamproject

(20)
[팀플 - 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(카드 오버레이)를 만들어주어서 마커 위에 해당 카드의 제목을 같이 띄워..
[팀플 - Travel Jeju] 7th course - Travel Course IV [ 오늘 할 일 ] 여행경로 서비스 - 맛집 & 관광지 리스트 Controller -> RestController로 변경 여행 & 관광지 버튼 클릭 시 ajax로 데이터만 수정하는 방식으로 변경 [ 전체적인 흐름 ] 버튼 클릭 시 파라미터로 어떤 버튼을 클릭했는지 같이 전송 RestController에서 파라미터 값으로 원하는 sql문 실행하여 값을 받아온다 DB에서 가져온 값을 해당 값에 맞는 모델에 실어 jsp로 보낸다 jsp에서는 javascript단에서 데이터를 원하는 형식에 맞추어 html단으로 전송 html단에서 화면에 노출 ajax를 이용하기 전에 일반 Controller를 이용하여 카드를 띄우는 코드 forEach문을 이용하여 미리 작성해둔 카드 UI의 원하는 위치에 이미지, 제목, 위치들..
[팀플 - Travel Jeju] 6th course - Travel Course III [ 오늘 할 일 ] 날씨 API를 이용하여 여행경로 서비스에 제주도 날씨 상시 업데이트 기능 추가 [ 전체적인 흐름 ] json 형태로 데이터를 받아오기 때문에 pom.xml에 라이브러리 추가 새벽 2시 기상정보 업데이트 - 12시~2시까지의 빈 시간대는 오류 발생 날씨 관련 모든 정보를 받은 데이터를 원하는 값만 추출 원하는 값들을 조합하여 해당 기상정보에 맞게 이모지로 변경 이모지, 강수량, 현재 온도만 view단으로 모델에 실어서 전송 jsp의 javascript 단에서 원하는 디자인에 맞게 구성 html단으로 전송하여 화면에 출력 날씨 정보를 담은 데이터가 json형식으로 api에서 넘어오기 때문에 json 라이브러리를 추가하였다 이때 주의할 점은 pom.xml에 라이브러리를 추가하고 maven을..
[팀플 - Travel Jeju] 5th course - Travel Course II [ 오늘 할 일 ] 여행경로 찾기 디자인 수정 맛집 & 관광지 리스트 UI 구성 서비스 이용방법 Modal로 구성 [ 전체적인 흐름 ] Front단은 부트스트랩을 이용하여 각각의 요소 (버튼 디자인, 카드 UI 등)들을 디자인 Modal 만들기 DB-카드리스트 연동 6명의 팀원이 2인 1조로 3개의 조로 나뉘어 계획을 구성하였다 3주라는 짧은 시간 안에 프로젝트를 완성해야 하기 때문에 계획을 방대하게 잡기에는 어려움이 있을 것 같아서 필수적으로 필요한 기능들을 우선순위로 나누어 계획을 구성하였다 내가 속해 있는 조는 지도 API를 많이 이용해야 하는 기능들을 도맡았다 폴리곤, 여행경로 및 리스트, 사용자가 등록하는 게시글 안에서의 map (좌표를 알기 위함), 날씨 API 등 모든 것들이 처음 접해보는 ..