55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
각 탭을 클릭할때 active class 변화 책임
각 탭을 클릭할때 탭의 active class 변화의 책임이 TabView.js에 있다고 생각해서 TabView클래스 안에서 처리하도록 했습니다. 선택된Tab의 상태를 Controller에게 알리기 전에 View에서 선택된 Tab을 render를 하는것이 MVC 패턴에서 어긋나는 부분인가요? 아래 코드 : 탭상태변화를 바로 View에 반영하고 이벤트발생 // ✨ bindEvents() { this.element.addEventListener("click", this.handleTabClick.bind(this)); } // ✨ handleTabClick(e) { this.show(e.target.dataset.tab); this.emit("@tabChanged", { tab: e.target.dataset.tab }); e.stopPropagation(); } 전체코드 export default class TabView extends View { constructor() { console.log(tag, "constructor"); super(qs("#tab-view")); this.template = new Template(); // TODO this.bindEvents(); } // ✨ bindEvents() { this.element.addEventListener("click", this.handleTabClick.bind(this)); } // ✨ handleTabClick(e) { this.show(e.target.dataset.tab); this.emit("@tabChanged", { tab: e.target.dataset.tab }); e.stopPropagation(); } show(selectedTab) { this.element.innerHTML = this.template.getTabList(); qsAll("li", this.element).forEach((li) => { li.className = li.dataset.tab == selectedTab ? "active" : ""; }); super.show(); } // this가 이벤트 객체로 바인딩 되었다. // this --- e.currentTarget // this --- TabView }
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
오타를 발견한 것 같아서 여쭤봅니다!
View.js 파일 line 10에 style.display라고 되어야할 것 같은데 style.dispaly라고 작성되어 있는 것 같아서 질문 드려봅니다!
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
이 부분 문법이 이해가 안갑니다.
<ul> ${Object.values(TabType) .map((tabType)=>({tabType, tabLabel: TabLabel[tabType]})) //이 부분 문법이 이해가 안갑니다.. .map(this._getTab) .join("") } </ul> tabLabel: TabLabel[tabType] 부분이 어떻게 동작하는지 ... 이해가 안갑니다 map과 join은 이해가 되는데 저부분은 무슨 문법일까요..??
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
클래스형 컴포넌트
중간에 리액트 기초를 따로 학습했는데 요즘엔 클래스형 컴포넌트를 사용하지 않고 리액트에서도 함수형을 권장한다고 들어서요.. 클래스형 컴포넌트 방식으로 수업하는 이유가 따로 있으신지 궁금합니다!
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
2:44 에서 날짜의 불리언 값을 반환
이 부분에서 날짜의 불리언 값을 반환하는 방법에 대해서 리버스 함수가 아니라 불리언 값을 사용하는게 일반적인가요? 불리언 값에 대해 이해를 못한것 같습니다.
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
super.show()에 대해 질문드립니다
show(value = "") { this.inputElement.value = value; this.showResetButton(this.inputElement.value.length > 0); super.show(); } 안녕하세요! 강의 너무 잘듣고 있습니다. 여기서 super.show()를 주석처리해도 똑같이 렌더링되던데, 왜 다시 show()를 호출해야하나요?? super.show()의 역할이 궁금합니다!
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
store import
main.js 에서 store 객체 import 할 때 왜 Store.js가 아니라 ./js/store.js 경로인지 모르겠어요ㅜㅜ import store from './Store.js'; import store from './js/store.js';
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
강의 질문 드립니다.
먼저 강사님의 좋은 강의 감사드립니다. 강사님이 설명하신대로 따라 코드를 작성해봤는데, hello world가 출력되어야 하나, <p>${data}</p>라는 글자만 html에 그대로 출력됩니다... 저 코드 말고 뭐 또 작성해야 하는것이 있나요??
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
show() 함수가 undefined 인데 이유를 몰겠어요
this.searchResultView.show(this.store.searchresult) 가 undefined 인데 이유가 무엇일까요? https://github.com/node-hyun/prac-react2/blob/main/1-vanilla/js/Controller.js
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
helpers.js
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);
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
reset 이벤트에 커스텀 이벤트를 연결하는 이유가 무엇인가요?
1234 x 버튼 누르면 검색어 지우는건 굳이 이벤트 emit subscribe 안해도 이미 html 버튼의 타입이 reset이라 x버튼 누르면 검색어가 사라지는데요 <button type="reset" class="btn-reset"></button> 굳이 커스텀 이벤트를 발생시키고 bindEvents() { on(this.inputElement, "keyup", () => this.handleKeyup()); on(this.element, "submit", (event) => this.handleSubmit(event)); // reset 이벤트에 대해 this.handleReset() 실행 this.on("reset", () => this.handleReset()); } handleReset() { console.log("reset 이벤트 발생"); this.emit("@reset"); } @reset 이벤트에 해 reset() 를 연결해서 this.store.searchKeyword = ""; 를 해주는 이유가 있나요? ex) this.searchFormView.on("@reset", () => this.reset()); reset() { console.log(tag, "reset"); this.store.searchKeyword = ""; }
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
9:43 부분 질문이 있습니다.
안녕하세요. 좋은 강의 잘 듣고 있습니다.9분 43초쯤에 함수 명을 _sortHistory로 하셨던데, 함수앞에 _ 를 붙이신 이유가 궁금합니다. 함수명 앞에 _를 붙이는 기준이 있으신가요?
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
수업중에 말씀하신 블로그 주소는 어디에 있나요?
실습환경 구성에 말씀하신 블로그 링크는 어디에 있나요?
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
emit함수 질문있습니다.
hadleSubmit(e){ e.preventDefault(); console.log(tag,"handleSubmit"); const {value} = this.inputElement; this.emit("@submit",{value}) } 이렇게 해당 컴포넌트에 emit에 @submit 인자를 넣어서 실행시킨 것 까지는 이해했는데요. //어떻게 구독한거죠??? subscirbeViewEvents(){ this.searchFormView.on('@submit',event=>this.search(event.detail.value)).on("@reset",()=>{this.reset()}); } 어떻게 구독하고있는건지 모르겠습니다. @submit은 어디에 저장되어있던건가요?;; 여러가지 검색해보고 고민한 결과로는.. 1.handleSubmit 내부의 emit은 단지 이벤트 네임을 전달받아 커스텀이벤트를 만들고, 만드는 즉시 이벤트를 실행. 2. 컨트롤러에서 생성자가 subscirbeViewEvents 를 실행시키는데, 그 때에 이벤트리스너를 등록하는 개념이므로, 사실상 어떤 x라는 이벤트가 터지면 이렇게 해라. 라는 이벤트 등록을 위한 함수. 3.다시말해, 2번 시점에 이미 해당 이벤트는 등록되어있는것 4.handleSubmit내부에서 emit함수는 커스텀이벤트를 만들고 만든 즉시 실행했음 5.기존에 등록된 이벤트이므로 등록된 함수내용 실행. 이게 적절한 이해인지 궁금합니다. (사실 질문내용을 작성 하면서 대략적인 이해가 된거 같기도합니다;;;)
- 해결됨[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
handleChangeInput에서 handleReset함수를 return하는 이유가 궁금합니다.
handleChangeInput 함수에서 handleReset 함수를 실행하는 것은 이해가 되는데요. 왜 return 구문을 쓰신건지 잘 모르겠습니다 ^^;; handleChangeInput 함수 자체도 별도의 return을 해주는 것이 없는것 같아서요. handleChangeInput(e) { const searchKeyword = e.target.value; if (searchKeyword.length <= 0) { return this.handleReset(); // 이 부분 입니다! } this.setState({ searchKeyword }); }
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
데이터 sort 적용 문의
안녕하세요 ! 정환님 덕분에 재밋게 수강하고 있는 수강생입니다. MVC 모델을 JS로 따라하면서 최대한 꼭꼭 씹으면서 이해를 하려 여러번 돌려보고 있습니다. 다른 건 아니고 정환님이 구현하는 대로 따라했지만, HistoryListView 부분 구현 강의에서 controller를 통해 historyData를 솔팅할 때 제대로 되지 않아 정환님과는 다르게 나오더라구요. 그래서 최근 검색어가 새로 생성될 때도 순번이 다르게 나타나 계속 아래쪽에 위치하였습니다. sort 메소드 부분의 콜백을 이리저리 만져보다가 일반적인 오름차순으로 생각할 때 부등호(>)가 아닌 뺄셈 연산자(-)를 사용한 거 같아 적용하니 잘 적용되더라구요. 혹시나 일반적인 부등호로 했을 때 원래 안되는 것인가 싶어서 질문드려요.
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
import 경로 설정에 대해 궁금합니다.
안녕하세요. 강의 잘 듣고 있습니다. 궁금한 것이 하나 있어서요. React 예제에서는 main.js에서 store 객체를 사용하기 위해서 상단에 아래와 같이 Store.js 를 import 하였습니다. import store from "./js/Store.js"; 그런데 Vanilla 예제에서는 main.js 에서 아래와 같이 바로 현재 경로에서 import 합니다. import Store from "./store.js"; 두 예제(1-vanilla, 2-react) 전부 main.js 파일과 store.js 파일이 같은 경로(/js/)에 있는데요. 왜 react는 절대경로 형태로 루트부터 ./js/store.js 에서 불러오고, vanilla에서는 상대경로 형태로 불러와야 되는지 궁금합니다. 혹시나해서 react 예제에서 상대 경로로 store.js 파일을 불러왔더니, 오류도 발생하지 않는데, 화면에는 제대로 표시가 되지 않더군요. 예제 소스 대로 ./js/Store.js 하는 경우에만 제대로 동작하였습니다. 조언 부탁드릴께요. 감사합니다.
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
왜 404 에러가 날까요
IDE 는 웹스톰을 사용하구있구요 서버는 npm i -g live-server 를 설치하고 터미널에서 live-server를 실행하여 서버는 올렸는데 404 에러가 계속 나네요.
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
파이어 폭스가 가지는 장점이 있는건가요?
크롬 말고 파이어 폭스를 개발 단계에서 사용하는 장점이 있는건가요?
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
강의 너무 좋은데 후속 강의는 언제 나오나요?
다음 후속 강의는 몇월 달 쯤 올라올까요?