Spring MVC-1 TIL (2)

[참고 강의] 김영한님의 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술

💡 웹 애플리케이션의 이해

정적 리소스

• 고정된 HTML 파일, CSS, JS, 이미지, 영상 등을 제공
• 주로 웹 브라우저

✏️ HTML 페이지

• 동적으로 필요한 HTML 파일을 생성해서 전달
• 웹 브라우저: HTML 해석
  

✏️ HTTP API

• HTML이 아니라 데이터를 전달
• 주로 JSON 형식 사용
• 다양한 시스템에서 호출
• 데이터만 주고 받음, UI화면이 필요하면 클라이언트가 별도 처리
• 앱, 웹 클라이언트, 서버 to 서버

다양한 시스템 연동

• 주로 JSON 형태로 데이터 통신
• UI 클라이언트 접점
  (앱 클라이언트, 웹 브라우저에서 자바스크립트를 통한 HTTP API호출, React, Vue.js 같은 웹 클라이언트)
• 서버 to 서버
  (기업간 데이터 통신)

✏️ SSR, CSR

SSR - 서버 사이드 렌더링

• HTML 최종 결과를 서버에서 만들어서 웹 브라우저에 전달
• 주로 정적인 화면에 사용
• 관련기술: JSP, 타임리프 -> 백엔드 개발자

CSR - 클라이언트 사이드 렌더링

• HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 생성해서 적용
• 주로 동적인 화면에 사용, 웹 환경을 마치 앱 처럼 필요한 부분부분 변경할 수 있음
• 예) 구글 지도, Gmail, 구글 캘린더
• 관련기술: React, Vue.js -> 웹 프론트엔드 개발자

React,Vue.js를 CSR+SSR 동시에 지원하는 웹 프레임워크도 있음
SSR을 사용하더라도, 자바스크립트를 사용해서 화면 일부를 동적으로 변경 가능

✏️ 자바 뷰 템플릿 역사

HTML을 편리하게 생성하는 뷰 기능

• JSP(속도 느림, 기능 부족)
• 프리마커, 벨로시티 (속도 문제 해결, 다양하 ㄴ기능)
• 타임리프
  • 내추럴 템플릿: HTML의 모양을 유지하면서 뷰 템플릿 적용 가능
  • 스프링 MVC와 강력한 기능 통합
  • 최선의 선택, 성능은 프리마커, 벨로시티가 더 빠름

---

💡 서블릿

서블릿 환경 구성

@ServletComponentScan 추가

@ServletComponentScan //서블릿 자동 등록 
@SpringBootApplication
public class ServletApplication {

      public static void main(String[] args) {
          SpringApplication.run(ServletApplication.class, args);
   }
}

서블릿 등록하기

@WebServlet(name = "helloServlet", urlPatterns = "/hello")
public class HelloServlet extends HttpServlet {

      @Override
      protected void service(HttpServletRequest request, HttpServletResponse
  response)
              throws ServletException, IOException {
              
          System.out.println("HelloServlet.service");
          System.out.println("request = " + request);
          System.out.println("response = " + response);
          String username = request.getParameter("username");
          System.out.println("username = " + username);
          response.setContentType("text/plain");
          response.setCharacterEncoding("utf-8");
          response.getWriter().write("hello " + username);
     } 
}
 

• @WebServlet 서블릿 애노테이션
  • name: 서블릿 이름
  • urlPatterns: URL 매핑

HTTP 요청 메시지 로그로 확인하기

application.properties
logging.level.org.apache.coyote.http11=debug

✏️ HttpServletRequest

HttpServletRequest 역할

서블릿은 개발자가 HTTP 요청 메시지를 편리하게 사용할 수 있도록 개발자 대신에 HTTP 요청 메시지를 파싱한다. 그리고 그 결과를 HttpServletRequest 객체에 담아서 제공한다.

HttpServletRequest를 사용하면 다음과 같은 HTTP 요청 메시지를 편리하게 조회할 수 있다.

POST /save HTTP/1.1
Host: localhost:8080
Content-Type: application/x-www-form-urlencoded
  
username=kim&age=20

✏️ HTTP 요청 데이터

HTTP 요청 메시지를 통해 클라이언트에서 서버로 데이터를 전달하는 방법

• GET : 쿼리 파라미터
  • /url?username=hello&age=20
  • 메시지 바디 없이, URL의 쿼리 파라미터에 데이터를 포함해서 전달
  • 예) 검색, 필터, 페이징등에서 많이 사용하는 방식
• POST : HTML Form
  • content-type : application/x-www-form-urlencoded
  • 메시지 바디에 쿼리 파라미터 형식으로 전달
    username=hello&age=20
  • 예) 회원 가입, 상품 주문, HTML Form 사용
• HTTP message body에 데이터를 직접 담아서 요청
  • HTTP API에서 주로 사용, JSON, XML, TEXT
• 데이터 형식은 주로 JSON 사용
  • POST, PUT, PATCH

✏️ GET 쿼리 파라미터

메시지 바디 없이, URL의 쿼리 파라미터를 사용해서 데이터를 전달해보겠다
예) 검색, 필터, 페이징등에서 많이 사용하는 방식

URL에 ?를 시작으로 쿼리파라미터를 보낼 수 있다. 추가 파라미터는 &로 구분한다.

쿼리 파라미터 조회 메서드

String username = request.getParameter("username"); 
//단일 파라미터 조회 
Enumeration<String> parameterNames = request.getParameterNames(); 
//파라미터 이름들 모두 조회
Map<String, String[]> parameterMap = request.getParameterMap(); 
//파라미터를 Map 으로 조회
String[] usernames = request.getParameterValues("username"); 
//복수 파라미터 조회

복수 파라미터에서 단일 파라미터 조회

username=hello&username=kim 과 같이 파라미터 이름은 하나인데 값이 중복일 경우엔 request.getParameterValues()를 사용하면 된다.
request.getParameter()는 하나의 파라미터 이름에 대해서 단 하나의 값만 있을 때 사용해야한다.

✏️ POST HTML Form

특징

• content-type : application/x-www-form-urlencoded
• 메시지 바디에 쿼리 파라미터 형식으로 데이터를 전달한다.
  username-hello&age=20

서버 입장에서는 GET 쿼리파라미터 형식과 POST Form 형식이 동일하므로 쿼리 파라미터 조회 메서드를 그대로 사용하면된다.

참고)
GET URL 쿼리 파라미터 형식으로 데이터를 전달할 때는 HTTP 메시지 바디를 사용하지 않기 때문에 content-type이 없다.
POST HTML Form 형식은 HTTP 메시지 바디에 해당 데이터를 포함해서 보내기 때문에 데이터가 어떤 형식인지 content-type을 꼭 지정해야 한다. 이렇게 폼으로 전송하는 형식을 pplication/x-www-form-urlencoded 라 한다.

강의에 더 속도를 내야겠당...!!!