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 > 스프링 연습' 카테고리의 다른 글

Spring - [intelliJ,Thymeleaf] MAC, H2를 이용하여 간단한 댓글창 만들기(2) (1)	2024.12.09
Spring - [intelliJ,Thymeleaf] 간단한 댓글창 만들기(1) (1)	2024.12.08
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

🌊 ._.sori🪽

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

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

+ Recent posts

티스토리툴바