반응형 JavaScript/Mordern JavaScript22 22.(HTML 과 JavaScript 연동) 모달 만들기 안녕하세요! 내용내용내용 버튼 열기 안녕하세요! 내용내용내용 버튼 열기 안녕하세요 모달 내용은 어쩌고 저쩌고.. 닫기 body { font-family: sans-serif; } .modal-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; } .modal { background: white; padding: 24px 16px; border-radius: 4px; width: 320px; } .modal-title { font-size: 24px; font-weig.. 2021. 6. 30. 21.(HTML 과 JavaScript 연동) 카운터 버튼을 클릭하면 숫자가 올라가거나 내려가는 카운터 만들기 UI 만들기 0 +1 -1 DOM 선택하기 const number = document.getElementById("number"); const increase = document.getElementById("increase"); const decrease = document.getElementById("decrease"); console.log(number); console.log(increase); console.log(decrease); 이벤트 설정하기 버튼들이 클릭 됐을 때 콘솔에 텍스트를 출력하는 이벤트를 설정 const number = document.getElementById("number"); const increase = docume.. 2021. 6. 30. 20.async/await async/await란? - ES8에 해당하는 문법 - Promise 를 더욱 쉽게 사용 할 수 있게 해줌 function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function process() { console.log('안녕하세요!'); await sleep(1000); // 1초쉬고 console.log('반갑습니다!'); } process(); - async/await 문법을 사용할 때에는, 함수를 선언 할 때 함수의 앞부분에 async 키워드를 붙임 - Promise 의 앞부분에 await 을 넣어주면 해당 프로미스가 끝날때까지 기다렸다가 다음 작업을 수행 sleep 이라는 함수를 만들어서 파라미터로.. 2021. 6. 30. 19.Promise Promise란? 비동기 작업을 조금 더 편하게 처리 할 수 있도록 ES6 에 도입된 기능 ※이전에는 비동기 작업을 처리 할 때에는 콜백 함수로 처리 콜백 함수로 처리를 하게 된다면 비동기 작업이 많아질 경우 코드가 쉽게 난잡 function increaseAndPrint(n, callback) { setTimeout(() => { const increased = n + 1; console.log(increased); if (callback) { callback(increased); } }, 1000); } increaseAndPrint(0, n => { increaseAndPrint(n, n => { increaseAndPrint(n, n => { increaseAndPrint(n, n => { inc.. 2021. 6. 30. 이전 1 2 3 4 ··· 6 다음 반응형
