TIL 21.09.27 Javascript

🤷‍♂️ 삽질회고

 오늘 구현하려고 했던 것은 div 태그 안 span 태그로 감싸진 여러개의 단어에서 차례대로 불이 깜빡깜빡
 들어 왔다가 그 속도가 느려지면서 한 단어에 랜덤으로 머무는 기능을 구현하려고 하였지만. 자바스크립트
 에 대해 너무 무지한 나머지 원하는 기능을 원하는 방식으로 구현하지 못하였다. 하아...
 
 아래 화면은 7초 길이의 gif 파일인데 속도가 줄기는 주는데 뚝뚝 끊끼는 느낌을 받는다. 해당 부분을 해
 결하고 싶었지만 자바스크립트에 대한 개념이 없어 더이상 하는 것에는 무리가 있을 것 같아 지금까지 한 
 부분에 대해서 명확하게 정리해아 할 부분은 정리하고 넘어가고자 TIL을 적게 되었다.

아래코드는 위 기능을 구현하기 위해 작성한 javascript 파일이다. 

// html 파일에 있는 div의 개수 만큼 만들어 div의 index 값을 얻기 위해 만든 임시 리스트
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 41 ~ 50 사이의 랜덤한 수를 뽑는 함수
function rouletteNumber(40, 50){
    let RandVal = Math.floor(Math.random()*(max-min+1)) + min;
    return RandVal;
}

let count = -1;
let f_index;
let foodName = document.querySelectorAll(".food-elem");

/* 첫번째 인자로 함수를 받고 2번째 인자로 해당 함수가 몇초 후 실행 될 인자를 받아 latency 이후 함수를
   실행 시키는 함수 */
function delay(func, latency) {
    latency = latency * 100
    setTimeout(func, latency);
}

// html 파일의 특정 div의 class 'foo'를 추가했다가 일정 간격을 두고 'foo'를 제거하는 함수
function toggle() {
    count += 1
    let index = count % arr.length;
    foodName[index].classList.toggle('foo');
    if (count == f_index) {
        return;
    } else {
        setTimeout(()=> foodName[index].classList.toggle('foo'),180);
    }
}

 /* 40 ~ 50 사이의 숫자에서 나온 값까지 for문으로 순회하면서 delay 함수의 2번째 인자로 들어가는 latency의
    값을 계속해서 증가시킴으로써 함수 */ 

function paintFood() {
    let cnt = rouletteNumber();
  	f_index = cnt;
    for(let i = 0; i < cnt; i++) {
        let j = i;
        if (j >= 45) {
            j *=2;
        } else if (j >= 40) {
            j *= 2;
            delay(toggle, j);
        } else if (j >= 30) {
            j *= 2;
            delay(toggle, j);
        } else if (j >= 20) {
            j *= 1.7;
            delay(toggle, j);
        } else if (j >= 10) {
            j *= 1.5;
            delay(toggle, j);
        }
        else {
            j *= 1.3;
            delay(toggle, j);
        }
    }
};

// 새로고침시 paintFood 함수 실행
window.onload = function() {
    paintFood();
};

🔎 findings

 하드코딩은 지양하자. 하드 코딩을 할 경우 생각없이 코딩을 하기 때문에 논리적으로 조형물을 만들어야 할 때
삽질만 하게 된다. 늦더라도 개념을 확실하게 차곡차곡 쌓아서 조형물을 완성하는 것이 배우는 부분도 생기고 
튼튼한 조형물을 만들 수 있다.

😃 future

생각없는 코딩은 지양

설계도 부터 작성할 것

늦어도 개념을 확실히

아니면 건물 무너짐