프론트엔드 엔지니어도 알면 좋을 스프링 부트 기본 #1

티스토리 뷰

개발 노트

프론트엔드 엔지니어도 알면 좋을 스프링 부트 기본 #1

2020. 4. 8. 17:27

728x90

프로젝트 구성 방법은 구성하는 사람의 선호도와 경험에 따라 다양할 것이다. 그러나 한국에서 자바 기반의 웹 프로그래밍이 보편화되어 있고 스프링 부트(Spring Boot)로 구성된 경우가 많다. 스프링 부트 기반의 프로젝트를 clone 받았을 때 어떻게 구동해야 할지부터 막막했던 완전 초심자가 구동하는 방법을 익히기 위해서 학습한 내용을 정리해본다.

📃 JAVA와 JSP(Java Server Page)

자바를 현업에서 사용해본 적 없었고 JSP도 오래전에 스터디로 학습했던 게 전부였다. 그래서 둘은 무슨 관계인가부터 학습해야 했다. 자바는 객체지향형 프로그래밍 언어로 정리하고 보니 그러면 JSP는 무엇이며 왜 생겨났을까 궁금했다.

JSP의 효용을 알기 위해서는 Java Servlet과 톰캣으로 웹 애플리케이션 만드는 방법을 알아야 했다. 구글링을 통해 무료 강의 영상을 봤는데 여기에서 그 차이점과 필요성을 알 수 있었다.

동영상 내용을 정리해보면 이렇다.

사용자가 서버에게 요청을 보내면 톰캣(WAS : Web Application Server)은 그 요청을 분석해서 동적인 페이지 요청이라면 웹서버에 요청을 보낸다. (톰캣은 Web Server + Web Container로 구성되어 있다) 그 요청을 받아 해당 URL에 자바 서블릿(Java Servlet) 구동하고 그 결과를 Response로 응답한다. 사용자는 그 응답 값을 브라우저를 통해 보게 된다.

그런데 자바 서블릿 코드로 웹 페이지(HTML, CSS, JS) 작성하기란 여간 어려운 일이 아니다. GET으로 요청한 응답을 간단하게 찍는 메서드 코드만 봐도 이렇다.

public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException { 
  response.setContentType("text/plain"); 
  request.setCharacterEncoding("utf8"); 
  response.setCharacterEncoding("utf8"); 

  PrintWriter out = response.getWriter(); 
  out.println("<html>"); 
  out.println("<head><title>Hello World</title></head>"); 
  out.println("<body>"); 
  out.println("<h1>Hello World</h1>"); 
  out.println("<p>Hi</p>"); 
  out.println("</body>");
  out.println("</html>");
}

JSP는 아래 예시처럼 HTML 코드처럼 작성할 수 있어서 서블릿 코드로 작성할때 보다 더 나은 가독성을 보여준다.

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> 
<!DOCTYPE html>
<html>
  <head><title>Hello World</title></head>
  <body>
    <h1>Hello World</h1>
    <p>Hi</p>
  </body>
</html>

JSP로 작성한 문서는 톰캣에 의해 자바 서블릿 코드로 변환된다. 결국 둘은 같다고 할 수 있다. 아래 영상은 그 부분을 자세히 설명한다.

📃 스프링(Java Spring)? 스프링 부트(Java Spring Boot)?

그렇다면 자바 스프링과 스프링 부트 차이점은 무엇인가? 아래 영상에서 잘 설명하고 있다.

영상 내용을 정리하면 이렇다. 스프링 부트는 스프링 프레임을 기반으로 좀더 쉽게 개발할 수 있도록 도와주는 개발 프레임웍이다. 스프링을 사용하면서 불편했던 설정을 쉽게 할 수 있고 배포 시 WAR 파일을 톰캣에 배포하는 방식이 아니라 JAR 파일로 WAR+톰캣을 포함해서 배포하기 때문에 편리하다.

여기까지 공부하면서 프론트엔드 진영에서의 불편했던 점들이 웹 애플리케이션을 만드는데도 동일했구나 싶었다. 복잡한 환경 세팅, 의존성 관리, 배포가 단순화되면서 이전보다 개발자가 코드에 집중할 수 있도록 발전하는 흐름에서 만들어진 도구라는 생각이 들었다.

프론트엔드 진영에서 대표적으로 모듈을 쉽게 추가하고 관리하기 위해서 npm, yarn 같은 도구를 사용하고 webpack 설정으로 의존성과 빌드를 설정한다. 추가로 바벨(babel)과 같은 하위 브라우저 호환을 위해서 컴파일러를 추가한다. (하위 브라우저 호환에 이슈 없도록 스크립트를 작성한다면 필요 없다. 실제로 이전에는 jQuery, JavaScript로 브라우저 호환에 이슈가 없도록 코딩했다.)