프론트엔드/JavaScript 썸네일형 리스트형 [JavaScript] 비동기 비동기비동기 프로그래밍은 코드가 다른 코드와 동시에 실행될 수 있도록 하여, 시간이 오래 걸리는 작업(예: 네트워크 요청, 파일 읽기/쓰기 등)을 비동기적으로 처리할 수 있게 합니다. 콜백 함수 (a.k.a 콜백 지옥)순서를 보장하기 위해서 콜백 함수를 사용합니다.function task1(callback) { console.log("task1"); callback();}function task2(callback) { setTimeout(() => { console.log("task2"); callback(); }, 1000);}function task3(callback) { console.log("task3"); callback();}function task4(callback) {.. 더보기 [JavaScript] 이벤트 리스너 이벤트 리스너 클릭 const btnEl = document.querySelector("button");console.log(btnEl); // nullbtnEl.addEventListener("click", function () { alert("졸러요😴 선생님");});이벤트 타겟을 찾지 못하여 클릭되지 않습니다.defer 속성을 붙여줘서 html 파싱 후 인터랙션이 되도록 하여 이벤트 타겟을 제대로 찾았는지 확인합니다. `addEventListener` 메서드 사용예제1) 컬러피커* { box-sizing: border-box;}html { display: table; width: 100%; height: 100%;}body { text-align: center; disp.. 더보기 [JavaScript] 클래스 클래스ES6(ECMAScript 2015)부터 도입된 `class` 키워드를 사용하여 클래스를 정의할 수 있습니다.클래스를 활용하여 객체 지향 프로그래밍의 개념을 자바스크립트에서 구현할 수 있습니다. 클래스 상속class Rectangle extends Shape { constructor(color, width, height) { super(color); this.width = width; this.height = height; } getArea() { return this.width * this.height; }}const rect1 = new Rectangle("blue", 10, 20);console.log(rect1.getColor()); // blue`extends.. 더보기 이전 1 다음
