D+51 -spring boot.환경설정.jsp설정,포트바꾸기,라이브러리추가,properties추가,mvc.controller,model,requstmapping,requestparam

Bku·2024년 3월 12일

학원 일기

목록 보기

49/67

Spring boot

스프링은 어노테이션을 이용하여 기능을 실행한다. 어노테이션은 함수와 비슷하고 자주쓰는 기능을 구현 해놓은 것이다. 이것을 이용해서 스프링의 기능을 이용할 수 있다.

클래스, 함수, 변수 등 모든 곳에 붙일 수 있다.

환경설정

시작설정

스프링 부트는 스프링에서 환경설정을 굉장히 간소화 시킨 것이다.

뉴 프로젝트 실행 : spring initialize 메뉴 선택
jdk 버전 : 17
압축 : War 선택
- War, Jar 자바의 압축기술
  1) War : 웹프로그램 압축
  2) Jar : 일반프로그램 압축
패키지(라이브러리) 선택 :
1) spring boot devtool
2) lombok
3) spirng web

jsp 설정

jsp는 자바와 html을 섞어놓은 형태로 자바코드로 html을 표현 할 수 있다는 특징이 있다. 대신 사용하기 위해서 2개의 라이브러리를 끌고 와야한다.

  //    jsp 라이브러리 추가
    implementation 'org.apache.tomcat.embed:tomcat-embed-jasper' // 추가
implementation 'org.glassfish.web:jakarta.servlet.jsp.jstl' //스프링부트 3.0 이상

jsp 폴더 만들기

jsp 폴더는 임의로 만드는 것이 아니라 정해진 루트에 폴더를 만들어야한다.

경로 : main - webapp - WEB-INF - views - 폴더/jsp파일작성

위의 경로로 만들지 않으면 실행이 안된다.

포트 바꾸기

우리는 vue도 사용하고 spring도 사용하는데 port가 8080으로 똑같다. 그래서 이게 겹치면 둘중 하나만 실행이 되기 때문에 하나를 다른 port로 바꿔주자.

경로 : src - resources - application.properties

server.port=8000

다음과 같이 입력해주면된다.

jsp 위치 spring에 인식 시키기

jsp를 사용하기 위해서는 또 spring 이 jsp가 어디에 위치하는 지를 알아야한다. 둘은 독립적인 프로그램이기에 인식을 시켜주지 않으면 spring이 jsp의 존재를 알 지 못하기 때문이다.

포트를 바꾼 경로에 입력을 해주면된다.

spring.mvc.view.prefix=/WEB-INF/views/

다음을 입력해주면 된다.

소스 수정시 자동 재시작 설정

스프링에 소스를 수정 했을경우 그것을 웹에 적용시키려면 프로그램을 종료했다가 다시 실행해야한다. 근데 이것을 자동으로 해주는 설정이 있다.

경로는 properties에 해주면되고 다음을 입력해주면된다.

spring.devtools.restart.enabled=true

MVC 디자인 패턴

디자인 패턴을 이용하면 유지보수가 쉬워진다. 하지만 구조가 복잡하여 쉽지가 않다. 그러나 장점이 강해서 디자인패턴을 많이 사용한다.

그 중에서 mvc를 많이 사용한다.

m : model 데이터 저장, 수정, 삭제 등을 담당한다.
v : view 화면에 표시되는 html부분을 의미한다.
c : controller 화면과 데이터를 연결하는 부분이다.

이렇게 세분화하면 에러가 난 부분만 찾아서 수정하면 되기에 유지보수가 쉬워진다.

controller

웹 사이트에서 어떤 화면을 보여줄지를 결정하는 페이지다.

@Controller
public class HelloWorldController {
    @GetMapping("exam00/hello") // 함수에 url을 추가하는 어노테이션으로,
    // 웹부라우저에 url로 결과를 확인하게 해준다. return 값으로 보여줄 html의 경로를 보여준다.
    public  String hello(Model model){
        return "/exam00/hello.jsp";
    }
}

@GetMapping을 통해 연결을 시켜준다. 이 뒤에 오는 exam00/hello을 주소창에 입력하면 return에 있는 경로의 html 파일이 실행되는 원리이다.

즉 특정 주소를 입력했을때 어떤 html을 입력하게 할것인지르 도와주는 것이 controller의 역할이라고 보면된다.

나중에는 herf 링크를 GetMapping뒤에 오는 주소에 연결해주면 버튼을 눌러서 링크가 실행되면 return의 html이 나오게 할 수 있다.

실행 결과

HelloWorldApplication 은 메인클래스인데 이것을 실행하면 웹이 실행된다.

여기서 주소창에 입력된 것이 getmapping에 입력된 것이고, helloworld는 controller의 리턴값의 html이 실행 된 것이다.

실행된 html
body부분의 내용이 실행된 내용과 같다.

Model

모델은 정보를 저장하고 수정, 삭제 하는 기능을 한다.
기본적으로 Hash map구조로 키, 밸류 형식이다. 이 킬로 jsp나 프론트쪽과 연결되며 값이 화면에 출력되는 구조이다.

@Controller
public class HelloController {
    @GetMapping("/exam01/hellocon")
    public String helloCon (Model model){
        model.addAttribute("greeting", "안녕 spring boot");
        model.addAttribute("greeting2", "안녕 spring boot 처음인가요?");
        model.addAttribute("greeting3", "수고하세요");
        return "/exam01/hellocon.jsp";
    }
}

attribute함수의 앞의 내용은 attributeName인데 이것이 나중에 jsp와 연결되는 key가 된다. 뒤의 내용은 attributeValue인데 이것이 키의 값이 되어 화면에 출력이 되는 부분이다.

부트스트랩 jsp에 적용시키기

model을 사용하기 전에 부트스트랩을 jsp에 먼저 연결해보자


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Hello Controller</title>
<%--부트스트랩 링크--%>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<%--jsp에 부트스트랩 추가하기--%>
</body>
</html>

부트스트랩 링크를 header쪽에 넣어주었다.

jsp에 model의 정보 가져오기

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Hello Controller</title>
<%--부트스트랩 링크--%>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<%--jsp에 부트스트랩 추가하기--%>
    <p>${greeting}</p>
    <p>${greeting2}</p>
    <p>${greeting3}</p>
</body>
</html>

jsp는 기본적으로 ${}에 model의 내용을 연결한다. 괄호안에 attributeName을 넣어서 값을 출력하게 해준다.

결과

출력이 잘 된것을 확인할 수 있다.

부트스트랩을 이용

부트스트랩과 같이 사용해보았다.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<table class="table table-striped table-success">
    <thead class="table-dark">
    <tr>
        <th scope="col">#</th>
        <th scope="col">JSP</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>${greeting}</td>

    </tr>
    <tr>
        <th scope="row">2</th>
        <td>${greeting2}</td>

    </tr>
    <tr>
        <th scope="row">3</th>
        <td colspan="2">${greeting3}</td>

    </tr>
    </tbody>
</table>
</body>
</html>

결과이다.

jsp 페이지로 모든 자료형을 보내기

변수를 이용해서 값을 출력해보자.

controller클래스

 @GetMapping("/exam01/operation")
    public String operation(Model model){
        String strNum = "10";
        int iNum = 10;
        String strVal = "a";
        boolean bVal = true;
        model.addAttribute("strNum", strNum);
        model.addAttribute("iNum", iNum);
        model.addAttribute("strVal", strVal);
        model.addAttribute("bVal", bVal);
        return "/exam01/operation.jsp";
    }

변수에 값을 담아서 이걸 키, 밸류로 jsp에 전달해보자.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<table class="table table-striped table-success">
    <thead class="table-dark">
    <tr>
        <th scope="col">#</th>
        <th scope="col">JSP</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">문자형</th>
        <td>${strNum}</td>

    </tr>
    <tr>
        <th scope="row">정수형</th>
        <td>${iNum}</td>

    </tr>
    <tr>
        <th scope="row">캐릭터형</th>
        <td colspan="2">${strVal}</td>

    </tr>
    <tr>
        <th scope="row">참 거짓</th>
        <td colspan="2">${bVal}</td>

    </tr>
    </tbody>
</table>
</body>
</html>

결과
결과가 다음과 같이 나온다.

참고

참고로 문자열 더하기는 인식을 하지못한다. 즉 연산은 숫자만 가능하다는 뜻이다. 그래서 jsp에서는 문자열 붙이기는 괄호를 2개만들어서 사용한면된다.

RequestMapping, RequestParam

HelloName함수

@Controller
@RequestMapping ("/exam02") // getmapping에 주소를 적어줄 경우 같은 유형들의 내용은 겹치는 경우가 있다.
// 예를 들어 블로그 같은 곳에 들어가는 내용들을 만들었다고하면 /blog/...이 될것이다. 이 때 ...이 아닌 blog는 페이지마다 공통적으로 다 가진다.
// 이 때 blog를 입력하는 수고를 덜어주는 기능이 RequestMapping이다.
public class ParamController {

    @GetMapping("/hello-name")
    public String HelloName(Model model, 
                            @RequestParam(defaultValue = "") String name){ // RequestParamsms 주소에 들어오는 값을 웹페이지에 출력이 될 수 있게 해준다. 
        // String으로 name 변수를 주고 이것을 model 뒤에 "+"로 붙여주었다. 그래서 jsp에 greeting을 적어주기만 하면 우리가 url에 입력한 값을(name)출력하게된다.
        model.addAttribute("greeting", "안녕하세요" + name);
        return "/exam02/helloname.jsp";
    }

}

RequestMapping

HelloName함수에서 getmapping에 주소를 적어줄 경우 같은 유형들의 내용은 겹치는 경우가 있다. 예를 들어 블로그 같은 곳에 들어가는 내용들을 만들었다고하면 "/blog/..."이 될것이다. 이 때 ...이 아닌 blog는 페이지마다 공통적으로 다 가진다. 이 때 blog를 입력하는 수고를 덜어주는 기능이 RequestMapping이다.
getmapping에 exam02를 적어주지 않았지만 url에는 적어서 실행해도 HelloName함수가 실행되는 것을 확인 할 수 있다.

RequestParam 쿼리스트링방식

함수의 매개변수자리에 사용하며 "RequestParam(defaultValue = "") 자료형 변수명" 처럼 사용하면 된다. 이때 null이 변수값으로 들어오면 에러가 나는데 이걸 defaultValue의 값으로 바뀌게 해주는 옵션도 있다.

HelloName함수에서 RequestParam는 주소에 들어오는 값을 웹페이지에 출력이 될 수 있게 해준다. RequestParam 뒤에 String으로 name 변수를 주고 이것을 model 뒤에 "+"로 붙여주었다. 그래서 jsp에 greeting을 적어주기만 하면 우리가 url에 입력한 값을(name)출력하게된다.

helloname jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Hello Name</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
    <h2>매개변수를 전달받아 출력하기</h2>
    <p>${greeting}</p>
</body>
</html>

여기서 greeting만 적어주면된다.
url에 getmapping에 적어준 주소 외에 또"?name=장길산"를 적어줬다. 이때 name은 RequestParam의 매개변수이고, 매개변수 값은 "="으로 정해줄 수 있다.

왜 사용할까

이 기술은 왜 사용할까. 즉 장점이 뭘까?

소스 조정없이 출력을 다양하게 만들 수 있다는 장점이 있다. 예를 들어, 사용자가 검색 기능을 이용하려고 할 때, 사용자가 입력한 검색어를 서버에 전달해야 합니다.

당신이 웹 브라우저에서 URL을 통해 검색을 수행한다고 상상해 봅시다. 웹 브라우저의 주소 표시줄에 "http://example.com/search?query=apple"와 같은 URL을 입력하고 엔터 키를 누르면, 웹 브라우저는 서버에 GET 요청을 보냅니다.

이때, "/search" 경로는 서버에서 검색을 수행하는 엔드포인트를 가리키고, "query=apple"은 쿼리 매개변수로, 사용자가 검색한 내용인 "apple"을 나타냅니다.

서버 측에서는 Spring Framework와 같은 프레임워크를 사용하여 이 요청을 처리할 수 있습니다. 이를 위해 컨트롤러 클래스 내에 @GetMapping("/search")로 매핑된 메서드를 작성합니다.

이 메서드는 @RequestParam(name = "query") String query와 같이 매개변수를 사용하여 "query"라는 이름의 쿼리 매개변수를 받습니다. 이는 사용자가 입력한 검색어를 받아오는 역할을 합니다.

이제 서버는 사용자가 입력한 검색어를 받아와서 해당 검색어를 이용하여 검색을 수행하고, 그 결과를 클라이언트에 반환합니다. 이 예시에서는 단순히 받은 검색어를 그대로 반환하지만, 실제로는 이를 이용하여 데이터베이스에서 검색을 수행하거나 다른 로직을 수행할 수 있습니다.

마지막으로 서버는 클라이언트에게 "검색 결과: apple"과 같은 응답을 보냅니다. 이는 클라이언트가 검색 결과를 확인할 수 있도록 하는 것입니다.

사용자가 폼을 통해 검색어를 입력하고, 그 결과로 서버에 요청을 보내는 과정을 보여주는 예시였습니다. 사용자가 검색어를 입력한 후에 "검색" 버튼을 클릭하면 웹 브라우저가 이를 GET 요청으로 변환하고, 해당 요청에는 입력한 검색어가 쿼리 매개변수로 함께 전송됩니다.

Bku

기억보단 기록

이전 포스트

D+50 -모델링,알고리즘.재귀함수,정렬알고리즘.선택정렬,삽입정렬,버블정렬,합병정렬,수학알고리즘.소수,최대공약수,최소공배수,스프링부트.라이브러리확인,가져오기,jsp라이브러리 추가하기

다음 포스트