Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

나구리의 개발공부기록

스프링 웹 개발 기초 - 정적 콘텐츠, MVC와 템플릿 엔진, API 본문

인프런 - 스프링 완전정복 코스 로드맵/코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술(무료)

스프링 웹 개발 기초 - 정적 콘텐츠, MVC와 템플릿 엔진, API

소소한나구리 2024. 1. 23. 15:09

정적 콘텐츠

 

파일을 그대로 웹브라우저에 내려주는 것

 

  • IntelliJ로 정적 콘텐츠 생성
    • ~resources/static 에 html파일을 생성 후 html코드 입력 후 실행 -> localhost:8080/파일명.html 접속
<!DOCTYPE HTML>
<html>
<head>
    <title> static content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
정적 콘텐츠 입니다 나굴나굴
</body>
</html>

좌) 웰컴페이지 / 우) 콘솔 - 소스코드와 똑같음

  • 동작 원리(간단설명)
    1. 웹브라우저에서 주소입력
    2. 톰캣 내장 서버가 요청을 받음
    3. 스프링에서 먼저 파일명과 관련된 컨트롤러를 찾음(맵핑이 된 컨트롤러가 없으면 4번)
    4. 내부에 있는(resources) 파일명.html 파일을 찾음 -> 있으면 그대로 반환

MVC와 템플릿 엔진 - 가장 많이 하는 방식

 

Model, View, Controller = MVC (템플릿 엔진을 하기 위함)
HTML을 서버에서 프로그래밍 해서 동적으로 바꿔서 내려줌 (템플릿 엔진 - 과거의 jsp, php 등등)

 

  • 과거에는 JSP로 View에 모든 것을 다 집어넣어서 개발 했었음 -> model one 방식
    • JSP파일 하나에 수많은 기능을 가진 코드가 섞여있다보니 유지보수가 어려움
  • 현재에는 MVC방식으로 변환(기본)
    • 관심사를 분리 -> 각각의 역할을 분리해야 함
    • View : 화면을 출력하는 역할
    • Controller : 비즈니스로직과 관련이 있거나 내부적인 것을 처리하는 역할
    • Model : 화면출력에 필요한 것을 담아 View에 넘겨주는 역할
  • IntelliJ로 MVC방식으로 컨텐츠 생성
    • controller(java) 및 templates(html) 작성
package start.startspring.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller //애노테이션 입력
public class HelloController {   
   
    @GetMapping("hello-mvc")
    //웹사이트 url에서 파라미터를 받도록 메서드를 작성 "localhost:8080/hello-mvc?name=출력할내용
    public String helloMvc(@RequestParam("name") String name, Model model) {
        model.addAttribute("name", name);
        return "hello-template";
    }
}
<html xmlns:th="http://www.thymeleaf.org">
<body>
<!--<p> </p> 사이의 문구는 실행하지않고(서버없이) 경로를 그대로 복사해서 url에 입력했을때 보이는 문구>-->
<!--템플릿 엔진으로 동작을 하면 <p 내용 > 으로 치환이 되어 출력-->
<p th:text="'hello ' + ${name}">hello! empty</p>
</body>
</html>
  • 생성 후 실행 ->  url에 get방식으로 파라미터 입력

좌) 실행결과 / 우) 콘솔 - 렌더링 된 내용이 콘솔에 출력 됨

  • 동작 원리(간단설명)
    1. 웹브라우저에서 주소입력
    2. 톰캣 내장 서버가 요청을 받음
    3. 스프링 컨트롤러가 return의 값과 model의 값(name)과 key(spring)를 반환
    4. viewResolver(화면과 관련된 작업)가 ~templates 경로에서 return값.html를 찾아서 Thymeleaf엔진에서 렌더링 후 변환 된 html을 반환

API

 

안드로이드나 아이폰 클라이언트와 개발할 때 JSON 데이터 구조 포맷으로 클라이언트한테 데이터를 전달하는 방식

 

  • Vue, React를 사용할 때 API로 데이터를 내려주고 화면은 클라이언트가 알아서 정리하는 방식으로 할 때
  • 서버끼리 통신을 할 때(Data가 흐를 때)
JSON 데이터 포맷 - JavaScript Object Notation 의 약자

 데이터를 저장하고 전송하는 데이터 공유를 위한 개방형 표준 파일 형식
JSON 파일은 .json의 확장자로 저장 됨

키와 벨류의 형태로 구성 됨
{키1 : 값1, 키2 : 값2, ..... 키n : 값n} 
{key1 : value, key2 : value2, .... keyN : valueN}
  • 과거에는 xml(무겁고 열도 닫는 문법을 문법이 번거로움)방식으로 많이 사용하였으나 최근에는 거의 JSON 방식으로 통일이 되었음
    • html태그도 xml방식으로 작성 한 것
    • ex) <html> </html>
  • spring도 객체를 반환하면 기본으로 JSON으로 반환
  • 문자열 그대로 반환 - 사용하는 경우는 거의 없음
    • controller 작성 (templates 작성 없음) 후 실행
    • get 방식으로 url 입력하면 바로 반영 됨
      • localhost:8080/hello-string?name=입력 내용
package start.startspring.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller //애노테이션 입력
public class HelloController {

    @GetMapping("hello-string")
    @ResponseBody // http의 body부에 데이터를 직접 넣어주겠다는 뜻(html아님!)
    public String helloString(@RequestParam("name") String name){
        // View가 없이 "name"에 입력된 값이 그대로 내려옴
        return "hello" + name;
    }
}

좌)실행결과 / 우) 콘솔의 차이가 없음(html 작성 없이 그대로 반환)

  • 객체를 반환 - 일반적으로 Spring에서 API방식이라고 하면 해당 방식을 지칭 함
    • Controller 작성 후 실행 
package start.startspring.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller //애노테이션 입력
public class HelloController {
    @GetMapping("hello-api")
    @ResponseBody
    public Hello helloApi(@RequestParam("name") String name) {
        Hello hello = new Hello();
        hello.setName(name);
        return hello;
    }

    // 클래스 생성 후 객체를 생성 -> 객체를 반환
    public class Hello {
        // private 으로 변수를 선언하여 외부에서 꺼내지 못함
        // 외부에서 사용시 메서드를 통해 접근
        private String name;

        // Command + n -> Getter and Setter -> 엔터
        // JavaBean 표준방식, Getter,Setter 방식, 프로퍼티접근방식 이라고 함
        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }
    }
}
  • url에 get방식으로 파라미터 입력 -> JSON 형식으로 출력

  • @ResponseBody 동작 원리
    1. 웹브라우저에서 주소입력
    2. 톰캣 내장 서버가 요청을 받음
    3. 스프링 컨트롤러가 @ResponseBody가 있으면 HTTP의 body에 그냥 데이터를 넣도록 동작
    4. 넣어야할 데이터가 객체이면 HttpMessageConverter가 JsonConverter를 동작시켜 JSON 형식으로 변환 후 반환
      넣어야할 데이터가 문자이면 HttpMessageConverter가 StringConverter를 동작시켜서 반환
    5. 반환된 데이터를 요청한 곳에 전송(서버,웹브라우저 등)
  • 기본 문자처리 컨버터 풀네임 : StringHttpMessageConverter
  • 기본 객체처리 컨버터 풀네임 : MappingJackson2HttpMessageConverter
    • 객체 처리하는 라이브러리는 크게 Jackson과 Gson(구글에서 제작) 두가지가 있음
    • 스프링에서는 기본으로 Jackson으로 구동 되지만 Gson으로 변경할 수 있음

 

PS.

  • 정적 콘텐츠를 제외하면 HTML(MVC모델)로 내리는지, API방식이라는 걸로 데이터를 내리는지 2가지만 기억하면 됨.
  • 클라이언트의 HTTP Accept헤더와 서버의 컨트롤러 반환 타입 정보 둘을 조합하여 HttpMessageConverter가 선택 됨.

출처 : 인프런 - 스프링 입문(무료) / 김영한님

https://inf.run/hivx6

 

 

'인프런 - 스프링 완전정복 코스 로드맵 > 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술(무료)' 카테고리의 다른 글

스프링 DB 접근 기술 2 - 스프링 JdbcTemplate, JPA, 스프링 데이터 JPA / AOP - AOP가 필요한 상황, AOP적용  (1) 2024.01.24
스프링 DB 접근 기술 1 - H2데이터베이스 설치, 순수JDBC, 스프링 통합 테스트  (0) 2024.01.24
스프링 빈과 의존관계 - 컴포넌트스캔과 자동 의존관계 설정, 자바 코드로 직접 스프링 빈 등록 / 회원 관리 예제 - 웹 MVC개발(홈 화면 추가, 회원등록, 회원조회)  (1) 2024.01.24
회원관리 예제 - 비즈니스 요구사항 정리, 회원 도메인과 리포지토리 만들기, 테스트 케이스 작성, 회원 서비스 개발, 서비스 테스트  (1) 2024.01.23
프로젝트 환경설정 - 프로젝트생성, 라이브러리 탐색, View환경설정, 빌드 및 실행  (1) 2024.01.22
'인프런 - 스프링 완전정복 코스 로드맵/코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술(무료)' Related Articles more