'💻 프로젝트' 카테고리의 글 목록

💻 프로젝트

Spring - [intelliJ,JavaScript] MAC, node.js설치와 로또 숫자 복사하기. 2024.12.19 4
Spring - [intelliJ,Thymeleaf] MAC, H2를 이용하여 간단한 댓글창 만들기(2) 2024.12.09 2
Spring - [intelliJ,Thymeleaf] 간단한 댓글창 만들기(1) 2024.12.08 1
Spring - [intelliJ,Thymeleaf] @PostMapping으로 랜덤 숫자 6개 업데이트하기 2024.12.01 2
Spring - [HTML,CSS,Thymeleaf] 이미지 넣기, 눈누 글씨체 사용하기 2024.11.14 2
Spring - [intelliJ,Thymeleaf] 로또, 버튼 눌러 랜덤 숫자 6개 출력하기(2) 2024.11.12 2
Spring - [intelliJ,Thymeleaf] 로또, 버튼 눌러 랜덤 숫자 6개 출력하기(1) 2024.11.06 4
Spring - [intelliJ,Thymeleaf] 버튼 누르면 Hello,World! 출력 2024.10.31 3
Spring - [IntelliJ] Hello World 출력하기 2024.10.12

Spring - [intelliJ,JavaScript] MAC, node.js설치와 로또 숫자 복사하기.

._.sori 2024. 12. 19. 16:13

2024. 12. 19. 16:13

[ 데이터베이스 H2 설치 및 연동, JPA 연동하기 ]

Spring - [intelliJ,Thymeleaf] MAC, H2를 이용하여 간단한 댓글창 만들기(2)

[ 간단한 댓글창 만들기 (1) ] Spring - [intelliJ,Thymeleaf] 간단한 댓글창 만들기(1)[ @PostMapping으로 랜덤한 숫자 6개 업데이트하기 ] Spring - [intelliJ,Thymeleaf] @PostMapping으로 랜덤 숫자 6개 업데이트하기[

post-this.tistory.com

[ @PostMapping으로 로또 숫자 출력하기. ]

Spring - [intelliJ,Thymeleaf] @PostMapping으로 랜덤 숫자 6개 업데이트하기

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

post-this.tistory.com

랜덤 숫자 6개를
자바스크립트 이용하여 복사하기.

1. 동작화면과 전체코드

동작화면

전체코드

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

로또 번호가 출력되는 웹사이트입니다. Contribute to hyeong-ing/LuckyLotto development by creating an account on GitHub.

github.com

2. 어떻게 만들지 생각하기.

가장 난항을 겪었던 부분이다. 자바스크립트를 사용하지 않고 최대한 할 수 있는 만큼 해보려했지만 정보가 너무 없었다. 결국 Chat-GPT의 도움까지 구해봤지만... Chat-GPT도 그냥 자바스크립트 쓰라고 했다. 일단 목표한 기능까지 프로젝트를 완수하는 것이 중요했고, 어차피 자바스크립트 공부하려고 했기에 기회로 삼아 자바스크립트로 기능을 만들어보기로 결정했다.

하지만 문제는 자바스크립트에 대한 지식이 전무하다는 것. 공부를 하려고 해도 무슨 구조인지 모르겠고 무엇보다 복사하기 기능은 대체적으로 텍스트에 해당하는 정보 뿐이었다. 나는 List에 있는 6가지 요소를 받아 복사하는 기능을 만들고 싶은건데, 문법을 아예 모르니 어떻게 찾아보고 응용해야할지 막막했다.

서론이 길었다. 변명의 시간을 가져야했기 때문이다. 결론을 말하자면 이 기능은 GPT가 만들었다. 아예 자바스크립트 강의를 수강한 후 다시 플젝을 시도할까라는 고민도 있었다. 하지만 살면서 자신에 대한 빠른 객관화는 매우 중요하다 생각한다. 현재 나는 코드를 만들 능력이 없고, 언제나 누군가의 코드를 따와 공부했을때 가장 큰 걸음을 나아갔으니 GPT가 만들어준 코드를 토대로 자바스크립트를 공부해보려 한다.(끝내면 자바스크립트 강의도 수강해봐야겠다.)

결론 : 이 기능은 GPT가 만들었다.

□ 복사하기 이미지 버튼을 누르면 각 6개의 요소들이 복사된다.

<img src="css/copy.png" alt="copy" class="image">

copy.png를 넣었다. 이 이미지를 누르면 복사하기가 실행되도록 만들고 싶다.

List 형태인 6자리 숫자가 복사되는 것이다.

3. node.js 설치하기. (이 기능만 수행할거면 설치 안해도 됩니다.)

자바스크립트를 전혀 모르는 나는 무작정 node.js를 설치했다. 하지만 이 기능만 수행하기를 원한다면 이 부분은 이행하지 않아도 된다.

스프링MVC는 기본적으로 JavaScript 파일의 정적파일을 주로 사용한다. 거기다 현재 프로젝트에는 ThymeLeaf를 설치했기 때문에 node.js는 필요하지 않으며, 간단한 기능만 수행하는 경우도 node.js 설치가 필요하지 않다.

□ 링크 들어가기.

https://nodejs.org/en

Node.js — Run JavaScript Everywhere

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

□ 메인 화면 속 Download(LTS) 누르기

LTS 버전이 Long Temp Support로 장기로 관리하는 버전이기 때문에 LTS 버전으로 다운받을 것을 추천한다.

□ 설치하기 (하던대로 하시면 됩니다.)

□ 터미널에 가서 설치 확인하기.

node -v 입력

□ node.js는 무엇인가?

node.js란 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이다. 여기서 런타임은 특정 언어로 만든 프로그램들을 실행할 수 있는 환경을 뜻한다. 자바스크립트는 HTML에 종속되어 있는 언어로 HTML 조작과 변경을 위해 사용한다. 그리고 이 자바스크립트의 해석은 브라우저가 한다. 그러면 자바스크립트는 원래 브라우저에서만 사용 가능한건데, node.js를 사용하게되면 브라우저가 아닌 곳에서도 자바스크립트를 사용할 수 있게 해준다.

node.js는 많은 요청을 처리해야하는 경우 사용한다. 예를 들어서 채팅서비스와 같이 요청이 한번에 많이 들어올 수 있는 곳에 용이하다. 요청처리 방법은 차근차근 하나씩 처리하는 것이 아닌 요청을 한번에 받아 순서를 상관하지 않고 속도가 빠른 것부터 처리한다. 그렇기에 고객이 자신의 순서가 올 때 까지 기다리지 않아도 된다.

4. 자바스크립트 분석하기.

document.addEventListener("DOMContentLoaded", () => {

document는 웹페이지 자체를 의미한다. HTML 요소에 접근하고자 할 때 무조건 써야한다. addEventListener는 어떤 특정 이벤트를 발생하는 것인데, document.에 붙어있으니 돔에 어떤 특정 이벤트를 발생시키려고 한다는 걸 알 수 있다. 이제 "DOMContentLoaded"를 보면 돔에 어떤 이벤트가 발생하는지 알 수 있다. "DOMCotentLoaded"는 돔트리 구성이 완전히 끝난 후 돔에 접근하도록 한다. 그로 인해 자바스크립트의 오류 발생을 방지해준다.

합쳐서 위의 코드를 설명하자면, HTML에 접근할건데(document) 돔트리 구성이 완전히 끝난 후 돔에 접근하는("DOMContentLoaded") 이벤트를 발생시키겠다(addEventListener)

여기서 돔트리는 HTML의 계층구조를 나타낸 것으로, 돔트리 구성이 완전히 끝난 후라는 것은 HTML에 있는 노드들인 <body> <h1> 등이 모든 구성을 완료하는 것을 의미한다. 그렇다면 돔은 HTML 혹은 XML 문서의 구조를 프로그래밍적으로 조작할 수 있는 인터페이스다. 웹페이지를 구성하는 HTML 문서를 브라우저로 읽어들여 객체 모델로 변환하며, 이를 통해 JavaScript 같은 프로그래밍 언어로 문서를 동적으로 변경, 추가, 삭제할 수 있다. 그러면 돔트리 구성이 끝난 후 돔에 접근하자는 말은 HTML의 모든 노드들을 트리로 만든 후에 JavaScript를 수행하라 정도로 해석하면 될 것 같다.

function copyNumbers()

function은 함수로 자바에선 메서드와 비슷한 기능을 가진다고 보면 된다. 함수로 copyNumbers를 정의했는데, copyNumbers는 재사용이 가능해지며 동작을 묶을 수 있다.

const numbers = Array.from(document.querySelectorAll(".second h1")).map(el => el.textContent.trim());
const numbersString = numbers.join(" ");

const와 함께 선언된 변수는 값이 해당 범위 내에서 동일하게 유지된다. 값을 업데이트하거나 다시 선언할 수 없다. 그리고 선언된 블록 내에서만 접근 가능하다. 원래는 var로 변수를 선언했다. var의 경우 선언된 값이 동일하게 유지되지 않은 경우가 생겨 버그가 발생하곤 했다. 그래서 let(업데이트 가능, 선언 불가능) 혹은 const(업데이트, 선언 불가능)가 필요해진 이유가 됐다.

document.querySelectorAll(".second h1")은 HTML에 있는 second 부분의 h1의 쿼리를 모두 선택한 후, Array.from을 통해 NodeList를 배열로 변환한다는 것이다. 그 후 map은 각 배열의 요소를 처리한 후 새로운 배열을 만드는데 사용한다. 그러면 el은 map에 의해 옮겨진 각 돔의 요소가 되며, second에 있는 모든 h1을 선택한다했으니 그 요소들이 map에 의해 el로 옮겨진 것을 알 수 있다. 그러면 이제 el은 textContent.trim을 수행하게 된다.

textContent는 <h1> </h1> 태그 속 텍스트 컨텐츠를 가져온다. HTML을 살펴보면 <h1 th:text="${Number1}"> RandomNumber</h1>으로 되어있다. 이 텍스트 속에 들어가는 것은 Number1에 들어간 숫자일테니 숫자를 가져오게 될 것이다. .trim은 문자열 좌우에 있는 공백을 없애준다.

만약 1,2,3,4,5,6이란 숫자가 로또 번호로 나왔다고 가정하자. 그러면 현재 "1" , "2" , "3" , "4" , "5" , "6" 이런 형태를 띄고 있을 것이다.

Array 인스턴스의 join( ) 메서드는 배열의 모든 요소를 쉼표나 지정된 구분 문자열로 구분하여 연결한 새 문자열을 만들어 반환한다. 이제 "1 2 3 4 5 6"으로 numberString에 옮겨지게 된다. 만약 (" ") 띄어쓰기를 포함하여 문자열을 구분한다는 것이고, ("")라고 지정하면 "123456" 형식으로 띄어쓰기 없이 나열될 것이다.

navigator.clipboard.writeText(numbersString).then(() => {
        alert("럭키 로또 숫자 복사 완료!");
    }).catch(err => {
        console.error("복사 실패:", err);
        alert("복사에 실패했습니다.");
    });
}

navigator.clipboard.writeText는 Clipboard API를 사용한 것이다. Clipboard API는 Promise 기반으로 클립 보드 내용을 비동기식으로 접근할 수 있는 새로운 API로 간단하게 내가 원하는 시점에 텍스트 데이터를 읽거나 쓸 수 있다. 여기서 writeText 메서드가 비동기 함수로 Promise를 리턴한다. 단, 권한이 있고 브라우저가 활성화 되어있는 상태에서만 가능하다.

numberString의 write를 잘 수행하게 되면 그 다음을 then 메서드 인자로 넘겨준다. 여기선 alert인 경고 대화 상자에 표시할 메세지를 출력하도록 설정했다. 성공적으로 수행하면 "럭키 로또 숫자 복사 완료!" 라는 메세지가 출력될 것이다.

catch를 통해 예외발생지점에서 alert가 발생하도록 했다. 오류는 console.error로 출력하도록 하는데, "복사 실패"라는 메시지는 개발자가 보게된다. 그리고 err에 실제 오류에 대한 객체를 담는다. alert에 담긴 "복사에 실패했습니다." 메시지는 사용자가 보게된다.

const copyImage = document.querySelector("img[alt='copy']");
if (copyImage) {
    copyImage.addEventListener("click", copyNumbers);
}

const는 자바에서 final과 비슷하여 값을 업데이트하거나 수정할 수 없다.(참조형은 수정가능) 이미지 태그 중 alt 속성이 copy라고 지정된 쿼리를 선택하여 copyImage라고 변수명을 붙여줬다. 만약 copyImage 객체가 click이라는 이벤트가 발생하면 위에서 정의한 function인 copyNumbers를 시행하라는 의미가 된다.

쉽게 간추리면 copyImage는 alt를 copy라고 지정한 것이고 이게 눌리면 copyNumbers 메서드를 수행하라는 것 같다.

Q. 자바스크립트 코드를 보면서 자바랑은 다르게 온점을 사용하는 방향이 조금 다른 것 같다.

A. 보통 자바에서 온점은 객체의 필드나 메서드에 접근할 때 사용한다. 자바스크립트도 그에 해당하는데 체이닝이라는 의미가 더 추가된다. 체이닝은 메서드가 어떤 값을 반환하면 그 반환된 값을 다른 메서드에 바로 연결하여 사용할 수 있도록 이어주는 것이다.

예시를 들어보면 chocolate.sell(2); chocolate.buy(1); 라고 가정한 경우, 자바스크립트는 chocolate.sell(2).buy(1);으로 사용가능하다.

5. HTML에 만든 자바스크립트 연결하기.

□ 경로 확인하기.

static과 css가 따로 분리되는지 모르겠지만, 일단 현재 프로젝트는 저절로 합해졌다. js 디렉토리를 따로 안만들고 css와 같이 넣어서 그런건지 초반에 경로 인식을 잘 못했다. 그래서 js 디렉토리 하위에 copy.js를 넣었다.

□ 경로 연결하기.

<head>
    <meta charset="UTF-8">
    <title>럭키비키 로또</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <script src="css/js/copy.js" defer></script>
</head>

6. 마무리하기

□ 초기 구상

초반 구상에서는 아주 간단하게 할 예정으로 댓글창은 없었다. 프로젝트를 하다보니 레포지토리에 대한 이해도를 키우면 좋을 것 같아 중간에 만들게 되었다. 비슷하게 만들기 위해 최대한 노력했다. 잘 안될지도 모른다고 생각했지만, 초반에 기대했던 것보다 훨씬 좋은 결과물을 만든 것 같다.

□ 변화

(1)

(2)

(3)

□ 마무리하는 말

블로그 작성만 아니었다면 더 빨리 끝냈을 것 같다. 블로그를 작성하다보면 정말 많은 개념을 배우고 어떤 구조인지 정확하게 알게되는 이점은 확실하다. 하나 작성하는데 몇시간씩 걸리거다 가끔 이해가 가지 않는 개념에 막히면... 정말 2-3일 정도 걸리는 것 같다. 굉장히 쉬운 프로젝트였지만 그만큼 어떤식으로 이뤄지는지 확실하게 알게 된 거 같다.

스프링MVC 강의를 듣기 전 간단하고 짧은 프로젝트를 해보면 좋겠다고 생각했는데 정말 잘한 선택인 것 같다. 이제 스프링MVC 강의도 듣고, 자바완전정복 블로그도 열심히 작성하고, 자바스크립트도 수강해봐야겠다.

🪽

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

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

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

- node.js 설치

[mac OS] node.js 설치하기

📍Node.js란? - Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. 📍macOS에서 Node.js 설치 방법 1. 사이트 (https://nodejs.org/en ) 접속 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaSc

favonius.tistory.com

- Node.js

[개발 기본 지식] Node.js란?

"Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다" ?? 🤔그래서 뭔데요?

velog.io

- documet

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

- addEventListener

[JAVASCRIPT] addEventListener()

addEventListener()는 documnet 요소에 event를 부여할 때 사용. addEventListener(event, 실행할 함수) 로 정의한다. 총 3가지의 방법으로 정의할 수 있다. button.addEventListener('이벤트', 함수명) button.addEventListener('

ghrnwjd.tistory.com

- dom

[JavaScript] DOM이란 무엇인가?

JavaScript를 공부하다보면 브라우저 기반의 여러 객체들에 대해서 듣게 됩니다. 처음부터 이 객체들이 ...

blog.naver.com

- DomContentLoaded

[자바스크립트] DOMContentLoaded 이벤트

안녕하세요! 이번시간에는 자바스크립트의 DOMContentLoaded 이벤트에 대해 알아보겠습니다.돔트리 분석이 끝나면 발생즉, 돔트리가 다 만들어진 후에 돔에 접근이 가능하기때문에, 돔이 생성되기

velog.io

- event

Javascript event 다루기(eventListener를 쓰는 이유)

event란?? event를 다루는 방법은?? event listener vs event handler??

velog.io

- eventListener

JavaScript 자바스크립트 이벤트 리스너(eventListener)

나.. 이벤트리스너 모르네 ✍ addEventListener EventTarget 인터페이스의 메서드. 지정한 유형의 이벤트를 수신할 때마다 호출할 함수를 설정한다. = 호출 시 인자를 전달받는다. 일반적인 대상 Element, Do

pottatt0.tistory.com

- 돔트리

DOM 트리

ko.javascript.info

- 자바스크립트 개념 모음

JavaScript | MDN

JavaScript (JS)는 가벼운, 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원합니다. 웹 페이지를 위한 스크립트 언어로 잘 알려져 있지만, Node.js, Apache CouchDB, Adobe Acrobat처럼

developer.mozilla.org

- trim

[ 자바스크립트 ] trim()

trim() : 문장(문자열, string)에서, 양끝에 있는 공백문자를 모두 삭제한다. 익스플로러(ie) 9 이상 & 그외 브라우저에서는 기본적으로 제공되는 함수이다. "trim()"으로, " "를 삭제하려면, "textContent"나

tonks.tistory.com

- map

[자바스크립트] javascript map() 사용하기

[자바스크립트] javascript map() 사용하기 자바스크립트에서 for문의 남용을 막기위해 만들어낸 배열함수! 배열 요소를 순환하며 어떠한 가공을 가하거나, 배열요소 안의 요소를 추출하거나 할 때

devinserengeti.tistory.com

- clipboard API

Clipboard API 사용하기

기존에 웨이브온에서 엘리먼트의 복사/붙여넣기는 같은 탭 내에서만 가능했다. 그 이유는 기존에는 클립보드가 아닌 상태 관리 라이브러인 Vuex를 활용해 복사가 된 엘리먼트의 정보를 관리 했

velog.io

- 예외 처리

📚 자바스크립트의 예외 처리(Exception)

예외 (exception) 프로그래밍에서 예외(exception)란 실행 중인 프로그램에서 예기치 못한 상황이 발생하여 더 이상 진행할 수 없는 상황을 말한다. 예를 들어 문법적인 오류이거나 파일을 찾을 수 없

inpa.tistory.com

- 체이닝

[JavaScript] Method Chaining (메서드 체이닝)

과제를 하던 중 함수의 return값을 사용하는 부분이 없는데도 this를 return하는 코드를 발견했다. 확장성을 위해 return을 해둔 것인가? 라는 생각이 들었는데 검색해보아도 명확한 해답을 찾지 못했

developerntraveler.tistory.com

'💻 프로젝트 > 🌼 로또 페이지 만들기 🌼' 카테고리의 다른 글

Spring - [intelliJ,Thymeleaf] MAC, H2를 이용하여 간단한 댓글창 만들기(2) (2)	2024.12.09
Spring - [intelliJ,Thymeleaf] 간단한 댓글창 만들기(1) (1)	2024.12.08
Spring - [intelliJ,Thymeleaf] @PostMapping으로 랜덤 숫자 6개 업데이트하기 (2)	2024.12.01
Spring - [HTML,CSS,Thymeleaf] 이미지 넣기, 눈누 글씨체 사용하기 (2)	2024.11.14
Spring - [intelliJ,Thymeleaf] 로또, 버튼 눌러 랜덤 숫자 6개 출력하기(2) (2)	2024.11.12

Spring - [intelliJ,Thymeleaf] MAC, H2를 이용하여 간단한 댓글창 만들기(2)

._.sori 2024. 12. 9. 21:26

2024. 12. 9. 21:26

[ 간단한 댓글창 만들기 (1) ]

Spring - [intelliJ,Thymeleaf] 간단한 댓글창 만들기(1)

[ @PostMapping으로 랜덤한 숫자 6개 업데이트하기 ] Spring - [intelliJ,Thymeleaf] @PostMapping으로 랜덤 숫자 6개 업데이트하기[ 로또, 버튼 눌러 랜덤한 숫자 6개 출력하기(2) ] Spring - [intelliJ,Thymeleaf] 로또,

post-this.tistory.com

H2 데이터베이스를 이용하여
댓글 관리하기.

1. H2 설치하기.

□ 아래 링크 들어가기.

https://h2database.com/html/main.html

H2 Database Engine

H2 Database Engine Welcome to H2, the Java SQL database. The main features of H2 are: Very fast, open source, JDBC API Embedded and server modes; in-memory databases Browser based Console application Small footprint: around 2.5 MB jar file size Supp

h2database.com

□ mac은 All Platforms 다운로드하기.

□ 압축풀어주기.

□ 터미널 들어가기.

1. 압축을 풀어준 파일의 위치로 들어간다.

: cd 경로/bin

2. 권한 부여

: chmod 755 h2.sh

3. 콘솔 접속

: ./h2.sh

2. 의존성 주입하기.

□ build.gradle에 H2 의존성 주입

runtimeOnly 'com.h2database:h2'

□ build.gradle에 jpa 의존성 주입

implementation 'org.springframework.boot:spring-boot-starter-data-jpa'

3. application.properties 작성하기.

□ DataSource 설정하기.

spring.application.name=LuckyLotto

spring.datasource.url=jdbc:h2:file:./data/mydb
spring.datasource.driver-class-name=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=

h2는 자바로 작성된 관계형 데이터베이스 관리 시스템이다. 그냥 쉽게 자바와 안성맞춤형 데이터베이스라고 생각하면 된다. 주로 이렇게 간단한 프로젝트할 때 많이 사용한다. h2는 스프링 부트가 지원하는 인메모리 관계형 데이터베이스로 인메모리로 띄우면 애플리케이션이 재가동될 때마다 초기화가 된다.

url = 을 설정하여 나중에 h2 프로그램 창에 적어 들어갈 수 있다. driver 코드는 Spring Boot 애플리케이션이 데이터베이스에 연결할 때 사용할 JDBC 드라이버를 지정하는 설정이다. sa는 기본 사용자 이름이고 password는 그냥 설정하지 않았다.

□ DataSource 설정하기.

spring.jpa.hibernate.ddl-auto=update
spring.h2.console.enabled=true
spring.h2.console.path=/h2-console

hibernate가 데이터베이스 스키마를 관리하는 방법을 지정하며 update는 애플리케이션 실행 시 테이블이 없으면 생성하고 변경사항이 생기면 수정하도록 한다. 현재는 개발 중이니 update라고 적었지만, 만약 운영을 하게된다면 validate나 none을 권장한다.

console.enabled로 콘솔을 활성화한다. 활성화하지 않으면 entity에 적어둔 id와 content 요소들이 보이지 않을 것이다. console.path를 통해 콘솔에 접근할 URL을 지정한다.

4. h2 들어가기.

□ 브라우저에 h2 프로그램 접속하기.

http://localhost:8080/h2-console

h2-console이 아니라 다른 경로 이름으로 했으면 그 이름을 넣으면 된다.

□ 설정한 정보 넣기.

JDBC URL: jdbc:h2:file:./data/mydb

User Name: sa

패스워드는 설정 안했으니 넘어가면 된다.

5. h2 사용하기.

□ 댓글을 남겼다.

□ 데이터베이스 확인해보기.

1. 전체 조회하기.

SELECT * FROM COMMENT_LIST;

2. id가 21번인 댓글 삭제해보기.

DELETE FROM COMMENT_LIST WHERE id = 21;

페이지에서도 삭제된 걸 확일할 수 있다.

🪽

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

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

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

- H2에 대하여

H2 Database 란? 그리고 사용법?

H2 Database 란? H2는 자바로 작성된 관계형 데이터베이스 관리 시스템이다. 장점 따로 설치가 필요없다 용량이 매우 가볍다 웹용 콘솔(쿼리툴) 제공하여 개발용 로컬DB로 사용 용이 특징 JAVA로 작성

yjkim-dev.tistory.com

- H2에 대하여

h2 데이터베이스 설치 및 실행방법 정리

꽤 가벼운 DB이기에 실무에서 local에 설치해서 많이 사용한다는 h2 데이터베이스 사용법 정리합니다.단점으로는 로컬용이기 때문에 컴퓨터 다 끄면 날아갑니다. 😇테스트용으로만 사용하세요.

gray-tree.tistory.com

- H2 연동방법

[Spring Boot] H2 연동 방법

💡 build.gradle에 dependency 추가 💡 application.properties 형식 💡 application.yml 형식

velog.io

- H2 사용설정

Springboot + H2 Console 사용 설정

H2 Console이란? - 작은 용량(2M)의 작고 빠른 DB - JDBC API 지원 - 브라우저 기반 Console 지원 - 인 메모리(In-Memory) 기반 Server 모드와 Embedded 모드 지원 인 메모리(In-Memory) DB 시스템 메모리에 데이터를 저

jamie95.tistory.com

'💻 프로젝트 > 🌼 로또 페이지 만들기 🌼' 카테고리의 다른 글

Spring - [intelliJ,JavaScript] MAC, node.js설치와 로또 숫자 복사하기. (4)	2024.12.19
Spring - [intelliJ,Thymeleaf] 간단한 댓글창 만들기(1) (1)	2024.12.08
Spring - [intelliJ,Thymeleaf] @PostMapping으로 랜덤 숫자 6개 업데이트하기 (2)	2024.12.01
Spring - [HTML,CSS,Thymeleaf] 이미지 넣기, 눈누 글씨체 사용하기 (2)	2024.11.14
Spring - [intelliJ,Thymeleaf] 로또, 버튼 눌러 랜덤 숫자 6개 출력하기(2) (2)	2024.11.12

Spring - [intelliJ,Thymeleaf] 간단한 댓글창 만들기(1)

._.sori 2024. 12. 8. 22:16

2024. 12. 8. 22:16

[ @PostMapping으로 랜덤한 숫자 6개 업데이트하기 ]

Spring - [intelliJ,Thymeleaf] @PostMapping으로 랜덤 숫자 6개 업데이트하기

post-this.tistory.com

댓글을 저장하여
최근 댓글 10개만 화면에 출력된다.

1. 동작화면과 전체코드

동작화면

전체코드

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

로또 번호가 출력되는 웹사이트입니다. Contribute to hyeong-ing/LuckyLotto development by creating an account on GitHub.

github.com

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

+ 이것저것 시도해보면서 만든거라, DI나 클린코드를 지키지 못했습니다.

데이터베이스를 사용해보고 싶었다. 그래서 간단한 댓글창을 만들기로 결정했다.

□ 댓글은 가장 최신인 10개만 출력된다.

▻ 데이터베이스에서 꺼낼때 DESC를 사용하여 10개만 보이도록 한다.

□ 25자 이상은 초과하지 않도록 한다.

▻ 글이 1자 이상 25자 이하로 저장되게 조건을 제시한다.

□ repository(DB)와 연결할 entity, Controller, 댓글을 처리할 Service를 만들면 될 것 같다.

3. 화면 만들기

□ 댓글을 입력할 공간 만들기.

<form th:action="@{/save}" method="get">
    <input class="write" type="text" name="content" 
    		placeholder ="짧은 댓글 남기기 (25자이내)" maxlength="25">
    <button class="save" type="submit"> 저장 </button>
</form>

input 태그는 사용자에게 입력을 받고자 할 때 사용한다. type은 여러가지 있다. text, password, radio 등 있고 그 중 간단한 댓글을 저장하니 속성은 text로 해줬다. placeholder는 사용자가 창을 사용하기 전 아래처럼 글자가 보이도록 해준다.

input에 담긴 내용은 content라는 이름으로 보내지게 된다. form이 보내는 역할을 하는데 action에 적은 save가 있는 곳으로(컨트롤러) 전송하게 된다.

□ 댓글이 보여지는 공간 만들기.

<div class="commentBox">
    <li class="font" th:each="comment : ${comments}" th:text="${comment.content}">
        comment
    </li>
</div>

li 태그는 HTML 리스트에 포함되는 아이템을 정의할 때 사용한다. 검은색 작은 원이 표시된다${comment.contetn)로 화면에 표시할 내용을 가져왔다. 이 내용은 총 10개 댓글들을 가지고 있으므로, each 반복문을 통해 화면에 차례로 출력해준다.

4. 구조 설명

궁극적으로 댓글을 작성하면 레포지토리에 저장이 되도록 만들고자 한다. 그러면 저장된 댓글을 받아 레포지토리까지 저장해줄 controller가 필요하다. controller는 save라는 앤드포인트로 댓글을 받을 것이다. 댓글에는 조건이 있었다. 1자 이상 25자 이하라는 조건이었다. 그렇기에 이 부분은 service를 통해 관리할 것이다. service에 조건문을 사용하여 해당 조건이 맞으면 레포지토리에 저장이 되도록한다.

레포지토리에 저장된 댓글 10개를 꺼내 화면에 출력할 것이다. 댓글 10개의 조건은 가장 최신에 작성된 것부터 차례로 10개라는 것이다. 그러면 조건 중 가장 최신에 작성된 것이라는 조건에 맞춰 레포지토리에 메서드를 작성할 것이다.(내림차순 DESC로) 나머지 조건으로 10개만 출력되는 것이 남아있다. 10개만 출력시키기 위해서 page를 사용하는데, 이때 이 메서드는 service에 작성한다. service에 return 값을 레포지토리에서 받아(내림차순) 10개만 출력시키는 것이다. 그 후 controller의 model을 통해 받아 화면에 출력되도록 할 것이다.

5. Entity와 Repository 작성하기.

□ Repository

package com.LottoWeb.LuckyLotto.DB;

import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaRepository;


import java.util.List;

public interface BoardRepository extends JpaRepository<Comment, Long> {

    Page<Comment> findAllByOrderByIdDesc(Pageable pageable);
}

Jpa는 데이터베이스의 다양한 함수를 간단하게 사용할 수 있게 해준다. 해당 프로젝트에서 이용한 Jpa기능은 댓글을 저장해주는 save와 댓글을 조회하는 page 그리고 쿼리 메서드를 통해 CRUD 지원이 있다.

여기서 쿼리 메서드는 findAllByOrderByIdDesc로, 모든 것을 조회하고 기준은 아이디로 하며 내림차순으로 나열한다 라는 의미를 가지고 있다. 그리고 Page<Comment> 형태로 반환한다.

□ Entity

package com.LottoWeb.LuckyLotto.DB;

import jakarta.persistence.*;
import lombok.*;


@Entity //데이터베이스와 매핑한다.
@Getter
@NoArgsConstructor (access = AccessLevel.PROTECTED) //파라미터가 없는 디폴트 생성자 생성
@Table(name = "Comment_List")
public class Comment {

    @Id //엔티티의 주요 식별자
    @GeneratedValue(strategy = GenerationType.IDENTITY) //엔티티의 식별자의 값을 자동으로 생성
    private Long id;

    // 해당 엔티티 필드가 데이터베이스의 컬럼에 매핑될 때 제약을 걸었다.
    // 25자 길이!
    @Column(length = 25)
    private String content;

    // 댓글 content로 받아온 것을 필드에 넘기는 생성자.
    public Comment(String content) {
        this.content = content;
    }

    /*
    @Builder
    public Comment(Long id, String content) {
        this.id = id;
        this.content = content;
    }
    */

}

엔티티를 작성했다. 엔티티는 데이터의 집합으로 어떤 정보들인 인스턴스(댓글이 하나면 엔티티 성립 불가)가 두 개 이상이 되어야한다. 그리고 유일한 식별자가 있어야한다. 반드시 속성을 포함해야한다. 여기서 유일한 식별자로 Id를 부여했다. 이는 중복될 수 없는 것을 식별자로 골라야한다. 이름이나, 댓글을 식별자로 고르면 중복될 수 있기 때문에 안된다. 그리고 속성으로 content를 넣었다. 즉 Comment 엔티티에 content인 댓글 속성을 가지고 있는 것이다.

해당 코드는 아주 간단하고 쉬운 코드다. 그저 댓글을 꺼내 조회만 하기 때문에 @setter나 @Builder는 사용하지 않았다. 데이터베이스에 JPA를 상속했기때문에 JPA 리플렉션 사용하여 댓글을 조회하는데는 문제가 없다. 그런데 만약 댓글을 수정하거나, 더 다양한 속성이 생성된다면 @Builder로 관리해주면 좋다. @setter는 수정이 무분별하게 일어날 수 있어서 추천하지 않는다고 한다.

6. 댓글 저장하기

□ Controller 작성하기.

@GetMapping("/save")
 public String saveComment(@RequestParam("content") String content) {
     boardService.saveComment(content);
     return "redirect:/board";
 }

save 엔드포인트를 통해 saveComment 메서드와 연결해주었다. 아까 html을 작성했을때, 댓글을 content로 보냈다. 이 content를 받아서 boardService로 보내는 역할을 하는 것이 @RequestParam이라고 생각하면 된다. @RequestParam은 댓글 content를 받고 String 타입의 content에 넣어 boardService 클래스의 saveComment 메서드로 보낸다. 실제로 받아오는 이름과 값의 이름이 일치하는 경우 ("content")는 생략가능하다.

@RequestParam을 사용하면 HttpServletRequest의 request.getParameter로 받아줘야하는 것을 쉽게 작성할 수 있게 된다. 만약 @RequestParam을 사용하지 않는다면...?

@GetMapping("/save")
public saveComment(HttpServletRequest request) {
    String content = request.getParameter("content");   
    boardService.saveComment(content);   
    return "redirect:/board";
 }

현재 프로젝트에서 파라미터가 하나 밖에 없지만, 만약 여러개의 경우 @RequestParam이 엄청 효율적일 것이다.

□ Service 작성하기.

public void saveComment(String content) {
    if( content.length() >= 1 && content.length() <= 25 )
        boardRepository.save(new Comment(content));
}

댓글이 레포지토리로 저장되기 전, 조건에 맞는지 확인한다. if문을 사용하여 content의 길이가 1 이상 25 이하면 Comment 객체를 생성하여 content를 레포지토리에 저장하도록 작성했다. 앞서서 Entity인 Comment 클래스를 만들어뒀다. Comment 클래스의 생성자가 content(댓글)를 인자로 받아 필드에 저장하여 데이터베이스에 매핑한다.

7. 댓글 조회하기.

□ Service 작성하기.

public Page<Comment> get10Comments() {
    Pageable pageable = PageRequest.of(0,10);
    return boardRepository.findAllByOrderByIdDesc(pageable);

}

Jpa에서 제공하는 함수 pageable를 사용하여 댓글을 나타낼 것이다. 메서드 이름은 get10Comments, 반환타입은 Page<Comment>가 된다. 한 페이지에 댓글 10개만 나타내도록 할거니까 PageRequest.of(int page, int size)로 page가 가져올 페이지 그리고 한 페이지에 포함될 개수를 의미한다. 현재 코드에서 반환타입을 Page로 설정했다. 그런데 해당 프로젝트는 여러 페이지를 보여주는 것이 아니기 때문에 List 타입을 반환해도 상관없다. (아예 pageable을 사용하지 않아도 된다.)

□ Controller 작성하기.

@GetMapping("/board")
public String boardPage(Model model) {
    model.addAttribute("comments", boardService.get10Comments());
    return "board";
}

첫 화면이 들어가면 저장한 댓글이 나타나도록 만들기 위해 타임리프의 Model을 통해 댓글을 받아올 것이다. 방금 Service 클래스에 get10Comments( ) 메서드를 정의했다. 메서드로 받아온 값(데이터) comments를 뷰인 타임리프로 전달한다.

@GetMapping("/save")
 public String saveComment(@RequestParam("content") String content) {
     boardService.saveComment(content);
     return "redirect:/board";
 }

댓글이 저장되자마자 화면에 바로 보이도록 하고 싶다. 그러면 redirect:를 사용하여 /board로 엔드포인트를 보내도록 한다. 그러면 위 코드 @GetMapping("/board")로 앤드포인트를 받아 새로운 comments를 받아 타임리프로 전달하게한다.

□ html 살피기.

<div class="commentBox">
    <li class="font" th:each="comment : ${comments}" th:text="${comment.content}">
        comment
    </li>
</div>

board.html 코드를 다시 살펴보겠다. 댓글을 조회하기 위해 데이터를 comments로 보냈고, comments의 여러 댓글을 each 함수를 통해 comment라는 변수로 각 항목을 사용했다. 그런데 여기서 th:text="${comment.content}"가 있다. comment 클래스에 있는 content 필드를 가져오는 것이다.

좀 더 쉽게 설명해겠다. comments는 10개의 뭉텅이 댓글이다. 그걸 comment 변수로 1comment 2comment... 이렇게 부여된다고 생각하면 된다. 그리고 그 나열된 것들 안에 실제 댓글을 넣어주는 것이다. 비유를 들자면 comments가 좌석 한 줄이 되고, comment는 좌석 하나 하나에 앉는 사람이 되고, comment.content는 그 사람의 이름표 혹은 인적 사항이 되는 것이라고 보면 쉬울 것 같다. 일단 나는 그렇게 이해했다.

[ 데이터베이스 H2 설치 및 연동, JPA 연동하기 ]

Spring - [intelliJ,Thymeleaf] MAC, H2를 이용하여 간단한 댓글창 만들기(2)

post-this.tistory.com

🪽

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

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

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

- paging 출처

JPA Paging (페이지 나누기)

현재 2개의 프로젝트 진행하고 있다. > 두 프로젝트 모두 글 또는 영상을 페이징해서 프론트에 뿌려주는 API가 필요했다. > 그래서 이번에 PageRequest를 사용해 페이징 하는 것을 공부했고 공유하고

velog.io

- Pageable 출처

[JPA] Spring Data Jpa + Pageable로 Pagination 쉽게 구현하기

이번주는 독서리뷰를 남길 수 있는 미니 프로젝트를 진행하고 있다. 리뷰 글을 특정 조건으로 뽑아서 정렬 기준을 선택하여 조회하는 기능을 구현하고자 한다.전체 리뷰글을 조회하거나, 내가

velog.io

- 엔티티 출처

[DB] 데이터베이스 엔터티(Entity)란 무엇인가?

엔터티(Entity)란? 엔터티(Entity)를 그대로 번역하면 실제, 독립체라는 뜻으로 데이터 모델링에서 사용되는 객체라고 생각하시면 되겠습니다. 즉 엔터티(Entity)는 업무에 필요하고 유용한 정보를 저

coding-factory.tistory.com

- NoargsConstructor 출처

@NoargsConstructor(AccessLevel.PROTECTED) 와 @Builder

@NoargsConstructor(AccessLevel.PROTECTED) 와 @Builder를 함께 사용할때 주의할 점에 대해서 서술합니다. "왜" 안되는지와 "왜" 이렇게 해결 할 수 있는지에 대해 집중하여 서술합니다. 1. 왜 NoargsConstructor(Access

cobbybb.tistory.com

- NoargsConstructor 출처

롬복 @All/NoArgsConstructor 제대로 알고 사용해보자.

문득 전 회사 레거시 코드를 생각하다가 @AllArgsConstructor, @NoArgsConstructor 등 여러 어노테이션이 한클래스에 같이 작성되어있는 것을 본적이있다.Lombok은 불필요한 코드와 작업을 줄여주는 좋은 라

velog.io

- @builder 출처

[Java] 빌더 패턴(Builder Pattern)을 사용해야 하는 이유

객체를 생성하기 위해서는 생성자 패턴, 정적 메소드 패턴, 수정자 패턴, 빌더 패턴 등을 사용할 수 있습니다. 개인적으로 객체를 생성할 때에는 반드시 빌더 패턴을 사용해야 한다고 생각하는

mangkyu.tistory.com

- Entity 출처

[SpringBoot] Entity란? + @Table, @NoArgsConstructor, @AllArgsConstructor

💡 Entity란 무엇이며, 엔티티 클래스 안에서 사용하는 어노테이션에 대해 살펴보자. Entity(엔티티)란? 데이터베이스에서 영속적으로 저장되고 관리되는 객체를 가리킨다. 엔티티는 데이터베이스

dahlia15.tistory.com

- Entity와 Repository 출처

[Spring] Spring Entity, Repository 설명

Spring Entity, Repository는 DB와 관련된 항목들 중 몇 가지입니다. 그 외에는 DAO, DTO, VO, Transaction 등이 있습니다. 이 글이 유용할 수도 있습니다. Repository에 대해서 참고하고 싶으시다면 참고해주세요.

workshop-6349.tistory.com

- Getter 출처

[OOP] Getter와 Setter는 지양하는게 좋다

목차 들어가기 전에 얼마 전 사내에서 Getter와 Setter를 함부로 사용하면 안되는 이유에 대한 세미나가 있었다. Setter에 대한 이야기는 워낙 많이 알려져있었지만 Getter에 대한 이야기는 잘 하지 않

colabear754.tistory.com

- Jpa 출처

[Spring JPA] JPA 란?

이번 글에서는 JPA(Java Persistence API)가 무엇인지 알아보려고한다. JPA는 자바 진영에서 ORM(Object-Relational Mapping) 기술 표준으로 사용되는 인터페이스의 모음이다. 그 말은 즉, 실제적으로 구현된것이

dbjh.tistory.com

- Jpa 출처

[JAVA] - JPA란? 간단하고 쉽게 이해하기(예제코드 완벽정리)

🧑🏻‍🏫 간단 정리 JPA는 자바의 ORM기술을 쉽게 구현하도록 도와주는 API이다. JpaRepository를 상속하는 인터페이스에 메서드 이름만 적어놓으면 알아서 다 처리(구현체 생성, 쿼리문 구현 등)해

ccomccomhan.tistory.com

- save 출처

내가 repository.save()를 통해서 객체를 저장시켰던 이유

그 때 당시에는 Spring은 물론 Java에 대한 개념도 매우 약할 때라 지금도 약하지만 > > > 레퍼런스의 코드를 가져다 사용하기에 급급했다. > > 당시의 나는 해당 개념에 대한 정확한 이해보다는 기

velog.io

- save 출처

Spring Data JPA - Save Method 동작 방식

Spring Data JPA에서 제공하는 JpaRepository.save(T); [T는 Entity]의 내부 동작 방식에 대해서 정리하려고 합니다. JPA에서의 save 메서드 구현체 코드는 다음과 같습니다. // SimpleJpaRepository.java [JPA 구현체] @Tra

wangtak.tistory.com

- CRUD 출처

[Spring] JPA의 기본 CRUD를 사용해보자 !

JPA (Java Presistence API) 자바 진영에서 ORM 기술 표준으로 사용되는 인터페이스 모음이다. 대표적으로 Hibernate, Spring JPA 가 있다. 쉽게 말하면 JPA는 객체와 테이블을 자동으로 매핑시켜서, 쿼리문 작

wooj-coding-fordeveloper.tistory.com

- findAllByOrderByIdDesc 출처

JPA - findAllByOrderByIdDesc

findAll을 하면서 Orderby를 할 필요가 있었다. https://docs.spring.io/spring-data/jpa/docs/2.3.3.RELEASE/reference/html/#jpa.repositories And findByLastnameAndFirstname … where x.lastname = ?1 and x.firstname = ?2 Or findByLastnameOrFirstname

mymoney1.tistory.com

'💻 프로젝트 > 🌼 로또 페이지 만들기 🌼' 카테고리의 다른 글

Spring - [intelliJ,JavaScript] MAC, node.js설치와 로또 숫자 복사하기. (4)	2024.12.19
Spring - [intelliJ,Thymeleaf] MAC, H2를 이용하여 간단한 댓글창 만들기(2) (2)	2024.12.09
Spring - [intelliJ,Thymeleaf] @PostMapping으로 랜덤 숫자 6개 업데이트하기 (2)	2024.12.01
Spring - [HTML,CSS,Thymeleaf] 이미지 넣기, 눈누 글씨체 사용하기 (2)	2024.11.14
Spring - [intelliJ,Thymeleaf] 로또, 버튼 눌러 랜덤 숫자 6개 출력하기(2) (2)	2024.11.12

Spring - [intelliJ,Thymeleaf] @PostMapping으로 랜덤 숫자 6개 업데이트하기

._.sori 2024. 12. 1. 16:49

2024. 12. 1. 16:49

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

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

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

post-this.tistory.com

@PostMapping을 이용하여
로또 번호 계속 출력하기.

1. 동작화면과 전체코드

동작화면

전체코드

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

로또 번호가 출력되는 웹사이트입니다. Contribute to hyeong-ing/LuckyLotto development by creating an account on GitHub.

github.com

package com.LottoWeb.LuckyLotto.Controller;

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

import java.util.*;

@Controller
public class RandomController {

    java.util.Random rd = new java.util.Random();

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

    

    @GetMapping("/Random1")
    public String random1(Model model) {

        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 "button1";
    }

    @PostMapping("/Random1")
    public String updateRandom(Model model) {

        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 "button1";
    }

}

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

전에 했던 코드는 @GetMapping만 사용하여 로또번호가 연속적으로 출력되도록 만들었다.

하지만 @PostMapping으로 사용하여 정보를 업데이트 하는 구조로 바꿀 것이다.

[ 변경사항 ]

□ @GetMapping으로 처음 값을 출력시킨다.

□ @PostMapping을 이용하여 그 값을 업데이트한다.

3. @GetMapping으로 첫 출력하기.

□ 처음 버튼이 눌리면 새로운 html을 보내는 GET요청 처리.

@GetMapping("/Random1")
public String random1(Model model) {

    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 "button1";
}

해당 프로젝트에는 원형 모양이 없는 button.html 화면과 버튼이 눌려 랜덤 숫자가 출력되는 button1.html 화면이 있다. 새로운 화면을 들어가려면 GET 요청으로 보내게 된다. 그렇기에 무조건 첫 화면을 받는 것으로 @GetMapping이 있어야하는 이유다.

해당 코드는 버튼이 눌리면 새로운 화면을 요청하는 동시에, 랜덤 번호를 받아 그것을 원형 위에 출력하도록 한다.

4. @PostMapping으로 값 변경하기.

   @PostMapping("/Random1")
    public String updateRandom(Model model) {

        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 "button1";
    }

버튼이 눌려 요청이 다시 가게되면 @PostMapping이 처리하도록 한다. 나머지 코드는 똑같다. @PostMapping은 새 Form 데이터를 요청하거나, 특정 리소스 값을 업데이트한다. Rest API에서 값은 업데이트하는데 두가지 방법이 있다. 하나는 @PostMapping, 다른 하나는 @PutMapping이 된다.

둘의 차이는 @PostMapping은 일부 데이터만 업데이트 하고자 할 때 사용한다. @PutMapping은 전체 데이터를 업데이트할 때 사용한다. 현재 코드는 쉬운 코드라서, 둘 다 사용해도 문제가 없다. @GetMapping은 GET방식으로 들어온 요청을 처리만 한다. 서버의 상태가 변하지 않는다는 것이다. 주로 데이터를 조회할 때 사용한다. 그래서 저번 포스팅에서 값을 계속적으로 출력하고자 했을 때, 화면을 여러개 만들어 @GetMapping이 계속 다른 화면으로 요청 정보를 보여주는 방식으로 진행했다.

🪽

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

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

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

- @GetMapping과 @PostMapping 출처

[Spring] Spring Framework에서의 @PostMapping과 @GetMapping: REST API의 핵심 요소

안녕하세요! 이번에는 Spring Framework에서 주로 사용되는 어노테이션인 @PostMapping과 @GetMapping에 대해 알아보겠습니다. 이 어노테이션들은 REST API 개발에서 핵심 요소로 사용되며, 클라이언트와 서

jjangadadcodingdiary.tistory.com

'💻 프로젝트 > 🌼 로또 페이지 만들기 🌼' 카테고리의 다른 글

Spring - [intelliJ,Thymeleaf] MAC, H2를 이용하여 간단한 댓글창 만들기(2) (2)	2024.12.09
Spring - [intelliJ,Thymeleaf] 간단한 댓글창 만들기(1) (1)	2024.12.08
Spring - [HTML,CSS,Thymeleaf] 이미지 넣기, 눈누 글씨체 사용하기 (2)	2024.11.14
Spring - [intelliJ,Thymeleaf] 로또, 버튼 눌러 랜덤 숫자 6개 출력하기(2) (2)	2024.11.12
Spring - [intelliJ,Thymeleaf] 로또, 버튼 눌러 랜덤 숫자 6개 출력하기(1) (4)	2024.11.06

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

._.sori 2024. 11. 14. 17:16

2024. 11. 14. 17:16

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

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

post-this.tistory.com

네잎클로버 이미지 넣고,
글씨체 바꾸기

1. 이미지와 전체코드

이미지

코드

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

로또 번호가 출력되는 웹사이트입니다. Contribute to hyeong-ing/LuckyLotto development by creating an account on GitHub.

github.com

2. 이미지 넣기

타임리프를 사용 중이라면, HTML 이미지 넣는 기본적인 방법과 다르다.

□ 원하는 이미지 다운받기.

클로버 아이콘, 로고, 기호 – PNG, SVG 무료 다운로드

icons8.kr

□ 해당 이미지는 static.css에 넣기.

본인은 처음에 이미지를 css에 경로를 넣거나, 다른 클래스를 이미지를 넣는 방법을 했었다. 하지만 계속해서 이미지가 제대로 출력되지 않았다. 고민을 하다가 타임리프와 연관이 있나 싶어 검색해보니, 타임리프를 사용 중일 경우 일반적인 방법이 통하지 않는다는 것을 알았다.

이렇게 static.css에 이미지를 넣어준다.

.lucky {
    display:inline-block;
}

해당 사진을 나열하기 위해 style.css에 display(화면에 어떻게 보이고 싶은지)에 inline-block;(나열되도록)을 적었다.

<img th:src="@{/css/lucky.png}" alt="Lucky" class="lucky">
<img th:src="@{/css/lucky.png}" alt="Lucky" class="lucky">
<img th:src="@{/css/lucky.png}" alt="Lucky" class="lucky">

원하는 위치에 th:src="@{/css/lucky.png}"를 넣어주면 된다. 여기서 alt는 이미지가 보여지지 않을 경우 나타나는 이미지 대체 정보이며, class는 style.css에 저장된 속성을 가져온다.

3. 글씨체 바꾸기

글씨체는 다양한 사이트에서 가져올 수 있다. 아래 사이트 외에도 어도비 등 다양하게 있다. 여기 중요한 것은 글씨체마다 공유될 수 있는 범위가 다르니 잘 확인해보고 가져와야 하는 것이다. 또 사이트마다 글씨체 적용되는 방법이 다를 수 있다.

눈누

상업용 무료 한글 폰트 사이트

noonnu.cc

산돌구름

저작권 걱정없는 무료폰트 | 산돌구름

부리 세로획의 처음에 부리가 있는 폰트 갈래. 명조체와 바탕체를 포괄한다. 세로획을 아래로 긋기 시작할 때 (일반적으로) 왼쪽 상단에서 오른쪽 아래로 조금 긋다 수직 아래로 내려 그을 때 생

www.sandollcloud.com

네이버

네이버 글꼴 모음

네이버가 만든 150여종의 글꼴을 한번에 만나보세요

hangeul.naver.com

□ 프로젝트에 사용한 글씨체는 눈누에서 가져온 것이다.

눈누 - 학교안심 둥근미소

눈누

학교안심 둥근미소 - Keris(한국교육학술정보원)

noonnu.cc

□ 우측에 보면 웹폰트로 사용이 있다. 옆에 네모난 걸 눌러 복사 후, style.css에 붙여넣기 한다.

□ 폰트를 사용하고 싶은 부분에 적용하기.


body {
    font-family: 'HakgyoansimDunggeunmisoTTF-B';
}

body의 글씨체를 바꾸기 위해 style.css에 위의 코드로 작성했다.

□ 버튼도 글씨체 바꿔주기.

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

body 안에 버튼이 있긴 하지만, 버튼 글씨체는 바뀌지 않았다. 그래서 font-family를 추가하여 버튼도 글씨체를 바꿔주었다.

'💻 프로젝트 > 🌼 로또 페이지 만들기 🌼' 카테고리의 다른 글

Spring - [intelliJ,Thymeleaf] 간단한 댓글창 만들기(1) (1)	2024.12.08
Spring - [intelliJ,Thymeleaf] @PostMapping으로 랜덤 숫자 6개 업데이트하기 (2)	2024.12.01
Spring - [intelliJ,Thymeleaf] 로또, 버튼 눌러 랜덤 숫자 6개 출력하기(2) (2)	2024.11.12
Spring - [intelliJ,Thymeleaf] 로또, 버튼 눌러 랜덤 숫자 6개 출력하기(1) (4)	2024.11.06
Spring - [intelliJ,Thymeleaf] 버튼 누르면 Hello,World! 출력 (3)	2024.10.31

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

._.sori 2024. 11. 12. 21:45

2024. 11. 12. 21:45

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

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

[ 버튼 누르면 Hello,World! 출력 ] Spring - [intelliJ] 버튼 누르면 Hello,World! 출력[ Hello,World 출력하기 ] Spring - [IntelliJ] Hello World 출력하기[ Spring MVC에 대하여 ] Spring - Spring MVC를 알아야 시작이 가능하다

post-this.tistory.com

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

1. 동작화면과 전체코드

동작화면

전체코드

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

로또 번호가 출력되는 웹사이트입니다. Contribute to hyeong-ing/LuckyLotto development by creating an account on GitHub.

github.com

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] 이미지 넣기, 눈누 글씨체 사용하기

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

post-this.tistory.com

🪽

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

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

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

- List와 Set 차이

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

배경 알고리즘 문제(여기에 정리)를 풀다가 LinkedList 와 HashSet 의 contains() 속도 차이가 크다는 것을 알게 되었다. 직접 테스트 해보고 이를 정리하려고 한다. 속도 비교 10000000의 숫자를 ArrayList, Lin

hanul-dev.netlify.app

- Set을 ArrayList로 변환 출처

[Java] HashSet을 ArrayList로 변환하기

[Java] HashSet을 ArrayList로 변환하기 HashSet set = new HashSet(); for (int i = 0; i < T; i++) { set.add(br.readLine()); } ArrayList list = new ArrayList(set); 중복되는 값을 제외하고 저장하고 싶은 경우가 존재한다. 이때 HashSe

kim6394.tistory.com

- Set 출처

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

- Set - 순서를 유지하지 않는 데이터의 집합. 데이터의 중복을 허용하지 않는다. - 인덱스로 요소들을 관리하지 않는다. 예를 들어 나의 판매사이트의 하루 방문자 수(중복 접속을 제외한)를 구하

doompok.tistory.com

- ArrayList 구조 출처

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

ArrayList 컬렉션 자바의 컬렉션 프레임워크를 접한다면 가장 먼저 배우는 컬렉션이 ArrayList 일 것이다. 자료구조(Data Structure) 이라고 해서 무언가 방대하게 느껴져 접근이 어려울 것 처럼 느끼겠지

inpa.tistory.com

- display 출처

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

display 속성 (inline, block, none 차이), visibility 속성(visible, hidden, collapse 차이) 오늘 알아 볼 속성은, 어떤 요소를 화면에 보이거나 숨길 때 사용하는 display와 visibilty 속성입니다. *display와 visibilty 차이

aboooks.tistory.com

- border-radius 차이

border-radius 50% vs 100%

1. border-radius 50% vs 100% 우리는 border-radius: 50%를 지정하여 원을 만들 수 있다. 그런데 타인의 코드를 보면 50%, 100% 등 2가지를 다양하게 쓰고 있다. 그렇다면 border-radius: 50%, 100%의 차이는 무엇일까? (

mong-blog.tistory.com

'💻 프로젝트 > 🌼 로또 페이지 만들기 🌼' 카테고리의 다른 글

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

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)

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 - [intelliJ,Thymeleaf] @PostMapping으로 랜덤 숫자 6개 업데이트하기 (2)	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

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

._.sori 2024. 10. 31. 13:46

2024. 10. 31. 13:46

[ Hello,World 출력하기 ]

Spring - [IntelliJ] Hello World 출력하기

[ Spring MVC에 대하여 ] Spring - Spring MVC를 알아야 시작이 가능하다.처음엔 대충 프로젝트를 시작해보려했지만,이럴수가! 아는 것이 미약하니 시작할 수 없었다.그래서 가장 기초적으로 알아야하는

post-this.tistory.com

버튼 누르면 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 ]

SpringBoot - GET과 POST 그리고 @GetMapping

[ @Controller와 @RestController ] Spring - @Controller와 @RestController 그리고 상태코드[ SpringMVC에 대하여 ] Spring - Spring MVC를 알아야 시작이 가능하다.처음엔 대충 프로젝트를 시작해보려했지만,이럴수가!

post-this.tistory.com

이제 버튼을 알아보겠다.

<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!가 오는 것을 알 수 있다.

🪽

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

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

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

- 타임리프 출처

Thymeleaf(타임리프)란 ? 타임리프의 기본 기능알아보기

Thymeleaf(타임리프)란 ? 타임리프는 JSP, Freemarker와 같은 템플릿 엔진의 일종으로 다음과 같은 특징을 갖고 있습니다. 서버 사이드 HTML 렌더링 (SSR) 백엔드 서버에서 HTML을 동적으로 렌더링 하는 용

hstory0208.tistory.com

- 타임리프 출처

스프링 타임리프(Thymleaf) 한눈에 정리하기

타임리프를 사용하기전에 확인해야할 정보 1.타임리프 의존성이 제대로 주입되고 있는지 확인한다. 타임리프를 '제대로' 쓰려면 시작하기전에 타임리프가 제대로 설치되어있는지 확인하자. 2. M

taehoung0102.tistory.com

- form 출처

HTML : 폼(form) 이해

폼은 알게 모르게 웹에서 많이 사용합니다. 사용자 의견이나 정보를 알기 위해 입력할 큰 틀을 만드는 데 사용되기 때문입니다. 폼은 입력된 데이터를 한 번에 서버로 전송합니다. 전송한 데이

www.nextree.co.kr

-form과 GET 출처

[Html] form 태그와 input 요소들, GET / POST 방식

⚡️ form html의 요소 중 하나인 form은 데이터를 주고 받음에 있어서 많이 사용하는 요소 중 하나입니다. form 태그 안에 삽입한 submit 이벤트가 발동되면, 정의된 method 속성 type으로 action을 통해 목

lasbe.tistory.com

'💻 프로젝트 > 🌼 로또 페이지 만들기 🌼' 카테고리의 다른 글

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

Spring - [IntelliJ] Hello World 출력하기

._.sori 2024. 10. 12. 21:34

2024. 10. 12. 21:34

[ Spring MVC에 대하여 ]

Spring - Spring MVC를 알아야 시작이 가능하다.

처음엔 대충 프로젝트를 시작해보려했지만,이럴수가! 아는 것이 미약하니 시작할 수 없었다.그래서 가장 기초적으로 알아야하는 개념을 차근차근 정리해볼까 한다.두둥, Spring MVC란?아마 정보처

post-this.tistory.com

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

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 설명 ]

Spring - @Controller와 @RestController 그리고 상태코드

[ SpringMVC에 대하여 ] Spring - Spring MVC를 알아야 시작이 가능하다.처음엔 대충 프로젝트를 시작해보려했지만,이럴수가! 아는 것이 미약하니 시작할 수 없었다.그래서 가장 기초적으로 알아야하는

post-this.tistory.com

[ @GetMapping 설명 ]

SpringBoot - GET과 POST 그리고 @GetMapping

post-this.tistory.com

6. localhost:8080, 결과 보기.

🪽

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

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

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

- Hello World 출처

스프링부트는 처음이라 #1 "Hello, world" 를 출력하기까지

Hello, world

velog.io

- GetMapping 출처

[spring] @Controller와 @GetMapping

이번에는 mapping을 통해서 간단한 html 페이지를 보여주도록 하겠습니다. 처리 과정 일반적으로 사용자의 요청을 처리하는 과정은 다음 그림과 같습니다. 우리는 매핑을 통해 Controller가 특정 View

coding-nyan.tistory.com

- RestController 출처

3.2. RestController 사용하기 · SpringBoot

dorothy-koo.gitbooks.io

'💻 프로젝트 > 🌼 로또 페이지 만들기 🌼' 카테고리의 다른 글

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

PREV 이전 1 NEXT 다음

🌊 ._.sori🪽

💻 프로젝트

Spring - [intelliJ,JavaScript] MAC, node.js설치와 로또 숫자 복사하기.

'💻 프로젝트 > 🌼 로또 페이지 만들기 🌼' 카테고리의 다른 글

Spring - [intelliJ,Thymeleaf] MAC, H2를 이용하여 간단한 댓글창 만들기(2)

'💻 프로젝트 > 🌼 로또 페이지 만들기 🌼' 카테고리의 다른 글

Spring - [intelliJ,Thymeleaf] 간단한 댓글창 만들기(1)

'💻 프로젝트 > 🌼 로또 페이지 만들기 🌼' 카테고리의 다른 글

Spring - [intelliJ,Thymeleaf] @PostMapping으로 랜덤 숫자 6개 업데이트하기

'💻 프로젝트 > 🌼 로또 페이지 만들기 🌼' 카테고리의 다른 글

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

'💻 프로젝트 > 🌼 로또 페이지 만들기 🌼' 카테고리의 다른 글

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

'💻 프로젝트 > 🌼 로또 페이지 만들기 🌼' 카테고리의 다른 글

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

'💻 프로젝트 > 🌼 로또 페이지 만들기 🌼' 카테고리의 다른 글

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

'💻 프로젝트 > 🌼 로또 페이지 만들기 🌼' 카테고리의 다른 글

Spring - [IntelliJ] Hello World 출력하기

'💻 프로젝트 > 🌼 로또 페이지 만들기 🌼' 카테고리의 다른 글

+ Recent posts

티스토리툴바