윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 32강 - 함수의 실행 순서 > javascript

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 32강 - 함수의 실행 순서

페이지 정보

조회: 558

본문

※ 영상을 선명하게 보기 안내

유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
팝업목록에서 "품질" 선택하세요.
원하는 해상도를 선택해주세요.

※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.

윤인성님의 javascript강의 청각장애인을 위한 자막

안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 임 먼 3판 32강

되겠구요
이번 강의 부터는 5점 12절 5장의 조금 더 나아가 기에 대해서
살펴보도록 하겠습니다 5장의 조금 더 나아가 기는 다른 장에 비해서
내용이 쪼금 많기 때문에 조금 길게 살펴 보도록 하겠 구요
일단 5점 12점 1절 자바 스크립트의 실행 순서에 대해서 살펴보도록
하겠습니다
일단 다른 프로그래밍 언어를 공부를 해보신 분이라면
쓰레드 라는 개념에 대해서 들어본 적이 있을 것이라고 생각을 합니다
쓰레드 라는 녀석은 뭐 간단하게 표현을 하면 코드를
읽어 내려가는 녀석이라고 할 수 있겠는데요 우리가 위쪽에서 뭐랄 트 1
2 3 4
라고 출력을 하게 되면 이 코드를 위에서 아래로 쓸어 내려 가며 1 있는
녀석이 있는데요 이 녀석을 뭐 쓰레드 라고 보시면 되겠습니다
뭐 사실 운영체제 시간이나 이런 공부를 따로 해 보시게 되면 그럴 때
조금 더 자세하게 알 수 있겠지만 일단 요렇게 이 해도 큰 문제는 없을
거라고 생각을 합니다
그런데 m 다른 프로그래밍 언어는 이 코드를 읽어 내려가는 녀석을 여러
개를 만들 수 있어요 수백개 수천개 를 만들 수 있는데
자바스크립트 라는 프로그래밍 언어는 이 스레드를 제발 자가 따로 만들 수
없습니다 따라서 무조건 적으로 코드를 읽어 내려가는 녀석 안 단
한명이라고 기억을 해 주시면 되겠습니다
어쨌거나 책에 있는 코드 5 다시 42 를 한번 살펴보도록 할텐데요 엄
요렇게 되어 있는 코드입니다 이 코드의 실행 결과를 예측해 볼 수요가
문제가 되겠는데요
사실 완전히 프로그래밍 언어를 처음 하신다면 실행 결과를 예측해 보라는
게 대체 무슨 소리인지 몰라서 못 푸는 경우가 많을 것이라고 생각을
하고요
다른 프로그래밍 언어를 공부해 보시다 오신 분이라면 a 를 먼저 실행을
하고
빵 초 후에 b 를 실행 하라고 했으니까 빵 초 후에 b 를 실행을 할
거고
위에서 코드를 읽어 내려가던 녀석이 c 를 실행을 하기 때문에 일반적으로
a 가 먼저 출력이 되고 비가 출력이 되고 씨가 출력이 된다 또는 a 가
출력이 되고 씨가 출력이 되고 비가 출력이 된다 라는 두 가지 경우가
있다라고 생각을 하는 경우가 있는데요
자바스크립트는 절대 이러한 식으로 동작하지 않습니다 그러면
자바스크립트에서 는 어떻게 실행이 되는지 한번 간단하게 뭐 말로 풀어서
설명을 해보도록 할게요 일단 코드를 위쪽에서 아래로 차례대로 실행하는
녀석이 첫번째 주도 이렇게 됩니다 그러면
에 일에
출력해 약에 따라 고하고 a 를 출력을 하게 되고요
3 타임아웃 함수를 만나게 되면
뭔지는 모르겠지만 빵 초 후에 실행을 해야 한다. 라는 기록을 할 뿐입니다
한마디로 예약을 걸어 둔다 라고 표현할 수 있겠는데요 따라서
예약을 걸어 둘 뿐이고 이 내부에 있는 코드를 자세하게 읽어 보지는
않습니다
그리고 코드를 또 아래로 내려와서 c 를 출력해 약에 따라 고하고 씨를
출력을 하게 됩니다
그 다음에 예약된 걸 확인을 합니다
이야기 된게 현재 펑션 으로 멀티 비정
그래서 이 과정이 모두 끝난 이후에 예약된 다음 단계를 실행하게 됩니다
따라서 여기에서 피를
출력해 약에 따라 고하고 비를 출력을 하게 되서 순서는 무조건 적으로 a
가 먼저 출력이 되고 씨를 출력을 하고 비를 출력을 하는 과정이 됩니다
자 그래서 만약에 코드가 이렇게 되어있고
만약에 마지막 위치에서
와일 반복문을 실행을 해서 무한하게 반복을 돈다면 실행이 어떻게 될지
한번 예측해 보도록 하겠습니다
일단 코드를 읽어 들이는 애가 위쪽부터 아래를 코드를 실행을 하면서 a
출력해 약에 따라 고하고 a 를 출력을 하게 됩니다
이어 섬 콜백 함수를 적용을 해서 함수를 세타 2 마우스로 먹이게 되는
데요
이렇게 세 타임아웃 같이 예약을 거는 녀석들은 그냥 예약을 거는 것
뿐입니다
자바스크립트가 내부적으로 지원하라는 3 타임아웃이 라 던진 3 인터벌
이라든지 아니면 뒤에서 살펴보는 xmlhttp 리퀘스트 예약 등과 같은
우리가 자바스크립트 코드에서 눈으로 볼 수 없는 녀석들은 모두 예약을 건
다 라고 생각을 해 주시면 되겠습니다
그리고 씨를 출력을 해야 겟다 해서
씨를 출력을 해야 되고 씨를 출력을 하게 되고요
이어서 와 1 반복문을 만나기 때문에
무한 반복이 걸려서 멈추게 됩니다 따라서 이 이후에 실행이 전혀 끊기게
돼 정
따라서 얼얼 tp 를 실행하는 경우가
100% 없다라고 예측을 할 수 있습니다
저장을 하고 실행해 보도록 할게요 수행을 하면 a 를 출력을 하고 씨를
출력을 한 뒤에 그리고 무한 반복이 바로 걸리겠죠
그래서 비를 출력을 하지 않고 바로 응답 없음이 나서 프로그램이 죽어
버리게 됩니다
사실 뭐 간단한 프로그램을 만들때 이게 문제가 되는 경우는 거의 없지만
조금 더 난이도가 올라가게 되면 이러한 실행 순서를 예측을 해야 되는
경우가 생겨요 그런데 자바스크립트 개발자 들 중 일부를 보게 되면 특히
다른 프로그래밍 언어를 하다 넘어 오신 분들을 보면 이게 동시에 실행 될
거라고 믿는 분들이 굉장히 많아서 동시에 실행이 안되게 굉장히 많은
코드를 실행을 해서 그 병행 처리 를 막는 경우가 있는데 그럴 필요가
전혀 없다 라고 생각을 해 주시면 되겠습니다
자 그럼 이어서 5점 12.2 절반 본문과 콜백 함수에 대해서 살펴보도록
하겠는데요
한번 5 다시 43일 실행 결과를 예측해 보도록 하겠습니다
사실 이 내용은 우리가 2장이 조금 더 나아가기 위해서 블랙과 컨테스트
그리고 var 키워드를 배우면서 한번 설명을 했던 내용인데요
그래도 다시 한 번 예측을 한번 해보시기 바랍니다
자바스크립트가 쓰레기 라고 말하는 이유 중의 하나가 되는 코드라고 할 수
있겠는데요
일반적으로 이걸 예측해 보라고 하면 거의 처음 보시는 분이라면 백이면 백
0과 1 과 2 를 어떠한 춤 서로 던 출력을 한다.고 생각을 합니다
일단 반복을 통해서 아이의 0과 1 과 2 가 들어가고
이거를 0 초 후에 실행을 한다. 고 이 약을 걸기 때문에
0과 1 과일을 출력을 한다.고 생각을 하게 되는 건데요
실제로 저장을 하고
실행을 하게 되면 잠시 아깝지 계속 들고 있는데
실행을 하게 되면 3 3 그리고 3을 출력을 하게 됩니다
2 실행 이유를 한번 간단하게 살펴 보면요
가장 먼저 알아야 되는건 va 아래나 라는 키워드가
전역 변수를 선언하는
키워드 라는 것을 알아야 합니다
예를 들어서 여기에서 var 아이를 선언을 해도 이 밖에서
아이를 출력을 할 수 있습니다 한번 저장을 하고 실행을 해보도록 할게요
엄 저장을 하고 실행을 해보면 그냥 3을 출력을 하게 됩니다
다시 코드로 돌아오게 되면 이게 바로 자바스크립트의 var 키워드에
문제라고 하는데요
스코프가 고정되어 있지 않아요 저녁에 선언을 하기 때문에 스코프가 여러
곳을 벗어날 수 있습니다
따라서 현재 코드를 보게 되면
아까와 관련이 있는 코드라고 할 수 있겠는데요 일단 처음에 아이가 0일
예약을 걸고 아이가 1일 때 마찬가지로 예약을 벌겠죠
예약을 걸고 아이가 일대
예약을 걸고 그리고 아이가 3일 때 이 조건에
펄스가 되므로 반복문을 빠져나오게 됩니다 따라서 이 순간엔 아이가 3의
되버리는 데요
이제 코드의 단계를 모두 끝내 쓰니까 예약되어 있던 녀석들을 실행 하겠죠
그래서 이 펑션 얼얼 트 아이를
예약을 했던 녀석 을 실행하게 됩니다 3번 실행을 하는데 현재 아이는 3
이기 때문에
전부다 333 을 출력하게 되는 것입니다
그래서 해결방법은 전역변수 가 아닌
스코프 내부에서만
작동하는 변수를 선언하게 만들면 됩니다
우리가 이 크마 스크립트 식스 를 활용할 수 있는 최신 웹브라우저에서 는
그냥 레스 로 변경을 해주시면 곧바로 모든 문제가 해결이 됩니다
한번 저장을 하고 실행해 보도록 할게요
저장을 하고 수행을 하게 되면 0 2 1 0 과 1과 2과 순서는 알순
없지만 일단 출력이 되는 모습을 확인할 수 있습니다
그런데 사실 이 꼬마 스크립트 식스 라는 것은 최신 웹브라우저 에만
사용할 수 있어요 따라서 이 방법을 인터넷 익스플로러의 는 적용을 할 수
없습니다
그래서 사실 이 방법은 외우 쉬는게 맞는 거라고 생각을 하는데용
일단 뭐 완벽하게 외운 닭이 보단 내가 이러한 문제가 있다는 것을 기억만
해도 시계 되면 나중에 이 부분을 찾아 보면서 이해 하실 수 있을 거라고
생각을 합니다
요렇게 해결을 하는게 두번째 방법입니다
함수 내부에서 선언된 변수는 해당 함수 에서만 유효하게 됩니다 따라서 이
함수를 생성을 하고 곧바로 아이를 전달을 해서 이 내부에서 아이라는 매개
변수가 이 내부에서만 사용되게 고정을 해 주시게 되면 아까와 같은 문제를
해결할 수 있습니다
코드가 굉장히 이상한 됨 이러한 형태가 있다라는 것을 꼭 기억을 해
주시면 좋겠습니다
저장을 하고 실행을 하게 되면 0
e 를 실행하게 됩니다 뭐 0 1 2 둥 실행이 되고 뭐 다양하게 출력이
된다는 것을 알 수 있는데요
어쨌거나 이러한 방법으로 해결할 수 있다는 것을 기억해 주시면 좋겠습니다
사실 세타 2 마우스로 이러한 문제를 직면 하는 경우는 많지 않으실
거구요
아직 배우지 않은 내용이지만 잠시 살펴 보게 되면
top 멘트 점 크레이트 엘리멘트 라는 걸로 버튼 이라는 녀석을 만들고
버튼에 텍스트 콘텐츠를
i 로 변경을 하고 버튼 l 클릭을 했을때
얼얼 트 아이를 실행을 한다. 그리고 이렇게 만들어진 버튼을
도큐먼트 점 바디 에다가
붙여 준다 라는 코드를 우리가 나중에 작성을 하게 됩니다
이러한 코드를 반복문 에 적용을 했을 때 일반적으로 가장 많이 생각하는
버텨내는 1232 찍 쳐서 0 1 2 같이 쳐서 나올 것이고 그러한 0
1 2 를 클릭을 했을때 0 1 2가 나올 것이라고 생각을 해요 근데
저장을 하고 실행을 하게 되면 버튼의 00일 2가지 쳐서 나오는 건
맞지만 이에 콜백 함수를 실행을 할 때 0을 클릭을 하면 콜백 함수가
실행이 되는데 3의 출력이 되고 이를 클릭해도 3의 출력되고
이를 클리 그래도 3의 출력되는 모습을 볼 수 있어요
따라서 이러한 문제가 발생했을 때 아까와 같은 방법으로 해결을 해야
한다.고 기억을 해 주시면 좋겠습니다
뭐 해결 방법을 다시 보게 되면
함수를 만들고
감싸고 아이를 넣어서 실행을 해야 된다
그래서 이 코드를 꼭 기억을 해 주시면 좋겠습니다
보 책을 보시면 추가적인 해결 방법도 나오는데요 추가적인 해결 방법은 뭐
또 이후에 코이치 메소드를 배울 때 살펴 보도록 하겠 곰 오늘 내용 1
여기까지 진행을 하도록 하겠습니다 어쨌거나 그러면 오늘 강의는 여기까지
되겠구요
다음 강의에서 뵙도록 하겠습니다 감사합니다.