55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
input에 있는 x를 눌렀을 때, reset 버튼도 사라지도록 하려면?
SearchFormView.js에 있는 handleReset() 함수를 다음과 같이 변경해보았습니다. handleReset() { this.emit("@reset") this.show() }
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
추상메서드
안녕하세요! List 컴포넌트에서 renderItem을 굳이 정의하는 이유가 따로 있을까요??,, 추상 메서드에 대한 개념이 이해하 잘 안가네요,, 그냥 이해를 돕기 위해 정의하는 메서드인가요?
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
컴포넌트 반환값 관련 질문
4:30초 쯤 JSX 문법을 이용한 <App />이 바벨에 의해 React.createElement(App, null); 로 바뀐 뒤에 App 클래스가 호출되고 인스턴스가 반환된 이후에 리액트가 자동으로 인스턴스의 render 메서드를 호출하여 리액트 엘리먼트를 반환하는 것이 맞나요? 이러한 과정을 통해 <App />이 결과적으로 리액트 엘리먼트를 반환하는 것이 맞는지 궁금합니다! 클래스는 암묵적으로 인스턴스를 반환한다고 알고 있어서 바로 render 메서드가 호출되는 것이 이해가 잘 되지 않아요 ㅠㅠ
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
ReactDom.render 메서드
헷갈리는 부분이 있습니다! 1. ReactDom.render 매서드를 호출하는 시점이 처음 가상돔이 만들어지는 시점인가요? render 메서드를 호출하면 처음으로 가상돔이 생성되는데 이때 가상돔은 두 번째 인수로 전달한 돔 엘리먼트의 자식으로 첫 번째 인수로 전달한 리액트 엘리먼트를 추가한 가상돔을 생성하고, 이 가상돔을 토대로 DOM API를 호출하여 실제 돔에 반영하여 실제 돔을 생성하는 과정이 맞나요? 2. 화면을 처음 로드할 때 HTML을 파싱하여 실제 DOM을 생성한 이후 화면에 렌더링하고, script 태그가 로드될 때 ReactDOM.render 메서드가 호출되어 처음 가상돔이 생성되고 이때부터 가상돔을 사용하는 것이 맞나요? 3. 가상돔의 경우 실제 돔처럼 루트 노드가 document부터해서 실제 돔 구조와 완전히 똑같이 생성되나요? 아니면 render 메서드의 두 번째 인수로 전달한 돔 엘리먼트를 루트 노드로 하여 가상돔을 생성하나요??
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
가상돔 관련 질문있습니다!!
강의 잘 보고 있습니다!!강의 중 궁금한 부분이 있어서 질문드립니다!! 첫 번째로 가상돔 동작 순서입니다 처음 ReactDOM.render 메서드가 호출이 되면 가상돔이 첫 번째 인수로 전달받은 리액트 엘리먼트를 두 번째 인수로 전달받은 돔 엘리먼트의 자식 엘리먼트로 추가한 가상돔을 생성하고, 생성한 가상돔을 토대로 DOM API를 호출하여 실제 돔에 반영을하고,이후에 DOM API가 호출되면 가상돔이 다시 전체 화면을 그린 후 이전에 그렸었던 가상돔과 비교하여 실질적으로 변경이 필요한 부분만 DOM API를 호출하여 실제 돔에 반영하는 것이 맞나요?? 두 번째로 가상돔이 DOM API를 호출하는 것입니다. 브라우저에서 버튼 색이 빨강 -> 파랑 -> 빨강 이렇게 DOM API 호출을 요청하면 이 요청들을 가상돔이 갖고 있다가 결과적으로 빨간색으로 출력되면 되기 때문에 중간에 파란색으로 변경하지 않고 바로 빨간색으로 변경되는 DOM API만 호출하는 것인가요? 이렇게 DOM API를 모아서 한 번에 호출하는 주기가 따로 있는건가요?
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
github 주소좀 알려주실 수 있으신가요?
github 주소좀 알려주실 수 있으신가요?
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
searchResultView를 바로 hide 했을 때 생길 수 있는 문제점이 있을까요?
안녕하세요, 저는 store의 저장값을 비우고 다시 렌더링 하는 것 대신해서 this.searchResultView.hide(); 바로 불러서 결과값을 reset 했습니다. 테스트를 해봤을 때는 발견되는 문제점은 없었습니다. reset() { console.log(tag, "reset"); this.searchResultView.hide(); } 혹시 바로 hide()를 부르면 생길 수 있는 문제점이 있을까요? 감사합니다.
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
delegate에 관하여 질문있습니다.
bindEvents() { // delegate(this.element, "click", "li", (event) => // this.handleClick(event) // ); on(this.element, "click", (event) => this.handleClick(event)); } handleClick(event) { console.log(tag, event.target); const value = event.target.dataset.tab; this.emit("@change", { value }); } 위 코드에서 delegate 부분을 helper.js의 on 메서드를 이용하여 구현해보았는데요 지금처럼 tab-view안에 li만 있을경우는 delegate를 쓸때와 동일한 것이 맞나요? 아니면 delegate를 사용하여야만 하는 이유가 있을까요? 읽어주셔서 감사합니다.
- 해결됨[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
선생님 delegate함수를 사용하는 부분에 대해서 질문이 있습니다
강의 너무 재밌고 흥미롭습니다 감사합니다 !! 제 질문은 아래와 같습니다. delegate 함수를 호출할 때 아래 코드에서와 같이 화살표 함수를 콜백으로 넘겨주는데요, // KeywordListView.js bindEvents() { delegate(this.element, "click", "li", (event) => this.handleClick(event)); } handleClick(event) { const value = event.target.dataset.keyword; this.emit("@click", { value }); } // helper.js export function delegate(target, eventName, selector, handler) { const emitEvent = (event) => { const potentialElements = qsAll(selector, target); for (const potentialElement of potentialElements) { if (potentialElement === event.target) { return handler.call(event.target, event); } } }; on(target, eventName, emitEvent); } 화살표 함수로 넘기는 이유는 handleClick 함수에 this를 바인딩 하지 않기 위해서인가요? 제가 이해한 의도는 helper의 delegate 함수에서 handler를 호출할 때 call을 이용해서 event.target을 this로 넘겨주는데, handleClick에서는 KeywordListView 클래스가 상속받은 emit함수를 호출하기 위해서, this에 다른 것이 바인딩 되지 않도록 하기 위해 화살표 함수를 사용한 것으로 이해했습니다. 이게 선생님이 코드를 작성하신 의도가 맞는지 확인하고 싶어서 질문드립니다. 감사합니다!
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
강의 소스코드
혹시 강의에서 사용한 코드를 직접 따라해보고 개인 깃헙에 학습용도로 올려도 될까요? 항상 강의 잘 보고 있습니다.감사합니다.
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
Hooks 를 이용한 수업 예정 있으신가요? 아니면 이 강의를 리뉴얼 할 예정이 있는지 여쭈어 보고 싶습니다.
안녕하세요 김정환 강사님 이번에 강의를 사게 되어 열심히 듣고 있습니다. 다름이 아니라 수업이 클래스 컴포넌트 위주로 구성이 되어 있으신거 같아서요.. 혹시 Hooks를 위주로 하는 수업이 따로 예정에 있으시거나 이 강의를 리뉴얼할 예정이 있으신지 여쭈어보고 싶습니다. 이번에 인프런 강의 30퍼 할인을 하면서 강사님 강의를 듣고 싶어 강사님 관련된 강의를 전부 결제하였습니다. 열심히 듣겠습니다. ^^
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
커스텀 이벤트의 발행
강의 잘 듣고 있습니다. 다름 아니라, SearchFormView에서 keyup,submit은 @submit과 달리 이벤트 발생시 controller에서 subscribe하지 않는 데, 이것은 브라우저에 이미 등록된 이벤트리스너라 필요가 없어서인가요? 반면에, @submit은 커스텀 이벤트이기에 controller에서 반드시 구독을 해줘야 하는 것이구요.
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
강사님 그림이 화면에 다 안보입니다.
아래 그림과 같이 햄버거를 검색하였을 때 그림이 화면에 다 안담기는데 어느파일을 수정해 줘야 하나요?? 코드는 git checkout -f ready/search-form-4하고 강의그대로 코드 클론코딩 하였습니다.
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
Refuse .. CSP 에러 발생하시는 분들 참고하세요
1. npm 명령어로 http-server 패키지 설치 npm install -g http-server 2. 다음 1-vanilla/ 경로에서 http-server 명령어로 서버 실행 http-server 3. localhost:8080 또는 VPS_IP:8080으로 접속 (포트는 패키지 버전마다 다를 수 있음) 4. 만약 404 에러가 발생하는 js 파일 등등이 있다면, 아래 명령어로 누구나 접근할 수 있도록 권한 설정 후 서버 재실행 chmod 777 store.js (예시)
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
.on같은 함수
이벤트 바인딩하는 함수로 만들어주는것들 제이쿼리로 사용하고 있는것 맞나용?
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
함수형에서 컴포넌트 state 사용
안녕하세요! 함수형 컴포넌트에서는 state를 사용할 수 없다고 하셨는데, 혹시 useState 훅으로 사용하는 것과는 다른 개념인지 궁금합니다.
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
클론중 문제
탭 작업 중 this.selectedTab = TabType.HISTORY; 을 입력하는 순간 탭 창이 사라집니다. 처음부터 두번 해봤는데 역시나 사라지네요 ..
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
getList와 _getItem 같이 쓰는부분 잘 이해가 안됩니다...
getList(data = []) { console.log(data); return ` <ul class="result"> ${data.map(this._getItem).join("")} </ul> `; } _getItem({ imageUrl, name }) { return ` <li> <img src="${imageUrl}" alt="${name}"/> <p>${name}</p> </li> `; } 이부분 이해가 잘 안됩니다... 위에 getList 함수에서 data.map 안쪽에 값이 this.getItem 을 파라메터도 없이 하셨는데 무슨 문법인가요??
- 해결됨[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
객체속성 접근에 관해 질문입니다.
.map((tabType) => ({tabType, tabLabel: TabLabel[tabType]}))해당 코드에서 TabLabel[tabType] -> TabLabel.tabType 으로 변경하면 undefined 가 출력이 되는데 이유를 모르겠습니다.// const TabLabel = { [TabType.KEYWORD]: '추천 검색어', [TabType.HISTORY]: '최근 검색어'}console.log(TabLabel['KEYWORD']);console.log(TabLabel.KEYWORD);이런식으로 콘솔에 찍어보면 잘 출력이 됩니다.스코프와 관련이 있나요?
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
controller는 한페이지에 하나인가요?
아직 강의 초반이지만 정말 잘듣고 있습니다. 이런 강의 만들어주셔서 감사하고 후속 강의도 기대하고 있습니다!! 컨트롤러는 한페이지에 하나가 할당되나요? 예를 들어 html이 10개가 있으면 각각의 10개의 컨트롤러가 존재하는지 궁금합니다.