* 프로미스 체이닝 "비동기 - 콜백" 수업에서 스크립트를 순차적으로 불러오는 비동기 작업이 여러개인 경우에 콜백기반 프로그래밍을 사용하였다. 이때 콜백지옥(callback hell)과 같이 코드가 복잡해지는 문제가 발생하였다. 프로미스 체이닝을 이용하면 이러한 문제를 간단하게 해결할 수 있다. new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 1000) }).then(function(result) { alert(result) // 1 return result * 2 }).then(function(result) { alert(result) // 2 return result * 2 }).then(function(result) { al..

* 프로미스와 현실상황 비교 본인이 유명한 가수라고 가정해보자! 그리고 본인의 싱글 앨범이 언제 나오는지 밤낮으로 물어보는 팬들을 상대해야 한다고 해보자! 여러분은 앨범제작이 완료되면 즉시 팬들에게 소식을 전달할 수 있도록 할 것이다. 예를 들어, 구독리스트를 만들어서 팬들에게 전달하고, 이메일 주소를 기재하도록 부탁한다. 이렇게 하면 앨범제작이 끝났을때 팬들에게 이메일을 보내 앨범 관련 소식을 곧바로 알려줄 수 있다. 녹음 스튜디오에 불이 나서 앨범제작이 연기되더라도 관련된 소식을 팬들에게 전달할 수가 있다. 결과적으로 밤낮으로 질문하는 팬들이 사라지고, 팬들은 앨범출시일을 놓치지 않게 되었다. 1. 제작코드(producing code)는 원격에서 스크립트를 로딩하는 등의 시간이 걸리는 작업을 한다. ..

자바스크립트는 다양한 함수를 사용하여 원하는 시점에 동작하는 비동기 처리를 할 수 있다. setTimeout 과 setInterval 메서드가 비동기 스케쥴링의 대표적인 예시이다. 1. 서버에서 데이터를 가져오는 경우 2. 고화질의 이미지를 로딩하는 경우 3. 스크립트 파일을 로딩하는 경우 실무에서 경험하는 비동기 처리는 위와 같이 다양하다. function loadScript(src) { // 태그를 만들고 페이지에 태그를 추가(마운트)합니다. // 태그가 페이지에 추가되면 src에 있는 스크립트를 비동기적으로 로딩하고 실행합니다. const script = document.createElement('script') script.src = src document.head.append(script) } ..

개발을 하다 보면 기존에 있는 기능을 가져와 확장해야 하는 경우가 있다. 사람에 관한 프로퍼티와 메서드를 가진 user라는 객체가 있는데, user와 상당히 유사하지만 약간의 차이가 있는 admin과 guest 객체를 만들어야 한다고 가정해 보자! 이때 "user의 메서드를 복사하거나 다시 구현하지 않고 user에 약간의 기능을 얹어 admin과 guest 객체를 만들 수 있지 않을까?"라는 생각이 들 수 있다. 자바스크립트 언어의 고유 기능인 프로토타입 상속(prototypal inheritance) 을 이용하면 위와 같은 생각을 실현할 수 있다. * [[Prototype]] 프로퍼티 자바스크립트 객체는 명세서에서 명명한 [[Prototype]] 이라는 숨겨진 프로퍼티가 있다. 해당 프로퍼티의 값은 n..

연습과제 1 body{ margin: 0; padding: 0; height: 300vh; display: flex; justify-content: center; align-items: center; } .bg{ width: 50vw; height: 30vw; background: url(https://image-cdn.hypb.st/https%3A%2F%2Fkr.hypebeast.com%2Ffiles%2F2023%2F09%2Fstudio-ghibli-to-be-acquired-by-nippon-television-holdings-details-info-01.jpg?cbr=1&q=90) no-repeat center; background-size: cover; transition: 1s ease-in-o..

연습과제 1 1 2 3 4 5 6 7 8 9 10 prev next *{ box-sizing: border-box; } body{ margin: 0; padding: 0; width: 100%; min-height: 500vh; background: url(https://blog.kakaocdn.net/dn/ciUuSF/btrwA63osUr/qK4zOZpkmz3A8U9rMtkzO1/img.jpg) no-repeat center; background-size: cover; } .container{ width: 60%; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; margin: auto; margin-top..

연습과제 1 const page = document.querySelector('.document') const agreeBtn = document.querySelector('button') function checkTheBottomOfScrolling(){ // 구현하기 if(page.scrollHeight - page.clientHeight === page.scrollTop){ console.log('문서 다 읽음') agreeBtn.disabled = false } } page.addEventListener('scroll', checkTheBottomOfScrolling) 연습과제 2 this 는 스크롤 이벤트가 발생한 page 요소를 가리킨다. const pages = document.querySe..

* 요소의 좌표를 계산하는 방법 첫번째 방법은 브라우저 좌측상단 꼭지점을 기준으로 좌표를 계산한다. 캡쳐화면에서는 해당 좌표를 clientX/clientY 로 표시하고 있다. 두번째 방법은 문서(document) 의 좌측상단 꼭지점을 기준으로 좌표를 계산한다. 캡쳐화면에서는 해당 좌표를 pageX/pageY로 표시하고 있다. 캡쳐화면에서 좌측그림은 스크롤로 페이지를 이동하기 전의 모습이다. 이때는 pageX 와 clientX 가 동일하고, pageY와 clientY 도 동일한 값이다. 왜냐하면 스크롤을 이동하기 전에 브라우저와 상단과 문서의 상단이 정확히 일치하기 때문이다. 하지만 우측그림과 같이 스크롤이 움직이면 문서가 이동하면서 문서 기준 좌표(pageY)는 스크롤을 이동하기 전과 동일하지만, 브라우..

* 브라우저 창의 너비와 높이 - document.documentElement.clientWidth, document.documentElement.clientHeight console.log(document.documentElement.clientHeight) console.log(document.documentElement.clientWidth) 현재 브라우저의 너비와 높이를 조회할 수 있다. * window 객체가 아닌 document.documentElement 를 사용하는 이유 console.log( window.innerWidth ); // 전체 창 너비 console.log( document.documentElement.clientWidth ); // 스크롤바가 차지하는 영역을 제외한 창 너비..

* 요소의 실제크기 확인하기 자바스크립트는 요소의 너비나 높이, 그리고 위치정보를 알 수 있는 기하정보 관련 API 함수를 제공한다. 해당 함수를 활용하여 요소의 위치를 변경하여 요소를 이동시키거나 요소의 크기를 알 수 있다. Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores vitae est temporibus mollitia consequatur adipisci at, laboriosam necessitatibus facere sit maxime, nemo placeat dolore consectetur suscipit dignissimos ullam, exercitationem quo! Dolorum ipsum libero il..