뒤로 가기
홈으로 이동
LearnFit
공유하기
YouTube, 자바스크립트 & DOM 프로그래밍 40강 - 이벤트 객체의 target 속성 이용하기
서원석님의 학습노트

자바스크립트 & DOM 프로그래밍 40강 - 이벤트 객체의 target 속성 이용하기

#전체
#개발자
#프론트엔드
#자바스크립트
#프로그래밍
#프로그래머
#DOM
#Event
#target
06:14(여기부터 시작) 상단에 세 개의 작은 이미지 목록과 하단에 메인 이미지 뷰어가 존재합니다. 위의 작은 이미지 중에 선택되어진 이미지를 메인 이미지 뷰어로 보여줍니다. 자바스크립트는 이미지가 클릭되었다는 것을 어떻게 알고 저렇게 동작하는 것일까요? 그리고 이것이 비동기와 어떤 연관이 있는걸까요?
06:28(이 부분을 읽으시면 영상 학습을 멈춰주세요) 원리 소개: 9번째 줄의 imgs[0].onclick는 '첫 번째 이미지가 눌렸을 때'를 의미하며 9번째 줄의 function(e){ ... }는 첫 번째 이미지가 눌렸을 때 '호출되는 함수'를 의미합니다. 즉 function(e) { ... }의 내용은 모르더라도 DOM에서 제공하는 event listnener의 도움을 받아 click event에 대해 무언가 호출하는 코드를 동작시키고 있는 것이죠. 비동기인 이유: 친구와 카카오톡으로 연락을 할 때 답장을 계속 기다리고 계신가요? 그게 아니면 답장이 올 때까지 다른 것을 하다가 답장이 오면 나도 답장을 하고 또 다른 것을 하고 계시나요? 아마 대부분의 분들은 후자처럼 행동하실 것입니다. 그리고 이것을 '비동기적으로 일을 처리한다'라고 볼 수 있습니다. 자바스크립트도 마찬가지입니다. 영상 속의 이미지 클릭만을 기다릴 수 없는 것이죠. 자바스크립트는 싱글쓰레드로 동작하며 다른 동작들도 처리해야하니까요. 그래서 클릭을 알아채고 알려줄 것을 DOM에게 부탁하는 것입니다. 결과적으로 자바스크립트 엔진은 자바스크립트 코드를 실행시키는 한 편, DOM의 특정 event에도 반응할 수 있게 되며 마치 비동기적으로 동작하는 것이 되는 것이죠.
✔ 학습 완료

이 학습노트가 포함된 러닝패스예요.

서원석님의 다른 노트는 어때요?

서원석의 프로필 이미지
서원석
의 학습노트

리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
25
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
스크랩
서원석의 프로필 이미지
서원석
의 학습노트

네거티브 마진 negative margins | 코딩가나다 | 빔캠프

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
6
04:38
B에 negative margin을 적용하기
05:00
마크업 상에서 아래 쪽에 위치하면 위로 올라갑니다. *negative margin과 상관없는 이야기
👍
6
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기