[블록체인] network.js (callback)

간단한 통신에 대한 내용

ws.on 은 addEventListener 랑 비슷하다고 볼 수 있다.

document.addEventListener('click',()=>{
// document에 click 이벤트 등록
// 코드가 계~~~속 실행되어야 한다. 그래야 이벤트가 발생했을 때 알 수 있기 때문
})

ws.on('message',()=>{
// on 역시 이벤트 등록을 위해 썼다고 생각하면 될듯

})

상위 객체에서 매서드를 실행하고 스트링으로 뭔가 들어가고 두번째 인자값이 콜백함수

 

---

 

callback 함수

let callback = (a,b) => {
    console.log(a,b)
}

callback(1,2)

a=1, b=2
가 찍힌다.

---

 

이 상태에서 setInterval 을 써보자

et callback = (a,b) => {
    // 1번째 인자값 : 함수, 2번째 인자값 : 실행시간
    setInterval(a,b)
}

callback(()=>{console.log('hello')},1000)
// 1초마다 hello 를 찍게 된다.

---

여기서 더 나아가서 3번째 인자값 (객체)까지 넣어보자

callback(()=>{console.log('hello')},1000,{type : 'click', data : null})

let callback = (a,b,c) => {
    if(c.type == 'click'){
        setInterval(a,b)
    }
}

type 이 click 일때만 setInterval 이 돌게 되어 그 때만 console.log 가 찍힌다.

---

 

let callback = (number, cb) => {
    setTimeout(()=>{
        let sum = 0;
        for(let i=0; i<number; i++){
            sum += i
        } 
        cb(sum)
    },1000)
    // 1초동안 기다렸다가
}

callback(10,(s)=>{
    console.log(s);
})

 

callback이라는 함수를 실행했을 때 number 라는 변수와 cb 라는 함수를 받는다.
두 가지 인자값을 받고 실행이 되면 setTimeout(비동기) 이 돈다

---

let callback = (number, cb) => {
    setTimeout(()=>{
        let sum = 0;
        for(let i=0; i<number; i++){
            sum += i
        } 
        cb(sum)
    },1000)
    // 1초동안 기다렸다가
}

console.log('hello');
callback(10,(s)=>{
    console.log(s);
})
console.log('bye');

 

--결과물---
hello
bye
45      // 1초동안 기다렸다가 - 다른 선로에 잠깐 빼놓는다고 생각하면 된다.

순서가 1,3,2 이렇게 찍힌다.

이게 비동기 코드이다. - setTimeout

1000 1초 아니고 0초라고 줘도 똑같이 옆으로 빠짐
setTimeout, setInterval 은 다른 처리를 해주는 곳으로 공간을 빼줌

---

let result = 0;
let callback = (number, cb) => {
    setTimeout(()=>{
        let sum = 0;
        for(let i=0; i<number; i++){
            sum += i
        } 
        cb(sum)
        result = sum
    },1000)
    // 1초동안 기다렸다가
}
// 얘가 다른 곳을 빠짐 - 그래서 result 라는 변수에 아무것도 못채우고 지나감
callback(10,(s)=>{
    console.log('callback : ',s);
})
console.log('변수 : ',result);

그럼 result 는 어케 쓰냐고??

---

 

let result = 0;
let callback = (number, cb) => {
    setTimeout(()=>{
        let sum = 0;
        for(let i=0; i<number; i++){
            sum += i
        } 
        cb(sum)
        result = sum
    },1000)
    // 1초동안 기다렸다가
}
// 사용을 해야 한다. hello(), 내용에 인자값을 넣어줘야 한다 hello(10) 이렇게.
function hello(num){
    console.log(`num : ${num}`);
}
callback(10,hello)  // 함수 실행이 아니라 함수 자체를 넣어버림

 

---

---

함수나 변수를 저장하는 공간
# heep

 

호출되는 시점에서만 실행을 하는것. 그게 callback
callback 을 사용하면 웬만하면 그 코드는 비동기..

예) server.js
app.get('/',()=>{})
혹은
app.get('/',hello)
function hello(){}
이벤트에 대한 스트링값, 함수 를 넣어준다.

---------------

다시 addEventListener 로 넘어오자면

<button id="btn">버튼</button>
<script>
    let bt= document.querySelector('#btn')
    bt.addEventListener('click',()=>{
        alert('hello')  // 이것도 따지고 보면 비동기라는 것. click 이라는게 들어왔을때 alert 를 띄운다
    })