55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리액트 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버튼 부분이 보이는지에 대한 것인거 같은데. 어떻게 해서 저 부분이 검색어 입력한 것에 대한 디스플레이를 나타내는지 너무 모르겠습니다..
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
http://localhost:3000/ 하면 404에러가 납니다.
npx lite0server --baseDir 1-vanilla터미널에서 실행 후, localhost:3000접속하면Cannot GET / 이라고 뜨고 개발자도구에는 404에러라고 뜹니다. 터미널에도 404 에러구요.. 어떻게 하면 화면 띄울수있을까요?Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults... ** browser-sync config ** { injectChanges: false, files: [ './**/*.{html,htm,css,js}' ], watchOptions: { ignored: 'node_modules' }, server: { baseDir: './', middleware: [ [Function (anonymous)], [Function (anonymous)] ] } } [Browsersync] Access URLs: -------------------------------------- Local: http://localhost:3000 External: http://192.168.0.102:3000 -------------------------------------- UI: http://localhost:3001 UI External: http://localhost:3001 -------------------------------------- [Browsersync] Serving files from: ./ [Browsersync] Watching files... 23.09.07 15:29:32 404 GET /index.html 23.09.07 15:29:35 404 GET /index.html 23.09.07 15:33:58 404 GET /index.html
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
프로젝트에 사용할 상태와 로직 관리 라이브러리 훅 사용 질문입니다.
로그인 및 인증,인가(세션,jwt둘다 사용), 게시판(이미지포함), 댓글, 소켓채팅 정도의 기능을 구현하여 테스트 코드와 docker로 띄워서 CI/CD까지 구현하려고 합니다. 상태랑 로직 관리를 useReducer, React Context API, React Query, redux, graphql 정도로 생각하고 있는데 어떤걸로 하는게 좋을까요?!