링크텍스트

img 태그에 referrerPolicy="no-referrer" 이거 한줄 넣으니까 다시 잘 보인다 ㄷㄷ

음정이나 코드를 들려주고 맞추는 간단한 청음프로그램을 만들려고 했는데 처음엔 그냥 아무것도 모르고 HTML의 audio 태그를 이용해서 로컬에 있는 mp3파일을 note들로 사용했었는데 데스크탑 브라우저 환경에서는 별 무리없이 동작하였으나 모바일로 테스트 해본 결과 코드는 싱크가 밀린다던가 음정 같은 경우는 아예 첫음이 들리지 않는 등 문제가 많아서 구글링을 해본 결과 Web Audio API라고 audio파일을 전문적으로 다루는 자바스크립트 기술이 있었다.

그래서 기존의 음원 재생 방법을 Firebase Storage에 음원을 올려두고 거기서 http로 가져와서 Web Audio API를 통해서 재생하는 걸로 바꾸는 작업을 하였다.

Firebase Storage에 음원 업로드하고 url 가져오기

Firebase는 이번에 처음 써봤는데 직관적이고 깔끔하게 잘 되어 있는 것 같다. 프로젝트를 시작하고 스토리지에 파일 등록하는 건 간단하니 넘어가고 http 요청을 위해서 cors 설정을 해주어야 한다

https://console.cloud.google.com/

FB 콘솔이 아니라 구글 클라우드 플랫폼 콘솔로 가야 한다.

cors 설정은 이분의 포스트를 참고 했다

https://stove99.github.io/etc/2021/06/09/firebase-storage-cors-setting/

그 뒤 파일들을 업로드 해주고 url 주소를 가져와야 하는데 오른쪽 아래에 엑세스 토큰 부분을 클릭하면 get 요청을 날렸을 때 재생이 가능한 전체 url 주소를 복사할 수 있다.

그렇게 복사한 주소와 note에 관한 정보를 json형식으로 저장했다.

Web Audio API를 활용해서 가져온 음원 재생하기

어제 밤에 너무 늦게 자서 피곤한 관계로 일단 그냥 전체 코드를 통으로 올리고 나중에 시간되면 수정하기로...

코드가 길어서 그렇지 생각보다 별거 없다 AudioContext 인스턴스 만들고 버퍼에 음원들 가져와서 디코딩하고 다시 플레이 버튼 눌렀을 때 담아둔 음원들을 버퍼소스 노드에 집어넣고 AudioContext에 connect해서 순차적으로 재생해주면 됨

import axios from "axios";
import React, { useEffect, useState } from "react";

const Answer1 = (props) => {
    const exChord = props.exChord;
    const [audios, setAudios] = useState([]);

    useEffect(() => {
        const fetchAudio = async () => {
            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
            const buffers = [];
            for(let i = 0; i < exChord.length; i++) {
                const res = await axios({
                    method : "get",
                    url : exChord[i].url,
                    responseType : "arraybuffer"
                });
                const buffer = await audioContext.decodeAudioData(res.data);
                buffers.push(buffer);
            };
            setAudios(buffers);
        };
        fetchAudio();
    },[exChord]);

    useEffect(() => {
        const play = () => {
            console.log(audios);
            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
            audios.forEach((audio) => {
                const source = audioContext.createBufferSource();
                source.buffer = audio;
                source.connect(audioContext.destination);
                source.start(0);
            })
        }
        if (audios.length > 0) {
            play();
        }
    }, [audios])

    return (
        <div>
            <h6>answer</h6>

            <button onClick={() => setAudios([...audios])}>재생</button>
        </div>
    )
}

export default Answer1;

1. constructor 안에 element를 할당할 변수를 선언

constructor (props) {
    super(props);
    this.textInput = null;
}

2. ref를 통해 element를 들고올 콜백함수를 만든다

constructor (props) {
    super(props);
    // 1. input 태그가 들어갈 공간(변수)
    this.textInput = null;
    // 2. ref 콜백함수를 통해 DOM에 접근
    // 1) ref에 들어갈 함수 작성
    this.setTextInputRef = (element) => {
        // 2) element를 ref를 통해 DOM 가져옴
        // 3) 저장해서 쓰기위해 만든 공간에 할당
        this.textInput = element;
        }
    }

3. 가져올 태그의 속성에 ref를 추가하고 2에서 만든 콜백함수를 입력한다

<input
    type="text"
    // 3. ref 속성을 이용해서 setTextInputRef를 호출
    ref={this.setTextInputRef}
/>

4. 가져온 element를 조작하기 -> input 태그에 focus주기

textInputEvent = () => {
    if(this.textInput) {
           // ref를 통해서 DOM을 가져와서 그 안에 있는 내용에
        // JS에서 id를 통해 가져온것 처럼 접근할 수 있다
        this.textInput.focus();
    }
}

!textInput을 배열로 만들고 push() 나 concat() 으로 할당하면 하나의 변수에 여러 element를 담을 수 있다

위의 방법은 콜백함수를 이용하여 DOM을 조작하는 것이고

React 16.3 버전 이상부터는 createRef()라는 내장 함수를 이용하여 변수에 할당 할 수 있다

constructor (props) {
    super(props);
    // 16.3 버전 이후 사용가능
    this.textInput = React.createRef();
}

! createRef를 사용할 땐 해당 변수의 뒤에 .current를 입력해야 사용할 수 있다 ex=>

console.log(this.myRef.current);

웹 개발 기본기 다지는데는 게시판 만한게 없는거 같다. 이전에는 학원에서 Vue.js로 게시판을 만들었었는데 그러다 보니까 순수 자바스크립트 실력은 많이 늘지도 않는것 같고 제대로 이해도 하지 못한채로 코드만 치는 것 같아서 이번에는 바닐라 자바스크립트로 게시판 목록과 페이지네이션을 구현해보았다.

밴앤드 구성

어차피 프론트엔드 과정인지라 DB와 서버는 최대한 간단하게 MongoDB와 Express로 간단하게 구성했다. 백엔드 개발에 관해선 다음에 자세하게 다루기로하고 여기선 프론트에서 필요한 만큼만 코드를 살펴보자.

최소한의 검색기능과 5개씩 페이지네이션을 만들어 보았다.

Get 요청 하기

일전에 XMLHttpRequest로 get요청을 보내봤었는데 이번에는 fetch함수를 사용해봤다.

기본 fetch함수 예제와는 모양이 다른데 저런식으로 return 한 항목을 다시 비동기로 변수에 담아주면 응답 받은 내용을 전역변수에 넣어서 사용할 수 있다고 한다.

handleData 함수를 실행하고 list를 찍어보면 제대로 작동하는걸 볼 수 있다.

-Promise에 관해서는 몇개 찾아봤지만 아직 제대로 이해가 되지 않아서 좀 더 공부한 후에 따로 포스트하던지 해야겠다.

데이터 테이블에 바인딩하기

위의 getList()로 가져온 데이터를 화면상에 뿌려주는데 정석(?)으로는 각각 element를 생성하고 안에 데이터를 집어넣는게 맞는것 같지만 그렇게하면 너무 코드가 길어질 것 같으니 tbody안에 반복문을 통하여 통째로 바인딩했다.

문제 없이 잘 나온다.

        <table>
            <thead>
                <tr>
                    <td>번호</td>
                    <td>제목</td>
                    <td>작성자</td>
                    <td>조회수</td>
                    <td>등록일</td>
                </tr>
            </thead>
            <tbody id="tbody">
            </tbody>
        </table>

참고용 table 전체 html

페이지네이션 만들기

페이지네이션은 이번에 공부하면서 새로 배운 DOM과 Nodes 조작을 통해서 전체 게시글의 숫자를 이용해서 필요한 만큼 element를 생성하고 필요한 attribute를 집어넣은 다음에 "pagenation" div안에 집어넣어보았다.

<div id="pagenation">
    createElement로 생성된 버튼들이 들어오는 자리
</div>
const pagenation = document.getElementById('pagenation');

여기서 data-id 를 이용하여 원하는 태그에 속성을 추가해주는걸 볼 수 있는데

data-데이터이름 = 값

을 입력해 주면 해당태그안에 원하는 데이터를 집어넣을 수 있고

해당태그 선택(ex.document.querySelector('...').dataset.데이터이름;

dataset을 통하여 그 값을 불러올수 있게 된다. 간단한 기능이지만 여기저기 유용하게 써먹을 곳이 많은 것 같다.

페이지네이션 버튼 click이벤트 구현

위에서 생성된 버튼들에 click 이벤트를 추가하여 해당 페이지의 게시글 목록이 보여지도록 만들어보자

전체 코드인데 살펴보면 각각의 버튼들에 이벤트리스너를 생성하는 것이 아니라 상위의 pagenation div에 이벤트를 생성해 준것을 볼 수 있다.

이렇게 했을 때 몇가지 이점이 있는데 일단 이벤트가 많아질수록 성능저하가 일어나는데 저런식으로 상위 요소에서 하위요소를 제어하게 되면 이벤트리스너의 개수를 줄여서 성능도 향상되고

전체적인 코드도 줄어들게 되고 지금 내가 할 수 있는 선에선 최대한 함수들로 기능들을 나누어 놓았는데 버튼이 추가된다던지 이런저런 변화에 대해서 확장성도 좋아진다고 볼 수 있다.

이런식으로 코드를 짤 때 한가지 주의할 점이 있는데

지금 버튼들을 감싸고 있는데 pagenation div를 살펴보면 저런식으로 버튼들 사이의 빈 공간들도 클릭했을 때 이벤트가 실행되게 된다.

이런 것을 이벤트 버블링(Event Bubbling)이라고 하는데 어떤 요소의 이벤트가 발생했을 때 상위요소의 이벤트도 같이 전파되는 것을 말한다.

이게 유용할 때도 많은데 반대로 예기치 못한 방법으로 코드가 실행 될 때도 있다.

이런 것을 방지하기 위해서 자바스크립트에 몇가지 기능이 있는데

pagenation.addEventListener('click', function(e) {

}

위의 이벤트 리스너 함수를 살펴보자. 콜백함수 부분에 e라는 파라미터가 들어가 있는것을 볼 수가 있는데 이것을 이벤트 객체(event object)라고 부른다. 이벤트 객체에는 해당 이벤트에 대해 여러가지 정보를 담고 있는데

(console.log(e)로 이벤트리스너를 호출했을 때)

이때 target 이라는 항목이 있다. target이란 해당이벤트가 발생한 html 요소 "그 자체" 를 의미한다. 그렇기에 위의 이미지를 보면 분명 이벤트리스너가 달린 곳은 pagenation div인데 target에는 내가 클릭한 button 이라는 요소가 출력되는 걸 볼 수 있다.

그래서 내가 상호작용한 요소 그 자체를 선택하고 싶으면 함수 내에서

e.target

으로 불러올 수 있다. (앞의 e. 으로 붙이는건 함수에 파라미터로 e 를 넣었기 때문, event를 넣었다면 event.target)

그리고 해당 이벤트가 부착(?)된 요소를 지정하고 싶으면

e.currentTarget

을 사용하면 된다.

지금 만든 이벤트에서는 addEventListener가 달린 pagenation div 가 될 것이다.

ex) 게시판 페이지네이션 2번 버튼을 눌렀을 때 e.target에는 내가 실제로 누른 버튼이 출력되고, e.currentTarget에는 이벤트가 만들어진 pagenation div가 나오는 걸 볼 수 있다. (거기다 아까 전에 data- 방식으로 dataset에 집어넣은 값도 잘 보인다.)

그럼 위의 두가지를 포함하여 이벤트객체를 활용하여 쓸 수 있는 유용한 기능 몇가지를 살펴보면

e.target; // 유저가 실제로 누른거 e.currentTarget; // 이벤트리스너 달린 곳 e.preventDefault(); // 이벤트 기본동작 막아줌 e.stopPropagation(); // 내 상위요소로 이벤트 버블링 막아줌

지금 상황에서는 이정도만 알고 있어도 유용하게 쓸 수 있을 것이다. -e.preventDefault()는 해당 요소가 기본적으로 제공하는 기능, (예를들면 a태그는 해당 href 주소로 이동한다던가 하는) 태그 원래의 기능들이 실행되는 것을 막아준다.

작성한 코드에서도 if 문을 통하여 e.target 과 e.currentTarget 이 다를 때만 코드가 실행되게 하여서 원치않는 작동을 막아주었다.

이렇게 해서 허접하지만 바닐라 자바스크립트로 게시판 글목록과 페이지네이션 기능을 구현해 보았다.

전체 코드

<body>
    <a href="../index.html"><button>뒤로</button></a>
    <a href="./boardInsert.html"><button>글쓰기</button></a>

    <hr />

    <div id="boardContent">
        <table>
            <thead>
                <tr>
                    <td>번호</td>
                    <td>제목</td>
                    <td>작성자</td>
                    <td>조회수</td>
                    <td>등록일</td>
                </tr>
            </thead>
            <tbody id="tbody">
            </tbody>
        </table>

        <hr />

        <div id="pagenation"></div>
    </div>

    <script>
        const tbody = document.getElementById('tbody');
        const pagenation = document.getElementById('pagenation');
        const boardContent = document.getElementById('boardContent');

        handleData();
        for(let i = 0; i < tbody.childElementCount; i++) {
            tbody.children[i].setAttribute("class", "board-one");
        }

        async function handleData(page) {
            // fetch로 요청한 response 를 전역변수에 저장 하는 법
            const list = await getData(page);
            boardList(list); // 게시글 목록
            pageList(list); // 페이지네이션
            console.log("최신 페이지 => ", list);
        }

        // getData로부터 게시글 목록 생성
        function boardList(data) {
            for(let tmp of data.result) {
                tbody.innerHTML += 
                `<tr>` +
                    `<td>${tmp._id}</td>` +
                    `<td>${tmp.title}</td>` +
                    `<td>${tmp.writer}</td>` +
                    `<td>${tmp.hit}</td>` +
                    `<td>${tmp.regdate}</td>` +
                `</td>`;
            }
        }

        // getData로부터 페이지네이션 생성
        function pageList(data) {
            let page;
            // data.total에서 page개수 정하기
            if(data.total % 5 == 0) {
                // 5의 배수로 떨어지면 맨 뒤의 떨이페이지 필요x
                page = Math.floor((data.total / 5));
            } else {
                page = Math.floor((data.total / 5) +1);
            }
            // 페이지 버튼이 1부터 시작할 수 있도록 i와 page에 1을 더해준다
            for(let i = 1; i < page + 1; i++) {
                // 페이지 개수만큼 버튼 생성
                let newButton = document.createElement('button');
                newButton.innerHTML = i;
                // 각 버튼 element에 dataset.id 넣기
                newButton.setAttribute("data-id", i);
                newButton.setAttribute("class", "btn");
                // pagenation div에 생성한 버튼 추가
                pagenation.appendChild(newButton);
            }
        }

        // 이벤트 버블링 활용해서 버튼 상위 div에 클릭이벤트 하나만 만들기 => 성능에 좋다
        pagenation.addEventListener('click', async function(e) {
            // 실제 클릭한 요소(e.target)와 실제 이벤트가 만들어진 요소(e.currentTarget)가
            // 다를때만 동작하게 하여 이벤트 버블링을 막음
            if(e.target != e.currentTarget) {
                // e.target으로 클릭한 버튼 찾아내서 서버에서 정보가져오기
                let list = await getData(e.target.dataset.id);
                console.log(e.target);
                tbody.innerHTML = "";
                boardList(list);
                console.log("페이지 번호 => ", e.target.dataset.id, list);
            }
        })

        // fetch로 get요청
        function getData(page) {
            // 응답받은 데이터를 전역변수에 반환
            return new Promise((resolve, reject) => {
                fetch(`http://127.0.0.1:8088/board/select.json?page=${page}`)
                .then((response) => response.json())
                .then(data => {
                    resolve(data);
                });
            });
        }

    </script>

outro

이 다음엔 검색기능과 특정 게시글을 열람할 수 있는 기능도 구현해 보자

mongoDB Atlas 계정 생성

https://www.mongodb.com/ko-kr/cloud/atlas/register 위 사이트로 들어가서 계정을 생성한다. 구글 계정으로도 로그인 가능하다

아무거나 골라주면 된다.

제일 오른쪽의 무료 cluster를 고르자 구글 클라우드 항목에 서울 서버가 있으니 선택해주자.

DB 유저네임&비밀번호 / IP주소 설정

Autogenerate Secure Password를 누르면 자동으로 비밀번호를 생성해준다. 나중에 DB연결시에 필요하므로 다른 곳에 기록해 놓자.

add My Current IP Address 버튼을 누르고 엔트리를 추가하자.

여기까지 완료하면 계정생성과 기본 설정은 끝이다.

Express 서버와 MongoDB Atlas 연결준비

왼쪽의 Database Access 와 Network Access 탭에 들어가면 바로 위에서 설정한 유저정보와 IP를 언제든지 수정할 수 있다.

이제 Database탭에 Connect 버튼을 눌러보자.

터미널이나 Compass 앱 등 여러가지 방법으로 연결할 수 있는데 일단 해당 영역을 클릭하자

밑의 코드를 복사하는데 password 부분을 아까전에 기록 해놓은 비밀번호를 넣어주자. <, > 부분도 지워줘야지 제대로 연결이 가능하다. (이것 때문에 여러번 뻘짓을 했다..)

Express 서버와 MongoDB Atlas 연결하기

express로 기본적인 서버 설정하는건 담에 알아보기로 하고 오늘은 DB연결부분 부터 시작해 보자.

터미널에 다음 명령어를 입력하고 몽고DB와 mongoose를 설치해 준다.

npm install -s mongodb
npm install mongoose

mongoose란 node.js와 mongoDB 맵핑을 도와주는 ODM(Object Data Mapping) 라이브러리 라고 한다.

mongoose.connect(위의 Connect to Cluster코드입력) // 난 변수로 집어넣음

초록색 박스는 username 이고(기본으로 들어가 있다) 빨간색 박스 부분에 password를 적어넣는다 <,> 빼고!

나머지 코드는 적당히 따라쳐서 넣어주자.

이제 서버를 돌려보자.

연결완료 !

마무리

항상 느끼는 거지만 실제 인터넷 뒤지고 하는거보다 블로그에 글쓰는게 훨씬 힘들고 오래걸린다. 그래서 공부가 되나보다.

remote: Support for password authentication was removed on August 13, 2021. remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication. fatal: Authentication failed for 'https://github.com/solda-blue/~~~/'

이런 메시지가 출력되었다 처음엔 또 맥북 문제인가 싶었지만 GitHub 비밀번호로 remote(원격제어)하는 방식이 만료되었다고 한다.

그래서 열심히 구글링을 한 결과 SSH Key를 이용하면 GitHub와 연동할 수 있다고 한다.

일단 ssh 디렉토리로 가서 생성해둔 키가 있는지 확인해보자.

$ cd ~/.ssh
$ ls

터미널에 해당 명령어를 입력하니

이렇게 미리 생성해둔 키가 있었다.

아마 일전에 AWS를 이용하기 위해서 만들어놨던거 같지만 그 전에는 블로깅을 하지 않아서 지금은 기억이 전혀 나지 않았다.

https://www.lainyzine.com/ko/article/how-to-link-github-remote-repository-and-local-git-repository/

https://hankyeolk.github.io/2021/08/15/githubSSH.html

그래서 이 두분의 포스트를 많이 참고 했는데 키 생성부분은 다음에 정리하기로 하고 오늘은 SSH Key를 내 Github 계정에 등록하고 SSH 방식으로 Git push 해보자

(아직 SSH Key가 없으신 분들은 위의 블로그로 가시면 아주 자세하고 친절하게 설명해 놓았다. 아주아주 고마우신 분들)

일단 id_rsa 와 id_rsa.pub 이렇게 두개의 key가 있는데 서로 완전히 다른 key가 아니라 저렇게 한쌍을 이루고 있는거라고 보면 된다. 그중에서 .pub이라고 되어있는 키는 public key(공개 키)로써 내가 접속하려는 서버에 등록하고 내 컴퓨터에 저장된 public key와 쌍을 이루는 private key(개인키, 비밀 키)를 서로 대조해서 일치 할 때에 인증이 된다고 볼 수 있다.

그러므로 public key는 공개해도 크게 상관이 없지만 private key는 절대 함부러 공개해선 안된다.

(체계적으로 공부한게 아니라 틀린부분이 다수 있을 수 있으니 주의)

자 그러면 일단 내 public key를 출력해보자.

$ cat id_rsa.pub

이렇게 나온 key를 복사한 다음

pbcopy < ~/.ssh/id_rsa.pub

(그냥 복사해도 되지만 이렇게 복사하는게 낫다고 한다.)

https://github.com/settings/ssh/new 위 주소로 들어가면 SSH Key등록 창이 나온다. (당연히 GitHub 계정이 필요하다.)

Title은 본인이 알아보기 편한대로 지으면 되고 아까 복사한 public key를 key 영역에 붙여넣기 한다. (key type은 뭔지 몰라서 건들지 않았는데 그래도 성공했다.)

잘 등록 된걸 볼 수 있다.

그 후엔 https url 주소로 되어있는 세팅을 아래와 같이 바꿔준다.

$ git remote set-url [origin name] git@github.com:[username]/[repository name].git

이제 모든 설정이 끝이 났다. 이제 push를 해주면

$ git push -u origin main

정상적으로 Repository에 파일들이 올라가는걸 볼 수 있다.

느낀점 : 무엇이든 할 때 자료정리 잘하고 바로바로 기록해두자. 그리고 벨로그 글 작성할때도 좀 체계적으로 적자.

파란색 영역을 클릭시에 하위 항목들이 열고 닫히는 기능을 구현해 보려고 한다

가장 먼저 생각나는건 if문으로 열렸을 때, 닫혔을 때 따로 조작할 수 있게 만들 수 있겠지만 그렇게 하면 코드도 복잡해지고 직관적이지 않은 것 같아서 다른 방법을 찾아보기로 했다

MDN의 classList설명 https://developer.mozilla.org/ko/docs/Web/API/Element/classList

역시나 어렵게 설명되어 있다

내가 필요한 건 요소를 클릭했을 때 열려있으면 닫고, 닫혀있으면 열면 되는 것이기에 class.toggle 을 쓰기로 했다.

클릭하는 변수명.addEventListener('click', function() {
    변경될 변수명.classList.toggle('추가 클래스 명');
}

예를 들어 위의 id="btnHtml"이라고 되어있는 영역을 클릭하면 밑의 menuHtml div의 class명 에 'toggle' 이라는 추가 클래스명이 들어가게 된다

이후에는 형식에 맞게 필요한 css를 작성 해주면 된다.

classList.toggle 외에도 add, remove 등과 같은 프로퍼티도 많으니 필요할 때 찾아서 사용하면 된다. 메서드 역시 click외에 mouseover 같은 것을 사용할 수 있다

math.random은 귀찮으니 다음에 작성

MDN 설명 => https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set

역시나 설명이 어렵다 set은 array랑 비슷한데 중요한거만 이야기 하자면

1. 배열 내에서 같은 값을 하나만 가진다 (중복이 없다는 말)
2. index로 요소에 접근이 불가하다

const arr = [1, 5, 3, 8, 5, 3]

이런 배열이 있다고 했을 때

const set = new Set(arr)
console.log(set)

해당 배열을 Set으로 변환 시키면

중복되는 요소를 제거하고 저렇게 만들어 준다.

array 랑은 다르게 배열의 길이가 length가 아닌 size로 나타낸다. (size 프로퍼티는 getter 함수만 존재하는 접근자 프로퍼티라서 size를 조작해서 개수를 바꾸려는 시도는 무시 된다고 한다)

그 외에 많이 쓰이는 메소드는

Set.prototype.add(value) => 요소 추가하기

set.add(1).add(2);
console.log(set); // Set(2) {1, 2}

Set.prototype.clear() => 요소 다 지우기

set.clear();
console.log(set); // Set(0) {}

Set.prototype.delete(value) => 요소 지우기

const set = new Set([1, 2, 3]);
set.delete(2);
console.log(set); //Set(2) {1, 3}

Set.prototype.has(value) => 요소 찾기

해당 요소가 있으면 => true, 없으면 => false;

그 외는 다음에 알아보자

그래서 로또 번호 생성기는?

        function handleLotto () {

            // 새로운 set 객체 생성
            const set = new Set();

            // for 문으로 작성하면 6번만 돌고 그냥 중복만 제거함
            // while로 길이가 6이 되기 전까지 돌린다
            while ( set.size < 6) {
                let num = Math.floor(Math.random() * 45)+ 1;
                set.add(" " + num);
            }
            console.log(set);

            // 정렬을 위해 다시 배열로 변경
            const lotto = Array.from(set);

            // 오름차순 정렬
            lotto.sort(function compare(a, b) {
                return a - b;
            });

            content.innerHTML = lotto;
        };        

일반 배열로 만드려고 하니까 중복 문제 처리하기 까다로워서 Set을 사용하여 로또 번호 생성기를 만들어 봤다 잘 작동하는 모습이다.

학원 예제들인데 html 문서 확인 할 때마다 일일히 live server 실행하기 귀찮기 때문에 일반 사이트들 처럼 SPA형식으로 만들어서 관리하기로 했다.

js연습도 하고 따로 뭐 깔기도 번거롭기 때문에 그냥 js 로만 만들 방법이 없는지 찾아보다가 XMLHttpRequest 라는게 있다고 한다.

Ajax 설명 http://www.tcpschool.com/ajax/intro

XMLHttpRequest 설명 http://www.tcpschool.com/xml/xml_dom_xmlHttpRequest

Ajax 나무위키 설명 https://namu.wiki/w/AJAX#s-2.5.1

핵심은 비동기적으로 서버에 요청을 하여 json, xml, html 등등의 데이터를 받아 올 수 있는데 요청하지 않은 정보는 받아 올 수 없기 때문에 푸시 알림 같은 기능은 X

버튼을 눌렀을 때 해당하는 html 파일을 content div안에 불러오자

<html>
 <head>
  <script type="text/javascript">
   var request = new XMLHttpRequest(); // XMLHttpRequest 생성
   request.open("GET", "//namu.wiki/raw/틀:틀%20모음/"); // 데이터를 GET Method로 요청
   request.send(); // 실제 Send
   request.onreadystatechange = function() {
    if ( request.readyState === 4 && request.status === 200 ) { // request가 끝났으며(4), 성공적(200)인 경우. request.onload=()=>{} 으로 교체해도 가능하다.
     document.getElementById("content").innerHTML = request.responseText; // #content 태그 내의 내용을 받아온 텍스트로 교체.
    }
   };
  </script>
 </head>
 <body>
  <div id="content"></div>
 </body>
</html>

킹무위키 예제인데 거의 복붙해서 써도 작동이 잘된다

대충 잘 된다

다음 할일 : 문서가 앞으로 많아 질것 같으니 위의 버튼들을 사이드 햄버거 메뉴 만들어서 집어넣고 셀렉터랑 문서 url 코드가 너무 번잡하니 저것도 정리하자

일단 최대한 코드 줄인 것