[수업 6월 3주 5일차] Javascript-9

김유민·2022년 6월 17일
0

대구 A.I. 스쿨

목록 보기
45/90

1. 학습내용

오늘은 배운것을 토대로 캐러셀 등 만들어 보는 실습 시간을 가졌다.

 preBtn.addEventListener("click", translateContainer.bind(this, 1));

.bind는 다른 컨테이너끼리 연결한다는 뜻이다.

넘어가는 컨테이너를 연결한다는 의미인듯.

더 정확한 설명은 아래 링크로 확인했다.
출처:
https://webisfree.com/2021-04-24/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%95%A8%EC%88%98%EC%97%90-bind-%EB%A9%94%EC%86%8C%EB%93%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

2. 어려웠던 점 및 해결방안

bind에 대해 정확히 몰라서 따로 찾아봤는데도, 잘 이해가 안됬다. 그래서 간단한 예제가 있는 것들을 찾아보았다.
출처 : https://shplab.tistory.com/entry/Javascript-bind-%ED%95%A8%EC%88%98-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

var obj = {
    name: 'shpark'
};

function bindTest() {
    console.log(this.name);
}

bindTest(); // undefined 출력

var bindTest2 = bindTest.bind(obj); // bindTest 함수에 obj 객체를 bind

bindTest2(); // obj의 name 값인 shpark 이 표출

그러니까 원본인 obj함수를 감싸주는 함수로 만들어(이때 원본은 놔두고 새로 생성된다고 한다.)
새로운 변수를 선언해 만들어주고 감싸게 만들었다.
처음에 undifined 출력되었던 게, 제대로 출력이 되는 것을 알수 있다.

3. 학습소감

오늘은 배운것을 활용해 js로 동적인 것을 만드는 것을 배웠다. 다시 코드를 봐도 잘 모르는 메서드 들이 많아서 차근차근히 공부해 봐야 할것 같다.

profile
친숙한 개발자가 되고픈 사람

0개의 댓글