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
서원석
의 학습노트
리액트 라우터 버전 6의 리다이렉트는 Navigate로 구현
Video
⏱ 핵심 스탬프8개
00:00
해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다.
공식 문서: https://reactrouter.com/
00:50
react router 버전5에서 redirect를 구현하는 방법입니다.
*예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨
*특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.
👍
4
👋 다양한 인사이트를
읽어보고 계신가요?
나만의 학습 기록을 남기고,
관리하고 싶다면!
다양한 전문가의 멤버십 전용
콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고,
수익을 올리고 싶다면!
3초 회원가입/로그인으로,
런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기