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

 

 

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

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

 

 

---

 

 

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

 

 

 

 

1. 동작화면과 전체코드

 

 

동작화면

 

 

 

전체코드

 

GitHub - hyeong-ing/LuckyLotto: 로또 번호가 출력되는 웹사이트입니다.

 

 

 

 

 

---

 

 

 

 

 

 

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에 결과값이 출력되게 된다.

 

 

---

 

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

Spring - [HTML,CSS,Thymeleaf] 이미지 넣기, 눈누 글씨체 사용하기

 

 

 

🪽

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

 

 

 

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

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

 

 

---

 

 

- List와 Set 차이

List, Set 어떤 것을 쓰는 것이 유리한가

 

 

 

- Set을 ArrayList로 변환 출처

[Java] HashSet을 ArrayList로 변환하기

 

 

 

- Set 출처

자바[JAVA] : Set - HashSet / TreeSet / LinkedHashSet 알아보기.

 

 

 

- ArrayList 구조 출처

🧱 자바 ArrayList 구조 & 사용법 정리

 

 

 

- display 출처

[html/css] display 속성 (inline, block, none, inline-block 차이), visibility 속성(visible, hidden, collapse 차이)

 

 

 

- border-radius 차이

border-radius 50% vs 100%