55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
SearchResult 질문이요
질문이요 show가 정의가안되어있다는데.. 컨트롤로에서 SearchResultView를 임폴트해야하는건가요?ㅠㅠ
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
handleChangeInput () 에서 변수값
const searchKeyword = event.target.value; this.setState( { searchKeyword} ) 위의 this.setState 같은 경우에는 constructor 안의 this.state 의 searchKeyword를 변경한다는 의미일까요? construtor의 this.state 는 기본적으로 선언되어 있는 값인걸까요? 오버라이딩 해서 사용하는건가요?
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
문법 질문드립니다
위와 같이 value 를 객체로 보내주지 않아도 실행이 정상적으로 되는데 {value} 처럼 구조 분해 할당으로 전달하는것이 더 좋은 이유가 있을까요? const { value } = this.inputElement; this.emit("@submit", { value });
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
동작순서 및 prop 대해서 궁금한게 있습니다.
안녕하세요 강의자님 강의를 정말 유익하게 보고 있는 수강생입니다. 추상메서드 중에 List 와 KeywordList 간의 실행 순서에 조금 궁금한게 있습니다. 실제 List 클레스에서 renderItem 을 추상메서드로 남기고 기능을 KeywordList 에서 구현해서 적용하는것 까지 이해 하였습니다. 그런데 실제로 App.js 에서 호출할떄 KeywordList 를 호출하는데 List 의 render() 함수가 동작하는건 어떤 과정인지 좀 알고 싶습니다. KeywordList 의 마운트 시 data 를 가져와 setState 에서 변화가 생겨서 render()를 호출하고 상속을 받았으니 List 의 render() 가 호출된거라고 생각하면 될까요? 또하나는 prop 에 대한 문의입니다. List.js 에서 onClick 에 this.props 구문을 썼는데 이부분이 잘 이해가 안되서 이 prop을 어떤 과정을 통해 사용할 수 있는건지 문의드립니다. 웹팩강의로 시작해 여기까지 왔는데 늘 좋은강의 감사드립니다.
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
[순수JS 1] 검색폼 2 에서 const {value} = this.inputElement
안녕하세요 :) this.inputElement 은 <input type="text" placeholder="입력하세요"> 이러한 태그를 나타낸다고 생각합니다. 제가 console.log( {value} , this.inputElement, value.length) 를 찍어보았을 때의 결과값은 {value: "zz"} <input type="text" placeholder="입력하세요" > 2 이렇게 보여집니다. const {value} = this.inputElement에서 const 의 객체로 this.inputElement를 담게되는데 왜 this.inputElement.value 값이 담기게 되는것인지 이해가 되지 않습니다. 제가 생각했을 때는 {value} = <input> 태그가 담겨야 되는것이 아닌가 라는 생각을 하게되었습니다.
- 해결됨[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
bindEvents 내부에서 슈퍼클래스의 bindEvents 메서드를 호출 하는 이유가 있을까요?
HistoryListView의 bindEvents에서 슈퍼 클래스의 bindEvents를 호출 해야 하는 이유가 있을까요? 서브 클래스에서 super() 호출로 슈퍼클래스가 초기화될 때 슈퍼 클래스의 bindEvents가 history-list-view 요소를 대상으로 한 번 더 호출되니 안 해줘도 되지 않을까 하는데 제가 잘못 이해하는 것인지 궁금합니다.. bindEvent = () => { delegate(this.element, 'click', 'button.btn-remove', this.handleRemove); super.bindEvent(); // 👈 }
- 해결됨[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
Template 클래스를 따로 만들었는데 괜찮을까요?
Template 코드가 View와 같이 공통되는 느낌이라 따로 만들었는데 상관없을까요? export default class Template { constructor(listClassName) { this.listClassName = listClassName; } getList = (data = []) => { return ` <ul class="${this.listClassName}">${data.map(this._getItem)}</ul> ` } _getItem = () => { throw '_not overlide'; } getEmptyMessage = () => { return ` <div class="empty-box">검색결과가 없습니다.</div> `; } }
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
show( ) 함수를 오버라이드 한 후 다시 부모의 show()를 호출하는 이유가 궁금합니다.
show() { this.element.innerHTML = this.template.getTabList(); super.show(); } [질문 1] show() 함수를 오버라이드하여 탭뷰의 show()에서는 innerHTML에 탭 리스트를 추가하고 show()함수의 역할이 변경되었으니 다시 부모의 show()를 호출해서 디스플레이 하는거라고 이해하면 되나요 ? [질문 2] .map(this._getTab) _getTab({ tabType, tabLabel }) { return ` <li data-tab="${tabType}">${tabLabel}</li> `; } _getTab 함수에 대한 질문인데요.. map안에서 _getTab에 () 가 붙지 않는 이유가 궁금합니다. () 가 붙으면 함수의 호출이고 없으면 참조인것 같은데 왜 여기서 참조형식으로 써야하는지 잘 이해가 안가요 그리고 _getTab 구현부분에서 에서 인자를 넘겨주지 않았는데 {tabType,tabLabel} 을 어떻게 받아올 수있는지 궁금합니다.
- 해결됨[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
delegate 헬퍼 함수의 용도가 궁금합니다.
1. 이벤트 전파를 통해 공통된 하위 요소에 이벤트를 바인딩하기 위해서 사용하는 게 맞을까요? 2. 그리고 하위 요소가 렌더링 되기 전에 이벤트 바인딩해도 문제가 없는 게 상위 요소를 매개체로 바인딩해서가 맞을까요? const liElements = qsAll('li', this.element); liElements.forEach(li => { li.className = li.dataset.tab === selectedTab ? 'active' : ''; li.addEventListener('click', (e) => { const payload = { tabType: li.dataset.tab, } this.emit(EVENT_TYPE.TAB_CLICK, payload) }); }); 제가 구현했을때는 tabList가 렌더링 된 다음에 이벤트 바인딩해야 된다 생각해서 show 메서드 내부에서 바인딩하였는데 delegate 함수 사용하니 하위 요소 렌더링 여부가 무관해졌습니다.
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
Tab 상수 관련되서 질문 드립니다.
TabLable의 프로퍼티명을 상수 객체로 선언하신 이유가 있을까요? 추후 구현에서 TabType에 따라 안의 컨텐츠가 달라지니 map안에서 type === 'KEYWORD'와 같이 하드코딩 방지하기 위해서 일까요? (1) const TabType = { KEYWORD: 'KEYWORD', // 추천 HISTORY: 'HISTORY' // 최근 }; const TabLable = { [TabType.KEYWORD]: '추천 검색어', [TabType.HISTORY]: '최근 검색어' } Object.values(TabType) .map(tabType => ({ tabType, tabLable: TabLable[tabType] })) .map(this._getTab) .join('') ------------------------------- (2) const TabLable = { 'KEYWORD': '추천 검색어', 'HISTORY': '최근 검색어' } Object.entries(TabLable) .map((row) => { const [ tabType, tabLable ] = row; return { tabType, tabLable } }) .map(this._getTab) .join('');
- 해결됨[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
[구현하기 1] SearchForm 1 강의 중 질문있습니다.
안녕하세요~ 정환님 강의를 듣던 중에 궁금한 점이 생겨서 이렇게 질문 드립니다. 아래의 코드는 강의 중에 등장하는 SearchForm.js 입니다. render() 함수는 ReactDOM에서 제공하는 메소드로 알고 있는데요. 현재 코드 같은 경우는 ReactDOM 을 import 하지 않고도 정상적으로 작동합니다. 물론, 정환님께서 강의하시면서, 시연해주실 때도 정상적으로 작동했구요. 그래서, 살짝 혼란스럽습니다. Q) ReactDOM 을 import 하지 않고도 render()를 사용할 수 있는 이유가 뭔가요??
- 해결됨[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
사용편 1 - 리엑트 : [추천/최근 검색어] 최근 검색어 2 강의 중에 질문있습니다.
사용편 1 - 리엑트 : [추천/최근 검색어] 최근 검색어 2 강의 중 4:32 ~ 4:33 에 정환님께서 크롬 데브툴에서 특정 키를 누르니까 "검사기 "가 뜨면서 클릭한 엘리먼트의 색깔이 보이고, 왼쪽에서는 콘솔 창에서 HTML 내에서 해당 엘리먼트의 위치가 딱딱 보이던데, 어떻게 하신 건지 궁금합니다. 구글 검색해도 잘 안 나오네요ㅠ
- 해결됨[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
[검색폼 1] 상태를 갱신하기- 이벤트 처리 강의 중, render()에 관해 질문 있습니다.
안녕하세요~ 정환님 강의를 듣던 중에 질문이 하나 생겼습니다. Q) handleChangeInput(event) 안에서 state 값을 변경해줘도 render()가 동작하지 않아서 그래서 this.forceUpdate() 쓰는 것이라고 이해했는데요. 그렇다면, handleChangeInput(event) 안에서 render()를 강제로 동작해주기 위해서, this.render()를 넣어줘도 상식적으로 작동해야할 것같은데... 작동하지 않네요...;;; 왜 이런 결과가 나오나요?? 혹시 몰라서, this.ReactDOM.render(); 을 넣어봤는데도 작동을 안 하네요...;;;
- 해결됨[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
View.js 에서 작성하신 Class에 관해 질문 있습니다.
바닐라 JS로 작성하는 강의 코드 중에서 질문 있습니다. Q1) class 안의 모든 메소드들에 return this;를 해주셨는데요. show() 와 hide() 같은 경우, 이미 원하는 값을 변경해줬는데... 구지 return 값을 따로 줘야하는 이유가 있나요?? Q2) return this; 가 메소드에서 어떤 의미를 가지는지 궁금합니다. Q3) DOM API를 랩핑하셨는데, 랩핑은 외부 라이브러리의 코드가 변경되더라도, 내부 코드에 영향을 주지 않기 위해서 하는 것이라고 알고 있는데요. DOM API가 변경될 가능성은 거의 없는 것같은데, 랩핑을 하신 이유가 있는지요?? Q4) 현업에서는 그냥 모든 외부 라이브러리를 예외없이 랩핑해서 사용하나요??
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
강의 중 포인터가 너무 크게 나와요
강의 중 화면에 포인터가 너무 큽니다
- 해결됨[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
강의 설명란 오타 수정
git checkout -f ready/tab-view-2 가 아니라 git checkout -f ready/tab-2로 변경되어야 할 거 같습니다
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
compile 문의
강사님 안녕하세요. 강의 잘 들었습니다. 한가지 궁금한게 있는데요. cra 로 작은 프로젝트를 해보고 있는데요. npm run start 로 서버를 띄워두고, 로컬개발환경에서 소스를 수정하면 자동으로 Compile 이 진행되는데 혹시 소스파일의 수가 점점 늘어날수록 babel-loader 의 transfile 과정으로 인해서 Compile 속도가 점점 늦어지게 되나요? 예를 들어 소스파일이 1,000개 일때보다 10,000개 일 때 Compile 속도가 10배 더 걸리는 것일까요? 소스 하나만 수정하고 저장해도 Compile 이 꽤 오래 걸리는데 혹시 이런 문제를 부딪혀 보신 적이 있는지 궁금합니다.
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
검색결과 1
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 똑같이 한거 같은데 실행하면 Controller.js에서 오류가 납니다. render함수 호출하고 render() { if (this.store.searchKeyword.length > 0) { this.searchResultView.show(this.store.searchResult); return; } show 부분에서 Uncaught TypeError: Cannot read properties of undefined (reading 'show') 라고 나옵니다. 이유가 뭔지 모르겠네ㅐ요;;; 똑같이 따라했는데,..,,.ㅠ
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
mvc 패턴 비동기 처리 질문입니다
mvc 패턴은 비동기 처리를 어떻게 하나요? ex1) // model async setData() { const response = await fetch(...); const data = await response.json(); return data; } // controller constructor() { this.getData(); } getData() { this.data = this.model.setData(); } 이렇게 해서 view에 전달하면 되나요? ex2) // model async setData() { const response = await fetch(...); const data = await response.json(); this.foo(data); } this.foo(data) { // data에 대한 잔처리 } // controller ?? 이렇게 한다면 controller에서는 어떻게 데이터를 받아야 하나요? 감사합니다!
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
store의 data는 직접 수정해도 되나요?
헷갈리는 점이 있어서 질문드립니다. state는 불변성을 가지는걸로는 알고있는데 HistoryList state는 store의 historyData를 끌어서 쓰는 것 뿐이니 store에서 historyData를 직접 수정해도 되나요?