69,300원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결실전 리액트 프로그래밍
자동완성기능이 안되네요 ..
집단지성을 이용한 담당자찾기 서비스 프로젝트를 만들고 있는데, 자동완성 기능이 동작이 안되네요 ; 그리고 서버폴더를 제 프로젝트 하위 폴더에 넣고 실행 시키려고 시도하고있는데 이 방법이 맞을까요? 그리고 세팅 아이콘이 자꾸 맨 아래쪽으로 내려오네요 .;;; 어느부분에서 에러나는지 못찾겠어서 소스는 구글 드라이브에 올려놓았습니다. (https://drive.google.com/drive/folders/1ThZfVwOzZka00678_2zo0iLUBIiwOunV?usp=drive_link)
- 미해결실전 리액트 프로그래밍
화면에 에러가나네요 ...
후.. 프로젝트 생성은했고 패키지 그대로 다운받았는데화면에 에러가 뜨네요...뭐가 문제인건가요 .
- 미해결실전 리액트 프로그래밍
setValue 함수 질문 있습니다.
현재 whois 프로젝트 진행중인데요. function setKeyword(value) { if (value !== keyword) { dispatch(actions.setValue("keyword", value)); dispatch(actions.fetchAutoComplete(value)); } }export const actions = { setValue: createSetValueAction(Types.SetValue), fetchAutoComplete: (keyword) => ({ type: Types.FetchAutoComplete, keyword, }), };export function createSetValueAction(type) { return (key, value) => ({ type, key, value }); }이 부분에서 actions.setValue 함수 부분이 이해가 안갑니다.ㅠㅠ createSetValueAction 함수에서 type만 받았는데 return 에서 key와 value를 어디에서 가져오는건가요?? setValue에서 들어간 값들이 인자로 들어가는거 같은데 이해가 안가네요ㅠㅠ
- 미해결실전 리액트 프로그래밍
찾아야한다 실습 문의
강사님 안녕하세요."찾아야한다" 실습 초기에서 AutoComplete 에 검색어를 입력하면 API 통신해서 결과 목록을 출력해주는 부분에서 문의사항이 있습니다.API 서버가 동작하고 있을 때는 정상적으로 동작을 하는데요.API 서버를 죽인 후, 테스트를 해보니 콘솔에 아래 화면처럼 Saga 관련 Tasks cancelled 에러가 발생하면서 이후부터는 검색어를 계속 입력해보아도 네트웍 요청을 전혀 하지는 않네요.(마치 어플리케이션이 죽은 것처럼)API 서버가 죽어있어서 응답이 오지 않아도 요청은 계속하는게 맞는데 원인을 알 수 있을까요?
- 미해결실전 리액트 프로그래밍
훅 기초 익히기 - 배치 처리와 순차적 처리의 차이
강사님 안녕하세요 :) 좋은 강의 잘 듣고 있습니다!리액트 훅 - 배치, 순차적 처리 관련하여 제가 이해한 것이 맞는지 여쭤보고 싶어서 질문 드립니다!1. 배치처리 (React 요소에서 관리되는 훅에서 기본적으로 처리하는 방식이며, 같은 시간에 훅 전체가 (예 YYYY-MM-DD HH:MM에 동시간에) 처리됨2. 순차처리 방법 1) unstable_batched_updates() 함수와, 직전 상태값을 받는 매개 변수를 받는 함수를 사용방법 2) 리액트 요소가 아닌 외부에서 훅을 사용와 같이 이해했습니다만, 제가 개념 이해를 잘 한 것이 맞을까요?그리고 배치와 순차 처리 개념은 어떤 경우에 쓰이는 것인지, 혹시 예를 들어서 설명해주실 수 있을까요?(배치란 실제로 한번에 내부적으로 쓰이는 data를 fetching 할때이고, 순차처리는 무언가 연쇄적으로 업데이트가 일어날때일까요?)
- 미해결실전 리액트 프로그래밍
cra, next.js 관련 질문 드립니다!
강사님 안녕하세요! :) 수업 잘 듣고 있는 학생입니다. 설명 차분히 잘 해주셔서 참 좋다고 생각하고 완강 꼭 하겠습니다!cra 설명을 주셔서 궁금한 부분이 있어서 질문드려요.1. 백오피스는 cra로 개발하는게 좋다고 하는데, 여기서의 백오피스가 어떤건지 궁금합니다.2. 서버사이드 렌더링이 필요한 겨웅 next.js가 필요하다고 하셨는데, 서버사이드 렌더링은 보통 어떤 경우에 쓰이는 걸까요? 시나리오와 같은 예를 들어주시면 정말 감사할 것 같아요!
- 미해결실전 리액트 프로그래밍
useState 배열 비구조화 문법 질문!
안녕하세요const [count, setCount] = useState(0) 비구조화를 풀어쓰려면 useState를 쓰면 안되는 걸까요?예를 들어 const arr = [1,2,3] 있는데비구조화를 적용해보면 const [value, setValue] = arr 이런식으로 작성이 가능한데 useState를 쓰고도 비구조화를 풀어서 쓸 수 있는지 궁금합니다!
- 미해결실전 리액트 프로그래밍
Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'
Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'자꾸 오류가 나오는데 어떻게 해야할까요 구글링을 해봐도 고칠 수가 없네요
- 미해결실전 리액트 프로그래밍
Saga 오류 이거 혹시 왜이런지 알수 있을까요?
어떻게 찾아보려 해봐도 원인은 못 찾겠고 계속 오류라고 나오는데 이유좀 알수있을까요? 사가 오류로 인해서 로컬 3001서버에 호출 자체도 못하는거 같네요 git에 코드 올려놓았는데 혹시 좀 봐주실수 있으실까요? https://github.com/kimgigun/clone_react_whois
- 미해결실전 리액트 프로그래밍
http://localhost:3001/user/search?keyword=u 이걸로 데이터를 보는데 저는 사이트에 연결할 수 없다고 나오네요
이유를 알수 있을가요?
- 해결됨실전 리액트 프로그래밍
match
안녕하세요~ 코린이입니다. 제가 코드를 그대로 따라하며 공부중인데 버젼이 바뀌면서 route를 쓰는 방식이 변한것같은데 component가 element로 바뀌었나요?? 그리고 혹시 match.url은 버젼이 바뀌면서 사라진건가요?? 올려주신 코드를 복붙하니 오류가 나오네요ㅠ 혹시 그렇다면 <Route path={`${match.url}/:roomId`} component={Room} />은 현재 어떻게 써야될까요?? useParams를 써서 해야되나요?? ``` import React from "react"; import { Route, Link, Routes } from "react-router-dom"; export default function Rooms() { return ( <div> <h2>여기는 방을 소개하는 페이지입니다.</h2> <Link to="bludRoom">파란 방입니다</Link> <br /> <Link to="greenRoom">초록 방입니다</Link> <br /> <Routes> <Route exact path="rooms" render={() => <h3>방을 선택해 주세요.</h3>} /> <Route path="/:roomId" element={<Room />} /> </Routes> </div> ); } function Room() { return <h2>{` 방을 선택하셨습니다.`}</h2>; } ``` 이것저것 수정해가며 시도하고있는데 여기서 막혔네요 ㅠㅠ 다른 페이지는 작동하는데 http://localhost:3000/rooms/bludRoom 처럼 :roomId로 처리하려고 했던 페이지가 No routes matched location "/rooms/bludRoom" 라는 오류가 발생합니다ㅠ
- 미해결실전 리액트 프로그래밍
버튼이 생성되지 않습니다 .
순서대로 따라했는데 버튼이 생성되지 않습니다. 입력 내용 및 에러 첨부드립니다. 확인부탁드립니다.
- 미해결실전 리액트 프로그래밍
혹시 import 옆에 파일 사이즈 표시 어떻게 하나요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결실전 리액트 프로그래밍
saga 문제
혹시 어떤 부분이 잘못되었을까요?
- 미해결실전 리액트 프로그래밍
에러가 발생하는데 이유가뭘까요..?
안녕하세요 강사님 처음부터 따라하려는데 에러가 발생해서 문의드립니다. 제 생각에는 react 를 못읽어 오는것 같은데 다른 문의를 보니까 순서때문이라는데 저는 순서도 맞해서요. // html <html> <body> <h2>테스트</h2> <div id="root"> <script src="react.development.js"></script> <script src="react-dom.development.js"></script> <script src="simple1.js"></script> </div> </body> </html> // js function LikeButton() { const [liked, setLiked]= React.useState(false) const text = liked ? "좋아요 취소" : "좋아요"; return React.createElement( 'button', { onClick: () => setLiked(!liked) }, text ); } const domContainer = document.getElementById('root'); ReactDOM.render(React.createElement(LikeButton), domContainer) // 에러 React.useState 를 못가져오는것 같은데 어디가 문제일까요..?
- 미해결실전 리액트 프로그래밍
선생님과 똑같이 했는데 다 rendering 됩니다.
선생님 말씀에 의하면 아래와 같이 넣으면 greeting 컴포넌트는 랜더링이 안된다고 하셨는데요. <UserContext.Provider value ={user}> 콘텍스트 API로 데이터 전달하기 강의에서 선생님과 똑같이 했는데 다 프로파일 컴포넌트와 그리팅 컴포넌트가 다 rendering 됩니다. 무엇이 잘못 된 것일까요? 길지 않아 소스를 아래에 넣습니다. =======소스 ========= import './App.css';import {createContext, useContext, useState} from "react";export const UserContext = createContext({username:'unknown', age:0});export default function App() { const [user, setUser] = useState({username:'scmoon',age:19}) const [count, setCount] = useState(0); console.log('app render') return ( <div> <UserContext.Provider value ={user}> <Profile/> <button onClick={()=>{setCount(count+1)}}> 증가 </button> </UserContext.Provider> </div> );}function Profile(){ console.log('profile render..') return ( <div> <Greeting/> </div> );}function Greeting(){ console.log('greeting render..'); const {username} = useContext(UserContext); return `${username} 님 안녕하세요. `} =====console 결과 ======== app render App.js:25 profile render.. App.js:35 greeting render.. App.js:12 app render App.js:25 profile render.. App.js:35 greeting render.. App.js:12 app render App.js:25 profile render.. App.js:35 greeting render.. App.js:12 app render App.js:25 profile render.. App.js:35 greeting render.. App.js:12 app render App.js:25 profile render.. App.js:35 greeting render.. App.js:12 app render App.js:25 profile render.. App.js:35 greeting render..
- 미해결실전 리액트 프로그래밍
컴포넌트와 컨테이너의 기준
안녕하세요. 패키지 구조내의 컨테이너와 컴포넌트를 나누는 기준이 궁금하여서 질문드립니다. 강의를 듣기 이전에 state를 관리하는 부븐을 컨테이너로 props를 받아서 화면에 보여주는 것들은 컴포넌트로 나누어서 사용을했었는데요 (smart component, dumb component로 어디서 봤네요)리덕스를 사용하게되면서 컴포넌트와 컨테이너 모두 state를 받아서 사용하거나 dispatch를 이용하여 데이터를 변경할 수 있는데 어떤기준으로 패키지를 나누고 계신지 궁금합니다!
- 미해결실전 리액트 프로그래밍
커스텀훅의 개념과 함수차이
안녕하세요. 강의 중 궁금한게 생겨서 질문 드립니다. 커스텀훅을 만드는 것과, 함수를 정의해서 export하는것이 똑같아 보이는데 유의미한 차이가 있나요? 결국 커스텀훅을 만드는 것이 새로운 함수를 모듈식으로 만드는것과 똑같은건가요?
- 미해결실전 리액트 프로그래밍
useEffect 실전 활용법(1) 강의에서 질문있습니다.
안녕하세요 강사님 책도 가지고 있는데 책읽을 시간이 없어 강의로 필요한 부분만 보았는데요 useEffect로 onMounted됐을때 실행시킬 함수들을 빈배열을 넣고 사용하는 것보다, useOnMounted라는 훅으로 만들어서 실행시키는게 더 낫다고 하셨는데요, 이유가 무엇인가요? 저는 mounted직후는 빈배열을 useEffect에 넘겨주면서 사용했었고 딱히 불편함을 느낀적이 없어서 이해가 잘안갑니다😭 왜 그게 더 나은지 설명이 부족한것 같아서 여쭤봅니다😭 단순히 가독성 때문인가요? 자세히 알고싶어요! 감사합니다.
- 미해결실전 리액트 프로그래밍
리덕스, 사가파일들의 관리
안녕하세요. 강사님 강사님 알려주신 형태로 화면 단위로 state 폴더를 두어 redux 파일과 saga 파일로 개발을 해보고 있습니다그런데 화면이 늘어나니까 초기 로드가 부담스러워서 코드스플릿을 이용을 해보고 있는데요. 코드스플릿을 이용해도 화면 단위의 state 폴더의 파일들은 main.chunk.js 에 여전히 담기고 있어서main.chunk.js 크기가 점점 늘어나는 건 마찬가지더라구요. 혹시 state 폴더에 있는 redux와 saga 파일을 main.chunk.js 에서 제외시킬 수 있는 방법이 있나요?실무에서는 이를 어떻게 최적화하고 계신지 궁금합니다.