Spring (33) 썸네일형 리스트형 [팀플 - 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 그 후에.. 리다이렉트 & 인터셉터 # Redirect - 지금의 페이지에서 특정 페이지로 전환하는 기능 # Interceptor - 리다이렉트를 사용해야 하는 경우가 많은 경우 HandlerInterceptor를 이용할 수 있다 - preHandle로 지정을 해준다 (가장 많이 사용한다) - Spring에서 제공하는 인터페이스 (HandlerInterceptorAdapter)를 상속받는 클래스를 만들고 입맛에 맞게 변형 예시) 후에 컨테이너에 등록 세션 & 쿠키 # Session & Cookie - Connetionless Protocol 웹 서비스는 HTTP 프로토콜을 기반으로 하는데, HTTP 프로토콜은 클라이언트와 서버의 관계를 유지하지 않는 특징이 있다 (서버의 과부화를 피하기 위해서 한번 연결하고 끊는다) 서버의 부하를 줄일 수 있는 장점은 있으나, 클라이언트의 요청 시마다 서버와 매번 새로운 연결이 생성되기 때문에 일반적인 로그인 상태 유지, 장바구니 등의 기능을 구현하기 어렵다 이러한 Connectionless Protocol의 불편함을 해결하기 위해서 세션과 쿠키를 이용한다 세션과 쿠키는 클라이언트와 서버의 연결 상태를 유지해주는 방법으로, 세션은 서버에서 연결 정보를 관리하는 반면 쿠키는 클라이언트에서 연결 정보를 관리하는데 차이가 있다 스프링 .. Controller 객체 구현 # 웹 애플리케이션 준비 # @RequestMapping을 이용한 URL맵핑 # 커멘드 객체를 이용한 HTTP전송 정보 얻기 @ModelAttribute를 이용하면 커멘드 객체의 이름을 변경할 수 있고, 이렇게 변경된 이름은 뷰에서 커멘드 객체를 참조할 때 사용된다 # Model & ModelAndView 컨트롤러에서 뷰에 데이터를 전달하기 위해 사용되는 객체로 Model과 ModelAndView가 있다 두 객체의 차이점은 Model은 뷰에 데이터만을 전달하기 위한 객체이고, ModelAndView는 데이터와 뷰의 이름을 함께 전달하는 객체이다 Service & Dao 객체 구현 # 웹 애플리케이션의 일반적인 프로그램 구조 # 한글 처리 # 서비스 객체 구현 # DAO 객체 구현 STS를 이용하지 않은 웹 프로젝트 설정하기 스프링 MVC 웹 애플리케이션 제작을 위한 폴더 생성 pom.xml 및 이클립스 import web.xml 작성 스프링 설정 파일(servlet-context.xml) 작성 root-context.xml 파일 작성 # 설정 끝난 후에는 컨트롤러와 뷰를 작성하기 시작하면 된다 이전 1 2 3 4 5 다음
