웹 사이트 프로젝트를 사용자 인터페이스와 비즈니스 로직을 분리하여 개발하는 방식을 MVC 패턴이라고 부른다. MVC 패턴은 프로그램을 세 가지 컴포넌트로 분리한다.
Model 모델
모델은 사용자가 요청하는 정보를 구현하는 클래스들로 구현이 되어 있습니다. 4 가지로 구성되어 있습니다. 1. Entity 2. DTO 3. Repository 4. Service
View 뷰
뷰는 사용자에게 보여주는 화면을 만든다. 뷰단이라고 부른다. html 파일로 구성되어 있다.
Controller 컨트롤러
컨트롤러는 모델과 뷰를 연결하고 사용자 요청을 처리합니다. 사용자의 요청을 받아서 작업을 수행하고 결과를 뷰에 표시합니다.
MVC 흐름
MVC 흐름을 아주 간략하게 살펴보면 위의 그림과 같습니다. 사용자의 요청을 컨트롤러가 받으면 모델에서 데이터를 가져와서 View 에게 전달하면 View 가 렌더링을 통해 화면을 구성하여 사용자에게 전달해주게 됩니다.
MVC 동작과정
사용자가 브라우저에서 URL을 사용해서 서버에 데이터를 요청하면 동작이 시작되는데요. 현재 우리는 내 컴퓨터에 있는 프로젝트에 접속을 할 것이기 때문에 localhost:8080 으로 WAS 서버에 접속하고 /프로젝트/파일 이름을 통해서 실행하고자 하는 파일을 URL로 지정합니다. 이 과정을 보면 다음과 같은 과정을 거치게 됩니다.
1. 사용자가 브라우저의 주소창에 URL을 입력한다. 2. 서버는 요청을 컨트롤러에 전달한다. 3. 컨트롤러는 적절한 뷰를 찾아서 사용자한테 전달한다.
@Controller 애노테이션은 이 클래스가 컨트롤러 역할을 수행하는 클래스임을 알려줍니다. 사용자 요청이 들어오면 처리하는 클래스로 만들어줍니다. @RequestMapping 애노테이션은 URL 주소의 중간 경로를 만들수 있습니다. 다음으로 실제 사용자 요청을 처리하는 것을 만들어야 하는데요. 실제 주소를 만들어야합니다. @GetMapping("/ex1") 이라는 애노테이션은 Get 방식의 HTTP 요청이 "/ex1" 이름으로 들어오면 해당 메서드가 실행됩니다. 반환 방식이 void 인 것을 볼 수 있는데요. 응답을 화면을 보내줄 것이기 때문에 반환 값으로 void 혹은 String 을 사용하게 됩니다.
이제 실제로 HTML 파일을 만들어야 하는데요. resources 폴더에 중간 경로와 최종 경로를 알맞게 작성하여야합니다.
ex1.html 에 위와 같이 작성을 한 다음 @GetMapping 애노테이션이 사용된 메서드를 실행시켜보겠습니다.
우선 프로젝트의 서버를 실행시킵니다.
그 다음 ex1 메서드를 실행시키기 위해 localhost:8080/sample/ex1 이라는 URL로 접속하면 우리가 작성한 HTML 파일이 보이는 것을 확인할 수 있습니다. Web 브라우저는 기본적으로 Get 방식을 사용하기 때문에 HTTP 방식을 따로 지정해줄 필요는 없습니다. 위 화면이 나온 과정을 간단하게 이해해보면 사용자가 Web Browser 에 URL을 입력하면 적절한 컨트롤러와 Model 이 사용되어서 화면이 출력됩니다.
연습문제 1
우선 QuizController 를 만들겠습니다.
해당 클래스가 컨트롤러임을 알리는 @Controller 애노테이션을 활용하였고 중간 경로로 @RequestMapping 애노테이션을 활용하여 /quiz 로 설정하였습니다. @GetMapping 애노테이션을 활용하여 q1 이라는 경로로 Get 요청이 들어오면 실행할 준비를 하였습니다.
이번에는 실제 q1.html 파일을 작성할 차례입니다. 우선 파일 구조를 확인하여야 하는데요. template 패키지 하위에 quiz 패키지로 중간 경로를 설정하였고 그 안에 q1.html 파일이 들어가 있는 것을 확인할 수 있습니다.
실제 q1.html 파일에 위와 같이 작성을 하면 됩니다.
localhost:8080/quiz/q1 으로 접속을 해보니 위와 같은 화면을 볼 수 있습니다.
