인프런 커뮤니티 질문&답변

우주먼지님의 프로필 이미지
우주먼지

작성한 질문수

[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)

[순수JS 1] 검색폼 4(실습)

helpers.js

작성

·

285

1

emit, on 등 헬퍼 함수가 좀 헷갈려서 따로 html 파일을 만들어서 연습하는 중인데요! qs 함수를 만들어서 사용하면 dom 객체를 제대로 받아오지 못하는데 이유가 뭘까요..?

그리고 emit 함수 부분 mdn 문서를 봐도 제대로 이해가 안 되는데 custom, dispatch를 간단하게 설명해 주시면 감사드리겠습니다ㅜㅜ

<body>
  <div class="container">
    <form id="search-form-view">
      <input type="text" placeholder="검색어를 입력하세요" autofocus />
      <button type="reset" class="btn-reset"></button>
    </form>
  </div>

  <script> 
    function qs(selector, scope = document) {
      if (!selector) throw "no selector";
      scope.querySelector(selector);
    }
    
    const form = qs('#search-form-view');
    console.log(form); // undefined

    const form1 = document.querySelector('#search-form-view');
    console.log(form1);

답변 2

2

김정환님의 프로필 이미지
김정환
지식공유자

qs() 함수 마지막에 찾은 엘리먼트를 반환하는 코드가 누락되었네요.  return을 앞에 추가해 주세요

  • return scope.querySelector(selector);

커스텀이벤트 다루는건 예전에 블로그에 정리한 적이있는데 mdn 문서랑 같이 참고해서 보시면 좋겠습니다.

1

qs 호출부분에서 두번째 파라미터값을 전달을 안해주셔서 scope는 document입니다. 

#search-form-view의 부모는container 이므로 찾지 못합니다!

우주먼지님의 프로필 이미지
우주먼지

작성한 질문수

질문하기