질의응답 섹션 - 인프런 | 강의 공지사항

김명성 2022.01.14 선생님 안녕하세요 강의 정말 잘 보고 있습니다. 자바스크립트 개념이 너무나 어려워, 프로젝트를 진행하면서 공부하겠다고 마음먹고 선생님의 강의를 보니 정말 실제로 활용이 이렇게 되는 부분이구나 하고 알 수 있어서 행복합니다..!! ㅠㅠ 사실 강의를 보다가 제가 이해를 잘못한 것인지 여쭙고 싶은 부분이 있어 질의를 드리게 되었습니다. setTimeout에 관한 부분인데요. 1단계 상수 main은 HTML문서의 #main을 호출한다. 상수 qna는 HTML 문서의 #qna를 호출한다 2단계 begin 함수 생성 begin 함수는 상수 main의 스타일에 CSS스크립트에 명시한 keyframes fadeOut을 1초동안 준다. (점점 흐릿해짐) 그리고 450ms를 기다린 후에 1번째 setTimeout 메서드가 등장한다. 그리고 다시 450ms를 기다린 후에 2번째 setTimeout이 등장한다. 그런데 모질라의 글을 계속 보다보니까, 다음과 같은 부분을 발견했습니다. setTimeout()은 비동기 함수로서, 함수 스택의 다른 함수 호출을 막지 않습니다. 달리 말하자면, setTimeout()을 사용해서 다음 함수 호출을 "일시정지" 할 수는 없습니다. 이해해보자면 첫번째 setTimeout이 두번째 setTimeout을 기다리는게 아니고, 동시에 실행된다는 것인데, 자세히 보면 setTimeout 메서드는 두 개가 아니고, 바깥쪽 setTimeout에 안쪽 setTimeout이 포함되어 있다. 그래서 다음과 같은 함수로 조금 수정을 해보았습니다. function begin(){ main.style.WebkitAnimation = "fadeOut 1s"; main.style.animation = "fadeOut 1s"; main.style.MozAnimation = "fadeOut 1s"; setTimeout(() => { qna.style.WebkitAnimation = "fadeIn 1s"; qna.style.Animation = "fadeIn 1s"; qna.style.MozAnimation = "fadeIn 1s"; main.style.display = "none"; qna.style.display = "block"; },900); 위와 같은 함수로 바꾸어 실행해보니, 똑같이 작동함을 알게되었는데, 1초는 짧기에 10배를 늘려서도 보고, 450,450으로 나뉜것을 800,100 / 100,800으로 나누어 실행하여도 똑같이 작동됩니다. 그래서 이해하기를 안쪽과 바깥쪽에 걸어놓았던 delay 450ms는 900ms가 되어 하나의 setTimeout으로 작동한다는 것으로 이해했는데, 이게 올바로 이해한 부분일까요?