로또 번호 생성기: 역대 로또 데이터를 기반으로 한 확률 높은 번호 생성기 만들기 (Next.js & MySQL)
2024. 12. 28. 07:59ㆍWeb
역대 로또 데이터를 활용해 번호 출현 빈도를 분석하고, 가중치 기반으로 확률 높은 로또 번호를 생성하는 방법을 소개합니다. Next.js와 MySQL로 구현한 로또 번호 생성기 프로젝트로 효율적인 번호 추천
1. 소개
로또를 구매할 때마다 "이번엔 당첨될까?"라는 기대를 하곤 합니다. 이런 기대를 바탕으로, 이번 포스팅에서는 역대 로또 데이터를 기반으로 번호 출현 빈도를 분석하고, 확률 높은 번호를 추천하는 로또 번호 생성기를 만드는 방법을 소개합니다.
이 프로젝트는 Next.js와 MySQL을 활용하여 구현되었으며, 로또 번호 6개와 보너스 번호 1개를 생성하는 알고리즘을 포함합니다.
2. 주요 기능
- 역대 로또 데이터 분석: 데이터베이스에서 과거 당첨 번호를 가져와 번호 출현 빈도를 계산합니다.
- 가중치 기반 번호 생성: 출현 빈도를 활용해 번호에 가중치를 부여하여 확률 높은 번호를 추천합니다.
- 보너스 번호 생성: 기존 6개의 번호와 중복되지 않는 보너스 번호를 생성합니다.
3. 기술 스택
- Frontend: Next.js, React
- Backend: MySQL, API Routes (Next.js)
- Styling: 간단한 인라인 스타일
- 참고 : 역대 로또 데이터 수집 - link
4. 구현 코드
(1) API: 번호 생성 로직 (pages/api/generate-lotto.js)
import mysql from "mysql2/promise";
const dbConfig = {
host: "localhost",
user: "root",
password: "",
database: "lotto",
};
export default async function handler(req, res) {
try {
const connection = await mysql.createConnection(dbConfig);
// 로또 데이터 조회
const [rows] = await connection.execute(`
SELECT lotto_number_1, lotto_number_2, lotto_number_3,
lotto_number_4, lotto_number_5, lotto_number_6
FROM lotto_data
`);
// 데이터 유효성 검사
if (!rows || rows.length === 0) {
res.status(404).json({ error: "No lotto data found" });
await connection.end();
return;
}
// 번호 출현 빈도 계산
const numberCounts = Array(45).fill(0); // 1~45의 빈도 저장
rows.forEach((row) => {
for (let i = 1; i <= 6; i++) {
const number = row[`lotto_number_${i}`];
if (number) {
numberCounts[number - 1]++;
}
}
});
// 총 출현 빈도의 합
const totalFrequency = numberCounts.reduce((sum, count) => sum + count, 0);
// 번호별 가중치 계산 (빈도에 비례한 확률)
const weightedNumbers = numberCounts.map((count) => count / totalFrequency);
// 가중치 기반 랜덤 번호 생성 함수
const generateWeightedNumbers = () => {
const numbers = [];
while (numbers.length < 6) {
const rand = Math.random();
let cumulativeWeight = 0;
// 가중치 기반 번호 선택
for (let i = 0; i < 45; i++) {
cumulativeWeight += weightedNumbers[i];
if (rand < cumulativeWeight) {
if (!numbers.includes(i + 1)) {
// 중복 방지
numbers.push(i + 1);
}
break;
}
}
}
// 보너스 번호 생성 (기존 번호와 중복되지 않도록)
let bonusNumber;
while (true) {
const rand = Math.random();
let cumulativeWeight = 0;
for (let i = 0; i < 45; i++) {
cumulativeWeight += weightedNumbers[i];
if (rand < cumulativeWeight) {
bonusNumber = i + 1;
break;
}
}
if (!numbers.includes(bonusNumber)) {
break;
}
}
return { numbers: numbers.sort((a, b) => a - b), bonusNumber }; // 오름차순 정렬
};
const { numbers, bonusNumber } = generateWeightedNumbers();
res.status(200).json({ numbers, bonusNumber });
await connection.end();
} catch (error) {
console.error(error);
res.status(500).json({ error: "Failed to generate lotto numbers" });
}
}
(2) 프론트엔드: 번호 표시 (pages/index.js)
import { useState } from "react";
export default function Home() {
const [numbers, setNumbers] = useState([]);
const [bonusNumber, setBonusNumber] = useState(null);
const [error, setError] = useState(null);
const fetchLottoNumbers = async () => {
try {
setError(null); // 초기화
const response = await fetch("/api/generate-lotto");
if (!response.ok) {
throw new Error("Failed to fetch lotto numbers");
}
const data = await response.json();
setNumbers(data.numbers || []);
setBonusNumber(data.bonusNumber || null);
} catch (err) {
console.error(err);
setError("로또 번호를 가져오는 데 실패했습니다.");
}
};
return (
<div style={{ textAlign: "center", marginTop: "50px" }}>
<h1 style={{ fontSize: "2.5rem" }}>로또 번호 생성기</h1>
<button
onClick={fetchLottoNumbers}
style={{
marginTop: "20px",
padding: "10px 20px",
fontSize: "1rem",
cursor: "pointer",
borderRadius: "5px",
border: "1px solid #ccc",
background: "#0070f3",
color: "#fff",
}}
>
로또 번호 생성
</button>
{error && <p style={{ color: "red", marginTop: "20px" }}>{error}</p>}
{numbers.length > 0 && (
<div style={{ marginTop: "30px" }}>
<h2>생성된 번호:</h2>
<div
style={{
fontSize: "1.5rem",
fontWeight: "bold",
marginBottom: "10px",
}}
>
{numbers.join(", ") + " + " + bonusNumber}
</div>
</div>
)}
</div>
);
}
5. 결과 및 테스트
이제 브라우저에서 http://localhost:3000에 접속하여 "로또 번호 생성" 버튼을 클릭하면, 확률 높은 번호와 보너스 번호를 확인할 수 있습니다.
아래 이미지는 접속해서 확인한 이미지 입니다.
반응형
'Web' 카테고리의 다른 글
<img> 태그의 alt 속성 왜 넣어야 하나? (0) | 2022.12.01 |
---|---|
create-nuxt-app은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. (0) | 2022.11.09 |