[React] 로또 당첨 번호 API 사용하여 Get API 만들기, 화면 호출하기 - 로또 번호 랜덤 생성 사이트 만들어 보기 7편

로또 당첨 번호를 조회하는 API를 사용하여 Get Api를 만들어 보겠습니다.

우선 로또 당첨 번호 API를 알아보고 node.js를 사용하여 Api를 만들어 보겠습니다.

1. 로또 당첨 번호 API

 

나눔 로또에서 제공하는 로또 당첨 번호 API가 있습니다.

https://www.dhlottery.co.kr/common.do?method=getLottoNumber&drwNo=903

회차당 당첨 번호를 가져오는 API입니다.

drwNo에 원하는 회차 번호로 API를 호출하면 그 회차의 당첨 번호를 가져올 수 있습니다.

 

API를 호출하면 아래 응답 결과를 받을 수 있습니다.

{
  "totSellamnt": 96962255000,
  "returnValue": "success",
  "drwNoDate": "2020-01-25",
  "firstWinamnt": 1928079219,
  "drwtNo6": 41,
  "drwtNo4": 38,
  "firstPrzwnerCo": 12,
  "drwtNo5": 39,
  "bnusNo": 23,
  "firstAccumamnt": 23136950628,
  "drwNo": 895,
  "drwtNo2": 26,
  "drwtNo3": 31,
  "drwtNo1": 16
}

drwtNo1~6 : 당첨 번호 순서

bnunNo : 보너스 당첨 번호

drwNo : 회차 번호

drwNoDate : 추첨 날짜

 

2. 로또 당첨 번호 Get API 만들기

로또 당첨 번호를 사용하여 Client에서 사용할 수 있는 Get API를 만들어 보겠습니다.

한 가지 의문으로 "왜 직접 나눔 로또 API를 사용하지 않을까?" 생각할 수 도 있습니다.

 

직접 사용하지 않는 이유는 CORS 이슈 때문입니다.

Cross Origin Resource Sharing의 약자로 도메인 및 포트가 다른 서버로 클라이언트가 요청했을 때 브라우저가 보안상의 이유로 API를 차단합니다. 이때 서버에서 CORS 응답을 허용하면 가능하지만 공개된 로또 API는 CORS를 허용하지 않습니다. 그렇기 때문에 API를 새로 만드는 이유입니다.

 

Node.js를 사용하여 API를 만들어보겠습니다.

아래 포스팅으로 Node.js를 세팅해주세요

 

https://firework-ham.tistory.com/21

[node] Express 프로젝트 생성, Get Api 만들기

아래 내용은 Express 프로젝트 생성 후 진행하셔야 합니다.

 

node.js에서 외부 API를 호출하기 위해 request 모듈을 활용하겠습니다.

먼저 request 모듈을 설치해주세요.

npm install request moment

index.js에 reuqest를 활용하여 API를 호출하는 lotto API를 생성하겠습니다.

index.js를 아래와 같이 수정해주세요.

 

index.js

const express = require('express');
const router = express.Router();
const request = require('request');
const moment = require("moment");

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

router.get('/lottos/last', (req, res) => {

  let week = getWeek();

  request.get({uri:"https://www.dhlottery.co.kr/common.do?method=getLottoNumber&drwNo="+week, strictSSL: false}, 
 (error, response, body) => {
    console.log(error);
    res.json(JSON.parse(body));
  });

});

router.get('/lottos/:id', (req, res) => {
  request.get({uri:"https://www.dhlottery.co.kr/common.do?method=getLottoNumber&drwNo="+req.params.id, strictSSL: false}, 
  (error, response, body) => {
    res.json(JSON.parse(body));
  });
})

router.get('/documents/:id', (req,res) => {
  res.json({id: req.params.id});
});

getWeek = () => {
  const t1 = moment('20021207');
  const t2 = moment();
  const dff = moment.duration(t2.diff(t1)).asDays();
  return Math.floor(dff/7)+1;
}

module.exports = router;

request를 활용하면 간단히 다른 서버의 API를 호출할 수 있습니다.

위 함수를 추가하면 "/lottos/{회차번호}"로 API를 호출할 수 있습니다.

 

브라우저에서 테스트를 진행해보세요.

 

로컬의 React에서 호출하기 위해서는 Port 변경과 CORS를 허용해 주어야 합니다.

아래와 같이 진행해주세요.

 

bin/www에 포트를 변경합니다.

var port = normalizePort(process.env.PORT || '5000');

CORS를 해결하기 위해 cors를 설치하고 app.js에 아래 코드를 추가합니다.

npm install cors

var cors = require('cors');

app.use(cors());

위 코드를 추가한 후 서버를 실행해 node 서버가 정상적으로 실행되었는지 확인합니다.

 

npm start

 

3. LottoRandomHeader에 추가하기.

 

이제 LottoRandomHeader에서 API를 호출 보겠습니다.

React에서 API를 호출하기 위해서는 axios를 사용합니다.

 

axios를 사용하기 위해서 React 프로젝트 필드에서 다음을 실행하여 설치합니다.

yarn add axios

npm을 사용하신다면 아래 명령어를 실행하세요.

npm install axios

 

이제 LottoRandomHeader에서 아래와 같이 코드를 추가해주세요.

LottoRandomHeader.js

import React, {Component} from 'react';
import * as axios from 'axios';
import "./LottoRandomHeader.css";
import LottoBoxComponent from './lotto-box/LottoBoxComponent';

class LottoRandomHeader extends Component {

    state = {
        lottoNumber : [],
        drwNo : 0
    }

    componentDidMount(){
        axios.get('http://localhost:5000/lottos/last').then((res)=>{
            const data = res.data;
            if(data){
                const lottoNumber = [];
                lottoNumber.push(data.drwtNo1);
                lottoNumber.push(data.drwtNo2);
                lottoNumber.push(data.drwtNo3);
                lottoNumber.push(data.drwtNo4);
                lottoNumber.push(data.drwtNo5);
                lottoNumber.push(data.drwtNo6);
                lottoNumber.push(data.bnusNo);
                this.setState({lottoNumber, drwNo: data.drwNo});
            }
            
        })
    }

    render(){
        return(
            <div className="lotto-random-header">
                <div className="lotto-title">
                    로또 랜덤 번호 생성기
                </div>
            </div>
        );
    }
}
export default LottoRandomHeader;

코드를 수정하고 나면 크롬에서 개발자 모드로 볼 때 콘솔에 API가 출력되는 것을 확일 할 수 있습니다.

axios.get('http://localhost:5000/lottos/last').then((res)=>{
    const data = res.data;
    console.log(data);
    if(data){
        const lottoNumber = [];
        lottoNumber.push(data.drwtNo1);
        lottoNumber.push(data.drwtNo2);
        lottoNumber.push(data.drwtNo3);
        lottoNumber.push(data.drwtNo4);
        lottoNumber.push(data.drwtNo5);
        lottoNumber.push(data.drwtNo6);
        lottoNumber.push(data.bnusNo);
        this.setState({lottoNumber, drwNo: data.drwNo});
    }
})

axios로 api를 호출하여 응답을 받으면 data 필드에 body가 담겨 있습니다.

코드는 응답받은 res에서 data필드를 받아 data가 정상적으로 있을 때 state로 정의한 lottoNumber를 업데이트합니다.

 

이제 가져온 lottoNumber를 가지고 Header에 표시해주겠습니다.

로또 번호는 이전에 Contents에 사용했던 LottoBoxComponent를 재활용 하겠습니다.

 

render(){
    return(
        <div className="lotto-random-header">
            <div className="lotto-title">
                로또 랜덤 번호 생성기
                <span>{this.state.drwNo}</span>
            </div>
            <div>
                <LottoBoxComponent
                    lottoNumber={this.state.lottoNumber}
                />
            </div>
        </div>
    );
}

위와 같이 LottoBoxComponent를 사용하면 화면이 깨지게 됩니다.

LottoRandomHeader.css에 아래 내용으로 업데이트 합니다.

 

LottoRandomHeader.css

.lotto-random-header{
    margin-top: 50px;
    width: 100%;
    height: 100px;
    border: 1px solid #aeaeae;
    display: flex;
}

.lotto-title{
    width: 300px;
    font-size: 30px;
    padding-top: 10px;
    padding-left: 10px;
}

이제 화면을 로딩하게 되면 로또 당첨 번호를 API 호출하여 표시하게 됩니다.

이렇게 처음 계획 했던 로또 번호 랜덤 생성 사이트 제작이 마무리 되었습니다.

처음 SPA를 접해보신 분들이라면 이해하는데 어려움이 있었을 것 같습니다.

 

React에는 여러 기능이 있기 때문에 더 깊게 공부해보시는건 어떨까요? ㅎㅎ

재밌는 React로 로또 번호 랜덤 사이트 만들어 보기 강의 였습니다.!

 

이상! 끝!

 

전체 소스 코드는 아래 git에서 확인 가능합니다.

https://github.com/voguebloom1/lotto-random

 

React로 로또 번호 랜덤 사이트 만들어 보기 강의 목록

1편 -  [React] React 프로젝트 생성하기

2편 - [React] UI 디자인 툴 - 카카오 오븐 사용하여 사이트 디자인해보기

3편 - [React] React Component 분리 및 생성 하기

4편 - [React] state와 componentDidMount 활용 페이지 만들어보기

5편 - [React] props 하위 Component 값 전달하기 

6편 - [React] Javascript 로또 번호 생성 알고리즘

7편 - [React] 로또 당첨 번호 API 사용하여 Get API 만들기, 화면 호출하기