Home 조코딩 웹개발 5주 완성 4주차 리뷰_Node.js, 로또 번호 생성 API 만들기
Post
Cancel

조코딩 웹개발 5주 완성 4주차 리뷰_Node.js, 로또 번호 생성 API 만들기

Posted Oct 3, 2022 Updated Dec 31, 2022
By 복영규(Younggyu Bok)
12 min read

본 포스팅에서는 조코딩님 강의에서 다뤘던 동물 울음소리 API가 아닌 다른 API 만드는 것을 실습해 보고자 하니 참고 부탁드립니다:)

Node.js

Node.js는 JavaScript로 브라우저 밖에서 서버를 구축하는 등의 코드를 실행할 수 있게 해주는 런타임 환경입니다.

본 실습에서 만들 로또 번호 생성 API의 서버는 Node.js express로 구현되어 실습해 보실 분들은 아래 그림의 LTS(Long Term Support) 버전을 직접 다운로드 해 주시기 바랍니다.

Node js 다운로드 위 이미지를 클릭하시면 해당 웹 사이트로 이동합니다.

설치가 완료되었다면 실습을 진행할 폴더와 index.js 파일을 폴더 안에 만들어 줍니다. Node.js가 제대로 설치되었는지 확인해보기 위해 index.js 파일에 다음과 같은 코드를 입력 후 터미널을 통해 실행해 줍니다.

1

console.log("Hello, world!")

1
2

>node index.js
Hello, world!

위와 같이 node index.js 명령어를 터미널에 입력했을 때 다음과 같이 출력되었다면 정상적으로 Node.js가 설치된 것입니다.

npm

npm은 Node Package Manager의 약자로 Node.js의 패키지를 관리할 수 있는 도구입니다. npm은 Node.js를 설치할 때 같이 설치되어 따로 설치하실 필요는 없습니다. npm을 통해 모듈을 다운받고 관리하는 법은 다음과 같습니다.

1
2

>npm init
>npm install express

npm init 명령어는 package.json 파일을 생성해 주는데 이는 프로젝트 모듈 관리에 있어 중요한 파일입니다. (참조)

npm install (모듈명) 명령어는 모듈을 설치하는 명령어입니다.

express

express는 Node.js 웹 프레임워크, 쉽게 말해 Node.js 기반의 웹 서버를 만들어주는 모듈입니다.

1
2
3
4
5
6
7
8
9
10
11

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello, World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

1
2

>node index.js
Example app listening on port 3000

위의 코드는 express 모듈을 활용해 로컬 서버를 여는 예시 코드입니다. index.js를 동일하게 입력하시고 터미널을 통해 실행해 주시면 다음과 같이 Example app listening on port 3000 이라는 문구가 나오게 됩니다. 실제로 웹 브라우저에서 localhost:3000을 주소창에 입력하시면 다음과 같이 로컬 서버가 열려 있는 것을 확인하실 수 있습니다.

localhost

다음은 express 모듈을 통해 로또 번호를 자동으로 생성해주는 API를 만들어 보겠습니다.

로또 번호 생성 API

로또는 1부터 45의 숫자 중 숫자 6개와 보너스 숫자 1개를 뽑아 얼마나 많은 숫자를 맞췄는지에 따라 상금을 받는 게임입니다. 로또를 구매하는 사람은 총 6개의 번호를 선택할 수 있습니다. 이번 포스트에서는 자동으로 로또 번호 6개를 생성해주는 로또 번호 생성 API를 만들어 보겠습니다.

로또 번호 생성(JavaScript)

로또 번호 생성 API를 만들기 위해서는 우선 JavaScript로 1부터 45의 숫자 중 무작위하게 숫자 6개를 뽑아주는 코드가 필요합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function range(start, end) {
    return Array(end - start + 1).fill().map((_, idx) => start + idx)
}

var num_list = range(1, 45)
var lotto_list = []

for (let i = 0; i < 6; i++) {
    var index = Math.floor(Math.random() * num_list.length)
    var number = num_list.splice(index, 1)
    lotto_list.push(number[0])
}

lotto_list.sort(function(a, b) {
    return a - b
})

위의 코드를 한 줄씩 살펴보겠습니다.

1~3번째 줄은 start부터 end까지의 정수 Array를 반환해주는 함수입니다.

5번째 줄을 통해 1부터 45까지의 정수 Array num_list를 생성하였고, 6번째 줄을 통해 무작위하게 뽑은 숫자 6개를 담을 빈 Array를 생성하였습니다.

8~12번째 줄은 for문을 통해 숫자 6개를 무작위하게 뽑는 코드입니다.

14~16번째 줄은 6개의 숫자가 담긴 Array lotto_list를 오름차순으로 정렬하는 코드입니다.

다음은 위 코드와 express 모듈을 이용하여 무작위하게 뽑은 로또 번호를 json 형식으로 응답하는 API를 만들어 보겠습니다.

로또 번호 생성 API 제작 및 배포

1

>npm install cors

로또 번호 생성 API를 만들기 위해서는 우선 cors 모듈이 필요합니다. cors는 Cross-Origin Resource Sharing의 약자로 cors 모듈을 통해 API가 배포된 서버 도메인뿐만 아니라 어느 도메인에서나 API를 통해 로또 번호를 요청할 수 있게 허용해 줍니다.

cors 모듈까지 설치가 완료되었다면 API를 배포할 준비는 끝났습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

const express = require('express')
var cors = require('cors')
const app = express()
const port = 3000

function range(start, end) {
    return Array(end - start + 1).fill().map((_, idx) => start + idx)
}

app.use(cors())

app.get('/lotto', (req, res) => {
    var num_list = range(1, 45)
    var lotto_list = []
    
    for (let i = 0; i < 6; i++) {
        var index = Math.floor(Math.random() * num_list.length)
        var number = num_list.splice(index, 1)
        lotto_list.push(number[0])
    }
    
    lotto_list.sort(function(a, b) {
        return a - b
    })

    res.json({'number': lotto_list})
})

app.listen(port)

위 코드는 GET 방식으로 서버 URL에 /lotto를 추가하여 입력하면 요청이 들어올 때마다 무작위하게 1부터 45 중 6개의 숫자를 뽑아 Array에 저장한 뒤 {'number': lotto_list}와 같이 json 형식으로 응답해주는 API입니다.

다음은 로또 번호 생성 API를 실제로 배포하는 과정을 알려드리겠습니다. API 배포는 클라우드타입을 통해 진행했습니다.

  1. GitHub에 새로운 저장소를 만든다.
  2. 만들어진 GitHub 저장소에 index.js, package-lock.json, package.json을 업로드하고 변경 사항을 저장한다.
  3. 클라우드타입에 GitHub 계정을 연동하여 로그인한다.
  4. Node.js 템플릿으로 시작하기 아이콘을 누르고 위에 만들어 준 저장소와 연결시킨다.
  5. 빌드 설정에 설정변경 버튼을 누르고 Start Command 입력란에 node index.js를 입력한다.
  6. 배포하기를 누른다.

실제 배포된 API: https://port-0-lotto-api-3q0b1b25l8rp38xw.gksl1.cloudtype.app/lotto

로또 번호 생성 API 응용

마지막으로 로또 번호 생성 API와 HTML, CSS, JavaScript를 활용하여 버튼을 누르면 API에서 응답한 6개의 숫자를 보여주는 코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로또 번호 생성 API 응용</title>
    <link rel="stylesheet" href="lotto.css">
</head>
<body>
    <button onclick="lotto()">로또 번호 생성</button>
    <div>
        <div class="lotto" id="number1">
        </div>
        <div class="lotto" id="number2">
        </div>
        <div class="lotto" id="number3">
        </div>
        <div class="lotto" id="number4">
        </div>
        <div class="lotto" id="number5">
        </div>
        <div class="lotto" id="number6">
        </div>
    </div>

    <script src="lotto.js"></script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

.lotto {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    color: #ffffff;
    text-shadow: 0px 0px 3px rgba(73, 57, 0, .8);
    margin-right: 10px;
    margin-top: 10px;
}   

.one {
    width: 40px;
    height: 40px;
    font-size: 28px;
    border-radius: 100%;
    background-color: #FFE9A0;
}
  
.ten {
    width: 40px;
    height: 40px;
    font-size: 28px;
    border-radius: 100%;
    background-color: blue;
}
  
.twenty {
    width: 40px;
    height: 40px;
    font-size: 28px;
    border-radius: 100%;
    background-color: red;
}

.thirty {
    width: 40px;
    height: 40px;
    font-size: 28px;
    border-radius: 100%;
    background-color: gray;
}
  
.fourty {
    width: 40px;
    height: 40px;
    font-size: 28px;
    border-radius: 100%;
    background-color: green;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function lotto() {
    fetch('https://port-0-lotto-api-3q0b1b25l8rp38xw.gksl1.cloudtype.app/lotto')
        .then((response) => response.json())
        .then((data) => {
        for (let i = 1; i < 7; i++) {
        var str = "number" + i;
        var number = document.getElementById(str)
        if (data['number'][i-1] >= 40) {
            number.innerHTML = "<div class='fourty'>" + data['number'][i-1] + "</div>"
        } else if (data['number'][i-1] >= 30) {
            number.innerHTML = "<div class='thirty'>" + data['number'][i-1] + "</div>"
        } else if (data['number'][i-1] >= 20) {
            number.innerHTML = "<div class='twenty'>" + data['number'][i-1] + "</div>"
        } else if (data['number'][i-1] >= 10) {
            number.innerHTML = "<div class='ten'>" + data['number'][i-1] + "</div>"
        } else {
            number.innerHTML = "<div class='one'>" + data['number'][i-1] + "</div>"
        }
        }
    });
}

See the Pen Lotto API by Younggyu Bok (@duckbankbok) on CodePen.

긴 글 읽어주셔서 항상 감사합니다 :)

p.s. 본 포스팅에서 배포한 API 서버와 연결이 불안정하여 위의 예시는 API 연결이 원활하지 않을 시, JavaScript를 이용하여 로또 번호를 생성해주는 코드입니다. 본 포스팅과 예시 코드를 따라하시면 쉽게 로또 번호 생성 API를 만들고 배포하실 수 있으실 겁니다 :)

조코딩, 웹개발 5주 완성
조코딩 웹개발 5주 완성 4주차 리뷰 node.js 로또 번호 생성 api
This post is licensed under CC BY 4.0 by the author.
Recently Updated
Contents

깃허브(GitHub) 블로그 구글 애드센스 승인 후기

조코딩 웹개발 5주 완성 5주차 리뷰_CRUD, DB(SQLite)를 이용한 댓글창 만들기