부트캠프 - precamp 4일차 : 끝말잇기, 로또, 쥬크박스

싸이월드 4일차 숙제 - 쥬크박스 만들기

 하나도 몰랐는데... 이젠 display, flex-direction, justify-contents, align-items 거의 생각없이 쓸 수 있게 되었다. 쥬크박스 만드는 게 블럭이 많아서 처음에 펜 없이 하려니까 너무 불편했는데 그거 하니까 술술됐다. 너무 재밌다...! 계속 이러면 좋을텐데 헤헤. 아 노트랑 펜을 들고다녀야겠다. 아무래도 쓰면서 하는 게 더 생각이 잘 돼.

 쥬크박스 진짜 노래 나오게 하고 싶은데 오늘은 할 힘이 없다...핳하핳 너무 시간이 늦어버렸어. 

따라하면서 내가 바꿀 수 있는 부분은 바꾸면서 하는 게 너무 재밌다! 근데 변수 이름 생각하는 거랑 어떤 걸로 할지 생각하는 시간이 더 걸리는 것 같다ㅎㅎㅎ

수업 사이 틈틈이 이것저것 해보면서 로또기능이랑 끝말잇기 기능도 만들었다! 아쉬운건 오늘 사정상 10분 정도 일찍 나와서 뒤에 끝말잇기 기능 어떻게 만드시는지랑 비교를 못 해본 것ㅠㅠ내일 코드보고 비교해봐야겠다. 

1) 로또 만들 때 있었던 문제

숫자 랜덤으로 촤촤촤 잘 뽑는데 1~45만 나오게 하고 싶었다. 그래서 0이면 +1하고 46이상이면 -45를 했는데(???) 그래서 당연히 46이상 수도 나옴. 99-45만해도 55니까... 그럼 어떡하지!하다가 나머지 연산으로 하기로 함

나머지 연산으로 1~45 뽑기 완료. 근데 이걸 어떻게 중복이 안되게 뽑지? 결국 스왑 또 씀

난수 두 개를 생성해서 그 둘을 계속 스왑(난수도 계속 변하고) 해서 섞어준후 0~5번 인덱스 차례로 뽑아서 넣으면 된다>_< 뿌듯

2) 끝말잇기 만들 때 있었던 문제

function chain() {
  

    let first__word = document.getElementById("first__word").innerText
    let first__index = first__word.length - 1
    let first__end = first__word[first__index]

    let re__word = document.getElementById("re__word").value //여기는 innerText로 하면 안나와!
    console.log(re__word)
    let re__first = re__word[0]

    if(first__end === re__first) {
        console.log(first__end)
        console.log(re__first)
        console.log(first__end === re__first)
        document.getElementById("word__result").innerText = "대단해요!😊🤗"
    }
    else {
        console.log(first__end)
        console.log(re__first)
        console.log(first__end === re__first)

        document.getElementById("word__result").innerText = "다시 해봐요😙"
    }
}

언제 innerText를 쓰고 언제 value를 쓰는지에 관한 것이었다. 

내가 입력한 값을 가져오는 건 value를 가져와야 하는데 innerText로 가져와서 계속 값이 안나왔었다. 

중간중간 console.log 있는 건 디버깅 해보느라고 있는 것! 디버깅 하면서 잡을 수 있었다. 디버깅을 이렇게 하다니 낯설고 좀 불편하지만 익숙해져야겠지...! 

---

오늘은 개발자가 어떤 일로 갈 수 있는지... 그런 걸 배우고 함수 수업함!

↓오늘은 너무 피곤해서 노션 적었던 것 복붙으로 대체 

CPO는 BM을 만들 수 있어야 한다.

---

함수, 내장함수

function 함수이름(매개변수) {

}

입력값과 출력값은 Optional(데이터 반환)

매개변수가 주어지지 않아도 작동, return 하는 게 없어도 작동

number[i] = i + 1 을 0부터 44까지 ( i < 45 )

차근차근 넣어놓고

데이터 집어넣었을 때

log → 결과가 나오지 않고 log로 빼버림

return → 결과값이 나옴

데이터 가공, 가공, 가공...하려면 반드시 return을 이용해야 한다.

function greetingStudents(arr) {
    for(let i = 0; i < arr.length; ++i) {
        console.log(`${arr[i]} 사랑해`)
    }
}

`(백틱) : ex) __님은 __입니다. 표현할 때, 변수와 string이 혼재되어 있는 상태로 쓸 수 있음

---

함수 선언식, 함수 표현식, 화살표 함수

함수 표현식

const hello = function(name) { }

익명함수를 만들어서 할당해주는 것

호이스팅 - 자바스크립트의 특징 중 하나

var, 선언식으로 되어있는 것 최상단으로 끌어올린다. 그렇게 코드를 읽음

그래서 var, 선언식 이용 안 하고 let, const, 표현식, 화살표로 대체해서 씀

영향을 받긴 하는데 실제로 코드가 작동할 때 문제를 일으키진 않는다.

화살표 함수(가장 많이 쓰임)

const hello = (name) ⇒ { }

const 함수이름 = (매개변수) ⇒ { }

익명함수를 할당하는 거기 때문에 = ()

⇒가 function 키워드를 대체한다. 웃는게 화살표 함수!

---

a + b → ab ...

애초에 a랑 b가 왜 문자열로 가져와지는거야?

강제로 형변환 시키기 number가 아니라 Number였습니다...

누를 때마다 값이 바뀌어 - 함수의 특징!

임의의 숫자를 할당한 채로 그대로 그 변수를 계속 호출했었는데, 함수를 이용하면 버튼을 누를 때마다 함수가 실행된다.

---

const send = () => {
    let token = String(Math.floor(Math.random()*1000000)).padStart(6, "0")
    document.getElementById("token").innerText = token
}

화살표 함수

익명함수가 뭐지?

value랑 innerText

---

setTimeout(func, time)

setInterval(func, time)

func - 보통 익명 함수가 들어감

ms 단위로 입력. time 지난 후 / 마다 함수 실행

초가 아니라 밀리세컨드... 1초 = 1000ms

setTimeout(function() { console.log("3초가 지났습니다.")},3000)
113
//VM1904:1 3초가 지났습니다.
setInterval(function() { console.log("뽀") },1000)
180
//48VM2056:1 뽀

그럼 log는 안 찍히지만 10초마다 함수를 호출하는 작업은 계속 반복되고 있는 게 아닌가? 궁금 ...

time 에 180을 저장

3분 = 180초

2분 59초 = 179초

시간/60했을 때의 몫 : 나머지

console.log 하고 페이지에서 f12 누른 후 눌러보는 것

setInterval( ()⇒ {

} , 1000) - 익명함수를 이렇게 쓸 수 있다.

let isStarted = false;

const send = () => {
   if(isStarted === false) {
    document.getElementById("button__done").disabled = false
       isStarted = true
        let token = String(Math.floor(Math.random()*1000000)).padStart(6, "0")
        document.getElementById("token").innerText = token

        let time = 5
        let timer = null
            timer = setInterval(function() {
                if (time >= 0) {
                    let min = String(Math.floor(time/60)).padStart(2, "0")
                    let sec = String(time % 60).padStart(2,"0")
                
                    document.getElementById("timer").innerText = min + ":" + sec
                    time -= 1
                }

                else {
                document.getElementById("button__done").disabled = "true"
                isStarted = false
                clearInterval(timer)
                }
            }, 1000)
            
            // if ( time <= 0) {
            //     document.getElementById("button__done").disabled = "disabled"
            // }
   }
    
}

timer에 setInterval 담았다가 clearInterval 하면 이전상태!인 null로 다시 돌아감

span이 뭘까!

 

궁금한 것

span 뜻, div 뜻, 익명함수 뜻, value를 가져오는데 왜 문자열로 가져와지는가???