열정 실천

비동기 처리 작업 기능을 하는 Promise 객체를 사용하면 작업이 용이해질 뿐만 아니라 코드의 가독성도 좋아진다. when? 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 🎇Promise의 장점 - 비동기 처리 시점을 명확하게 표현할 수 있다. - 연속된 비동기 처리 작업의 수정, 삭제 추가가 편하다. - 비동기 작업 상태를 쉽게 확인할 수 있다. - 코드의 유지 보수성이 증가한다 Promise 생성자의 인수는 비동기 처리 작업을 하는 함수를 지정하며, 함수 내부에서 비동기 처리 완료 메소드인 resolve()와 reject()를 호출한다. 📌 객체 생성 const promise = new Promise(function (resolve, reject) { }); 이렇게 생성된 p..

CALLBACK FUNCTION : 함수의 매개변수에 함수를 넘겨주는 것 파라미터로 콜백함수를 전달받고 나중에 필요할 때 실행되는 함수이다. //더하기 함수 function add(a,b){ return a+b } //출력 함수 function printFunc(value){ console.log(value); } printFunc(add(3,4)); 이 코드는 add 함수에 a와 b 를 매개변수 값으로 넣어서 나온 결과값을 출력 함수의 매개변수로 전달해서 최종적으로 콘솔에 출력한다. 이 코드를 콜백함수로 구현하면 다음과 같다. function add(a, b, print){ print(a+b); } function printFunc(value){ console.log(value); } add(3, 4,..

동기와 비동기 📌 개념 🟢 동기식(Synchronous) 프로그램 ◽ 데이터의 요청 후 결과가 나올 때까지 기다리는 방식 (blocking : 답변을 기다리는 상태) ◽ 순차적으로 일을 수행한다. ◽ 현재 작업이 수행 중이면 뒤의 작업은 대기한다. 🟢 비동기식(Asynchronous) 프로그램 ◽ 데이터 요청 후 결과를 기다리지 않고 다른 일을 시작한다. (non-blocking : 답변을 기다리지 않음) ◽ 병렬적으로 일을 수행한다. ◽ 현재 작업과 무관하게 뒤의 작업이 실행된다. 비동기 방식은 결과를 기다리지 않기 때문에 잘 수행됐는지 결과를 확인할 수가 없다. 📌 장단점 동기 방식의 장단점 😄 설계가 간단하고 직관적이다. 🤔 결과가 주어질 때까지 다른 일을 못하고 기다려야한다. (작업 중단) 비동기..

현재 시간을 15:34:26 (시/분/초) 이렇게 디지털 형식으로 표시하기 위해서 다음과 같은 Date 객체의 메소드를 사용하면 된다. ⏰ getHours() // 시간(Hour) ⏰ getMinutes() // 분(Minute) ⏰ getSeconds() // 초(Second) ⏰ getMilliseconds() // 밀리초(Milliseconds) 더보기 Date 객체를 먼저 선언한 후 이 메소드를 실행하기만 시간을 가져올 수 있다. 이렇게 가져온 시간을 화면에 출력하게 되면 Date 객체를 선언했을 때의 시간이 출력이 되고 바뀌지 않는다. 진짜 디지털 시계처럼 매초마다 시간을 변경해주기 위해서 정해진 시간마다 실행되는 setInterval() 함수를 이용하자! 🎈 setInterval( ) 함수 사..

이벤트의 함수는 매개변수를 통해 이벤트 정보를 가져올 수 있다. button.addEventListenter('click', (event) => { console.log(event); }); ✔ 이벤트 객체는 이벤트가 발생한 요소와 참조 정보, 입력된 키 등의 정보를 포함한다. ✔ 발생한 요소는 target 속성을 이용해 확인할 수 있다. ✔ 보통 이벤트객체매개변수는 [event] 혹은 [e]라고 많이 쓴다. --수정중---

이벤트 웹 내에서 일어나는 사건을 뜻한다. (클릭, 키보드 등) 각각의 이벤트들은 이벤트가 실행되면 실행될 코드 블록인 이벤트 핸들러를 가진다. event handler register : 이벤트가 발생하면 어떤 함수를 호출할지 등록해놓는 것 📌 이벤트 핸들러 등록에는 두 가지 방법이 있다. 1. 타겟.on이벤트명 = 이벤트핸들러함수 2. 타겟.addEventListner = ('이벤트명', 이벤트핸들러함수); 예시) 1. button.onclick = handleClick 2. button.addEventListner = ("click", handleClick); 보통 2번 방법을 많이 사용하기 때문에 2번으로 공부해보자! 일반적인 사용 방법은 다음과 같다. const button = document...