Return to Video

이벤트 리스너 추가하기 (영상 버전)

  • 0:00 - 0:05
    이것저것 해보려고
    이 페이지를 만들었어요
  • 0:06 - 0:08
    그런데
    좀 지루하네요
  • 0:08 - 0:10
    내용도 없고
  • 0:11 - 0:15
    이 버튼은 눌러도
    아무 반응이 없어요
  • 0:16 - 0:18
    이 버튼을 인터랙티브하게
    만들어 볼거에요
  • 0:19 - 0:20
    사용자가
    버튼을 클릭하면
  • 0:20 - 0:23
    버튼 안의 문구가
    바뀌게 할거에요
  • 0:24 - 0:27
    첫번째는
    요소를 찾는거에요
  • 0:27 - 0:30
    우리가 이벤트에
    반응할 요소 말이에요
  • 0:30 - 0:32
    이 경우엔
    그 요소는 버튼이죠
  • 0:33 - 0:35
    그리고 버튼은
    클릭이 가능해요
  • 0:35 - 0:39
    그래서 우리는
    clickerButton변수를 만들고
  • 0:40 - 0:45
    document.getElementById
    를 이용해서
  • 0:46 - 0:48
    값을 받아오고
    이 변수에 저장할 거에요
  • 0:49 - 0:53
    다음 단계는
    함수를 정의해서
  • 0:53 - 0:56
    클릭이 발생하면
    호출되게 하는 거에요
  • 0:58 - 1:02
    이 함수는
    onButtonClick이라고 하고
  • 1:04 - 1:07
    비어있는 함수를
    여기 정의해둘게요
  • 1:07 - 1:10
    당연히 뭔가를
    채워야해요
  • 1:10 - 1:12
    아니면 별로 재미없는
    함수가 될테니까요
  • 1:12 - 1:14
    이 버튼의 문구를
    바꾸려면
  • 1:14 - 1:19
    clickerButton의 값을 이용해
    textContent에 넣어주면 돼요
  • 1:20 - 1:23
    "Oh wow, you clicked me"
    라고 해보죠
  • 1:23 - 1:26
    와
    행복한 버튼이에요!
  • 1:27 - 1:30
    많은 코드는 아니지만
    더 복잡하게 만들 수 있어요
  • 1:30 - 1:31
    이게 작동된다면요
  • 1:33 - 1:37
    우리가 쓴 코드가 한 건
    변수를 정의한 것 뿐이에요
  • 1:38 - 1:41
    그래서 버튼을 눌렀을 때
    아직 아무것도 일어나지 않아요
  • 1:42 - 1:45
    마지막 단계는
    모든 걸 합치는 거에요
  • 1:45 - 1:50
    그래서 브라우저에게
    우리가 만든 함수를 호출하라고
  • 1:50 - 1:54
    우리가 찾아둔 버튼이
    클릭이 될 때마다 말이죠
  • 1:55 - 2:01
    이건 이벤트 리스너를
    버튼에 추가해서 구현할 수 있어요
  • 2:01 - 2:06
    clickerButton.addeventlistener
    처럼요
  • 2:06 - 2:11
    그리고 이 방법에는
    두 가지의 인자를 전달해야해요
  • 2:11 - 2:14
    첫번째는 이벤트의 이름
    'click'
  • 2:14 - 2:18
    두번째는 우리가 호출하려는
    함수의 이름이에요
  • 2:18 - 2:22
    클릭할 때 호출되는 함수죠
    'onButtonClick'
  • 2:23 - 2:27
    이걸 잠시 멈추고
    버튼을 한번 클릭해보세요
  • 2:29 - 2:30
    동작하나요?
  • 2:30 - 2:32
    그랬으면 좋겠네요
    전 동작하거든요
  • 2:33 - 2:36
    이 함수가 어떻게
    작동되는 지에 대해 얘기해보죠
  • 2:36 - 2:38
    약간 어려울 수 있거든요
  • 2:38 - 2:41
    이 함수를
    이벤트 리스너 함수라고 하거나
  • 2:41 - 2:47
    콜백 함수라고 해요
    그게 사용되고 있는 방법이니까요
  • 2:47 - 2:50
    이 함수가 이벤트가 일어나면
    호출(콜)되길 원해요
  • 2:51 - 2:55
    보통 페이지 로드될 때
    이게 호출되길 원하진 않잖아요
  • 2:56 - 2:58
    만약에 페이지가 로드될 때
    호출되게 하고 싶다면
  • 2:58 - 3:02
    여기 아래에 한 줄을
    이렇게 추가해야 할거에요
  • 3:04 - 3:06
    함수이름 뒤에 괄호를 쓰는걸
    기억하세요
  • 3:07 - 3:10
    이 괄호로
    함수를 호출하는 거에요
  • 3:10 - 3:14
    이걸 내버려두면
    함수를 호출하는게 아니라
  • 3:14 - 3:16
    그냥 참조하는 거에요
  • 3:16 - 3:19
    그건 이렇게 인자를
    전달하고 싶을 때 하는 거에요
  • 3:19 - 3:21
    이건 그냥 브라우저에게
    이렇게 말해주는 거에요
  • 3:21 - 3:26
    "여기 나중에 호출할 함수가 있어.
    지금은 말고"
  • 3:27 - 3:31
    그러니까 괄호를 여기에는
    적지 않도록 해요
  • 3:31 - 3:33
    이 함수 이름 뒤에요
  • 3:33 - 3:37
    왜냐하면 함수 자체가 아니라
    함수의 리턴값을 전달하는 거니까요
  • 3:38 - 3:40
    실수로 그렇게 했다면
  • 3:40 - 3:44
    이 버튼은 페이지가 로드될 때
    바뀌고 다음엔 바뀌지 않을 거에요
  • 3:45 - 3:47
    고치려면
    여기 괄호만 지우면 돼요
  • 3:47 - 3:49
    실수로 추가했던 것을요
  • 3:49 - 3:52
    이제 이 함수는 클릭될 때만
    호출될 거에요
  • 3:54 - 3:56
    한 가지
    다른 방법은
  • 3:56 - 4:03
    여기 익명의 함수를
    넣어주는 거에요
  • 4:03 - 4:06
    익명 함수는
    미리 정의된 이름은 없지만
  • 4:07 - 4:10
    명령어 안에
    구현된 함수에요
  • 4:11 - 4:15
    이 addEventListener부분을
    복사해서 붙여넣기 할게요
  • 4:15 - 4:18
    그리고 이 방법을
    하나씩 보여줄게요
  • 4:18 - 4:20
    그럼 무슨 뜻인지
    알 수 있을 거에요
  • 4:21 - 4:23
    이 함수 이름을 지우고
  • 4:23 - 4:26
    함수 정의로 대체할게요
  • 4:26 - 4:29
    여기 붙여넣고
  • 4:31 - 4:32
    좋아요
  • 4:32 - 4:37
    이 두 라인의 코드는
    정확히 똑같은 일을 해요
  • 4:38 - 4:39
    음
    거의 같게요
  • 4:40 - 4:42
    두 개 모두 함수를
    전달해요
  • 4:42 - 4:44
    같은 내용의 함수를요
  • 4:44 - 4:46
    차이점은 첫번째 것은
  • 4:46 - 4:50
    위에 미리 정의해 둔 함수를
    전달하는 것이고
  • 4:50 - 4:53
    두번째 것은
    익명 함수를
  • 4:53 - 4:58
    명령어 속에 정의함과
    동시에 전달하는 거에요
  • 4:58 - 5:00
    두 방법 모두 작동해요
  • 5:00 - 5:03
    많은 개발자들은
    미리 정의된 함수를 선호해요
  • 5:03 - 5:05
    왜냐하면 코드가 읽기 쉽고
  • 5:05 - 5:06
    디버깅도 쉽고
  • 5:06 - 5:11
    미리 정의된 함수를
    여러 번 호출하고
  • 5:11 - 5:13
    다른 이벤트에서도
    호출할 수 있으니까요
  • 5:13 - 5:15
    어떤 방법을 쓰든지
    여러분 마음이에요
  • 5:16 - 5:18
    두 개를 동시에
    사용하지는 마세요
  • 5:18 - 5:22
    브라우저는 클릭이 발생할 때
    두 개 모두를 호출할 것이고
  • 5:22 - 5:25
    두 번 부를 이유가 없으니까요
  • 5:26 - 5:29
    앞으로 가서
    익명 함수를 지울게요
  • 5:29 - 5:31
    전 첫번째 방법이
    더 좋으니까요
  • 5:32 - 5:34
    이제 여러분은 많은 것을
    할 수 있게 되었어요
  • 5:34 - 5:35
    이벤트 리스너를
    추가할 수있게 되었으니까요
  • 5:35 - 5:38
    페이지의 더 많은 부분에
    추가해 볼 수도 있고
  • 5:38 - 5:40
    다른 이벤트를
    사용해 볼 수도 있고
  • 5:40 - 5:41
    다음 시간에
    다뤄볼 거에요
  • 5:41 - 5:43
    DOM을
    수정해 볼 수도 있어요
  • 5:43 - 5:45
    전에 배운 방법들로요
  • 5:46 - 5:49
    그리고 반응했던
    요소 말고도
  • 5:49 - 5:52
    페이지의 다른 것들도
    수정할 수 있어요
  • 5:53 - 5:54
    한번 해보세요
  • 5:54 - 5:55
    여러분이 할 수 있는 것을
    찾아봐요
Title:
이벤트 리스너 추가하기 (영상 버전)
Description:
more » « less
Video Language:
English
Duration:
05:57

Korean subtitles

Incomplete

Revisions

Our website uses cookies for analysis purposes.