저희가 인터넷 브라우저를 통해서 보게되는 모든 웹페이지는 HTML입니다. 이때 HTML은 단순하게 한가지 기준으로 나눠볼 수 있는데, 어떤 상황에서든 같은 모습을 보여주는 정적 HTML과, 상황에 따라 다른 내용을 보여주는 동적 HTML로 나눌 수 있습니다.
어떤 사용자가 요청을 하던, 시간이 흐르던 같은 모습을 보이는 HTML입니다. 이런 HTML은 내부의 HTML Element 등이 고정되어 있고, 큰 설정 없이 전송만 하여도 괜찮습니다.
이런 작성이 완료되어 변하지 않는 HTML, CSS, JS, 또는 기타 이미지나 동영상 등을 Static (정적) Content라고 부르게 됩니다.
뉴스 페이지나 사용자 개인설정 페이지와 같은 부분은 시간, 사용자 등 다양한 요인으로 인해 내용이 변경됩니다.
위의 예시에서 td Element는 서버에서 구성한 profiles 라는 모델 데이터에 따라 HTML의 내용이 변하게 됩니다. 이런 여러가지 요인으로 인하여 내용이 변경되는 HTML로 제시되는 페이지를 Dynamic (동적) Web Page라고 부르게 됩니다.
본 강의는 Spring Boot의 Backend로서의 역할에 집중하기 때문에 자세하게 살펴보지는 않습니다만, Spring Framework를 사용할때의 전통적인 동적 웹페이지 기술인 JSP와 현재 Spring Boot의 표준 Template Engine인 Thymeleaf를 구성해보도록 하겠습니다.
JSP - Jakarta Servlet Pages
JSP는 앞서 언급하였듯 전통적인 동적 웹 페이지를 위한 기술입니다. Jakarta Servlet 표준을 따르고 있는데, 이 말은 Spring Boot에서 사용해보기 위해 추가 설정을 해야한다는 뜻입니다.
JSP를 사용하기 위해 필요한 기초 의존성 두가지, tomcat-embed-jasper 와 jstl 입니다. jasper 같은 경우 JSP를 실제로 해석하는 의존성, jstl 의 경우 JSP 내부에서 사용하는 태그를 위한 라이브러리 의존성 입니다.
application.properties 는 위와같이 설정해야 하는데, Jakarta Servlet API의 요구사항에 맞춰서 정의하게 됩니다. 이는 위의 WEB-INF 디렉토리의 위치도 마찬가지 이며, main/webapp 아래 두면 됩니다.
JSP를 사용하기 위해, 위쪽에 JSP의 content-type을 설정해 주며, 사용하게 될 Tag Library 또한 어떤 prefix로 사용할지를 적어둡니다.
기본적으로 JSP는 HTML Template Engine, 즉 동적 HTML을 구성하기 위한 부수적 문법을 가지고 있는 라이브러리 수준으로 이해하시면 됩니다. 그래서 기본적인 문법은 HTML과 크게 다르지 않습니다.
위쪽의 동적 HTML과 유사한 결과를 보여주는 예시입니다. JSP는 Java 기반의 웹 서버에서 사용하는 기술인 만큼, 내부에서 Java 코드를 사용하는 방법 또한 존재합니다. 하지만 앞서 말씀드렸다시피 JSP를 사용하기 위한 설정을 살펴보는게 목적이고, 새로운 프로젝트의 JSP 채택율은 조금씩 줄고 있는 상황이기 때문에, 이전에 시작되었던 프로젝트에서 JSP의 역할이 무엇인지를 알 수 있을 정도의 수준에서 멈추도록 하겠습니다.
Thymeleaf
Thymeleaf의 경우 현제 Spring Boot의 표준 Template Engine입니다. 그래서 Spring Boot에 기본적인 설정이 많이 되어있는 편입니다.
별다른 설정없이 spring-boot-starter-thymeleaf 의존성을 추가하면 사용해볼 수 있습니다.
사용하게 될 파일도 HTML이며, resources/templates 디렉토리 안에 생성하면 됩니다. 이는 Spring Boot의 기본설정입니다.
JSP와 마찬가지로, HTML 문서상 어디가 Thymeleaf의 태그인지를 설명하는 부분을 추가하여야 합니다.
JSP와 마찬가지로 Thymeleaf도 깊게 살펴보진 않을 예정입니다. 다만 Thymeleaf 같은 경우 추후 기능들의 최소 수준의 개발을 위해 사용할 예정이며 필요에 따라 더 설명하도록 하겠습니다.
ModelAndView로 데이터 전달하기
JSP와 Thymeleaf는 Template Engine입니다. 전달받은 데이터에 따라 실제 HTML의 내용이 바뀌게 되며, 이 데이터는 Spring Boot의 @RequestMapping 함수에서 전달해주게 됩니다. 이때 사용할 수 있는 방법은 크게 두가지로 볼 수 있는데, 하나는 Model 을 사용하는 방법과, 다른 하나는 ModelAndView 를 사용하는 방법입니다.
먼저 Model 을 사용하게 되면 Spring IoC에서 해당 요청을 처리하기 위한 Model을 전달받기 위한 Model 객체를 함수의 인자에 주입시켜 줍니다. 해당 model 변수에 HTML Template에서 사용하길 바라는 데이터를 위의 예시처럼 전달하면 됩니다. 지금 같은 경우 리스트의 형태로 3개의 SamplePayload 객체를 model.addAttribute 함수를 이용하여 이름을 profiles 라고 지어주며 전달하게 됩니다. 이 profiles 라는 이름은
여기서 작성한 ${profiles} 의 profiles 와 동일한 이름입니다. model.addAttribute("name", "data) 로 전달한 데이터는 HTML, JSP에서 "name" 을 기준으로 찾아올 수 있다는 의미입니다.
ModelAndView 를 사용하는 것도 Model 을 사용하는 것과 유사하게 사용할 수 있습니다.
차이점은 String으로 view 이름을 전달하는 것이 아닌 ModelAndView 객체를 생성하면서 설정해두는 부분이라는 점입니다. 위처럼 진행하면 이전의 Model 을 사용할때의 예시와 동일하게 작동하게 됩니다.
여기까지 간단한 Thymeleaf와 JSP에 대한 내용입니다. 특별히 복잡한 기능 없는 정보 제공의 용도로 사용하게 되는 웹 서비스의 경우 지금 단계에서도 다양하게 만들어 볼 수 있습니다.
React, Vue, Node와 Spring Boot
Spring Boot는 백엔드 서버 어플리케이션으로서 그 기능이 매우 다채롭고 다양합니다. 한편 React, Vue, NodeJS와 같은 다양한 프레임워크들 역시 등장하고 인기를 끌게 되었습니다.
React와 Vue 같은 경우, Javascript를 사용하여 Component 기반의 UI를 만드는데 특화된 Frontend Framework라고 볼 수 있습니다. 정확히는 UI를 그리는데 사용하는 Javascript Library와 같은 존재입니다. 즉 이 두가지 프레임워크는 지금 다룬 내용에서, 전체 서비스의 구조를 기준으로 생각해보면 HTML, JSP, Thymeleaf를 대체하는 내용이 됩니다.
NodeJS의 경우 많은 사람들이 Javascript를 사용하는 Backend Framework로 알고 있습니다. NodeJS는 본래 브라우저에서 사용하는 언어인 Javascript를 브라우저 밖에서 사용하기 위해 고안된 Runtime Environment 입니다. JRE의 Javascript 버전이라고 생각할 수도 있습니다. Javascript를 브라우저 밖에서 쓰게 되면서, express.js 등과 함깨 사용하여 Backend 서버로서 활용되고 있습니다.
넓은 의미에서 봤을때, 오늘 이야기한 프레임워크들은 위처럼 분류할 수 있습니다. 물론 JSP와 Thymeleaf는 프레임워크라고 하기엔 다른 두가지와 거리가 좀 있지만, 역할의 구분에서 비슷한 역할을 한다고 생각해 볼수 있습니다.
Spring Boot는 가장 쉬운 프레임워크도, 가장 흔히 사용하는 프레임워크도 아닐지 모릅니다. 하지만 어떤 이유에서든 사용하고자 하는 프레임워크를 바꿀 것이라면, 그 프레임워크가 서비스에서 어떤 위치에 있는지 같은 부분을 잘 파악하고, 그것을 만들기 위해서 제공하는 것들이 무엇인지 파악하는 것이 중요합니다.
