55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
sort() 질문 드립니다.
안녕하세요.최근 검색어 구현 중 Store.js에서 스토리지의 historyData를 받아와서 sort를 할 때,강의에서 나오는대로 > 부등호로 하면 정렬이 되지 않고- 를 해줘야 내림차순으로 정렬이 됩니다. 왜 강의와 똑같이 부등호로 했을 때 정렬이 안되는 것일까요? getHistoryList() { return this.storage.historyData.sort(this._sortHistory); // 날짜 역순 정렬 } _sortHistory(history1, history2) { // return history2.date > history1.date; return history2.date - history1.date; }
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
reset 시점에 searchResult 빈 배열로 update
안녕하세요. 이번 수업에서 사소한? 궁금증이 생겨서 질문 남깁니다! handleReset() { this.setState(() => { return { searchKeyword: "", // searchResult: [], submitted: false, } }, () => { // console.log("TODO: handleReset", this.state.searchKeyword); console.log("TODO: handleReset", this.state.searchResult); // 이전 검색 결과가 그대로 저장되어있음. }); } 위의 handleReset 메서드 실행시, 저 같은 경우엔 주석 친 부분처럼 this.state.searchResult를 빈배열로 무조건 갱신해줘야 한다고 생각 했습니다. 이유는, reset의 동작이 검색 결과 부분에 아무것도 노출하지 않는다는 점 때문에, 검색 결과를 저장하고 있는 searchResult 역시 같이 비워줘야 하지 않나 라는 생각이 들었기 때문입니다. 물론 현재로서는 this.state.submitted으로 노출 제어를 하고 있는 상황이기 때문에 동작에는 전혀 문제가 없긴 하지만요...! 사소한 부분이긴 하지만.. 혹시 강사 님께서는 이 부분에 대해서 어떻게 생각하시는지 여쭤보고 싶습니다!
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
Button에 Onclick사용
{this.state.searchKeyword.length > 0 && (<button type="reset" className="btn-reset" onClick={event => this.handleOnclick(event)}></button>)}button에다가 onClick이벤트를 줘서 리셋시켜도 상관없을까요 ?? form에다가 함수 사용하는거랑 button에서 onClick이랑 차이점이 있을까요??
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
npx lite-server error 확인 요청드립니다.
git 프로그램에서, code 확인 후에npx lite-server --baseDir 1-vanilla 실행하면npm ERR! code ENOENTnpm ERR! syscall lstatnpm ERR! path C:\Users\ostri\AppData\Roaming\npmnpm ERR! errno -4058npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\ostri\AppData\Roaming\npm'npm ERR! enoent This is related to npm not being able to find a file.npm ERR! enoentnpm ERR! A complete log of this run can be found in: C:\Users\ostri\AppData\Local\npm-cache\_logs\2024-02-24T09_12_51_599Z-debug-0.log 상기 에러메세지가 발생하는데, 혹시 어떻게 해결할 수 있을까요?
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
node 20이상 쓸때 꿀팁
package.json에서 "scripts": { "start": "export NODE_OPTIONS=--openssl-legacy-provider && webpack serve", "build": "webpack" },를 추가해주면 open-ssl 관련 에러가 사라집니다.
- 해결됨[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
디버깅 관련질문이 있습니다.
안녕하세요 선생님 질문이 있습니다.제가 자바, 스프링만 해서 intellij ide 로 디버깅만 해보았는데 이런 react같은 경우는 어떻게 해야하나요?현재는 console.log로 디버깅하였습니다. ps) 혹시나 해서 남겨놉니다. (저는 실수해서)this.element.innerHTML이네요 저는 innerHtml인줄알고 왜 랜더링이 안되지 한참 디버깅하였습니다.
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
[순수JS2]탭 3(풀이) 질문있습니다.
안녕하세요 선생님 강의 잘 듣고 있습니다.delegate에 관해서 제가 아래처럼[(1),(2)] 이해하고 있는데 이것이 맞게 이해한것인지 궁금합니다. 1) delegate에서emitEvent에 담기는것은 아직 호출되지 않은 함수인데이게 tabView생성자가 호출되는 시점에 렌더링이 되지않은(?) id =tab-view에 delegate 안의 on 메소드에 의해 바인딩이 됩니다. 2) 이후 id=tab-view에 click 이벤트가 발생하면 그제서야 on에 의해 바인딩되었던 이벤트처리기 (emitEvent)가 호출되어서 실제 bindEvents()에서 바인딩하려했던 handleClick 를 호출합니다. 3) 또 쓰다 보니 궁금한것이 아직 TabView의 show가 호출되기 전이긴 한데 constructor에서는 bindEvents() 메소드 안에서 delegate -> on 메소드에서 target.addEventListener를 호출하고 있는데 id=tab-view는 이미 렌더링 되었다고 표현하는것이 맞나요?감사합니다.
- 해결됨[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
추상화를 어떻게 받아들이면 될까요??
안녕하세요.강의 듣다보면 선생님께서 추상화라는 말씀을 자주 하시는데요프로그래밍에서 추상화라는 말이 잘 와닿지가 않습니다ㅠㅠ선생님 강의 외에도 다른 강의나 서적들도 보면 추상화라는 말이 꽤 나오는걸 볼 수 있는데 그때마다 추상화라는걸 어떻게 생각해야 할 지 잘 모르겠어서 질문 드려봅니다...
- 해결됨[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
[검색폼 1] View.js 파일 질문과 학습 질문
안녕하세요. 강의 듣기 시작한 수강생 입니다 ㅎㅎ강의 듣기전에 코드도 한번 살펴보고 검색폼 1강의도 들었는데요아무리 봐도 View.js 파일에서 class 내부의 constructor의 매개변수로 전달되는 element가 뭔지 잘 모르겠습니다... View 클래스로 인스턴스를 만들때 인수로 전달한 것이 element로 들어가는걸로 알고 있는데View 클래스로 생성한 인스턴스를 못 찾겠습니다ㅠㅠ 그리고 제가 JS랑 리액트를 다른 강의로 한 번 보고 복습하면서 선생님 강의를 듣고 있는데요후기글처럼 초반 JS 부분이 어렵긴합니다내용이나 코드가 이해는 되고 어떤 코드가 어떤 역할을 하고 어떤 코드를 이 스크립트에 작성하는지 이런건 어느정도 파악하면서 듣고 있는데요막상 제가 이런 모듈을 만들고, 커스텀 이벤트 객체를 생성해서 자바스크립트로 프로젝트를 만들어보려고 했을때는 코드를 어떻게 쳐야 할지 막막할 것 같은데혹시 강의를 어떤 방법으로 수강하고, 복습은 어떤식으로 하면 좋을지 조언 부탁드릴 수 있을까요?
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
on 메서드 eventName 문의
on 메서드 호출시 eventName을"submit" 으로 사용하는 경우와 "@submit" 으로 사용하는 경우가 있는데요, 어떤 차이가 있나요?
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
import에 관해서 질문드립니다
안녕하세요 강의 정말 잘 듣고 있습니다.해당 강의를 듣는중 궁금한점이 생겨서 질문 드립니다.제가 원래 java/spring을 공부하다가 이번에 프론트 엔드쪽에 관심이 생겨서 React를 학습중인데ide에서는 .js 파일을 Import할때 뒤에 왜 자동으로 .js가 안붙도록 되어있나요?저는 강사님과 다른 ide를 사용중인데도 여기서도 .js가 자동으로 붙지 않습니다.import React from "react"; import Header from "./components/Header.js"; import KeywordList from "./components/KeywordList.js"; import SearchForm from "./components/SearchForm.js"; import SearchResult from "./components/SearchResult.js"; import Tabs, { TabType } from "./components/Tabs.js"; import store from "./Store.js";제가 추측한건데 React를 import 하는 경우에는 react 파일이 typeScript로 되어있고 나머지 경우는 전부 javaScript로 되어있습니다. 따라서 기본이 .ts로 설정 되어 있어서 javascript파일은 별로로 명시해줘야 찾을 수 있게 되어 있다고 생각이 듭니다.별로 의미없는 질문이지만 궁금해서 질문 드립니다.감사합니다.
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
view.js의 on 메소드에 대해 질문드립니다
on(eventName, handler) { on(this.element, eventName, handler); return this; }view.js의 on 메소드에서 helper.js의 on 메소드를 호출하는 코드를 작성하셨는데 그냥 view.js의 on에 파라미터를 세 개를 넣지 않고 이런 식으로 작성하신거는 어떤 코드 작성 패턴 같은걸까요?
- 해결됨[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
componentDidMount에서 getKeywordList()를 하는 이유
안녕하세요. 강의 재밌게 잘 듣고 있습니다.강의를 듣다 궁금증이 생겨 질문 남깁니다. store.getKeywordList() 메서드를 사용해서 keywordList를 storage에서 가져오는 작업을 componentDidMount에서 하셨는데,main.js의 search 메서드에서 submit이 발생했을 때, store에서 searchResult를 가져오는 것처럼keyword tab을 클릭했을 때 keywordList를 가져오는 방식으로 작성하지 않고 componentDidMount를 사용하신 이유가 궁금합니다. 아래와 같이 onClick과 핸들러를 사용하여 작성해도 정상적으로 동작하는 것처럼 보이는 것을 확인했습니다. handleTabClick(tabType) { if (tabType == TabType.KEYWORD) { const keywordList = store.getKeywordList(); this.setState({ keywordList }); } } ... const tabs = ( <> <ul className="tabs"> {Object.values(TabType).map((tabType) => { return ( <li className={tabType === this.state.selectedTab ? "active" : ""} key={tabType} onClick={() => { this.setState({ selectedTab: tabType }) handleTabClick(tabType)}} > {TabLabel[tabType]} </li> ); })} </ul> {this.state.selectedTab === TabType.KEYWORD && keywordList} {this.state.selectedTab === TabType.HISTORY && historyList} </> );
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
[순수JS1]검색폼2_git branch 이동관련
안녕하세요. git 사용을 처음해보는 지라, ... git 관련해서 잘 몰라서 문의드립니다. git bash 로 git chekcout -f ready/scaffoding 후 code . 로 vscode가 오픈되고나서, [순수JS 1]검색폼 1 까지 따라서 코딩을 하고 VSCODE 상에서 파일 저장을 했는데요.git branch명을 search-form-1 으로 저장하는 내용을 강의상에서 못본거 같은데.. [순수 JS1]검색폼 2의 앞부분에서, git checkout -f ready/search-form-1 으로 이동을 하는게 나오네요. code . 실행하게 되면 이전에 제가 저장을 했던 내용이 아닌데요. vscode 상에서 파일 저장외에 git 변경분도 저장을 했어야 하는 걸까요?? branch명도 다르게 저장을 해야 하는 것 같은데.. 관련 명령어 좀 부탁드려도 될까요??
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
클래스 컴포넌트와 함수형 컴포넌트
우선, 정말 좋은 강의 찍어주셔서 감사합니다.강의가 너무 좋아서 많은 도움이 되었습니다.리액트 컴포넌트 강의 듣고 있습니다.검색 애플리케이션을 클래스 컴포넌트로 짠 이유가 궁금합니다. 제가 처음 리액트를 학습할 때는 상속같은 복잡성 때문에 함수형 컴포넌트로 리액트를 사용해서요.현업에서 클래스 컴포넌트와 함수형 컴포넌트 중 어떤 것을 사용할지 선택하는 기준이 궁금합니다. (어떤 상황에서는 ~)
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
@ 골뱅이의 역활
안녕하세요!자꾸 질문드려 죄송합니다. 커스텀 이벤트를 호출하실때 계속 @(골뱅이)를 사용하시는데 구글에 아무리 찾아봐도 무슨 역활인지 모르겠습니다. 자바스크립트에 @를 붙이는 경우는 어디에 나와 있나요..? (혹시 제가 강의 내용에 있는 걸 놓친거라면 죄송합니다)
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
[순수JS1] 폴더구조 강의관련 질문
안녕하세요. [순수JS1] 폴더구조 편에서 npx 로 웹서버 띄우고 localhost:3000 켜고 크롬에서 개발자도구로 네트워크 보면 store.js 로딩하는데 404에러가 나오는데 이유가 뭘까요?그리고 강사님처럼 console.log 로 로그를 찍어도 크롬 개발자도구 console 탭 보면 아무것도 안나오는데 이유가 뭘까요 ㅠㅠ?
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
reset했을때 x버튼이 안지워집니다.
reset했을때 x버튼이 안지워집니다.수업대로 visible? block: none;했는데 안지워지는 이유가 뭘까요..? ㅜㅜ파일도 깃헙다운 받은거라 코드 없는 부분도 없는 거 같고요질문을 해당 수업에서 다시 올리라고 해서 올려봅니다. 수업 내용은 [순수JS 1] 검색폼3 입니다.
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
reset했을때 x버튼이 안지워집니다
reset했을때 x버튼이 안지워집니다.수업대로 visible? block: none;했는데 안지워지는 이유가 뭘까요..? ㅜㅜ
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
showResetButton
안녕하세요. showResetButton 메쏘드가 이해가 안갑니다. display=visible? 에서 보이는 것이 검색어 입력한 것인가요?이해가 안가는 것이..this.resetElement.style.display는 검색어 입력한 것에 대한 것이 아니라, X버튼 부분이 보이는지에 대한 것인거 같은데. 어떻게 해서 저 부분이 검색어 입력한 것에 대한 디스플레이를 나타내는지 너무 모르겠습니다..