69,300원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨실전 리액트 프로그래밍
× TypeError: Cannot read property 'keyword' of undefined
안녕하세요. 강의를 보면서 학습하는 도중에 도저히 해결책이 떠오르지 않아 질문드립니다. search/container/SearchInput.js에서 Redux의 useSelector로 keyword를 초기화하는 도중에 TypeError: Cannot read property 'keyword' of undefined 오류가 나오네요. 어디에서 정의하지 않았는지 그 포인트를 도저히 못잡겠네요. App.js부터 차근히 추적해봐도 오류가 날만한 부분은 전혀 보이지 않는 것 같은데요. 혹시 환경적인 문제이거나 버전간의 호환성 문제가 아닌지 확인해보았으나 그 문제는 아닌것으로 보여지네요. 여기에서 디버깅을 더 해볼 수 있는것은 어떤 것이 있을까요?? 그리고 search/container/SearchInput.js에서 function 선언을 그대로 Search로 하셨는데 이 부분이 맞는건가요?? SearchInput으로 되어야하는게 아닌가 싶어서요.. 마지막으로 GitHub에 있는 final 디렉터리에 올라온 코드를 통째로 옮겨서 실행해봤는데 아래와 같은 오류가 나오고 있네요. 이 건은 환경적인 문제이거나 버전간의 호환성 문제로 봐야할까요?? 참고로 React는 최신 버전인 17.0.1을 사용했으며, 다른 패키지들도 현재기준 모두 최신 버전을 사용했습니다. 바쁘시겠지만 답변 기다리겠습니다. 감사합니다.
- 미해결실전 리액트 프로그래밍
useSelector를 배열로 반환하는 방식의 문제에 대한 질문입니다.
3:40 에 부분에 해당하는 질문인데, 아래 질문의 답변을 참고 후 명확한 이해를 위해 질문 드립니다. useSelector의 selector 함수 안에 있는 두 값이 변경되지 않아도 redux에서 액션이 처리될 때마다 불필요하게 이 컴포넌트가 렌더링 될 수 있는 단점이 있다라고 설명해주시고,아래 답글에서 "두 값이 변경되지 않았는데 렌더링을 하는 것은 비효율적이라는 의미"라고 답변을 주셨는데 redux에서 액션이 발생해서 두 값이 변경되지 않아도 렌더링이 된다는 걸까요?(변경이 없는 dispatch를 만들어 돌렸을 때는 렌더링 되지 않는 것 같아서요) 그렇지 않다면, 결국 값이 변경될 때만 렌더링이 일어난다는 말일테고, 그렇다면 "불필요한 렌더링"이라는게 어느 경우일지요? 다른 컴포넌트에서 동일한 state의 값에 대한 변경을 일으켰을 때의 렌더링을 "불필요한 렌더링"이라고 말씀해주신 걸까도 생각해봤는데, 결국 값이 변경된 것이라 렌더링이 불필요한 것이라 여기기에는 결국 하위 컴포넌트에서 변경된 값을 사용해야 하니 재렌더링 되는게 맞는게 아닌가 싶구요. 혹은, 이 컴포넌트의 하위 컴포넌트들에서도 참조하지 않는 state의 특정 값 (예를 들어 `state.friend.friends` 의 특정 항목의 특정 프로퍼티)이 다른 컴포넌트에서 발생한 dispatch로 redux 액션이 발생되어 변경 되었을 경우이 컴포넌트의 재렌더링이 불필요하므로 얕은 비교를 하는 것이 좋다는 것일까요? 그런데 또 그렇게 보면, 앞서 reducer를 학습할 때 상태값을 변경할 때는 불변성을 유지해야 한다고 했으니,다른 컴포넌트에서 방금의 액션을 취한다면 결국 이 state는 변경이 발생 될테고 그렇다면 결국 얕은 비교를 한다 손 치더라도 변경이 발생된 게 아닌지요? 질문하면서도 제가 헷갈리네요 ;;;; 아니면, 앞선 챕터에서 설명된 것들을 참고했을 때 이런 형태로 사용했을 경우 const [friends, friends2, friends3 ] = useSelector( state => [ state.friend.friends, state.friend.friends1, state.friend.friends, state.friend.friends2, state.friend.friends, state.friend.friends3 ] ); 컴포넌트가 렌더링 될 때마다 useSelector가 새로운 배열을 생성시키기 때문에 불필요한 렌더링이 일어날 수 있고, 실제로 const [friends] = useSelector(state => [state.friend.friends]); 이렇게 작성했을 때 fiendMain 컴포넌트가 두 번 렌더링 되는 걸 확인했는데요이 경우를 말씀하시는 걸까요?
- 해결됨실전 리액트 프로그래밍
componentWillUnmount() 이 정확히 이해가 가지 않아서 질문 드립니다!
강사님 안녕하세요 강의 듣고 '실전 리액트 프로그래밍' 책도 사서 보고 있는데 개인적으로 강의 보다 책 내용이 훨씬훨씬훨씬 좋아서 만족스럽게 정독하고 있습니다 ㅎㅎ 다만 공부하는 중에 책이랑 리액트 공식 사이트를 봐도 이해가 안가는게 있어서요! componentWillUnmount()이나, 그와 비슷한 useEffect 훅의 return 값에서 clearInterval 같이 클리어 해주는 패턴은 알지만, 정확히 이해를 못하고 있어요 https://ko.reactjs.org/docs/react-component.html#componentwillunmount 리액트 사이트에서 componentWillUnmount를 설명하는 내용 중에 정확히 '컴포넌트가 마운트 해제되어 제거되기 직전' 이 어떤 때일까요...? 마운트가 해제된다는 말은 DOM 에서 아예 삭제되기 전이라는 말일까요? 그렇다면 clear를 해주는 의미가 없지 않나요 어차피 DOM에서 날라간다면... 아니면 컴포넌트가 최초 렌더링 -> 마운트 -> 업데이트 -> 렌더링 후에 업데이트 될일이 없으면 언마운트 처리가 되는건가요? 마운트 해제의 의미와 마운트 해제가 언제, 어떤 것에 의해서 일어나는지를 도통 모르겠어요 혹시 자세히 알고 계신다면 답변 부탁드립니다 ㅠㅠ
- 미해결실전 리액트 프로그래밍
담당자 찾기 프로젝트 실습중 문의드립니다.
담당자 찾기 프로젝트 실습중입니다. api 호출하는 부분에서 이런 에러 메세지가 나오고 있는데요. 왜 그런걸까요??
- 미해결실전 리액트 프로그래밍
저도 ReferenceError가 나는데 원인을 못 찾았습니다...
ReferenceError: Cannot access 'friendsWithAgeShowLimit' before initialization (anonymous function) C:/Users/la21/OneDrive/바탕 화면/chapter6_using_react-redux/src/friend/container/FriendMain.js:17 14 | ] = useSelector((state) => { 15 | const { ageLimit, showLimit, friends } = state.friend; 16 | const friendsWithAgeLimit = friends.filter((item) => item.age <= ageLimit);> 17 | return [ | ^ 18 | ageLimit, 19 | showLimit, 20 | friendsWithAgeLimit, 이렇게 에러가 났는데요. 혼자서 찾아봤는데도 원인을 못 찾았습니다. import 할 때 js 확장자 다 없이 했고 밑에 분처럼 node_modules와 package_lock.json 삭제 후 다시 install 했는데도 계속 같은 에러가 나고 있습니다. 짐작가시는 원인이 있으실까요? 혹시 몰라서 FriendMain.js 코드 첨부합니다. import { getNextFriend } from "../../common/mockData"; import { addFriend, setAgeLimit, setShowLimit } from "../state"; import FriendList from "../component/FriendList"; import NumberSelect from "../component/NumberSelect"; import { shallowEqual, useSelector, useDispatch } from "react-redux"; import { MAX_AGE_LIMIT, MAX_SHOW_LIMIT } from "../common"; export default function FriendMain() { const [ ageLimit, showLimit, friendsWithAgeLimit, friendsWithAgeShowLimit, ] = useSelector((state) => { const { ageLimit, showLimit, friends } = state.friend; const friendsWithAgeLimit = friends.filter((item) => item.age <= ageLimit); return [ ageLimit, showLimit, friendsWithAgeLimit, friendsWithAgeShowLimit.slice(0, showLimit), ]; }, shallowEqual); const dispatch = useDispatch(); function onAdd() { const friend = getNextFriend(); dispatch(addFriend(friend)); } return ( <div> <button onClick={onAdd}>친구 추가</button> <NumberSelect onChange={(v) => dispatch(setAgeLimit(v))} value={ageLimit} options={AGE_LIMIT_OPTIONS} postfix="세 이하만 보기" /> <FriendList friends={friendsWithAgeLimit} /> <NumberSelect onChange={(v) => dispatch(setShowLimit(v))} value={showLimit} options={SHOW_LIMIT_OPTIONS} postfix="명 이하만 보기(연령 제한 적용)" /> <FriendList friends={friendsWithAgeShowLimit} /> </div> ); } const AGE_LIMIT_OPTIONS = [15, 20, 25, MAX_AGE_LIMIT]; const SHOW_LIMIT_OPTIONS = [2, 4, 6, MAX_SHOW_LIMIT];
- 해결됨실전 리액트 프로그래밍
질문이 있습니다.
put, call, take 같은 saga에서 제공하는 함수에는 yield 결과 값을 반환한 후에 미들웨어에서 자동으로 iterator 의 메서드인 next()가 실행하도록 처리하는 건가요? put 같은 함수 사용 없이 yield만 사용하는 경우에는 다음 next()를 기다려야 중지/실행을 조절할 수 있는데 잘못 이해하고 있는건지 궁금합니다.
- 미해결실전 리액트 프로그래밍
배열 내의 두 값이 변경되지 않아도 랜더링 된다는 의미가 궁금합니다.
3: 41에 두 값이 변경되지 않아도 컴포넌트가 랜더링 된다고 설명해주셨는데요. 그 의미가 두 값 중 하나라도 변경이 되면 컴포넌트가 랜더링 되기 때문에 두 값 모두가 변할 때 랜더링이 되는 것보다 불필요하게 랜더링이 된다는 의미가 맞을까요??
- 미해결실전 리액트 프로그래밍
랜더링 관련 질문이 있습니다.
{{username, age}} -> {user} 객체 하나로 변경 시에는 왜 새로운 객체가 생성되지 않나요? 이해가 잘 되지 않네요.
- 해결됨실전 리액트 프로그래밍
한글 인코딩
안녕하세요, 번들되어서 index.html을 브라우저로 열었을 때 한글이 깨지는데요, 인코딩 설정을 따로 해주는 부분이 있나요?
- 해결됨실전 리액트 프로그래밍
npm?
따라하고있는데 3강 jsx 적용부분에 바벨설치문 npm init -y입력하니까 'npm'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 이렇게 뜹니다. 진행을 못하고있습니다.
- 미해결실전 리액트 프로그래밍
리덕스의 useSelector 관련 강의에서요.
강의 예제를 따라하고 있는데요. 38강쪽 리덕스 useSelector 부분에서 state.friend.friends에서 아래와 같은 에러가 납니다. DefaultRootState' 형식에 'friend' 속성이 없습니다. 왜 state.friends가 아니고 state.friend.friends 이렇게 하는지 궁금합니다. const friends = useSelector((state) => state.friend.friends);
- 미해결실전 리액트 프로그래밍
저는 왜 수정한 사람이 unknown일까요?..
안녕하세요 강사님 user1 페이지에서 수정작업을 하면 수정한 사람: unknown 수정된 사람: user1 날짜: 2021-01-04 20:00:00 속성: 태그 <Space style={{ flexWrap: "wrap" }}> <Tag> <Link to={`/user/${item.editor}`}> 수정한 사람: {item.editor} </Link> </Tag> <Tag> <Link to={`/user/${item.name}`}> 수정된 사람: {item.name} </Link> </Tag> <Tag>날짜: {item.date}</Tag> <Tag>속성: {COLUMN_MAP[item.column]}</Tag> </Space>
- 미해결실전 리액트 프로그래밍
0:40 질문있습니다.
아직 초보라서 강의가 이해가 되지않아 질문드립니다. useCallback 훅을 사용하지 않아도 된다라고 말씀해주셨는데 fetchAndSetUser 함수는 렌더가 될 때 마다 새로 생성되는 함수인데 useCallback을 사용하지 않아도 괜찮은건가요? useEffect 내에서 최신화된 변수를 사용해서 조건적으로 함수를 사용해줄 수는 있겠지만, useCallback을 사용하지 않아도 되는 이유가 뭔지 궁금합니다 ㅠㅠ.
- 미해결실전 리액트 프로그래밍
createRuducer질문
[ADD]: (state, action) => { } 이런코드일때 ADD라 안쓰고 왜 [ADD]라 쓰는건가용 ?
- 미해결실전 리액트 프로그래밍
예제 코드는 어디서 받나요?>
ㅇ
- 미해결실전 리액트 프로그래밍
에러가 없는데 왜 autoCompletes가 적용이 안될까요?
.env파일 문제인가 싶어서 common api baseUrl도 3001번 포트로 변경했는데... 서버도 yarn start로 돌려줬는데 왜 데이터만 안나올까요? user/search?keyword=u라고 3001로컬에서 입력하면 선생님 처럼 json 데이터도 잘 나옵니다. 이렇게 데이터도 잘 가져오는거 같은데 redux-devtools로 보면 왜 autoCompletes가 비어있는지 모르겠습니다... baseURL: "http://localhost:3001",
- 미해결실전 리액트 프로그래밍
Reducer 의 setValue 문의
강사님 안녕하세요. Reducer 에서 편의롭게 사용하기 위해 SetValue 라는 것을 만들어서 사용하시는 법을 보여주셨는데요.해당 기능은 객체의 첫레벨 Key 에 대해서만 셋팅이 가능하다보니 예를 들어 state.user.searchArea.name 이나 state.user.contentArea.sheet.data 와 같은 좀 더 깊숙한 레벨에는 사용을 못하게 될 듯 한데요.실무에서는 이런 깊숙한 레벨에 값을 셋팅하실 때는 Reducer 안에 항목별로 별도의 setter 를 만드시는 편인가요?아니면 깊숙한 레벨까지 활용가능한 SetValue 를 만들어서 사용하시나요?
- 미해결실전 리액트 프로그래밍
강의내에 실습 소스는 없나요?
안녕하세요. 수업을 들으면서 하나씩 실습해서 하고 있는데요. 23강에 리액트 내장 훅 부분에 여러가지 훅에 대해서 실습하면서 설명이런 빨리 넘어가는 경우에는 소스부분 공유가 없으니 초보자로서 따라가기가 힘들더라구요. 실습 소스들 보고 싶어요.
- 미해결실전 리액트 프로그래밍
클래스형 컴포넌트보다 장점이 많으며 리액트팀에서도 훅에 집중하고있는 부분 하단 링크
하단링크로 들어가면 페이지를 찾을수없다고 나옵니다.영상 1분8초쯤에 말씀하시는 링크로 접속을 할 수 없습니다왜그럴까용
- 미해결실전 리액트 프로그래밍
실습 관련해서 질문 드립니다.
찾아야한다 실습을 진행중인데요, 3번째 강의에서 autocomplete가 제대로 작동을 안하고 있는 것 같습니다. undefined가 뜨는 것도 아니고 store 및 사가 경로 체크도 해보았는데 아래 검색 내용이 전혀 뜨지 않고 있네요.. server또한 켜져있는 상태입니다. 입력시 네트워크 또한 제대로 전달이 되고 있구요..ㅠㅠ 혹시 무엇이 잘못 되었을 지 힌트라도 주시면 감사하겠습니다.