[JavaScript, CSS] 콜백, 콜백지옥

1. 콜백함수

비동기 방식으로 작성된 함수를 동기 처리 하기 위해 주로 사용

비동기 처리를 기본적으로 하고 일부 구간에서 순차적인 처리가 필요할때 (API)

응답을 받은 다음에 처리해야 할때

 

(1)forEach

 //배열의 길이 만큼 돈다
 num.forEach(function(el,i){
     console.log(el);
     console.log(i);
 });

[1] 함수 전달

(1) 함수의 이름만 전달하는 방법

함수를 선언한 뒤에 함수 타입 파라미터를 맨 마지막으로 하나더 선언해준다.

 function myFun(test,callBack){
     //매개변수로 받은 text 보여줌
     console.log(test);
     //매개변수로 받은 콜백함수 사용
     callBack();
 }

 
 function callFun(){
    console.log("난 콜백");
    }

함수를 사용했고 첫번째 매개변수는 임의의 문자를 삽입

함수를 전달하는 부분은 우리가 함수를 사용할때 ()괄호를 붙이는데 ()괄호는 함수를 사용하겠다는 뜻이고,

콜백으로 함수를 전달할 때에는 ()괄호가 없이 함수의 이름만 전달하는 것

 

(2) 전역변수, 지역변수를 콜백함수의 파라미터로 전달

 

    //전역 변수를 선언
    let myName = "홍길동";

//매개 변수로 함수를 받을 함수를 만듬
function callBackFun(callBack){
    // 지역 변수 선언
    let youName = "허준";
    callBack(youName);
}

//매개 변수로 넘겨줄 함수
function callName(you){
    //매개 변수로 남길 함수를 선언해둔 myName 전역 변수를 사용하고
    // 자신이 받은 매개 변수 you를 사용한다.    
    console.log(myName + "이랑 " + you + "사이가 좋아")
};

//callBackFun 함수를 사용을 하는데 매개 변수로 callName함수의 이름을 전달
callBackFun(callName);

 

(3) class와 생성자 사용

 

class Con{
    constructor (name){
            this.name = name;
        }
        setname = function(firstName, lastName){
                this.name = firstName + " " + lastName;
            };
        }

         let _con = new Con("윤철");
        console.log(_con);
        _con.setname();
        let Con = {
           name : "홍길동",
            setname : function(firstName, lastName){
                this.name = firstName + " " + lastName;
            },
        }

        function getName(firstName, lastName, callBack){
            callBack(firstName,lastName);
            console.log(callBack)
            console.log(this);
        }

        getName("나 병현","나 윤철",Con.setname);
        console.log(Con.name);
        console.log(window.name)

우리가 getName이 함수에 전달한 callBack에게 변수에는 Con.setname의 함수가 전달이 되었는데

con.setname(); 이렇게 사용하면 this는 con객체이지만 getName함수에 getName의 이름으로 callBack함수를 전달해서

사용하면 this는 window객체이다.

 

[2] 실습

콜백함수 만들기

콜백함수 사용해서 네명의 이름을

전역변수와 지역변수로 출력하기

let nameArr = ["허준","홍길동","세종대왕"]
function callName(runFun,number){
    let array = "이이"
    runFun(array);
    console.log("총" + number + "명입니다.")
}

function arrayName(who){
    console.log("우리반 구성원" + (nameArr.length + 1) +"명 모두의 이름은 "+ who +","+ nameArr + "입니다")
}

callName(arrayName,4);

2. 콜백 지옥

 

function temp(num,callBack){
	let num1 = num * num;
    console.log(num1);
    callBack(num1);
}

temp(5,function(result){
	temp(result,function(result){
    	console.log("첫번째 지옥");
       	temp(result, function(result){
        	console.log("두번째 지옥");
        });
    });
});

[1] Promise 사용

Promise는 정상 수행 후 resolve, 실패 후 reject가 실행된다.

callBack을 사용했던 것과 같이 마찬가지로 resolve에 값을 담아 전달한다.

 

(1) Promise 지옥

function add(num){
	return new Promise((res,rej)=>{
    	let num1 = num + num ;
        console.log(num1);
        res(num1);
    });
});

add(5).then((result)=>{
	return add(result);
}).then((result)=>{
	return add(result);
}).the((result)=>{
	console.log("지옥탈출")
})

Promise를 사용하면 더 깔끔하게 지옥 가능

 

[2] setTimeout

function eat(){
    return new Promise(function(resolve){
        //setTimeout 밑에 쓴 숫자는 1000에 1초다
        //setTimeout은 밑의 시간 이후에 실행
        setTimeout(()=>{
            resolve("5초후 날 볼거야(작업완료)");
        }, 5000);//1000이 1초
    });
}
//await 처리 될때 까지 기다려줌
(async function(){
    var result = await eat(); //eat resolve가 될때까지 기다려
    console.log(result);
})();

[3] 실습

Promise로 10번 더하고 더한값을 6초뒤 출력

function add(num){
	return new Promise((res,rej)=>{
    	let num1 = num + num;
        console.log(num1);
        res(num1);
    })
}

	setTimeout(()=>{
    	add(5).then((result)=>{
        	return add(result);
        }).then((result)=>{
        	return add(result);
        }).then((result)=>{
        	return add(result);
        }).then((result)=>{
        	return add(result);
        }).then((result)=>{
        	return add(result);
        }).then((result)=>{
        	return add(result);
        }).then((result)=>{
        	return add(result);
        }).then((result)=>{
        	return add(result);
        }).then((result)=>{
        	return add(result);
        })
    },6000)

3. CSS

[1] 선택자

(1) 태그 선택자

 

div { color : red; } /*div선택자에 적용*/
p { color : black; } /*모든 p선택자에 적용*/

 

(2) ID 셀렉터

#name { color : red; } /*id 어트리뷰트가 name 인 서택자 적용, ID는 고유 , 중복불가*/

 

(3) 클래스 셀렉터

.content { color : red; } /*content 클래스를 가지고 있는 모든 요소 적용, 클래스는 동일명 가능*/

 

(4) 어트리뷰트 셀렉터

div[href] { color : red; } /*div에 href가 있는 모든 요소*/

 

(5) target

div[target = "black"] { color : red; } /*div에 target이 있는데 값이 blank인 요소*/

 

(6) 자식 선택자

.content .name { color : red; } /*content클래스의 자식요소인데 name클래스를 가지고 있는 요소*/

 

(7) 형제 셀렉터

.content + .content2 { color : red; } /*content 클래스의 같은 레벨의 형제 선택 요소*/

 

(8) 가상 클래스 셀렉터

a:hover { color : red; } /*a에 마우스를 올렸을때 일어나는 스타일*/
input:focus { color : red; } /*input이 포커스 상태일때 일어나는 스타일*/

 

(9) 다수의 클래스 선택자

 

.content.active { color : red; } /*content클래스도 가지고 있고 active클래스도 가지고 있는 요소*/

[2] 실습

nav에 버튼만들고 효과 주기

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="03.reset.css">
    <link rel="stylesheet" href="03.style.css">
</head>
<body>
    <div class="nav">
        <button>햄버거</button>
    </div>
    <div id="slide"></div>
</body>
<script>
    document.querySelector(".nav button").addEventListener("click",function(){
        if(slide.classList.contains("active")){
            //"active"클래스가 있으면 제거
            slide.classList.remove("active");
        }
        else{
            //"active"클래스가 없으면 추가
            slide.className += "active";
        }
        console.log(slide.classList.contains("active"));
        //slide.classList.contains(클래스명) 클래스가 있으면 true 없으면 false
        
    })
</script>
</html>

CSS

body{
    /* body 선택자 */
    height : 100vh;
    /* 브라우저 전체 높이 */
    overflow: hidden;
    /* 자식요소가 이 태그 밖으로 나오면 hidden 효과를 준다 (숨긴다) */
}

.nav{
    /* nav라는 클래스 선택자  */
    width: 100%;
    /* width 태그의 넓이 */
    height: 50px;
    /* height 태그의 높이 */
    background-color: beige;
    /* background - color 태그의 배경색 */
    position: fixed;
    /* relative : 자신의 위치에서 이동할수 있다. */
    /* absolute : 부모를 기준으로 이동할수 있다.  */
    /* fixed : 브라우저를 기준으로 고정 : 스크롤에서 이동을 해도 위치가 변하지 않고 따라옴 */
    z-index: 1;
    /* z-index :position속성이 있어야하고 지정하지 않으면 0 같은레벨의 태그와 순서 정렬이 가능하다 */
}

.nav button{
    /* nav라는 클래스 자식에 태그 선택자  */
    width: 50px;
    height: 50px;
    background-color: red;
    transition: 1s; /* 태그의 속성이 바뀌면 바뀌는 시간*/
}

.nav button:hover{
    /* nav라는 클래스 자식에 가상 선택자  */
    width: 100px;
    height: 50px;
    background-color: blue;
}

#slide{
    position: absolute;
    top: 50px;
    left: 100%;
    width: 100%;
    height: calc(100% - 50px);
    /* calc 함수 (매개변수 안에 계산식을 작성) 계산된 값을 반환 */
    background-color: antiquewhite;
    /* borer 태그의 테두리 속성 첫번째는 테두리의 두께 두번째는 선의 속성 세번째는 색 */
    box-sizing: border-box;
    transition: 1s;
}

#slide.active{
    left:0;
}