🌊 ._.sori🪽

[ 로또, 버튼 눌러 랜덤한 숫자 6개 출력하기 ]

버튼을 누르면
계속해서 랜덤한 번호가 출력된다.

1. 동작화면과 전체코드

동작화면

전체코드

2. 어떻게 만들지 생각하기 👨🏻‍💻

버튼을 누르면 6개의 숫자가 랜덤으로 출력되도록 만들었다.

원하는 이미지에 맞춰 만들면서, 버튼을 연속적으로 누르면 숫자가 계속 바뀌는 구조로 수정하고 싶어졌다.

최대한 아는 지식 선에서 생각해보기로 했다.

[ 원하는 이미지 ]

[ 변경사항 ]

□ 원형 모형 안에 각각 6개의 숫자가 출력되기.

     ▻  TreeSet으로 받은 숫자를 따로 받아야한다.

     ▻  여전히 중복X과 오름차순이 유지되어야한다.

     ▻  ArrayList로 변환하면 될 것 같다.

□ 버튼을 누르면 계속해서 숫자 변경되기.

     ▻  @GetMapping을 유지하면서 바꾸고 싶다.

     ▻  무한 순환 구조로 만들어보면 되지않을까?

3. 원형을 만들고 각 원형에 로또 숫자 담기.

□ TreeSet으로 담은 랜덤 숫자를 ArrayList로 변형한다.

Random1.java

List<Integer> lottoList = new ArrayList<>(lottoSet);

model.addAttribute("Number1",lottoList.get(0));
model.addAttribute("Number2",lottoList.get(1));
model.addAttribute("Number3",lottoList.get(2));
model.addAttribute("Number4",lottoList.get(3));
model.addAttribute("Number5",lottoList.get(4));
model.addAttribute("Number6",lottoList.get(5));

TreeSet의 특성은 중복을 허용하지 않으면서, 이진탐색 트리의 구조로 오름차순 배열이 이뤄진다는 것이다. 여기까진 원하는 부분이었지만, Set은 각 인덱스로 요소들을 관리하지 않는다. 그렇기에 6개의 숫자를 따로따로 원형 안에 넣는 방법이 없었다. 그래서 ArrayList<>로 Set인 lottoSet을 변환시켰다. ArrayList는 순서를 보장하여 데이터를 저장하는 특성이 있기 때문에, 오름차순으로 나열되어있을 lottoSet의 순서를 유지해줄거라 생각했다. (본래 ArrayList는 중복을 허용하며 들어온 순서를 보장하기 때문에 처음부터 랜덤 숫자를 ArrayList로 받지 않았다.)

이제 ArrayList로 변형된 lottoList를 나눠서 html에 있는 변수에 보낼 것이다. 이때 변수는 Number1 ~  Number6이 된다.

□  style.css에 들어간다.

.circle-red {
    display:inline-block;
    width:80px;
    height:80px;
    border-radius:50%;
    background-color:#F5A9A9;
    text-align:center;
}

[빨-주-노-초-파-남] 순서로 연결되어 보이도록 display에 inline-block을 적어주었다. display는 어떻게 표시할지 결정할 때 쓴다. 여기서 inline-block은 block의 모양은 유지되면서 옆으로 나열하고 싶은 경우 사용한다. border-radius는 테두리 굴곡으로 50%로 설정하여 원형으로 만들어준다. 100%로 하면 width와 height의 비율이 다른 경우 타원형이 될 수 있다. 하지만 50%는 비율이 달라도 온전한 원형으로 보여진다.

여기서 background-color만 다르게 하면 총 6개의 원형을 만들 수 있다.

□ 만든 원형에 lottoList에 있는 인덱스 숫자 넣기.

button1.html

<div class="circle-red">
    <h1 th:text="${Number1}"> RandomNumber </h1>
</div>

변수 Number1은 동적인 결과를 반영하니 th를 선언한다. 아까 Random1.java에 있던 lottoList의 0번째 인덱스에 접근하여 Number1에 값을 보내줄 것이다. 그렇게 만든 다른 색의 원형을 class로 정의하고 변수를 입력하면 나머지 인덱스도 나타날 것이다.

4. 순환구조 만들기.

전에는 랜덤 번호를 딱 한 번 받을 수 있었다. 하지만 이번에는 버튼을 누르면 계속해서 랜덤 숫자를 받을 수 있도록 만들고자 한다. 

알고있는 개념에서 원하는 목표를 수행하기 위해, 숫자가 보여질 화면 3개와 Controller 3개를 만들어 순환하는 방식으로 만들기로 했다. Button1에서 버튼이 눌리면 컨트롤러인 Random1로 도착한다. 그 후 실행된 메서드의 값은 Button2로 보낸다. Button2에서 버튼이 눌리면 Random2 컨트롤러로 향하고 메서드의 결과는 Button3으로 가게된다. Button3에서 버튼이 눌리면 Random1로 다시 돌아오게 만들었다. 그 후 Random1에서 처리된 결과는 Button1에서 출력되도록 만들었다.

<form th:action="@{/Random1}" method = "get">
    <button class="btn" type="submit" > 버튼 </button>
</form>

utton1.html에서 버튼이 눌리면 Random1 경로를 가진 Controller로 전송된다. 

@GetMapping("/Random1")
public String randomPage1(Model model) 

그럼 Random1.java에 있는 GetMapping("/Random1")으로 받게된다. 그러면 randomPage1 메서드가 실행된다.

Set<Integer> lottoSet = new TreeSet<>();

while(true) {
    int ranNum = rd.nextInt(45)+1;
    lottoSet.add(ranNum);

    if(lottoSet.size() == 6) {
        break;
    }
}

List<Integer> lottoList = new ArrayList<>(lottoSet);

model.addAttribute("Number1",lottoList.get(0));
model.addAttribute("Number2",lottoList.get(1));
model.addAttribute("Number3",lottoList.get(2));
model.addAttribute("Number4",lottoList.get(3));
model.addAttribute("Number5",lottoList.get(4));
model.addAttribute("Number6",lottoList.get(5));


return "button2";

 랜덤으로 숫자 6개를 TreeSet으로 받고 ArrayList로 변환 후, 각 인덱스에 접근하여 변수에 넣어 button2로 전달하게 된다.

<div class="circle-red">
    <h1 th:text="${Number1}"> RandomNumber </h1>
</div>

<div class="circle-orange">
    <h1 th:text="${Number2}"> RandomNumber </h1>
</div>

<div class="circle-yellow">
    <h1 th:text="${Number3}"> RandomNumber </h1>
</div>

<div class="circle-green">
    <h1 th:text="${Number4}"> RandomNumber </h1>
</div>

<div class="circle-blue">
    <h1 th:text="${Number5}"> RandomNumber </h1>
</div>

<div class="circle-darkblue">
    <h1 th:text="${Number6}"> RandomNumber </h1>
</div>

 이제 받아둔 변수가 button2.html로 전달되어 출력된다.

<form th:action="@{/Random2}" method = "get">
    <button class="btn" type="submit" > 버튼 </button>
</form>

그 후 버튼을 누르면 Random2 경로를 가진 Controller를 찾게 된다. 이런식으로 계속 반복되는 구조다. 마지막 Random3는 button1으로 출력되며  button1의 버튼이 눌리면 Random1의 메서드가 실행되어 button2에 결과값이 출력되게 된다.

[ 네잎클로버 이미지 넣는 방법과 글씨체 적용 ]

🪽

"틀린 내용이 있을 수 있습니다."

[ 블로그에 쓴 내용들의 출처는 아래에 적어둘테니

들어가서 읽어보시면 더욱 도움이 되실 듯 합니다 ]

- List와 Set 차이

- Set을 ArrayList로 변환 출처

- Set 출처

- ArrayList 구조 출처

- display 출처

- border-radius 차이

[ 버튼 누르면 Hello,World! 출력 ]

버튼을 누르면
랜덤한 숫자 6개 출력하기

1. 동작화면과 전체코드

동작화면

자바코드

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

import java.util.*;

@Controller
public class RandomNum {

    Random rd = new Random();
    Set<Integer> lottoSet = new TreeSet<>();

    @GetMapping("/")
    public String firstPage() {
        return "button";
    }

    @GetMapping("/Random")
    public String randomPage(Model model) {

        while(true) {
            int ranNum = rd.nextInt(45)+1;
            lottoSet.add(ranNum);

            if(lottoSet.size() == 6) {
                break;
            }
        }

        model.addAttribute("Number",lottoSet);

        return "button";
    }


}

html 코드

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>로또 번호 생성</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">


</head>

<body>

<div class="top">
    <div class="center">
        <h1> <b> 로또 번호 생성기 </b> </h1>
        <h1> Lotto</h1>


        <div class="numPadding">
            <h1 th:text="${Number}"> RandomNumber </h1>
         </div>

        <div class="padding">
            <form th:action="@{/Random}" method = "get">
                <button class="btn" type="submit" > 버튼 </button>
            </form>
        </div>
    </div>
</div>

</body>
</html>

css 코드

.top {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 50px;
    margin-right: 50px;
}

.padding {
    padding-top:100px;
    padding-bottom:10px;
    padding-left:auto;
    padding-right:auto;
}

.numPadding {
    padding-top:100px;
    padding-bottom:0px;
    padding-left:0px;
    padding-right:0px;
}


.center {
    text-align: center;
}

.btn {
    background-color: #AC72E5;
    color: white;
    border: none;
    border-radius:20px;
    width:200px;
    height:60px;
    font-size:40px;
    text-align: center;
    cursor: pointer;
}

2. 어떻게 만들지 생각하기 🧘🏻‍♀️

버튼 누르면 Hello,World! 문장이 출력되도록 만들었다.

여기서 조금만 코드를 바꾸면 랜덤한 숫자 6개를 출력되도록 만들 수 있다.

[ 변경사항 ]

□ 텍스트와 버튼 가운데 정렬하기.

     ▻  css를 사용하기.

□ 랜덤한 숫자 6개 출력 (중복X, 오름차순)

    ▻  java.util.Random 클래스를 사용

3. 첫번째로 보여줄 화면 대충 만들기.

□ Controller 디렉토리 만들고, 그 안에 RandomNum 클래스 만들기.

□ RandomNum 클래스에 첫 화면 반환하는 코드 작성하기.

@GetMapping("/")
public String firstPage() {
    return "button";
}

저번 예제에서 설명을 적어두었지만, 짧게 설명해보겠다. 요청이 들어오면 @GetMapping은 괄호 안에 있는 경로와 요청 경로가 맞는지 보고, 맞으면 해당 메서드를 실행하여 페이지를 반환한다. 현재 코드에선 ("/")로 루트 경로로 들어오면 button.html을 반환하라고 코드를 작성했다.

□  button.html에 기본 동작 코드 작성하기.

<head>
    <meta charset="UTF-8">
    <title>로또 번호 생성</title>
</head>

title은 탭의 이름을 지정하는 것이다.

<body>
     <h1> <b> 로또 번호 생성기 </b> </h1>
     <h1> Lotto</h1>

     <h1 th:text="${Number}"> RandomNumber </h1>
        
     <form th:action="@{/Random}" method = "get">
            <button class="btn" type="submit" > 버튼 </button>
     </form>

</body>

body 안에 화면에 출력되길 원하는 문장과 버튼을 만들었다. $Number에는 랜덤으로 출력한 6개의 숫자가 나타날 공간이다. 그리고 그 아래 버튼을 만들었다. 버튼이 눌리면 get 방식으로 Controller에게 전달된다.

이 코드의 동작 방식은 이전에 작성한 Hello,World에 자세하게 적어놨다. 하지만 복습할겸 간단하게 설명을 덧붙여보겠다. 타임리프는 순수한 html을 유지하면서 동적으로 변경된 결과를 보여주는 프로그램이다. 그렇기에 동적인 결과가 반영되어야할 코드에 th를 붙여주었다.

로또 번호 생성기와 Lotto는 움직이지 않는다. 텍스트로 화면에 그저 출력되기만 하면 된다. 하지만 버튼의 경우, 버튼이 눌리면 /Random이라는 경로를 get 방식으로 Controller에게 보낸다. 이 부분은 동적으로 움직이게 되므로 form에 th가 붙게된 것이다. 그 위의 코드도 마찬가지다. 첫 화면에선 랜덤한 숫자가 나타나지 않는다. 하지만 버튼을 누르면 다음 화면에 숫자가 나타나야한다. 이게 바로 동적인 결과를 반영한 것이다. 그렇기에 ${Number}에 th가 붙은 것이다.

자 이렇게 작성하면 버튼이 눌리면 오류가 발생하는 첫 화면 페이지를 띄웠다.

3. css 만들기.

이 부분에서 오류가 발생하여 조금 헤맸다.

□  resources 안에 static 디렉토리를 만든다.

□  static 안에 css 디렉토리를 만든다.

□  그러면 저렇게 static.css가 완성된다. 

□  static.css 밑에 file - style.css를 만들면 된다.

3. css 코드 작성하기.

□  모든 요소 중앙에 배열하기.

.center {
    text-align: center;
}

□  margin으로 여백을 총 세 개 만들 것이다.

이렇게 세구역으로 여백을 설정할 것이다.

여기서 first는 [로또번호생성기-Lotto-랜덤숫자 6개-버튼]을 감싼 밖 부분에 여백을 넣을 것이기에, 상하좌우에 원하는 여백의 크기를 입력했다.

.first {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 50px;
    margin-right: 50px;
}

.second {
    margin-top: 100px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.third {
    margin-top: 200px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

□  버튼 커스텀하기.

.btn {
    background-color: #AC72E5;
    color: white;
    border: none;
    border-radius:20px;
    width:200px;
    height:60px;
    font-size:40px;
    text-align: center;
    cursor: pointer;
}

background-color는 자신이 원하는 배경색을 넣으면 된다. 검색창에 컬러차트라고 검색하면 다양한 사이트가 뜬다. 아무 곳에 들어가 원하는 컬러를 선택하여 HEX 코드를 복사하여 넣으면 된다. color는 글자 색상이 되고 이것도 원하는 색으로 변경하면 된다. border는 테두리, border-radius는 테두리의 곡선을 의미한다. 약간 둥근 버튼을 원해서 20px로 적어주었다. width와 height는 버튼 너비와 높이가 되고, font-size는 글자 크기, text-align은 글자 중앙배열을 의미한다. cursor는 버튼 위에 눌렀을 때 마우스 모양이 변경되도록 하는 것이다.

4. html에 css 적용시키기.

□  html에 css 연결하기.

<head>
    <meta charset="UTF-8">
    <title>로또 번호 생성</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>

head에 만들어둔 css를 link를 통해 연결할 것이다. rel은 속성 값으로 반드시 적어줘야한다. 값으로 "stylesheet"를 적었다. 의미는 링크된 파일을 스타일시트로 사용하겠다고 알리는 것이다. href는 스타일시트가 있는 경로를 적어주고 type엔 링크된 파일의 타입을 지정한다. 

□  css 적용시키기.

<div class="first">
    <div class="center">
        <h1> <b> 로또 번호 생성기 </b> </h1>
        <h1> Lotto</h1>


        <div class="second">
            <h1 th:text="${Number}"> RandomNumber </h1>
         </div>

        <div class="third">
            <form th:action="@{/Random}" method = "get">
                <button class="btn" type="submit" > 버튼 </button>
            </form>
        </div>
    </div>
</div>

css에서 .first에 설정한 margin(여백)을 모든 요소에 적용시키기 위해 가장 첫번째로 적어주었다. css 요소를 적용시킬때 지정한 이름에서 온점을 뺀 이름을 class=" "에 적어주면 된다. 이어서 모든 요소에 적용시킬 가운데 정렬을 그 다음으로 적어 기본적인 테두리를 만들었다. 그러면 이제 이 안에 들어갈 요소들은 가운데 정렬을 포함하여 상•하 100px, 좌•우 50px가 띄어져서 시작될 것이다. 

랜덤한 숫자 6개가 Lotto와 떨어져서 위치하길 원하므로 상 100px만 띄어진 .second를 class에 넣어준다. 그 후 6개의 랜덤 숫자와 버튼이 일정간격 떨어지길 원하니 .third를 적어 감싸준다.

마지막으로 버튼에는 <button class="btn"...>을 적어 css를 적용시킨다.

5. 랜덤한 숫자 나오도록 출력하기.

□ 전체코드

@Controller
public class RandomNum {

    Random rd = new Random();
    Set<Integer> lottoSet = new TreeSet<>();

    @GetMapping("/")
    public String firstPage() {
        return "button";
    }

    @GetMapping("/Random")
    public String randomPage(Model model) {

        while(true) {
            int ranNum = rd.nextInt(45)+1;
            lottoSet.add(ranNum);

            if(lottoSet.size() == 6) {
                break;
            }
        }

        model.addAttribute("Number",lottoSet);

        return "button";
    }


}

□ 랜덤을 사용할 함수 정의

Random rd = new Random();
Set<Integer> lottoSet = new TreeSet<>();

Java에서 제공하는 Random 함수를 사용하여 rd라고 변수명을 넣었다. 초반에 어떤 식으로 만들지 구상할 때, 중복이 없으면서 오름차순 배열로 나오는 걸 원했다. 그래서 TreeSet을 사용하여 코드를 작성했다. TreeSet은 이진검색트리의 형태로 데이터를 저장하는 컬렉션 클라스인데, 이진검색트리 중 성능을 향상시킨 레드-블랙 트리로 이뤄져있다. 아마 알고리즘 공부를 하거나, 수업을 들은 사람이라면 들어봤을 것이다. 

Set 인터페이스는 중복을 허용하진 않지만, 저장 순서는 상관하지 않는다. HashSet을 사용하면 로또번호출력에서 오름차순으로 제대로 이뤄지지 않는 것을 알 수 있다. 그런데 TreeSet을 사용하면 부모노드와 왼쪽 노드를 비교하여 자리를 바꾸는 과정이 있기 때문에 오름차순으로 나열된 값을 얻을 수 있다. 이에 대한 설명은 나중에 올려보도록 하며, 이해하기 쉬운 블로그를 출처에 남겨놓겠다.

그렇게 TreeSet을 이용하여 랜덤 숫자를 lottoSet에 저장되도록 만들었다.

□ 랜덤으로 숫자 6개 출력하고 반환페이지와 연결하기.

@GetMapping("/Random")
public String randomPage(Model model) {

    while(true) {
        int ranNum = rd.nextInt(45)+1;
        lottoSet.add(ranNum);

        if(lottoSet.size() == 6) {
            break;
        }
    }

    model.addAttribute("Number",lottoSet);

    return "button";
}

@GetMapping에 들어올 경로를 적어준다. 현재 코드에선 /Random이라 적었는데 그 이유는 버튼이 눌리게 되면 form에서 Random 경로를 get 방식으로 Controller에게 보내도록 작성했기 때문이다. 그렇기에 요청 경로에 맞게 수행할 메서드를 연결하기 위해 @GetMapping에 /Random을 작성했다.

자 이제 버튼을 누르면 randomPage 메서드는 수행될 것이다. 가장 첫번째 코드인 while문으로 간다. lottoSet의 크기가 6이 아니라면 while은 계속 true일 것이고, 랜덤한 숫자를 뽑을 것이다. 여기서 nextInt(45)+1의 의미는, 45 = 0 ~ 44까지의 총 45개, +1 = 1씩 더한 1 ~ 45로 바꾼 것이 된다.

랜덤 숫자에 대해 검색을 하게되면 for문이 가장 많이 나올 것이다. 물론 for문으로 작성가능하다. 그런데 나는 while문 사용을 잘 안해봐서 while문으로 작성했다. for문 코드는 아래에 올려놓겠다.

이제 마지막으로 Model을 이용하여 랜덤 숫자 6개의 배열을 뷰 템플릿으로 보내기만 하면 된다. Model에 관한 설명도 앞에 했던 Hello,World!에 적어뒀다. 여기서 복습할 겸 간단히 설명하자면, 데이터를 뷰로 전달할 때 사용하는 객체라고 생각하면 된다. 그렇게 html에 있는 Number에 lottoSet을 보내고 return을 통해 다시 button 페이지를 반환하도록 했다.

□ for문을 이용하여 작성한 Controller

package com.LottoWeb.LuckyLotto.Controller;

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

import java.util.*;

@Controller
public class RandomNum {

    Random rd = new Random();
    Set<Integer> lottoSet = new TreeSet<>();

    @GetMapping("/")
    public String firstPage() {
        return "button";
    }

    @GetMapping("/Random")
    public String randomPage(Model model) {

        for(int i=1; lottoSet.size() < 6; i++ ){
            int ranNum = rd.nextInt(45)+1;
            lottoSet.add(ranNum);
        }

        model.addAttribute("Number",lottoSet);

        return "button";
    }


}

[ 로또, 버튼 눌러 숫자 6개 출력하기 (2) ]

🪽

"틀린 내용이 있을 수 있습니다."

[ 블로그에 쓴 내용들의 출처는 아래에 적어둘테니

들어가서 읽어보시면 더욱 도움이 되실 듯 합니다 ]

- TreeSet 출처

- 랜덤 숫자 생성 출처 (while)

- html과 link 연결 출처

- 스타일 시트 출처

- 컬러차트 출처

- CSS 텍스트 가운데 정렬 출처

- CSS 버튼 크기 조정 출처

- 버튼 커스텀 출처

📚 책 소개하기

내가 사용한 자바완전정복 책 링크!
ㄴ 김동형 지음, 이지스퍼블리싱

이 책을 고르게 된 이유는 친구의 추천이었다. 굉장히 꼼꼼하게 적혀있어 이해하기 쉽다는 이유로 친구는 이 책을 골랐다고 했다. 나도 그래서 그냥 따라샀다. 실제로 책을 살펴보니 굉장히 꼼꼼하게 정리되어있다. 다른 책은 본 적이 없어 비교가 불가하지만, 내 생각으론 처음 자바를 공부한다면 이 책을 가지고 충분히 따라갈 수 있을 듯 하다. 모두들 화이팅!!

🐰

✔️  객체 생성시 주소값_ 189p

• 객체 안의 값을 변경하면 새로운 객체를 생성

String str1 = new String("안녕");
String str2 = str1;
str1 = "안녕하세요";
System.out.println(str1);
System.out.println(str2);

new 연산자를 사용하여 객체를 생성했다. new 연산자는 인스턴스(메모리 위에 올라간 객체)를 생성하는데, 메모리 영역 중 힙 영역에 데이터를 저장할 공간을 할당받는다. 그 공간의 참조값을(여기선 str1과 str2가 된다) 객체에게 반환하여 주고 이어서 생성자를 호출한다.

순서가 중요하다. str1에 "안녕"이 들어가는 것이 첫번째가 된다. 그 후 두번째가 str1이 str2에 들어가는 것으로, str2는 "안녕"을 가지게 된다. 세번째에 str1이 "안녕"에서 "안녕하세요"로 변경이 된다. 

출력이 될 땐 이 순서에 맞춰 출력이 된다. str1은 마지막 코드 "안녕하세요"로 변경된 바가 있으니 "안녕하세요"로 출력이 될 것이다. str2는 "안녕"이 유입된 후 변경된 것이 없으니 여전히 "안녕"을 가리키고 있을 것이다. 

메모리는 [ 메서드(클래스) 영역 - 스택 영역  - 힙 영역 ]으로 되어있다. 이때 String은 메서드 영역에 올라가고 str1과 str2의 내용이 힙영역의 몇 번지에 있을 건지에 대한 정보를 스택 영역에 보관한다. 처음에 스택 영역에서 100번지에 str1의 내용이 있다고 가리킬 경우 힙 영역 100번지에 가면 "안녕"이 있을 것이다. 그 후 str1을 그대로 str2에 저장했으니 str2도 똑같이 100번지에 "안녕"을 가리키고 있을 것이다. 여기서 str1이 "안녕하세요"로 바뀌면 str1은 다른 번지에 "안녕하세요"가 있게 될 것이다. 그리고 str2는 여전히 똑같이 100번지를 가리키고 있을 것이다.

• 배열과 차이점

int[] array1 = new int[] {3, 4, 5};
int[] array2 = array1;
array1[0] = 6; array1[1] = 7; array[2] = 8;

System.out.println(Arrays.toString(array1));
System.out.println(Arrays.toString(array2));

배열에 3과 4, 5를 array1에 넣었고, array2는 array1과 동일한 데이터를 가진다. 이때 array1에 대한 데이터를 6과 7, 8로 수정해보겠다. 분명 위에서 문자열을 수정했을땐 두 객체의 값이 같이 수정되지 않았다. 하지만 배열은 다르다. 배열은 번지에 새로운 값이 입력되면 다른 번지에 데이터를 새롭게 만드는 것이 아닌, 본래의 위치에 있던 데이터를 수정하여 값을 넣게된다.

그렇기에 결과는 array1과 array2 모두 6,7,8을 출력하게 된다.

• 리터럴로 입력한 데이터의 차이

String str1 = new String("안녕");
String str2 = "안녕";
String str3 = "안녕";
String str4 = new String("안녕");

System.out.println(str1 == str4);
System.out.println(str2 == str3);

str2와 str3은 리터럴을 바로 입력한 데이터가 되며, 그 데이터는 서로 같은 값을 가진다. 만약 이렇게 문자열 리터럴 방식으로 String 객체를 생성할 경우, JVM은 먼저 String Pool에서 해당 문자열이 있는지 확인한다. 그렇게 같은 문자열이 있다는 것이 확인되면 기존 문자열 객체의 참조를 반환하게 되고 동일한 메모리 주소를 공유하게 된다.

new 연산자로 객체를 생성할 경우 String Pool이 작동하지 않는다. new는 매번 새로운 메모리 공간에 객체를 생성하고, 동일한 값이라도 메모리 주소는 달라지게 된다.

결론적으로 str1과 str4는 서로 다른 주소값을 가진다. 그리고 str2와 str3은 서로 같은 주소값을 가진다. 

Q. new가 정확히 무엇인가?

A. new 연산자는 객체를 생성하는 방법 중, 새로운 메모리 공간에 객체를 생성하는 방법이다. 외부에서 값을 변경할 때 다른 객체와 분리되어 값이 변경하길 원할 경우 new 연산자를 사용하여 객체를 정의하면 된다.

✔️  + 연산_ 195p

• 문자열 + 문자열 연산

String str1 = "안녕" + "하세요" + "!";
System.out.println(str1);

객체는 몇 개 만들어질까? 처음에 "안녕"과 "하세요" 그리고 "!"까지 3개의 객체가 생성될 것이다. 그 후 + 연산자로 연결이 될 것이다. "안녕" + "하세요"로 "안녕하세요"가 만들어져 총 4개의 객체가 되고 "!"가 연결되며 "안녕하세요!"가 완성되어 총 5개의 객체가 만들어질 것이다.

• 자료형에 따른 + 연산

System.out.println(1 + 2 + "안녕");
System.out.println("안녕" + 1 + 2);

첫번째 코드부터 살펴보면 연속해서 나오는 1과 2로 자료형이 숫자 자료형으로 동일하다. 이렇게 동일한 자료형이 연달아 나올 경우 더하기 연산으로 작용하여 3 + "안녕" 형태로 이뤄지게 된다. 하지만 두번째 코드처럼 "안녕"과 1이 +연산자로 연결될 경우 다른 자료형으로 안녕1이 되고 그 후에 나오는 2 또한 안녕1로 1이 있어도 숫자 자료형으로 인식하지 않기 때문에 안녕12가 최종적인 값이 될 것이다.

[ Hello,World 출력하기 ]

버튼 누르면 Hello,World!
🌧️

1. 동작화면과 코드

버튼을 누르면

↓

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>간단한 버튼 예제</title>
</head>

<body>
<h2 th:text="${message}">message</h2>

<form th:action="@{/hello}" method="get">
    <button type="submit">버튼</button>
</form>

</body>

</html>

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

@Controller
public class HelloController {


    @GetMapping("/")
    public String empty() {
        return "button";
    }

    @GetMapping("/hello")
    public String helloWorld(Model model) {
        model.addAttribute("message", "Hello, World!");
        return "button";
    }

}

2. 타임리프 dependencies 추가하기.

타임리프(Thymeleaf)에 대해서 설명을 간략하게 해보자면, 순수한 HTML을 화면에 출력하기 위해 사용하는 프로그램이라고 생각하면 될 것 같다. 서버를 통해 뷰 탬플릿을 거치면 동적으로 변경된 결과를 확일할 수 있는데, 순수한 HTML을 유지하여 보여주기 때문에 네츄럴 템플릿(natural templates) 특징을 가지고 있음을 알 수 있다. 보통 Spring MVC에서 많이 사용한다.

□ build.gradle를 찾아 누른다.

□ 코드를 복사한다.

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

□ dependencies에 붙여넣는다.

□ 새롭게 세팅할 수 있도록 이 코끼리(?)를 눌러준다.

□ 제대로 생성되었는지 확인한다.

3. HTML을 통해 버튼 만들기.

□ 전체 코드

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>간단한 버튼 예제</title>
</head>

<body>
<h2 th:text="${message}">message</h2>

<form th:action="@{/hello}" method="get">
    <button type="submit">버튼</button>
</form>

</body>

</html>

□ resources 밑에 있는 templates에 button.html을 만들어준다.

    • 만일 없다면 templates를 directory로 먼저 만들어준 후 하위에 button.html을 만들면 된다.

□ HTML을 타임리프 통해서 작동되도록 해준다.

<html lang="en" xmlns:th="http://www.thymeleaf.org">

뒤에 xmlns:th="htttp://www/thymeleaf.org" 추가하면 된다.

□ 타이틀 작성하기.

<title>간단한 버튼 예제</title>

□ <body> 작성하기.

작성하기 전에 알아야 할 부분이 있다. 바로 th라는 것인데, th는 타임리프로 동적으로 작용해야하는 부분에 붙여서 사용해야한다. 즉 타임리프를 사용하는 방법은 xmlns:th="htttp://www/thymeleaf.org"을 정의하고, 동적으로 작용해야할 부분에 th를 적어주는 것이다. 그러면 그 부분은 순수한 HTML을 유지하며 동적으로 변화해줄 것이다.

<h2 th:text="${message}">message</h2>

첫 화면엔 버튼만 있고 텍스트가 없었다. 두번째 화면에서 버튼을 누른 후 메세지가 나타났다. 그러면 이 부분은 동적으로 움직인 것이니 th를 붙여 코드를 작성해준다.

HTML은 ${message}를 통해 Controller와 연결할 것이다. ${ }는 변수 표현식이며 Controller에서 전달된 message라는 변수라는 의미이다. 그러면 Controller에서 데이터를 message로 전달하여 h2 부분에 원하는 텍스트가 보이게 된다.

□ <form> 작성하기.

form은 주로 사용자의 의견이나 정보를 알기 위해 입력할 큰 틀을 만드는데 사용한다. form은 입력된 데이터를 한 번에 서버로 전송한다. 그렇게 보내진 데이터는 웹 서버가 처리하고, 결과에 따른 웹페이지를 보여주게 된다. 

<form th:action="@{/hello}" method="get">
    <button type="submit">버튼</button>
</form>

form에서 th를 사용했다. 그 이유를 살펴보면 action=@{/hello}에 대해서 알아야한다. 아까 변수 표현식인 $와 다르게 @로 모양이 다르다. @{ }는 URL 표현식으로 주로 링크나 form에서 action과 함께 쓰인다. 그러면 action은 무엇일까? action은 form을 전송할 서버쪽 스크립트 파일을 지정하는 것이다. 좀 더 직관적이게 말해보자면 Controller에서 GetMapping(들어온 경로에 맞춰 반환할 페이지를 전송)에 사용할 '들어온 경로'에 해당하는 부분이다. 

다시 정리해보자. action은 Controller의 메서드 중 어느 것과 연결할지, 즉 이 form이 action 속성을 통해 어느 페이지를 반환하는 컨트롤러와 연결할지 결정하는 것이다. 그러면 action에 적은 경로를 통해 form이 서버에 전송하는 동적인 움직임을 가지기에 th를 붙여 타임리프를 사용하도록 연결한 것이다.

그러면 이때 이 정보를 전송할 때 어떤 방식을 선택할지 고를 수 있다. get 방식과 post 방식이 있는데, 이에 대한 부분은 블로그에 따로 정리해놨으니 간략하게만 설명하고 넘어가겠다. get은 URL에 데이터를 담아 전송하는 것으로 주소창을 보면 어떤 데이터를 담았는지 알 수 있다.

[ GET과 POST ]

이제 버튼을 알아보겠다.

<form th:action="@{/hello}" method="get">
    <button type="submit">버튼</button>
</form>

버튼을 만드는데 type을 정할 수 있다. type은 3개로 구성되어있는데 submit , button , reset 이다. 우리는 현재 순수한 HTML을 가지고 간단한 예제를 만들고 있다. 그렇기에 클릭(onclick)이라는 동작이 포함되어있는 구조로 만들어야 더 효율적이다. 그래서 submit를 사용했다. 자바스크립트의 onclick이 없어도 submit으로 결정하면 form 데이터를 그냥 전송시킨다.(만약 자바스크립트와 함께 예제를 만든다면 button type으로 선택하면 된다.)

4. HelloController

□ 전체 코드

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

@Controller
public class HelloController {


    @GetMapping("/")
    public String empty() {
        return "button";
    }

    @GetMapping("/hello")
    public String helloWorld(Model model) {
        model.addAttribute("message", "Hello, World!");
        return "button";
    }

}

□  처음 들어갔을 때 화면 만들기.

@GetMapping("/")
public String empty() {
    return "button";
}

GetMapping("/")에서 "/"는 루트 경로라는 의미이다. 사용자가 루트 경로로 들어오면 button 화면으로 반환할 것이다. 그러면 아까 위에 있던 HTML을 다시 살펴보자. 버튼이 눌려야 메세지가 호출되도록 만들었다. 경로를 보면 루트 경로로 사용자가 페이지에 들어왔을 경우(아무것도 하지 않은)에 해당한다. 그러면 아직 버튼을 누르기 전이니, 동적인 th로 작성한 부분을 제외하면 submit 타입으로 설정해둔 버튼만 띄워줘야 할 것이다.

□  버튼이 눌렸을 경우, 메세지를 넣어 화면 반환하기.

@GetMapping("/hello")
public String helloWorld(Model model) {
	model.addAttribute("message", "Hello, World!");
	return "button";
}

HTML에서 submit 방식을 통해, 누르면 바로 form이 전송되는 button을 만들었다. 그렇게  /hello 경로를 가진 action을  Get 요청으로 전송되면, 여기 @GetMapping("/hello")에서 받아 요청을 처리하게 된다. 

Model이 있다. Model은 SpringMVC에서 뷰로 데이터를 전달하기 위해 사용되는 객체이다. 즉 컨트롤러에서 뷰로 데이터를 전달할 때 사용된다고 생각하면 된다. Model은 타임리프, JSP와 같은 템플릿 엔진과 관계없이 작동된다. model은 Model 타입으로 전달되며 addAtrribute를 통해 속성을 정할 수 있다. 해당 코드에서 키는 message, 실제 데이터 값은 Hello, World!라고 정했다.

이제 이 속성은 다시 button이라는 이름을 가진 HTML로 전달될 것이다. HTML 코드를 다시 살펴보면 ${message}이 부분에 Hello, World!가 오는 것을 알 수 있다. 

🪽

"틀린 내용이 있을 수 있습니다."

[ 블로그에 쓴 내용들의 출처는 아래에 적어둘테니

들어가서 읽어보시면 더욱 도움이 되실 듯 합니다 ]

- 타임리프 출처

- 타임리프 출처

- form 출처

-form과 GET 출처

[ @Controller와 @RestController ]

[ Hello,World 출력하기 ]

Controller 안에
@GetMapping( )이라는 존재였다.

과연 @GetMapping은 어떤 역할을 하는 것일까?

데이터에는 두가지 전송방식이 존재한다.

GET

• URL(주소)에 데이터를 포함시켜 보낸다.
• 데이터는 헤더에 포함되어있다.
• URL에 데이터가 노출되어 보안에 취약하다.
• 캐싱(데이터를 가까운 곳에 임시로 저장한 후, 빠르게 불러오는 프로세스)할 수 있다.
• 주로 조회, 검색할 때 사용한다.

POST

• URL(주소)에 데이터를 포함시키지 않는다.
• 데이터를 바디에 포함한다.
• URL에 데이터가 노출되어있지 않아 GET방식 보단 보안이 높다.
• 캐싱((데이터를 가까운 곳에 임시로 저장한 후, 빠르게 불러오는 프로세스)할 수 없다.
• 주로 데이터를 서버에 저장, 수정할 때 사용한다.

@GetMapping( )

• Get 요청을 하는 API 어노테이션이다.
• 경로 매핑에 따라 어떤 페이지를 보여줄지 결정한다.
  (매핑, 여러 요소를 연결하는 과정 혹은 결과물을 말한다. 예시를 들어보면, 강남 맛집을 검색했을시 강남에 있는 모든 식당이 검색되는 경우라고 볼 수 있을 것 같다. 매칭은 키 = 180cm 일대일로 맞는 경우)
• 데이터를 가져올 때 사용한다.
• 반환값은 하나지만 경로는 다중으로 설정 가능하다. 

코드를 보고 이해해보자.

해당 코드는 페이지 반환은 아니고 @RestController(직렬화를 통해 문자열이 페이지에 보이게 해주는)를 사용하여 문자열을 반환하는 코드의 일부이다.

Controller 내부 코드

@GetMapping("")
    public String helloWorld() {
        return "Hello, World";
	}

1. @GetMapping("")으로 ("")에 경로가 적혀있지 않아 루트를(메인 페이지) 의미한다.
2. @GetMapping("") = 사용자가 메인 페이지에 들어가면
3. "Hello, World"를 반환해라. (@RestController를 이용하여)

그러면 이번엔 페이지 반환하는 코드 일부를 살펴보자.

Controller 내부 코드

@GetMapping("")
public String homePage() {
    return "First";
}

1. page라는 이름으로 .html 혹은 .jsp가 있다고 가정하자.
2. 루트 경로("")로 들어간다면
3. First라는 페이지를 반환하라는 명령이 DispatcherServlet에게 전달된다.
4. DispatcherServlet은 ViewResolver로 전달하고
5. ViewResolver가 First라는 이름을 가진 페이지를 찾아 최종적으로 화면에 출력되도록 한다.

@RequestMapping

• 다양한 속성을 지정가능하다.
• value, method, params, headers, consumes, produces의 속성을 가지고 있다.
• 그 속성을 이용하여 Get, Post 등 다양한 동작을 구현할 수 있다.
• 속성이 하나라도 달라야 올바르게 Handler가 매핑할 수 있다.
• 쉽게 생각하면 @RequestMapping에서 조회하는 목적에 맞게 편리하도록 만들어낸 버전을 @GetMapping 등.. 이라고 생각하면 된다.

이것도 쉽게 코드로 살펴보자.

@RequestMapping(value = "", method = RequestMethod.GET)
public String helloWorld() {
    return "Hello,Wrold!";
}

=

@GetMapping("")
    public String helloWorld() {
        return "Hello, World";
    }

@RequestMapping은 method에 .GET으로 어떤 방식으로 사용할건지 명시하고 있다. 

더 자세한 건 나중에 작성하겠다.

목적에 따라 다른 어노테이션

• @PostMapping =  데이터를 게시할 때 사용한다. (Post의 특징을 그대로 가져온 것)
• @PutMapping = 수정할 때 사용하며, 데이터 전체를 갱신하다.
• @DeleteMapping = 데이터를 삭제할 때 사용한다.
• @PatchMapping = 수정할 때 사용하며, 수정된 부분만 갱신한다.

@GetMapping을 포함하여 위의 어노테이션들은 @RequestMapping에서 목적에 맞게 더 편리한 코드를 만든 것이라 생각하면 된다. @RequestMapping에서 다양한 속성을 조합해 원하는 작동방식을 만들어야했다면, 위의 어노테이션은 속성의 조합에 대한 부담을 줄여준 것으로 보인다.

@GetMapping에 대해 알아봤습니다.

그냥 한 줄로 정리하면 들어오는 경로에 맞춰 반환될 페이지를 골라주는 역할인 것 같네요.
@RequestMapping에 대해서는 다음에 정리해볼까 합니다.

아래에 출처를 남겨두겠습니다.
블로그엔 제가 최대한 이해한 내용까지만 적는거라
출처에 들어가시면 더 많은 내용이 있어 공부하시는데 도움되실겁니다.

🪽

틀린 내용이 있다면 댓글로 알려주세요

- @GetMapping의 개념

- Get과 Post

- @RequestMapping 동작방식

- @RequestMapping 옵션

- 매핑과 매칭

[ SpringMVC에 대하여 ]

[ Hello World 출력하기 ]

Hello, World를 출력했다.
그런데 @Controller가 아닌 @RestController를 사용하였다.

왜 @RestController를 사용한걸까?

@Controller

• @Controller는 주로 view를 반환한다.
• ViewResolver를 통해 view를 반환한다.
• AnnotationMethodHandlerAdapter 핸들러 어댑터가 사용한다.
• 메소드 단위로 설정할 수 있기 때문에 효율이 좋다.
• @Controller는 200 OK(성공을 알리는 상태 코드)를 기본적으로 보낸다.

@RestController

• @Controller에 @ResponseBody가 추가되었다.
• Controller를 통해 Json 형태로 반환해야하는 경우 사용한다.
• HttpMessageConverter를 통해 Json 형태로 반환한다.
• 반환되는 객체는 Json으로 Serialize(직렬화)되어 반환된다.
• @RestController는 200 OK(성공을 알리는 상태 코드)를 기본적으로 보낸다.

결론적으로 @Controller는 View를 반환할 때 사용하고, @RestController는 Hello, World 같은 어떤 Json 형태의 데이터를 반환할 때 사용한다는 걸 알았다.

그렇다면 왜 @RestController는 Json 반환이 되는걸까?

직렬화

• 컴퓨터 과학의 데이터 스토리지 문맥에서 데이터 구조나 오브젝트 상태를 동일하거나 다른 컴퓨터 환경에 저장하고 나중에 재구성할 수 있는 포맷으로 변환하는 과정이다.
• 자바 시스템 내부에서 사용되는 객체 또는 데이터를 외부의 자바 시스템에서도 사용할 수 있도록 바이트(byte) 형태로 데이터 변환하는 기술과 바이트로 변환된 데이터를 다시 객체로 변환하는 기술(역직렬화)을 아울러서 이야기한다.

직렬화를 쉽게 이해해보자면, 시스템 내부에서 처리하기 편리한 어떤 데이터 형태로 존재하다가 우리에게 보여줄 때 우리가 이해할 수 있는 모습으로 형태를 변화시키는 것을 뜻하는 것 같다.

Q. @Controller는 Json 형태로 반환을 못하나?

A. 그건 아니다. 할 수 있다. @ResponseBody를 붙여주면 Json 형태로 반환이 가능하다. 본래 @Controller는 ViewResolver가 작동하여 view를 반환할 수 있도록 해준다. 하지만 @ResponseBody를 붙이면 @RestController처럼 HttpMessageConverter가 개입하게 되어 객체를 직렬화하여 전달하게 된다. 또한 MessageConverter에는 데이터의 종류(단순 문자열인지, 객체인지...)에 따라 서로 다른MessageConverter가 작동하게 된다.

// @ResponseBody를 붙인 코드
@Controller
public class HelloController {

    @GetMapping("")
    @ResponseBody
    public String helloWorld() {
        return "Hello, World";
    }

}

<결과>

👍

Http 상태 코드

• 특정 HTTP 요청이 성공적으로 완료되었는지 알려준다.
• 가장 기본적인 성공응답은 200 OK가 있다.

- 더 다양한 상태 코드

Q. @RestController의 기본적으로 반환되는 성공 상태 코드는 200 OK다. 그런데 다른 상태 코드로 바꾸려면 어떻게 해야하나?

A. ResponseEntity를 사용하여 상태 코드를 직접 설정할 수 있다. 

1) ResponseEntity.ok()를 사용한 코드 (200 OK)

// 예제 출처 - mangkyu.tistory (망나니 개발자님)

  @GetMapping(value = "/users")
    public ResponseEntity<User> findUserWithResponseEntity(@RequestParam String userName){
        return ResponseEntity.ok(userService.findUser(userName));
    }

2) ResponseEntity.status(HttpStatus.CREATED)를 사용한 코드 (201 Created)

@GetMapping(value = "/users")
public ResponseEntity<User> findUserWithCreatedResponse(@RequestParam String userName){
    return ResponseEntity.status(HttpStatus.CREATED).body(userService.findUser(userName));
}

코드 설명 :

1. @GetMapping ▻ users 경로로 들어온 요청을 해결하고 응답을 반환한다.
2. ResponseEntity<User> ▻ User(User 안에 있을 어떤 정보들, 이름+나이+주소와 같은...) 객체를 반환하는데, 상태 코드와 함께 반환하다는 뜻. (ResponseEntity로 감싸서 반환)
3. @RequestParam  ▻ 파라미터 이름으로 바인딩(구체적인 값을 할당하는 과정, 이름 = 미나 + 나이 = 10세 + 주소 = 서울특별시와 같은...) 그런데 userName이 옆에 붙었다. 이 의미는 구체적인 값으로 userName이 들어오면(쿼리 파라미터) userName 변수에 저장하겠다는 것이다. (미나라는 값이 url로부터 받아오면 그 값을 userName에 저장하고 데이터베이스에 그 사용자에 대한 다른 정보를 추가적으로 넣을 수 있게 만든다는 의미인 것 같다.)
4. ResponseEntity.status  ▻ 응답상태 코드를 설정하도록 한다.
5. HttpStatus.CREATED  ▻ 201 Created를 의미한다. 요청이 성공적으로 처리되었으며, 자원이 생성되었음을 나타내는 성공 상태 응답 코드이다. 
6. findUser(userName)  ▻ userName을 찾아서 User 객체를 반환하라는 것이다.

결론 : users로 들어온 요청을 해결한 후 성공적이면 201 CREATED를 반환하며 반활할 때 User 내용도 같이 담아서 반환해라. 

Q. 그렇다면 @Controller는 상태 코드를 어떻게 변환할 수 있는가?

A. @RestController와 같이 ResponseEntity.status를 이용하는 방법도 있지만, HttpServletResponse 객체를 이용하여 상태 코드를 설정할 수 있다. 아래 코드를 보면  HttpServletResponse response와 response.setStatus(HttpStatus.CREATED.value()); 코드를 통해 201 CREATED로 상태를 설정하는 걸 볼 수 있다.

    @GetMapping("/users")
    public String findUser(@RequestParam String userName, HttpServletResponse response) {        
        response.setStatus(HttpStatus.CREATED.value());
    }

이번에는 @Controller와 @RestController에 대해 알아봤습니다.

생각보다 정리하는데 오래걸려서 조금 당황스러웠네요...

다 처음보는 내용들이라 하나의 개념을 이해하려면 다른 개념들도 이해해야했고
상태 코드에 대한 부분도 몰랐다가 얼떨결에 간단히 배우고 넘어가게 되는 시간이었습니다.

아래에 출처를 남겨두겠습니다.
블로그엔 제가 최대한 이해한 내용까지만 적는거라
출처에 들어가시면 더 많은 내용이 있어 공부하시는데 도움되실겁니다.

🪽

틀린 내용이 있다면 댓글로 알려주세요

- @Controller와 @RestController의 원리와 차이 그리고 상태코드

- 다양한 Controller에 대해서

- 직렬화에 대해서

- @RequestParam에 대해서

- HttpservletResponse에 대해서

- 다양한 상태 코드

- 스프링사전

- @ResponseStatus에 대하여

처음엔 대충 프로젝트를 시작해보려했지만,
이럴수가! 아는 것이 미약하니 시작할 수 없었다.

그래서 가장 기초적으로 알아야하는 개념을 차근차근 정리해볼까 한다.

두둥, Spring MVC란?

아마 정보처리기사를 준비하거나, IT관련 전공자라면 한 번은 들어봤을 MVC.
이번 기회에 자세히 알아보자.

🪽

"틀린 내용이 있을 수 있습니다."

[ Hello World를 출력하기 ]

1. MVC

• Model - View - Controller로 구성되어있다.
• Model, View, Controller는 독립적으로 움직인다. (각자 맡은 분야만 해결한다)
• MVC 사용시, 결합도를 낮출 수 있다.
• MVC 사용시, 중복코드 제거가 쉽고 유지보수에 좋다.
• MVC 사용시, 확장성과 유연성이 증가한다.

(1)  View

• 사용자가 보는 화면이라고 생각하면 된다.
• 예시를 들어보자, 사용자가 웹 검색창에 [apple]이라고 검색하길 요청했다.

(2)  Controller

• View와 Model을 연결해주는 중간에서 상호작용 역할을 해준다.
• 사용자의 요청을 Controller가 받았다. (DispatcherServlet라는 Front Controller가 받음)
• Controller는 이 요청을 처리하기 위해 [apple]이란 단어를 가지고 있을 Model에게 전달한다.

(3)  Model

• 데이터와 비즈니스 로직을 담당한다. 
• 이때 클라이언트에게 응답으로 돌려주는 작업의 처리 결과 데이터를 Model이라 한다.
• Controller에게 온 요청을 잘 받았다.
• Model은 [apple]이란 단어 관련 데이터를 찾아 Controller에게 다시 전달한다.
• Controller는 받은 정보를 다시 View에게 보내고 View는 사용자에게 결과를 보여준다.

2. Spring MVC 구성요소와 순서

1번

• 사용자에게 요청(Requeest)이 들어왔다.
• 요청은 특정 URL과 함께 들어오게 되는데 GET, POST 등 HTTP 메서드가 함께 전달된다.

2번•3번

• 요청이 들어오면 Front Controller인 DispatcherServlet이 요청을 받게 된다.
• DispatcherServlet은 적절하게 처리할 Controller를 찾기 위해 HandlerMapping을 이용한다.
• 그렇게 HandlerMapping은 들어온 요청 경로와 HTTP 메서드에 따라 적절한 Controller를 정해 반환한다.

4번•5번

• HadlerMapping이 찾은 Controller는 요청을 실제로 처리하는 역할을 한다.
• Controller는 비즈니스 로직(예시로 회원가입을 처리하거나 쇼핑몰에서 결제를 처리하는 것)을 실행하고 그에 필요한 데이터 생성 혹은 DB에서 데이터를 불러온다.
• 쉽게 말해 View로 전달할 데이터를 준비하는 것이고, Model And View가 결과에 담겨 DispatcherServlet에 반환한다.

6번•7번

• 반환된 정보를 기준으로 클라이언트에게 적절하게 보여줄 View를 고를 것이다.
• View Resolver는 Controller가 반환한 View 이름을 기반으로 실제 View 파일을 전달한다.

8번

• View에서 View Rendering이 일어난다.
• View Rendering은 프레젠테이션 로직을 포함하고 있다.
• 프레젠테이션 로직을 통해 데이터를 기반으로 웹페이지를 생성하고 사용자에게 보여준다.

10번

• View에서 Rendering된 결과는 DispatcherServlet에 반환된다.
• 사용자는 자신이 요청한 결과를 받게된다.

3. Spring MVC 를 사용하는 이유

(1) DispathcerServlet

• 기본적으로 다른 MVC는 DispatcherServlet가 없다.
• 그렇기에 Controller가 요청을 받고, 직접처리도 한다.
• DispatcherServlet이 있기엔 요청 처리를 더 간결하게 처리할 수 있도록 해준다.

(2) @로 시작하는 어노테이션의 유무

• 어노테이션의 사용으로 인해 중복적으로 사용되는 코드를(혹은 비슷한 코드) 줄일 수 있다.
•  그로인해 가독성이 향상된다.

(3) Ioc(제어의 역전)와 DI(의존성주입)

• 객체간의 의존성을 프레임워크가 자동으로 주입하고 관리한다.

4. SpringMVC는 어떤식으로 구성을 해야하는가?

쇼핑몰에서 주문을 처리하는 것을 간략하게 예로 들어보자.

(1) Controller

주문이 들어왔을 때 주문 요청을 처리할 Controller를 만들어야한다.

@RestController  혹은 Controller
@RequestMapping("/요청이 들어온 경로")
public class OrderController {

 주문 요청을 직접 처리하지 않고, 해당하는 서비스 계층으로 넘긴다.

 주문 처리 성공시 어떻게 반환할지
 상태 코드와 데이터를 함께 보내는 등...

}

(2) Service

주문 요청을 받아 주문 객체를 생성하는 비즈니스 로직을 만들어야한다.

@Service
public class OrderServiceImpl implements OrderService {

 주문내역을 직접 처리

 예시로, 주문이 들어온 상품이 존재하는지 확인하거나
 생성된 주문을 데이터 베이스에 저장하거나 등...
 결과를 누구에게 반환할지까지 정하는 곳

}

(3) Repository

주문 내역을  저장할 저장소

public interface OrderRepository <Order, Long> {

 Order과 연결된 저장소로 작업 수행

}

(4) Entity

주문 데이터 모델로 주문이 들어오면 객체를 초기화

@Entity
public class Order {

 주문 고유의 ID를 만들거나
 여러개의 주문을 하나의 상품으로 연결되도록 하거나
 생성자를 이용하여 주문을 초기화해주는 것 등...
   
}

(5) DTO
요청과 응답만 연결하는 데이터 구조만 담당, 데이터 전달 객체

public class OrderRequest {

 주문에 필요한 데이터를 받는 객체
 상품 ID, 수량...

}

public class OrderResponse {

 주문 완료한 데이터 반환 객체
 주문 ID, 총 가격...

}

사실 스프링의 패턴에는 MVC만 있는 것은 아니다. 더 다양한 디자인 패턴이 존재하지만, 모델 - 뷰 - 컨트롤러로 용도를 나누고 서로의 역할엔 침범하지 않는 것이 큰 장점이 되어 MVC를 많이 사용하는 것 같다.

공부하면서 이해가 안되는 내용이 많았다.

이해한 내용까지만 블로그에 적어보았다.

아래 적어둔 출처에 들어가 한 번씩 읽어본다면 더 좋을 것 같다.

- spring 출처

- Spring MVC 출처

- Spring MVC의 장점 출처

- Spring MVC 출처

- Spring MVC 출처

- Mapping 출처

[ Spring MVC에 대하여 ]

아주 간단한 실습을 해볼까한다.

Hello, World 출력하기
🎃

1. Spring initializr 생성하기.

https://start.spring.io/

□  Dependencies - SpringWeb 선택하기.

□  Java 해당하는 버전에 선택하기.

✔︎  [Mac 기준] 자바 버전을 잘 모르겠다면?

• 터미널에 들어간다.
• 터미널에 java --version 이라고 치면된다.
  ▸ openjdk 17.0.11으로 확인됐다.
• 만약 안뜬다면 java 설치가 안되어있으니, 설치합시다!

2. GENERATE 눌러 프로젝트를 생성한다.

□ 하단 맨 왼쪽 버튼을 누르면 된다.

3. 생성한 프로젝트 IntelliJ로 불러오기.

□ Open을 눌러주기.

□ 생성한 프로젝트가 있는 곳을 찾는다.
□ build.gradle을 선택하여 열어준다.

□ Open as Project를 선택하여 열어준다.

4. HelloController를 만들어준다.

 [ 컨트롤러 만드는 이유에 대해서 ]

-

□ com.pratice.HelloWorld에 마우스 왼쪽을 클릭한다.

□ Class - HelloController를 만들어준다.

□  HelloController를 생성했다.

5. HelloController에 HelloWorld가 출력되도록 코드 작성하기.

@RestController
public class HelloController {

    @GetMapping("")
    public String helloWorld() {
        return "Hello, World";
    }

}

@RestController

:  쉽게 설명하자면, Hello, World라는 문장이 웹사이트에 출력되도록 하기 위해(JSON으로) 어노테이션(@)을 적어준다.

@GetMapping("")

: 서버의 리소스를 조회할 때 사용, ("")에 요청 받을 URL을 적는다. 현재 적혀있지 않으니 localhost:8080이 된다.

[ @RestController 설명 ]

[ @GetMapping 설명 ]

6. localhost:8080, 결과 보기.

🪽

"틀린 내용이 있을 수 있습니다."

[ 블로그에 쓴 내용들의 출처는 아래에 적어둘테니

들어가서 읽어보시면 더욱 도움이 되실 듯 합니다 ]

- Hello World 출처

- GetMapping 출처

- RestController 출처

< 이전 포스팅 - 인스턴스, 생성자 그리고 매개변수와 인자의 차이점>

🪽

"틀린 내용이 있을 수 있습니다."

► static

• static은 정적인, 고정된 이라는 뜻을 지녔다.
• 주로 변수나 메서드에 붙인다.
• 객체 생성 없이 사용가능하다. 
• 메모리에 적재되면 프로그램이 종료되어야 해제된다.
• static을 많이 사용하게되면 메모리에 과부하가 올 수 있다.
• static을 붙이면 static 영역에(메모리) 할당된다. ► 값이 고정적으로 유지된다.

Q. static이 붙었을 때와 붙지 않았을 때 코드가 어떻게 다른가?

A. 첫번째 예제는 변수에 static을 붙였을때와 아닐때를 보여주겠다.

<static 영역에 올라가 값이 고정적으로 유지되는 것을 보여주는 예제>

class Counter {

    // static을 붙인 변수 count
    // 변수 count를 0으로 초기화했다.
    static int count = 0;

    // 메서드 Counter
    // 메서드가 호출되면 변수 count는 ++증가한다.
    Counter() {
        count++;
        System.out.println("Count : " + count);
    }
}

public class Main {
    public static void main(String[] args) {
    	
        // 인스턴스 c1과 c2, c3가 생성되었다.
        // Counter 메서드가 실행되고, 메서드 내 count++;도 실행된다.
        Counter c1 = new Counter();  // Count: 1
        Counter c2 = new Counter();  // Count: 2
        Counter c3 = new Counter();  // Count: 3
        
    }
}

위의 예제에서는 static이 붙은 변수에 대해 보여주고 있다. static은 static 영역에 할당되어 값이 고정적으로 유지된다고 했다. 그 말은 위의 예제처럼 c1과 c2, c3가 개별적으로 증가하는 것이 아닌 모든 객체가 동일한 count 값을 가지게 되는 걸 알려준다.

class Counter {

    // static이 제거된 변수
    // 인스턴스 변수가 되었다.
    int count = 0;  

    // 메서드 Counter
    // 메서드가 실행되면 변수 count가 증가한다.
    Counter() {
        count++;
        System.out.println("Count: " + count);
    }
}

public class Main {
    public static void main(String[] args) {
    	
        // 인스턴스 c1, c2, c3가 생성되며 Counter 메서드가 실행된다.
        Counter c1 = new Counter();  // Count: 1
        Counter c2 = new Counter();  // Count: 1
        Counter c3 = new Counter();  // Count: 1
    }
}

변수에서 static이 사라진 예제다. 변수에 static이 없기 때문에 변수 값이 공유되지 않는다. 그렇기에 인스턴스 c1과 c2, c3는 개별적으로 움직이게 되고 count는 개별적으로 올라가서 1이라는 값이 출력된다.

두번째 예제는 메서드에 static이 올라갈 경우 어떤식으로 차이가 있는지 살펴보겠다.

< 객체 생성 없이 사용하는 것을 보여주는 예제 >

class Add {
   
    // 메서드 add에 static이 붙었다.
    static int add(int a, int b) {
        return a + b;
    }
}

public class Main {
    public static void main(String[] args) {
    
        // 객체를 생성하지 않아도 메서드 호출이 가능하다.
        int sum = Add.add(10, 20);  
        System.out.println(sum);  // 30
    }
}

메서드에 static을 붙이니 Add.add(10,30)으로 객체 생성 없이 결과값이 출력되었다.

	Add num = new Add();
	int sum = num.add(10, 20);
	System.out.println("Sum : " + sum);

만약 메서드에 static이 없어지면서 인스턴스 메서드로 변경되었다. 그렇기에 객체를 생성해야하고 그 후 객체를 통해 호출해야 오류 없이 결과가 제대로 출력될 수 있다.

Q. 왜 static이 붙은 변수나 메서드가 많아지면 메모리 과부화를 유발할까?

A. 메모리 구조를 잠깐 살펴보자면 [ heap 영역 /  stack 영역  /  static 영역 ] 이렇게 세가지가 존재한다. heap 영역은 인스턴스를 주로 관리한다고 보면 되고, stack 영역은 매개변수 혹은 지역변수를 관리하고 있고, static 영역은 static이 붙은 변수나 메서드를 관리한다.

heap 영역은 Garbage Collector가 있어서 쓰지 않고 있는 객체를 알아서 정리해준다. 하지만 static은 Garbage Collector가 없기 때문에 한 번 메모리에 적재되면  프로그램이 종료되기 전까지 해제되지 않는다. 그렇기 때문에 static을 무분별하게 사용하게되면 그만큼 메모리를 계속 사용하기 때문에 과부하가 발생할 수 있는 것이다.

► final

• 변수, 메서드, 클래스에 사용된다.
• final과 함께 선언되면 그 대상의 변경을 금지한다.
• final과 함께 선언된 변수는 상수가 된다.
• final과 함께 선언된 메서드는 오버라이드를 금지한다.
• final과 함께 선언된 클래스는 상속을 금지한다.

Q. final과 함께 사용된 변수의 경우는?

A.  final이 붙은 변수의 값을 변경하려 할 경우 오류가 발생하는지 예제를 통해 살펴보겠다.

현재 예제는 final이 붙지 않은 변수를 변경하는 예제이다.

 public class Main {
        public static void main(String[] args) {

           // final이 붙은 변수
           final int a = 10;
           
           // 평범한 변수
           int b = 20;
           
           System.out.println("a : " + a); // a : 10
           System.out.println("b : " + b); // b : 20

           // 변수 b의 값만 바꿔보았다.
           b = 2;

           // final이 붙지 않은 변수 b는 잘 출력되었다.
           System.out.println("update b : " + b); // update b : 2

        }
    }

결과가 잘 출력되었다.

그렇다면 이번엔 final이 붙은 변수를 바꿔보도록 하겠다.

 public class Main {
        public static void main(String[] args) {

           // final이 붙은 변수
           final int a = 10;
           
           // 평범한 변수
           int b = 20;
           
           System.out.println("a : " + a); // a : 10
           System.out.println("b : " + b); // b : 20

           a = 1;
           b = 2;

           System.out.println("update a : " + a);
           System.out.println("update b : " + b); 

        }
    }

fianl 변수(variable) a에는 값을 할당할 수 없다는 문구와 함께 오류가 발생했다.

Q. final과 함께 사용된 메서드의 경우는?

A. 오버라이드가 불가하다. 오버라이드란 쉽게 말해 상속받은 메서드를 인스턴스 메서드로 재정의하는 것이다. 쉽게 설명하자면 메서드에 쓰인 이름을 동일하게 가져가서 값만 바꿔 사용한다고 생각하면 될 것 같다. 물론 무작정 이름을 똑같이 정의할 수 있는 것은 아니다. 매개변수 타입 혹은 갯수가 동일하지 않아야한다는 조건이 있다. (그 외에도 있음)  

class Parent {

    // final 메서드인 fail
    public final void fail() {
        System.out.println("과연 오류가 발생할까?");
    }
}

// 자식 클래스
class Child extends Parent {

    // fail 메서드를 재정의 했다.
    @Override
    public void fail() {
        System.out.println("오류가 발생할 것이다.");
    }
}

public class Main {
    public static void main(String[] args) {
        Child child = new Child();
        child.fail();
    }
}

이렇게 오류가 발생했다. 오류 메세지를 살펴보면 Child 클래스 안에 있는 fail( )은 Parent 클래스 안에 있는 fail 메서드를 재정의 할 수 없습니다, 재정의된 메서드는 final입니다. 라고 되어있다. 클래스에 final이 붙은 경우는 상속이 불가한 경우니 넘어가도록 하겠다.

Q. 그렇다면 주로 final과 static을 함께 쓰는 이유가 무엇일까?

A. final과 static이 변수에 선언되어있다면 그 의미는 이 값은 클래스 내에 다 공유되고 있으며, 이 값은 변경할 수 없어 라는 의미가 된다. 그렇다면 주로 어디에 사용이될까? 다양한 곳에 활용되겠지만, 몇 가지 예를 생각해보면 원주율과 같은 수학적인 부분도 있고 프로그램 최대 사용자의 수를 지정해야할 경우에도 사용할 수 있을 것 같다. 

final과 static이 메서드에 선언되었다면 객체를 만들 필요없이 클래스 이름을 써서 바로 호출하면서 이 메서드를 다른 곳에서 사용하거나 바꿀 수 없다는 의미가 된다. 쉽게 말해 객체 없이 호출하고 재정의할 필요가 없을 때 쓴다는 것이다. 활용되는 곳에 대해 생각해보면 회원가입 시, 이메일을 적으라고 했을 경우 그 이메일의 형식이 맞는지 검증할 때 쓰일 수 있겠다. 

결론, 프로그램 전체에서 일관된 값을 유지할 때 사용한다.

혼자 공부하면서 이해하고 쓴 내용이라 틀린 내용이 있을 수 있습니다.

댓글로 적어두시면 수정하도록 하겠습니다. 🍀

[ 블로그에 쓴 내용들의 출처는 아래에 적어둘테니

들어가서 읽어보시면 더욱 도움이 되실 듯 합니다 ]

- static 출처

- static 출처

- static 예제 출처

-final 출처

- 오버라이드 출처

- static과 final을 같이 사용하는 이유 출처