69,300원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결실전 리액트 프로그래밍
react-redux useSelector, useDispatch 질문
안녕하세요. 강의 잘 보고 있습니다. react-redux 강의를 보던 중 useSelector와 useDispatch를 보고 궁금한 점이 생겨 질문 드립니다. 예전에 잠깐 react-redux를 봤을 때는 mapStateToProps와 mapDispatchToProps 함수를 만들고 connect를 이용해서 사용했던 것으로 기억하는데, 최근에는 useSelector와 useDispatch를 써서 hook 형태를 사용하는 것으로 바뀐걸까요? 아니면 좀 다른 개념일까요?
- 해결됨실전 리액트 프로그래밍
배치(batch)의 뜻이 뭔가요?
리액트의 state는 비동기로 처리하면서 배치로 처리한다고 되어있는데, 비동기요소를 한번에 모아서 렌더링 한다는 뜻인가요?? 배치의 정확한 뜻을 잘 모르겠어요!
- 해결됨실전 리액트 프로그래밍
useSelector 과 컴포넌트 렌더링
5:00 즘에 shallowEqual 은 value3 이 가지고 있는 모든 속성값을 다 비교해서 비효율 적인 측면이 있다고 하셨는데요. 이 부분 좀 더 설명해 주실 수 있을까요? function useMySelector(selector) { return useSelector(selector, shallowEqual) } // value3 의 모든 속성값을 비교하기 때문에 비효율 const value3 = useMySelector(state => state.value3); // 이렇게 해주는게 좋다고 함. 이유는 잘 모르겠음. const [value3] = useMySelector(state => [state.value3]); 위에 value3 를 꺼내오는 방법 2가지를 작성해 두었는데 후자의 방법이 좋다고 하셨는데 왜 배열로 하면 더 좋은지를 모르겠습니다. 그리고 function useMySelector(selector) { return useSelector(selector, shallowEqual) } // shallowEqual O, 배열 X const value3 = useMySelector(state => state.value3); // shallowEqual O, 배열 O const [value3] = useMySelector(state => [state.value3]); // shallowEqual 옵션 x, 배열 X const value3 = useSelector(state => state.value3); value3 를 불러오는 위 3가지 케이스의 차이를 알 수 있을까요? 아마 제가 얕은 비교라는 말에 대해서 뭔가 잘 못 알고 있어서 더 헷갈리는 것 같은데 얕은 비교에 대한 정의도 한번 해주시면 좋을 것 같습니다.
- 미해결실전 리액트 프로그래밍
강사님 책 오타 질문이요.
강사님 책도 사서 지금 읽고있는데요.. P 320 보면은 1번, 2번 3번 부연설명이 전부다 반대로 되어있는거 같은데.. 잘못된건가요? 예) 1번 파일은 화살표 함수 플러그인이 적용되지 않는다.. 적용되있는거 같아서요..
- 미해결실전 리액트 프로그래밍
나중에 타입스크립트 강의나 nextjs 강의를 만드실때 폴더 구조도 같이 강의 해주시면 안되나요?
안녕하세요. 취준생 개발자입니다. 강사님 강의를 듣고 React에 대해 많은 것을 알아가는거 같아 정말 질 좋은 강의라 생각합니다. 강의 설명란에 나중에 타입스크립트나 nextjs 강의를 별도로 만드신다고 하셨는데, 만드 실때 MVM, MVVM 등 폴더 구조에 대해 강사님께서 설명 해주신다면.. 정말 더할나위 없이 좋을 것 같습니다.. ㅠㅠ 항상 몸조심하시고 건강하세요! 다른 강의가 나오면 무조건 100% 구매의사 있습니다.!
- 해결됨실전 리액트 프로그래밍
보충설명좀 부탁드립니다.
기본적인 질문 죄송합니다. webpack2에 package.json, package-lock.json은 어떻게 생성된건가요?
- 미해결실전 리액트 프로그래밍
새로운 ch진행시 폴더 생성문의 방법
안녕하세요. 리액트강의를 수강하고 있는 수강생입니다. 다름이 아니라, 챕터별로 진도가 나갈때마다 새로운폴더를 만드셔서 폴더 내에서 코드를 작성하는데요 만약 새로운 폴더를 만들때마다 해당 상위디렉토리에서 npx create-react-app <폴더명>커맨더를 입력해서 진행하시는건가요>? 이것이 궁금하네요. create-react-app은 글로벌로 설치하지 않았고 해당강좌 설치메뉴얼을 이행했습니다.
- 미해결실전 리액트 프로그래밍
import로 React와 ReactDOM을 가져올 때 뜨는 3.3K, 38.6K
import로 React와 ReactDOM을 가져올 때 뜨는 3.3K, 38.6K는 무슨 설정을 해주신 건가요? 저는 뜨질 않네요...
- 미해결실전 리액트 프로그래밍
버튼 생성 질문
강사님 강의 너무 잘 듣고 있습니다. 강의 따라서 치는데 버튼 생성이 안됩니다.ㅠ 뭐가 문제일까요?
- 해결됨실전 리액트 프로그래밍
다음 강의 계획 질문
안녕하세요 강사님 강의 잘듣고 있습니다. 그런데 제가 React기초는 알고 있어, 빠르게 실습적인 강의를 듣고 싶은데 다음 강의 계획이 있으신지 궁금합니다.
- 미해결실전 리액트 프로그래밍
Grid 활용 방법 문의드립니다.
강사님 안녕하세요. 오늘도 개인 스터디를 하다가 답답한 내용이 생겨서 문의 글 남기고 갑니다.강사님께서 설명해주신 내용들을 보면 어찌됐든 React 에서는 state 를 immutable 하게 관리하여 state 의 변경을 통해 렌더링이 발상하도록 개발을 하는 것이 보편적인 거 같은데요. 제가 React 에 Grid Tool 같은 것을 적용하여 조회나 편집을 한번 해보고 싶어서 만져보고 있는데..(예를 들면 해외 Ag-grid 나 국내 Toast grid 같은 오픈 소스가 있네요..) Grid Tool 에서는 제공하는 api 를 활용할 경우, state 와 연동하기가 매우 어렵더라고요.. 단순히 조회만 되는 Grid 일 경우, 최초 서버에서 읽어온 데이터를 Redux Store 에 넣으면 간단하던데 편집을 해야할 경우에는 Grid UI 에서 데이터를 직접 변경하거나, Grid API 를 통해 데이터를 수정하면 이 값을 State 와 연동하기는 너무 어려운 거 같더라고요..이러한 Grid Tool 사용 시에는 Grid 의 Data 를 로컬 State 나 Redux 와의 연동하기보다는 일반 변수를 따로 두고 활용하는 것이 좋은 방법일까요? 간략하게 어떻게 활용하는 것이 좋을 지 의견주시면 정말 감사하겠습니다.
- 해결됨실전 리액트 프로그래밍
isNew, isMerged 변수를 undefined로 초기화하는 이유가 궁금합니다.
안녕하세요! isNew, isMerged 변수를 초기화할 때 boolean 값이나 null 이 아닌, undefined로 초기화를 하는 이유가 혹시 있을까요? + 좋은 강의 감사드립니다.
- 미해결실전 리액트 프로그래밍
부수 효과 비동기
// useNeedLogin.js export default function useNeedLogin() { const history = useHistory(); const status = useSelector((state) => state.auth.status); useEffect(() => { if (status === AuthStatus.NotLogin) { history.replace("/login"); } }, [status, history]); } // Search.js export default function Search() { useNeedLogin(); const history = useSelector((state) => state.search.history); const dispatch = useDispatch(); useEffect(() => { dispatch(actions.fetchAllHistory()); }, [dispatch]); search 컴포넌트와 useNeedLogin 훅이 위와 같이 작성되어 있습니다. 이 경우에 Search 컴포넌트 랜더링 시에 fetchAllHistory가 실행이 되어 /history api를 호출합니다.useNeedlogin의 useEffect와 Search 컴포넌트의 useEffect가 비동기로 호출되면서 useNeedLogin의 redirect가 호출되기 전에 dispatch가 호출이 되어 그런 것이라고 생각합니다.state.auth.AuthStatus가 Login인지를 확인하는 로직을 Search 컴포넌트의 useEffect 내에 넣어 해결할 수 있었지만, useNeedLogin 훅의 기능과 중복이 됩니다.조금 더 깔끔한 방법이 없을까 궁급하니다.
- 미해결실전 리액트 프로그래밍
autoCompletes undefined 문제
<AutoComplete>의 options를 autoCompletes로 map을 작성하고, 브라우저를 보면 autoCompletes가 undefined로 뜹니다. 현재 검색어를 입력할때마다 data가 잘 fetch되오는 것을 Network 탭에서 확인할 수 있습니다. yield put(actions.setValue('autoCompletes', data)); 해당 구문을 console로 찍으면 잘 나옵니다. 근데 제대로 저장이 되었는지 확인해 보고 싶은데 방법을 모르겠습니다.. 그리고 autoCompletes가 아무것도 없을때 options에 'autoComplete &&' 조건을 주지 않아도 map이 정상적으로 작동되는건 어떤 이유인가요?
- 미해결실전 리액트 프로그래밍
Hook 문의드립니다.
안녕하세요. 강사님 앞으로 Hook 이 대세가 될 거라는 강사님 설명으로 인해 공부하면서 클래스형 컴포넌트 방식은 일단 배제하고 있습니다. 그런데 리액트 공식 홈페이지에서는 에러 처리를 하기 위한 방법으로 getDerivedStateFromError componentDidCatch 위의 생명주기 메소드를 활용하고 있던데요. Hook 방식에서는 위의 메소드를 대체할 수 있는 방법이 없는 것 같은데 그렇다면 어떤 방식으로 에러처리를 하는 게 좋을 지 알고 싶습니다. 그리고 개발을 진행하다보면 자바스크립트 에러가 발생하여 원치 않은 에러 메시지 화면으로 전환이 되는 경우가 많은데 혹시 개별 화면에서 조치를 하지 않고도 이런 예기치 못한 오류가 발생할 때, 공통 에러 페이지로 보낼 수 있는 방법이 있을까요?
- 미해결실전 리액트 프로그래밍
강의 노트는 받을 수 없나요?
강의 노트에 링크 등이 있는 경우가 있던데요 강의 노트를 다운받거나 웹으로 접근할 수 있는 경로가 있나요?
- 미해결실전 리액트 프로그래밍
강의 잘듣고 있습니다.
안녕하세요 비주얼스튜디오 코드로 잘 작성하고 있는데요 아래 과 같이 auth 이부분에 빨간줄이 생기는데 무시하고 해도 진행은 되는데... 이거 문제가 무엇일까요? 비주얼 스튜디오 코드에서 설정해야 되는것이 있는건가요? 이거 뿐 아니라. state.으로 시작하는 모든 부분에서 빨간줄이 발생합니다.... const status = useSelector(state => state.auth.status);
- 미해결실전 리액트 프로그래밍
리렌더링의 의미를 좀 더 잘 알고 싶습니다.
안녕하세요. 강사님 과거 mvc 패턴으로 개발을 할 떄는 리렌더링에 대한 고민은 한 적이 없었던 거 같은데, SPA 에서는 책이나 강의에서 렌더링 관련된 성능 최적화 내용이 따라오다보니 이 부분이 좀 혼란스럽습니다. 개발을 하면서 컴포넌트마다 console.log 를 남겨서 state 의 변화가 있을 때, 각각의 컴포넌트의 렌더링이 얼마나 일어나는 지 확인을 해볼 때가 있는데요. 값 하나가 바뀔 때, 어떤 컴포넌트는 log 가 5-6개 찍힐 때가 있더라구요.. 그런데 무엇이 이러한 현상을 발생하는 지 찾아 보곤 하는 일이 너무 소모적인 거 같고, 쉽게 찾아지지도 않습니다. 이렇게 여러 번 리렌더링이 발생해도 화면에서 볼 때 전혀 체감이 되지 않는다면 그냥 내버려 두어도 문제되지 않는다고 보면 될런지 아리송합니다. 강사님이 강의에서 일단 성능 신경쓰지말고 개발부터 하고, 추후 성능 이슈가 된다고 판단되면 그때 확인하는 것이 좋다고 말씀해 주셨는데요. log 가 여러번 찍히는 컴포넌트가 있어도 일단은 신경쓰지 않아도 무방할까요?
- 미해결실전 리액트 프로그래밍
CORS 에러 어떻게 해결해야 될까요??
마지막 프로젝트 부분 하다가 제가 기존에 만들어 둔 스프링부트 기반의 서버와 연결하여 쓰고 싶어 작업하는 중에 CORS 에러가 발생합니다. 백엔드쪽에는 처리가 되어있는데 혹시 리액트에서 따로 설정해야 되는 부분이 있을까요?
- 미해결실전 리액트 프로그래밍
ReferenceError
12:04까지 따라하고 리액트를 보니 './src/friend/state.js'를 찾을 수 없다는 에러가 떠서 다 찾아봤지만 모든 파일에서 '../state'로 import 해오고 있었습니다. 그래서 리액트를 끄고 다시 켜니 이번엔 참조에러가 뜨는데요 ReferenceError: Cannot access 'getFriendsWithAgeShowLimit' before initialization 이건 어떻게 해결해야 하나요?