큰일일수록 작게 시작하자

Spring MVC는 어떻게 동작할까?

25 Apr 2019 | MVC

MVC는 뭘까?

  • Model , View, Controller를 분리한 디자인 패턴
    • Model
      • 애플리케이션의 데이터를 나타낸다.
      • Java Beans
    • View
      • 실제 화면, 보여줄 데이터
    • Controller
      • 뷰와 모델 사이의 인터페이스 역활

스프링 MVC는 어떻게 동작할까?

image

  1. Dispatcher Servlet이 클라이언트로부터 요청을 받는다.
  2. Handler Mapping이 요청된 URL 정보에 따라서 호출해야할 Controller 메소드의 정보를 얻는다.
  3. DispatcherServlet이 HandlerAdapter 객체를 가져온다.
  4. HandlerAdapter 객체의 메소드를 실행한다.
  5. Controller 객체는 비즈니스 로직을 처리하고, 그 결과를 바탕으로 뷰(ex. JSP)에 전달할 객체를 Model 객체에 저장한다. DispatcherServlet에게 view name을 리턴한다.
  6. DispatcherServlet은 view name을 View Resolver에게 전달하여 View 객체를 얻는다.
  7. DispatcherServlet은 View 객체에 화면 표시를 의뢰한다.
  8. View 객체는 해당하는 뷰를 호출하며, 뷰는 Model 객체에서 화면 표시에 필요한 객체를 가져와 화면 표시를 처리한다.

Spring MVC 의 구성역활

구성요소 역할
Dispatcher Servlet 모든 Http 요청을 받아서 다른 객체들 사이의 흐름을 제어함, 요청을 Handler Mapping으로 넘긴다.
Handler Mapping 클라이언트의 요청을 바탕으로, 어떤 Controller를 실행할지 결정한다.
Model Controller에서 view로 넘겨줄 객체가 저장되는 공간, key-value구조로 이루어져있다.
ViewResolver Controller가 반환한 View Name(the logical names)에 prefix, suffix를 적용하여 View Object(the physical view files)를 반환한다.
Service 비즈니스 로직을 실행한다
Controller 클라이언트의 요청에 맞는 처리를 실행한다 ( 레이어 구조의 경우 레이어 계층에 따라서 실행 )
  • 출처
    • https://gmlwjd9405.github.io/2018/12/20/spring-mvc-framework.html
    • https://jess-m.tistory.com/15

TIL 금일 공부

15 Apr 2019 | Spring boot Vue.js

1. 프로젝트 진행상황

  • 현재 vue js + spring boot 연동이 완료된 상태.
  • proxy 서버 문제로 인해서 며칠동안 고생했다. 그전 구조는 dev server( webpack devserver 8080 port)로 프론트 서버를 올려놓고 spring boot를 3000 port로 구성했다. 그래서 vue에서 api 서버로 데이터를 요청해서 json 데이터를 뿌려주기만 하면 됐는데 인증 부분에서 문제가 생겼다.
  • 8080 port에서 요청해서 3000 port로 요청이 들어가니 CORS 설정을 했는데, 스프링 시큐리티를 통해서 로그인을 할 경우에 문제가 생겼다.
  • API 요청을 8080에서 요청하는 PROXY 서버 설정을 통해서 해결했다. 그전에는 3000 포트로 요청을 받아서 쿠키가
    3000포트로 전달이되서, 실제 화면을 요청하는건 8080포트인데 쿠키가 생성이 되지 않았다.
  • 이제 프록시 설정을 변경해서 쿠키가 정상적으로 생성이 되지만, 문제는 view 단에서도 인증정보를 받지못하면 접근제한을 걸수가 없기 때문에 이부분을 해결할 방법을 찾아야한다. 현재 스프링시큐리티에서는 DOCUMENT.COOKIE를 막는 XSS 설정이 되어있다.

2. Vue js 공부

  • 생각보다 AJAX요청이 많이 생기고, 페이지를 동적으로 보여줘야할 부분이 많아서 Vue.js를 도입했다.
  • REACT나 ANGULAR보다 학습곡선이 낮아서 시작했는데, 시작자체는 쉽지만 결국 WEBPACK과 ES6를 공부해야하기 떄문에 공부할 부분이 참 많다.

TIL 금일 공부

31 Mar 2019 | 알고리즘 Vue.js

1. 알고리즘

  • 백준 오프라인 강의 - 4주차 ( 완료 )

2. Vue js 공부

  • 현재 진행하고 있는 팀프로젝트에서 생각보다 프론트 작업이 많이 필요해서, 프레임워크 도입을 염두해두고있다.
  • 그중에서 쉽고 빠르게 배울수 있는 프론트쪽 기술을 찾아보다가, Vue를 도입하려고 공부중 이다.
  • Do it! vue.js 책 정독완료

TIL 금일 공부

24 Mar 2019 | 알고리즘 Vue.js

1. 알고리즘

  • 프로그래머스 문제풀이
  • 백준 오프라인 강의 - 3주차

TIL 금일 공부

22 Mar 2019 | 알고리즘 팀프로젝트

1. 알고리즘

  • 프로그래머스 문제풀이

2. POUCH 팀 프로젝트 진행상황

  • view 화면 구성
  • 카테고리 별로 pouch를 볼 수 있게 변경
  • tag list별로 확인가능 하게 변경
  • Entity casecade 옵션 변경
  • select onchange 관련 function 추가