본문 바로가기

Project

 (63)
[팀플 - 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 등 모든 것들이 처음 접해보는 ..
[팀플 - Travel Jeju] 4th course - Travel Course UI [ 오늘 할 일 ] 여행경로 찾기 기능을 구현하기 위해서 UI부터 구성 기능 추가할 것 정리 팀원 전체 회의 [ 전체적인 흐름 ] 화면단에서 세개의 bar (navbar / left-sidebar / right-sidebar)를 나눈다 메인에 지도를 넣고 나머지 3개의 bar UI 구성 첫 번째 과정으로는 큰 틀을 3개의 bar와 메인(지도 삽입 부분)으로 구성하였다 아직 데이터를 가져오는 코드들은 구상하지 못하였고, css만 이용해서 아래 이미지와 같이 UI를 구성하였다 왼쪽, 오른쪽 사이드바에만 스크롤을 넣어야 하는데 (카드가 많아졌을 때 지도는 스크롤되면 안 되기 때문에 해당 부분에서만 스크롤이 되어야 한다 ) overflow-y 속성에 scroll 값을 주고, 높이를 결정하면 해당 부분에만 스크롤..
[팀플 - Travel Jeju] 3rd course - Map Coordinates [ 오늘 할 일 ] 경로 찾기를 구현하려면 맛집 & 관광지 카드 클릭 시 지도에 마커를 표시하는 기능을 넣어야 한다 (위 이미지의 오른쪽 리스트에서 카드 형식으로 DB에서 데이터를 가져와 만들어줄 예정이다) 지도에 마커를 표시하기 위해서는 좌표를 알아야한다 사용자가 맛집 & 관광지를 등록할 때 좌표를 스스로 넣기에는 많이 부담된다고 판단 사용자가 등록할 때 지도를 삽입해 좌표를 백엔드단에서 알아서 처리해 구해주는 기능을 구현해야 한다 [ 전체적인 흐름 ] 카카오맵을 가져와서 키워드로 장소를 검색해서 원하는 장소를 선택할 수 있게 한다 장소 선택 시 자동으로 위도, 경도를 구해서 DB에 들어갈 값을 채우기 위해 입력값에 자동으로 들어가게 해야 한다 처음으로는 키워드로 장소를 검색하고 목록 리스트를 띄워주는..
[팀플 - Travel Jeju] 2nd course - Modal [ 오늘 할 일 ] 멀티 폴리곤 클릭 시 해당 구역의 정보를 DB에서 가져와 모달에 띄워주기 [ 전체적인 흐름 ] Modal을 hidden으로 숨겨서 미리 띄어놓는다 => Modal을 미리 띄어 놓는 이유는 ajax로 json 데이터만 넘어오게 만들 예정이기 때문이다 멀티폴리곤에 클릭 이벤트를 적용한다 이벤트 발생 시 ajax로 페이지 이동 없이 데이터를 DB에서 가져온다 => 단순히 폴리곤을 클릭 시에 데이터만 수정해주면 되기 때문에 ajax를 이용하였다 모달 UI 및 transform 구성 처음에는 카카오에서 발급받은 키를 이용하여 카카오 맵을 가져왔다 그 후로 미리 만든 폴리곤을 적용시킨 결과 - 폴리곤 만드는 방법 1일차 참조 https://woongbin96.tistory.com/207 그 후에..
[팀플 - Travel Jeju] 1st course - MultiPolygon [ 오늘 할 일 ] 미리 구성된 UI화면 단의 이미지를 멀티 폴리곤으로 만들기 후에 폴리곤을 클릭 시 해당 구역의 내용들을 DB에서 값을 꺼내와 모달로 띄워줄 예정 [ 전체적인 흐름 ] QGIS 프로그램 - shp파일 원하는 구역별로 만들기 shp 파일 -> geojson 파일로 변환 카카오맵 API 이용하여 geojson으로 폴리곤 만들기 - 현재 UI 화면 : 단순 일러스트 이미지로 대체했었다 - 벤치마킹 : 카카오맵 API에서 멀티 폴리곤이 서울로 적용되어 있는 모습 mouseover / click / mouseout 이벤트도 함께 적용되어 있었다 멀티 폴리곤을 만들기 위해서는 json 형식으로 원하는 구역의 좌표값을 받아와야 한다 QGIS 프로그램을 통해 대한민국을 원하는 방식으로 쪼갠 데이터를 ..
[팀플 - Travel Jeju] DB 설계 최종 팀 프로젝트가 시작되었다 프로젝트 시작은 DB설계, 유스 케이스 등 팀원 간 협의하면서 구조를 쌓는 게 먼저라고 생각했다 DB설계라는 것 자체가 시작도 전에 너무 어려울 것 같은 느낌이 들었었고, 경험이 적어 잘못 설계하는건 아닐까 라는 생각도 지속적으로 들 것 같아서 1차 프로젝트 때도 DB설계에는 크게 관여하지 않았었다 하지만 언제까지 그럴순 없었고, 무엇보다 이 프로젝트를 내가 기획했기 때문에 전체적인 구조가 대강 머릿속에 그려지는 내가 DB설계를 도맡아 하는 게 맞는 것 같았다 몰론, 글을 쓰는 지금 이 순간에도 수정해야 하는 부분이 보인다 또한 기능을 하나하나 추가하면서 변동되는 컬럼들, 비즈니스 로직을 단순화 시키기위해 DB에 비중을 좀 더 주는 것으로 인해 변동되는 테이블도 많을 것이고..

티스토리툴바