한국성서대학교컴퓨터소프트웨어학과 BoostCourse (Full-Stack Developer) 김석래
예약서비스
기본제공페이지
Spring Framework 시스템설정 (pom.xml) Pom.xml Spring DB Servlet JSON 아직확실히필요한지알수없음 dbcp MySQL DTO DTO DAO Controller Service View Config Pom.xml Web.xml
시스템설정 (web.xml) Web.xml Spring Framework context-param contextconfiglocation ApplicationConfig ( 자바코드로설정 ) ContextClass AnnotationConfigWebApplicationContext ( 어노테이션설정사용 ) listener ContextLoaderListener ( 어떤특정이벤트가발생했을때동작 ) MySQL DAO DTO Controller DTO Service View Servlet DispatcherServlet (Controller 의주요역할 ) Init-param ContextClass AnnotationConfigWebApplicationContext ( 어노테이션설정사용으로 dispatcherservlet 에알림 ) ContextConfigLocation WebMvcContextConfiguration (controller 에 resource 자원어떻게읽을지알리는설정 ) Config EncodingFilter CharacterEncodingFilter Pom.xml Web.xml
Spring Framework 시스템설계 (config) Config DBConfig 설정 DataSource @PlatformTransactionManager @ProperySource Application.properties ApplicationConfig 설정 @ComponentScan (Dao, Service) Import DBConfig MySQL DAO DTO Controller DTO Service View WebMvcContextConfiguration 설정 addresourcehandler() (resource 자원경로설정 ) addviewcontrollers() ( 특정경로에대한 View 처리 ) configuredefaultservlethandling() (? ) getinternalresourceviewresolver() (View Resolver 설정 ) Config Pom.xml Web.xml
View Flow View JSP 페이지이동에관한문서 예매자한줄평더보기 이전화면이동 detail 이전화면이동 review 상세 Page reserve 네이버, 예약 네이버, 예약 네이버, 예약 mainpage 네이버, 예약 닫기, 네이버예약 네이버, 예약 예약확인 예약 bookinglogin myreservation 이전화면으로이동예매자리뷰달기 - mainpage 1) 예약확인 (bookinglogin) 2) 예약 (myreservation) 3) 상세페이지 (detail) - bookinglogin 1) 네이버예약, 닫기 (mainpage) - myreservation 1) 네이버, 예약 (mainpage) 2) 예매자리뷰달기 (reviewwrite) - reserve 1) 네이버, 예약 (mainpage) 2) 이전화면이동 (detail) - detail 1) 네이버, 예약 (mainpage) 2) 예매자한줄평더보기 (review) 3) 예약확인 (myreservation) - review 1) 네이버, 예약 (mainpage) 2) 이전화면 (detail) reviewwrite - reviewwrite 1) 네이버, 예약 (mainpage) 2) 이전화면 (myreservation) 예약확인
Promotion MainPage (Promotion) Category Tab UI View 메인페이지 Loading 시필요한데이터출력 Promotion Tab UI (Category) JavaScript 1. 프로모션 Data 를 Ajax 통신으로가져오기 2. 가져온데이터를 HTML Templating CSS & JS 1. 프로모션이미지를 Transition, Transform 을이용, 어떤방식으로움직일지정의 2. JS 로동적인부분처리 JavaScript 1. 카테고리 Data 를 Ajax 통신으로가져오기 2. 가져온 Data 를카테고리템플릿과 HTML Templating 특정 Category 의 item 을 4 개씩출력 Product Item JavaScript 1. 기본적으로페이지로딩시 /api/products 로 API 호출 - 전체데이터를출력 2. 카테고리클릭시카테고리에해당하는 Product 출력 - id, index 데이터를포함하여호출 - product 개수, product 데이터출력 Category Event JS 1. 일일이 li 에이벤트등록하지않고 ul 에등록하기 2. LI 이상범위클릭시이벤트 X 3. ClassList 에서 active 제거 4. Click 된부분만 active 추가
@Controller vs @Controller + @ResponseBody vs @RestController Spring MVC @Controller @Controller + @ResponseBody @RestController @Controller 1 Client 의요청이발생 Client (Browser) Request (URL) Dispatcher Servlet Handler Mapping Controller 2 Dispatcher Servlet 은 Handler Mapping 에게클라이언트가요청한작업을수행할수있는컨트롤러가무엇이있는지정보를받는다. 3 Dispatcher Servlet 가 2 번의정보를받은후에 Handler Adapter 에게작업수행이가능한 Controller 에게실행을요청 prefix + View Name + suffix View Resolver View Name 4 그결과를 Model 에받아 Dispatcher Servlet 에게전달 5 컨트롤러가리턴한 View name 은 View Resolver 가적절한 View 를찾아실행
@Controller vs @Controller + @ResponseBody vs @RestController Spring MVC @Controller @Controller + @ResponseBody @RestController @Controller + @ResponseBody - Restful 방식 1 Client 의요청이발생 Client (Browser) Ajax Request (URL) Dispatcher Servlet Handler Mapping 2 Dispatcher Servlet 은 Handler Mapping 에게클라이언트가요청한작업을수행할수있는컨트롤러가무엇이있는지정보를받는다. 3 Dispatcher Servlet 가 2 번의정보를받은후에 Handler Adapter 에게작업수행이가능한 Controller 에게실행을요청 @ResponseBody JSON 타입으로변환시켜넘겨줌 Controller 4 Controller 에서작업처리후리턴 ( 이때, 컨트롤러클래스의메서드리턴타입에 @ResponseBody 를포함 ) 5 Dispatcher Servlet 으로리턴된후 Dispatcher Servlet 은 View 로전달 6 @ResponseBody 어노테이션을사용하여 View 를리턴하지않고컨트롤러에서직접데이터를리턴 (Spring 은 Http 응답에리턴값을자동변환 )
@Controller vs @Controller + @ResponseBody vs @RestController Spring MVC @Controller @Controller + @ResponseBody @RestController @RestController - Spring 4.x MVC Restful Web Service 1 Client 의요청이발생 Client (Browser) Ajax Request (URL) Dispatcher Servlet Handler Mapping 2 Dispatcher Servlet 은 Handler Mapping 에게클라이언트가요청한작업을수행할수있는컨트롤러가무엇이있는지정보를받는다. 3 Dispatcher Servlet 가 2 번의정보를받은후에 Handler Adapter 에게작업수행이가능한 Controller 에게실행을요청 Http Response Controller @RestController (@Controller + @ResponseBody) 4 Controller 에서작업처리후리턴 (@RestController 가적용된클래스는메서드에 @ResponseBody 가기본으로적용 ) 5 데이터를넘길때 String 으로전달할지 Object 로전달할지는선택
API Controller Spring MVC API 만들기 API 호출 Flow 1 사용자의 URL 요청 2 @RestController 에서 @Service 를호출 Client (Browser) /api/proudcts return Map URL Mapping @Controller Controller 특정작업호출 DTO @Service Service Transaction (totalcount, productscount, Products) 하나의작업에필요한 DB Query 호출 @Repository DAO TotalCount ProductsCount Products 3 @Service 에서필요한 DAO (@Repository) 메서드들을호출 4 DAO 에서호출한 Query 의결과값을받아핸들링할타입으로저장 5 Service 에서작업단위에해당하는결과값들을취합 6 Controller 에서 Service 메서드를호출한값을저장, View 에전달하기위해 Map<String, Object> 형식으로저장 7 View 에서 Key 값으로필요한 Object 를핸들링
Promotion List 11개 Promotion Title Promotion DESC MainPage (Promotion) Promotion Image View 메인페이지 Loading 시필요한데이터출력 Promotion 1. MainPage 에 DOMContentloaded 시 Ajax 통신으로 DB 의데이터를가져와배열에저장 2. 배열에저장된 HTML Template 에필요한파라미터를채우기 3. 페이지출력 4. CSS3 Transition, Transform 속성을활용해서구현 Controller /api/promotions 페이지 DOMContentLoaded InitJS ajaxpromotion 프로모션데이터호출 프로모션 HTML 제작 JS Flow 1. 페이지 DOMContentLoaded 시 JS 시작 2. Ajax 로데이터호출 3. 호출된데이터로 Promotion HTML 작성 4. 프로모션 Slide Promotion 프로모션데이터전달 createpromotioncontents JS Category Tab UI Product Item 카테고리데이터출력 mainpage 카테고리에맞는 product 데이터출력 slidepromotion 프로모션슬라이드구현
MainPage (Category) View 메인페이지 Loading 시필요한데이터출력 Promotion Controller /categories Promotion Category List 5 개 프로모션데이터전달 페이지 DOMContentLoaded InitJS ajaxcategory createcategory 카테고리데이터호출 카테고리컨텐츠작성 Tab UI (Category) 1. Controller 에서 ModelMap 으로넘겨준데이터를 JSTL 로출력하기 2. Ajax 로 Controller 에 api/categories URL 을호출하여 DB 에접근, DB 에서가져온데이터를 JSON type 으로변환하여 HTML Templating 1 페이지로드 (DOMContentLoaded) 2 Ajax 로 api/categories 에 API 호출 3 JSON 데이터타입으로변환하여 DB category 데이터를반환 4 HTML Template 방식으로출력하여하드코딩하지않도록함 3. 211.249.62.123/api/categories 에서반환되는 JSON 타입데이터를가져와처리하기 JS Category Tab UI 카테고리데이터출력 mainpage 특정 Category 의 item 을 4 개씩출력 Product Item 카테고리에맞는 product 데이터출력
MainPage (Product) View 메인페이지 Loading 시필요한데이터출력 Promotion Tab UI (Category) 특정 Category 의 item 을 4 개씩출력 Category List 5 개 Controller /products JS Promotion Category Tab UI Product Item 프로모션데이터전달 카테고리데이터출력 mainpage 카테고리에맞는 product 데이터출력
MainPage (Product) View 메인페이지 Loading 시필요한데이터출력 Promotion Click 필요한정보 : 카테고리구분키워드 출력될정보 : 카테고리에해당하는아이템개수및아이템내용 Tab UI (Category) 1. Category UI 에 Event delegation 방식으로등록 특정 Category 의 item 을 4 개씩출력 url 호출 1. 클릭이벤트로 target 의 category 명을받아옴 2. Ajax 로해당카테고리의아이템개수, 아이팀을출력 2-1 아이템목록을출력시전체아이템을가져와 더보기 클릭시미리가져왔던데이터를출력 2-2 아이템목록출력시 4 개씩출력 더보기 클릭시다음 4 개아이템을출력 Controller /products { id,. description, placename, content } JS Product Item
카테고리 UI 구현 Categories scriptload InitCategory ( 속성초기화 ) registevent ( 이벤트등록 ) ajax 공통 js 에서 Ajax 호출 getdata (Ajax) contents settemplate ( 템플릿 ) Category 1. 카테고리 UI 만들때필요한속성을초기화함수 2. 템플릿만드는함수 (Ajax 는공통 js 를만들어호출 ) 3. 이벤트등록함수 4. 탭을클릭해서 selected 된 TabUI 색변화함수 5. 탭클릭시 Products 불러오는함수 changetab ( 선택탭색깔 ) categories 템플릿작성
프로모션 UI 구현 scriptload ajax contents InitPromotions ( 기본함수호출 ) Slide ( 슬라이드애니메이션 ) 공통 js 에서 Ajax 호출 getdata (Ajax) settemplate ( 템플릿 ) Promotions Promotions 1. 프로모션 UI 만들때필요한속성을초기화함수 2. 템플릿만드는함수 (Ajax 는공통 js 를만들어호출 ) 3. 슬라이드애니메이션적용 ( 캐러셀슬라이드는나중에..) Slide 구현방식 Queue 구조로동작맨앞노드가이동된뒤마지막노드뒤로붙음 NODE
프로덕트 UI 구현 scriptload ajax contents InitPromotions ( 기본함수호출 ) registevent ( 이벤트등록 ) 공통 js 에서 Ajax 호출 getdata (Ajax) settemplate ( 템플릿 ) Products Products 1. 화면로딩시전체리스트의데이터를불러온다. 2. 템플릿만드는함수 (Ajax 는공통 js 를만들어호출 ) 3. 카테고리클릭시해당카테고리에맞는프로덕트데이터를호출 4. 더보기클릭시프로덕트데이터호출 InitProductsUI (products 초기화 ) addproducts Template ( 더보기템플릿 ) btnmoreproducts (products 더보기 ) btndisplay ( 더보기버튼 )
E-R Diagram Database Table