Java - Spring &&n SpringBoot

Spring - 스프링 웹 개발 기초(feat. 정적 페이지, MVC, API, Json)

TerianP 2021. 12. 7.

728x90

웹 개발할 때 가장 많이 사용되는 3가지 정적 페이지, MVC, API - JSON 방식을 사용해서 페이지를 만들고 실제로 어떻게 동작하는지 확인하겠다.

1. 정적 페이지와 MVC와 템플릿 엔진, API

정적 페이지 : 정적 페이지는 서버에서 따로 동작하지 않고 파일 그대로 웹 브라우저에 보이도록 만드는 것
MVC & 템플릿 엔진 : JSP, PHP 처럼 서버 연동하여 동작하면서 동적인 페이지를 보이도록 만드는 것. 이를 위해서 MVC - Model , View, Control 를 사용한다.
API : Json 데이터 포멧으로 클라이언트에게 데이터를 전달하는 방식 물론 아닌 경우도 있지만 대다수 JSON 포멧이라고 한다. ⇒ viewJS, ReactJS 등 사용할 때 보통 API 방식을 사용한다.

2. 정적 컨텐츠 페이지 만들기

1) html 페이지 생성

정적 페이지를 만들기 위해서는 resources > static 안에 html 파일을 만들면 된다.
이렇게 html을 만들면 정말 아주아주 단순하게 만드는 방식으로, 심지어는 메모장으로도 간단하게 만들 수 있다.

<!DOCTYPE HTML>

<html>
<head>
    <title>Welcome HJproject</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body>
<h1>Java Spring Page</h1>
<h1>스프링 정적 페이지</h1><br><hr>

</body>
</html>

2) 정적 페이지 작동 원리

3. MVC와 템플릿 엔진

1) MVC & 템플릿 생성 및 실행

MVC 란 Model, View, Control 을 의미한다.
- View 는 화면을 보여주는 기능!! Control 는 로직이나 내부적인 데이터 이동들을 처리하는 기능, Model 은 View 에 전달되기 위해 Control 에서 처리된 내용을 담는 그릇 이라고 간단히 생각하면 될 듯?
- 일단 지금은 큰 부분만 먼저 공부할 예정으로 앞으로 MVC는 계속 계속 나오기 때문에 추후 좀 더 자세하게 정리하도록 하겠다.
My_controller 에 아래 GetMapping 부분을 추가한다.

@Controller
public class My_Controller {

    @GetMapping("hello-mvc")
    public String hellomvc(@RequestParam(value = "name") String name, Model model){
        model.addAttribute("name", name);
        return "hello-template";
    }

}

resources > templates 에 hello-template 를 생성한다.

<!Doctype html>

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>MVC tempate</title>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
</head>
<body>
<h1>
    <p th:text="'hello MVC template '+ ${name}"></p> 
</h1>
</body>
</html>

기존 페이지 접속하듯이 접속한 후 인터넷 창에 아래처럼 hello-mvc?name=("특정값") 을 넣어서 전달한다.
이때 hello-mvc?name 뒤에 오는 값(특정값)이 리퀘스트 파라미터인 name의 값이 된다. 이후 model 에 담겨 name = spring!!! 인 상태로 MVC template에게 전달된다.
정확히는 <p th:text="'hello MVC template '+ ${name}"></p> 에서 ${name} 로 전달 & 치환되어 화면에 보여진다.

※ 여기서 잠깐!! Request Param , 리퀘스트 파라미터란?

Request Param , 리퀘스트 파라미터란 http 에서 사용되는 메시지 방식이다. 보통 "클라이언트(사용자)쪽에서 서버쪽으로 하는 요청" 으로 생각하면 된다. 리퀘스트 파라미터는 클라이언트에서 파라미터에 해당하는 정보를 주면서 서버쪽에 응답을 요청하는 것이라고 생각하면 된다.

리퀘스트 파라미터는 여러 부분에서 사용되는데 예를 들어 네이버 웹툰 주소에서도 찾아볼 수 있다.

<https://comic.naver.com/webtoon/weekdayList?week=mon>

이때 웹 주소는 https://comic.naver.com/webtoon/weekdayList 이고, 리퀘스트 파라미터는 week=mon 이다. 즉 아마 week(일주일) = mon(월요일) 이라는 의미로 생각된다. 즉 해당 주소에서 일주일 중 월요일에 해당하는 정보를 찾아서 보여줘! 라는 의미로 해석하면 된다.
- 이때 키 값(변수)은 week 이고, value(값)는 mon 이다.
이를 이용하면 주소를 쉽게 이동할 수 있는데 week 뒤에 나오는 부분을 고치면 각 요일별 웹툰 페이지로 이동할 수 있다.

<https://comic.naver.com/webtoon/weekdayList?week=tue> // 화요일
<https://comic.naver.com/webtoon/weekdayList?week=wen> // 수요일

2) MVC & 템플릿 어떻게 동작할까?

4. API - 문자 전달 방식과 JSON 전달 방식

이전의 MVC 방식이 View와 템플릿을 조작 → 화면 랜더링 → 웹 브라우저에 전달하는 방식이었다면 API 방식은 웹 브라우저에 데이터를 바로 전달하는 방식이다.
API 크게 2가지 데이터 전달 방식이 있는데 문자로 웹 브라우저에 전달하는 방식과 JSON 방식(키 : 값) 으로 넘기는 방식이 있다.

1) 문자로 전달

My_controller 에 작성

// 문자 전달
    @GetMapping("hello-api")
    @ResponseBody // http 의 Response의 Body 부분에 아래 데이터를 바로 넣겠다는 의미
    public String helloAPI(@RequestParam("name") String name){
        return "Spring 어려워진다! " + name;

웹 브라우저에서 hello-api 로 name 값을 넣고 접속하면 아래 페이지처럼 바로 웹 브라우저에 데이터가 출력되는 것을 확인 할 수 있다.
특이한 것을 하나 보자면 이전의 정적 페이지, MVC 를 사용할 때와는 다르게 html 의 title 부분이 단순히 페이지 주소로 나오는 것을 확인 할 수 있다.

2) 데이터로 전달(객체로 전달) - JSON

// 데이터 전달 : 객체를 전달하는 경우
    @GetMapping("hello-json") // html 상에서 hello-json 의 get 으로 받으면
    @ResponseBody // Response Body 부분에 아래 내용을 넣는다.
    public hellojson hello_json(@RequestParam("name") String name, String id, String passwd){
        hellojson hellojson = new hellojson();

        hellojson.setName(name); // setName 매서드로 hellojson name 에 파라미터로 넘어온 name 을 넣는다.

        // 응용해서 id 와 passwd 를 받아보자

        hellojson.setId(id);
        hellojson.setPasswd(passwd);

        return hellojson; // 문자가 아닌 객체를 넘김
    }

    static class hellojson{
        private String name;
        private String id;
        private String passwd;

        // 데이터 출력 시에는 getName
        public String getName() {
            return name;
        }

        // 데이터 넣을 때는 setName
        public void setName(String name) {
            this.name = name;
        }

        public String getId() {
            return id;
        }

        public void setId(String id) {
            this.id = id;
        }

        public String getPasswd() {
            return passwd;
        }

        public void setPasswd(String passwd) {
            this.passwd = passwd;
        }
    }

웹 접속하면서 name 과 id , passwd 파라미터에 각각 java , Spring , JSON 이라는 값을 넣었다.
- 아래처럼 JSON 형식으로 출력되는 것을 확인할 수 있다.
- 아마 로그인을 하거나 회원가입을 하면서 값을 입력하게 된다면 아래처럼 넘어가는게 아닌가...싶다

이번에는 조금 변형하여 출력해보았다. 아래의 두 사진의 차이는 무엇일까?

사실 답은 간단하다. 바로 @RequestParam("name") 안에 있는 name 파라미터를 생략했기 때문이다. @RequestParam 안에 들어가는 값은 기본적으로 "필수로 넘어와야하는 값" 이기 때문에 생략하고 다음으로 넘기게 되면 아래 사진과 같이 에러가 발생한다.

public hellojson hello_json(@RequestParam("name") String name, String id, String passwd){
// @RequestParam("name") 식으로 들어가잇기 때문에 요청시 name 파라미터가 빠지면 에러가 뿜뿜!

3) API 전달 방식은 어떻게 동작할까?

여기에 추가로 @ResponseBody 의 사용에 대해서 정리한다.

HTTP 의 BODY 부분에 문자 내용을 직접 변환
- 이때 viewResolver 대신 HttpMessageConverter 가 동작
기본 문자 처리 : HttpMessageConverter
기본 객체 처리 : MappingJackson2HttpMessageConverter
- 여기서 Jackson 은 객체를 JSON 으로 바꿔주는 대표적인 라이브러리
byte 처리 등등 기타 여러 HttpMessageConverter 가 기본으로 등록되어 있음
클라이언트의 HTTP ACCEPT 헤더와 서버의 컨트롤러 변호나 타입 정보 둘을 조합하여 HttpMessageConverter 가 선택된다.

벌써부터 점점 어려워진다ㅠ.ㅠ

뭐 지금 당장 마스터해서 실무에 뛰어들것도 아니고, 아직 자바 문법 공부도 남았고, 알고리즘도 공부해야하고...

이제 시작이라는 마음으로 달려보겠다!

일단 일차적인 목표는 스프링 공부를 통해 게시판과 회원가입이 가능하도록 구현하고, 이를 리눅스와 연결해서 웹을 띄울 수 있도록 할 예정이다.

저작자표시 비영리 동일조건

'Java - Spring &&n SpringBoot' 카테고리의 다른 글

자바 Spring 개념 잡기 : IoC 제어의 역전, 의존성 주입(Dependency Injection) 와 컨테이너, 스프링 빈 (0)	2021.12.13
회원 관리 페이지 만들기 1) 도메인, 리포지토리(저장소), 테스트 실행 (0)	2021.12.10
Spring - Index 페이지 만들기, MVC 맛보기, 빌드 &실행(feat. Thyleaf 템플릿) (1)	2021.12.04
Spring 라이브러리 살펴보기 (0)	2021.12.04
Java Spring 시작 - IntelliJ 설치와 프로젝트 생성 및 Spring 구동 (5)	2021.12.03