5 vue 스타일 가이드

<!-- LottoGenerator.vue -->
<template>
    <div>
        <div>당첨 숫자</div>
        <div id="result">
            <lotto-ball v-for="ball in winBalls" :key="ball" :number="ball"></lotto-ball>
        </div>
        <div>보너스</div>
        <lotto-ball v-if="bonus"></lotto-ball>
        <button v-if="redo" type="button" @click="onClickRedo">한번 더!</button>
    </div>
</template>

<script>
import LottoBall from './LottoBall';
    
function getWinNumbers() {
    const candidate = Array(45).fill().map((v, i) => i + 1); // [1, 2, 3, 4, 5, ..., 45]
    const shuffle = [];
    while (candidate.length > 0) {
        shuffle.push(candidate.splice(Math.floor(Math.random() * candidate.length), 1)[0]);
    }
    // shuffle에 1~45가 무작위 순서로 들어가게된다.
    const bonusNumber = shuffle[shuffle.length - 1]; // shuffle 배열의 맨 마지막 요소
    const winNumbers = shuffle.slice(0, 6).sort((p, c) => p - c); // shuffle 배열의 0 ~ 6 요소를 winNumbers에 오름차순으로 넣음
    return [...winNumbers, bonusNumber];
}
    
const timeouts = [];

export default {
    name: 'LottoGenerator',
    components: {
        LottoBall, // 파스칼 케이스(맨 첫글자도 대문자) -> 이를 자동으로 뷰가 케밥케이스로 바꿔줌
    },
    data() {
        return {
            winNumbers: getWinNumbers(), // 처음 7개 숫자를 모두 뽑아서 winNumbers에 저장
            winBalls: [], // 시각적인 재미를 위해 1초마다 winNumbers에 있는 숫자를 하나씩 winBalls에 넣음
            bonus: null,
            redo: false,
        }
    },
    watch: {
        // 특정 data를 감시
        // 아래와 같은 식으로 작성할거면 배열, 객체말고 원시값(primitive value)을 감시하는걸로 작성하는게 좋을듯
        // 어 근데 deep: true라는 옵션값 있잖아?
        // 그런데 제일 좋은건 최대한 watch는 사용하지말자
        // watch가 자꾸 지속되면 문제가 발생한다. watch를 잘못쓰면 무한반복되는 문제가 발생한다.
        // watch를 남용하면 프로그램이 고장날 수 있다.
        // 그리고 watch는 비동기로 실행되기 때문에 뭐가 뭐를 바꾸는지 그 순서가 헷갈려진다.
        // 남용하게 되면 순서 파악도 애매해지고 무한 반복될 가능성도 있고 그러면 프로그램이 망가진다.
        // winBalls(value, oldValue) {
        //     console.log(value, oldValue); // oldValue는 바뀌기 이전 값, 그런데 객체나 배열같은 참조형 데이터라면 value랑 oldValue가 같은 값이 찍힐 것이다.
        //     if (value.length === 0) {
        //         this.showBalls();
        //     }
        // },
    },
    mounted() {
        this.showBalls();
    },
    beforeDestroy() {
        timeouts.forEach((t) =>  {
            clearTimeout(t);
        })
    },
    methods: {
        onClickRedo() {
            this.winNumbers = getWinNumbers();
            this.winBalls = [];
            this.bonus = null;
            this.redo = false;
            this.showBalls();
        },
        showBalls() {
            // winNumbers 7개
            // let i = 0; i < 6; i++ // 0, 1, 2, 3, 4, 5
            for (let i = 0; i < this.winNumbers.length - 1; i++) {
                timeouts[i] = setTimeout(() => {
                    this.winBalls.push(this.winNumbers[i]);
                }, (i + 1) * 1000);
            }
            timeouts[6] = setTimeout(() => {
                this.bonus = this.winNumbers[6];
                this.redo = true;
            }, 7000);
        }
    }
}
</script>

<style>
    
</style>

<!-- LottoBall.vue -->
<template>
    <div class="ball" :style="styleObject">{{ number }}</div>
</template>

<script>
export default {
    name: 'LottoBall',
    props: {
        number: Number,
    },
    computed: {
        styleObject() {
            let background;
            if (this.number < 10) {
                background = 'red';
            } else if (this.number <= 20) {
                background = 'orange';
            } else if (this.number <= 30) {
                background = 'yellow';
            } else if (this.number <= 40) {
                background = 'blue';
            } else {
                background = 'green';
            }
            return {
                background,
            }
        }
    },
    watch: {
        
    },
}
</script>

<style scoped>
    .ball {
        display: inline-block;
        border: 1px solid black;
        border-radius: 20px;
    }
</style>