Spring - [intelliJ,Thymeleaf] 로또, 버튼 눌러 랜덤 숫자 6개 출력하기(1)

._.sori 2024. 11. 6. 15:02

2024. 11. 6. 15:02

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

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

[ Hello,World 출력하기 ] Spring - [IntelliJ] Hello World 출력하기[ Spring MVC에 대하여 ] Spring - Spring MVC를 알아야 시작이 가능하다.처음엔 대충 프로젝트를 시작해보려했지만,이럴수가! 아는 것이 미약하

post-this.tistory.com

버튼을 누르면
랜덤한 숫자 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) ]

Spring - [intelliJ,Thymeleaf] 로또, 버튼 눌러 랜덤 숫자 6개 출력하기(2)

[ 로또, 버튼 눌러 랜덤한 숫자 6개 출력하기 ] Spring - [intelliJ,Thymeleaf] 로또, 버튼 눌러 랜덤 숫자 6개 출력하기[ 버튼 누르면 Hello,World! 출력 ] Spring - [intelliJ] 버튼 누르면 Hello,World! 출력[ Hello,World

post-this.tistory.com

🪽

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

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

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

- TreeSet 출처

[Java/자바] TreeSet 사용법

TreeSet은 이진 검색 트리(binary search tree)라는 자료구조의 형태로 데이터를 저장하는 컬렉션 클래스입니다. 이진 검색 트리는 정렬, 검색, 범위검색(range search)에 높은 성능을 보이며 TreeSet은 이진

hstory0208.tistory.com

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

[JAVA] 랜덤 숫자(난수) 생성하기 - Random , Math

난수를 생성해봅시다 😎오늘은 자바에서 랜덤 숫자 만드는 법을 알아봅시다. 개념자바에서 난수를 만드는 방법은 2가지가 있습니다.Random 클래스 사용Math.random() 차이점1. Random 클래스는 int, long,

e-you.tistory.com

- html과 link 연결 출처

HTML <link> rel, type, href

: HTML Link 요소는 현재 문서와 외부 리소스와의 연결 관계를 명시합니다. 이 요소는 스타일 시트에 링크하는 데에 가장 많이 사용됩니다. rel="속성 값" : 요소에 반드시 명시되어야 하는 필수 속성

junbucks7.tistory.com

- 스타일 시트 출처

스타일 시트란?

제1장 스타일 시트란? ㅁ 스타일 시트는 글꼴의 크기나 모양, 컬러 그리고 문단 설정을 미리 정의해 스타일...

blog.naver.com

- 컬러차트 출처

colorate | 디자이너와 개발자를위한 색 구성표 도구.

colorate는 디자이너와 개발자에게 영감을 주는 색 구성표 도구입니다. 이것은 색채 작업을 위한 자료로 도움이 될 것입니다.

colorate.azurewebsites.net

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

[HTML/CSS] DIV 안의 텍스트 가운데 정렬하기 (가로, 세로)

이번에는 다음과 같이 div 안에 있는 text를 가로, 세로로 가운데 정렬하는 방법을 알아보겠습니다. 안녕하세요 .my-div { border : 1px solid blue; height : 200px; } 1. 가로로 가운데 정렬하기 여기에서 소개

hianna.tistory.com

- CSS 버튼 크기 조정 출처

[HTML/CSS] 버튼 크기 조정하기 (padding)

버튼의 크기를 지정하기 위해서 width, height 속성을 사용할 수도 있지만, padding 속성을 사용할 수도 있습니다. 버튼 크기 조정하기 (width, height) 먼저 width, height로 버튼의 크기를 조정해보았습니다.

hianna.tistory.com

- 버튼 커스텀 출처

여러 가지 버튼 가운데 정렬 시키는 방법

편의상 클래스 A, B로 설명. 1. 태그로 여러 버튼(클래스 B)들을 감싸면서 클래스(A) 지정해주고 2. 클래스 A의 스타일(css)에 text-align: center로 중앙정렬하고 3. 클래스 B의 스타일(css)에 inline-block 속성

mangocoding-journal.tistory.com

'🌷 Spring > 스프링 연습' 카테고리의 다른 글

Spring - [intelliJ,Thymeleaf] @PostMapping으로 랜덤 숫자 6개 업데이트하기 (1)	2024.12.01
Spring - [HTML,CSS,Thymeleaf] 이미지 넣기, 눈누 글씨체 사용하기 (2)	2024.11.14
Spring - [intelliJ,Thymeleaf] 로또, 버튼 눌러 랜덤 숫자 6개 출력하기(2) (2)	2024.11.12
Spring - [intelliJ,Thymeleaf] 버튼 누르면 Hello,World! 출력 (3)	2024.10.31
Spring - [IntelliJ] Hello World 출력하기 (0)	2024.10.12

🌊 ._.sori🪽

Spring - [intelliJ,Thymeleaf] 로또, 버튼 눌러 랜덤 숫자 6개 출력하기(1)

'🌷 Spring > 스프링 연습' 카테고리의 다른 글

+ Recent posts

티스토리툴바