inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

[React 1부] 만들고 비교하며 학습하는 React

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

helpers.js

342

우주먼지

작성한 질문수 17

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);

MVC react

답변 2

2

김정환

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

  • return scope.querySelector(selector);

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

1

네카라

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

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

리액트 1,2부 이후 후속 강의나 준비 중인 다른 강의가 있으신가요?

1

178

2

super.show() 호출하는 이유가 궁금합니다.

1

150

2

class와 constructor를 이용한 객체 지향 프로그래밍

0

309

2

mvc 패턴 질문

0

260

2

Cannot read properties of undefined (reading 'props')

0

353

2

delegate, emit 필요한 이유

0

259

2

어떤거를 먼저 들어야 하는지 도와주세요

1

322

1

localhost:8080 접속 불가

1

348

1

최근검색어 3 풀이에서

1

242

1

import 문제

1

286

1

자동변환 관련

1

254

1

sort() 질문 드립니다.

1

359

2

reset 시점에 searchResult 빈 배열로 update

2

378

2

Button에 Onclick사용

1

315

1

npx lite-server error 확인 요청드립니다.

1

536

2

node 20이상 쓸때 꿀팁

4

832

3

디버깅 관련질문이 있습니다.

1

352

1

[순수JS2]탭 3(풀이) 질문있습니다.

1

273

1

추상화를 어떻게 받아들이면 될까요??

1

487

1

on 메서드 eventName 문의

1

304

1

import에 관해서 질문드립니다

1

302

1

view.js의 on 메소드에 대해 질문드립니다

1

301

1

componentDidMount에서 getKeywordList()를 하는 이유

1

281

1

[순수JS1]검색폼2_git branch 이동관련

1

320

1