평생 근로소득으로 살 사람의 로또 코딩
오늘은 국비 수업 9일차! JS 내장 함수들을 다양하게 접해보았다.
배열 관련 함수와 BOM 함수들을 소개해주시고, 저번 시간에 만들었던 주민번호 유효성 검사 코딩을 한번 더 정리&개선하는 시간도 가졌다.
if문 2개로 분기점을 만들어서 처리했던 코드를 배열하나로 합쳐서 처리하니까 코드가 더 간결해지는 점에 감탄! 쌤...! 선생님에 '님'이 괜히 붙는 직업이 아니죠 그쵸...! ㅠㅠㅠㅠ👍
개선된 코드는 저번 포스팅에 덧붙여서 정리하기로.
예전 수업에서 JS+HTMl 로 테이블에 로또 번호 출력하는 코드를 짰었는데, 오늘의 과제로 이 로또 번호에서 set() 을 이용하여 중복 숫자를 제거하는 과제를 내주셨다.
불로소득에 대한 운은 정말 없어서... (코인도 주식도 복권도.....) 평생 근로소득에 기대어 노력할 수 밖에 없는 사람이 로또 코딩을 짜면서 한 생각은......
'내가 짠 코드로 나온 번호가 로또 당첨되면 그건 근로소득 아닐까?'
'그럼 불로소득 운이랑은 관계가 없지 않을까?'
ㅎㅎ 그만~큼 즐기고 계신다는거지~~~
로또번호 (5천원치) 출력하기 : ver.혜자
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/CSS">
table {
border: 2px solid black;
border-collapse: collapse;
width: 700px;
height: 700px;
}
td {
border: 2px solid black;
width: 100px;
text-align: center;
}
</style>
<script type="text/javascript">
const makeLotto = () => {
const lottoArr = new Set();
while (lottoArr.size != 7) {
const lottoNum = parseInt((Math.random() * 45 + 1));
lottoArr.add(lottoNum);
}
return [...lottoArr];
};
</script>
</head>
<body>
<script type="text/javascript">
let html = '<table>';
const lotto = [];
for (let hang = 1; hang < 6; hang++) {
let lottoCount = hang-1;
lotto[lottoCount] = makeLotto();
html += '<tr>';
for (let yul = 1; yul < 8; yul++) {
let oneLottoNum = yul-1;
if (yul == 1){
html += `<td>${hang} 회</td>`;
} else {
html += `<td>${lotto[lottoCount][oneLottoNum]}</td>`;
}
}
html += '</tr>';
}
html += '</table>';
document.write(html);
</script>
</body>
</html>
우선, 나는 확실히 JS+HTML이 아직 어렵다. 멀리에 확확 와닿지가 않는다!!!!! ㅠㅠ
따로 따로 배울때 이해했다고 생각한 부분들이, 짬뽕되는 순간 버버벅 걸린다. 어릴때부터 철권 할 적부터... 응용 기술에 약했지... 그대로 자라주었구나.
익숙하지 않은건 반복적으로 쓰다보면 나아지겠쥐~ 코딩도 결국 언어니까!
해결 과정은 :
set()으로 중복없는 배열 생성 함수를 만들고- 배열의 index와 각 열을 대입해서 숫자 하나씩 불러오기
생각은 이렇게 했으나... 처음에 makeLotto()메서드를 만들때 너무 당연하게 for문을 써서 해결할 생각만 했더니 문제가 생겼다. set()이 중복된 숫자를 제거해주는 것 까진 좋은데, 제거하고나면 내가 의도했던 length 7짜리 배열이 아니라, 제거된 갯수만큼 배열이 짧아지는 것.
중복 될 경우 증감자를 다시 i-- 해주면 무한루프에 빠져버리고... 내 뇌도 정지해버리고...
끙끙거리고 있다가, 풍마가 던져준 while을 이용해봐~~ 에 깨닳음을 얻어 해결!
반복문을 만들어야겠다 생각하면 너무 당연하게 for문만 생각하는 점을 주의해야겠다. 편애는 건강하지 않으아~~~
아무튼 어떻게 해결은 했는데, 아무리 생각해도 테이블 생성쪽 코드를 더 간결하게 표현할 방법을 찾지 못한채.. 풍마에게 gg를 쳤다.
로또번호 (5천원치) 출력하기 : ver.풍마
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/CSS">
table {
border: 2px solid black;
border-collapse: collapse;
width: 700px;
height: 700px;
}
td {
border: 2px solid black;
width: 100px;
text-align: center;
}
</style>
<script type="text/javascript">
const makeLotto = () => {
const lottoArr = new Set();
while (lottoArr.size != 7) {
const lottoNum = parseInt((Math.random() * 45 + 1));
lottoArr.add(lottoNum);
}
return [...lottoArr];
};
</script>
</head>
<body>
<script type="text/javascript">
let html = '<table>';
[0, 1, 2, 3, 4].forEach((el, index) => {
html += `<tr><td>${index + 1} 회</td>`;
const rowLottoValues = makeLotto();
rowLottoValues.forEach(lotto => html += `<td>${lotto}</td>`);
html += '</tr>';
});
html += '</table>';
document.write(html);
</script>
</body>
</html><System> 풍마(은)는 forEach()(을)를 사용해서 코드 길이를 줄였다! 효과는 굉장했다!
아직 for in,for of,forEach의 차이점을 공부해두지 못했는데, 확실히 내장함수에 대한 이해도가 높을 수록 더 깔끔한 코드를 짤 수 있는건가...? 중구난방 난무했던 나의 for가... 이렇게 귀여울리 없어!
어쨋든 오늘의 공부도 이렇게 끝~~!
내일부터는 주말이니까 복습할 내용이 산더미지만~ 밀린 일상생활들도 한더미지요!
더디더라도 나라는 성장주 우상향 가즈아~!!!!
