69,300원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결실전 리액트 프로그래밍
강의 예제파일
강의에서 사용하신 예제파일은 어디어서 받을 수 있난요?
- 미해결실전 리액트 프로그래밍
많이 바쁘시겠지요
웹툰 앱이 정말 멋지게 개편되었 던데.. 그러다 보니 많이 바쁘시겠지요 넥스트 강의를 만들어 주시기는 ㅠ.ㅠ
- 미해결실전 리액트 프로그래밍
공부하다가~! 질문이 있습니다.
해당 소스를 콘솔로 찍어봤을 때 useSelector 함수가 동작하는 순서가 궁금합니다. 초기 랜더링 전에 useSelector 함수가 동작하여 1 이 찍혔고 아무런 액션이 발생하지 않았음에도 렌더링 후에 다시 한 번 useSelector 함수가 동작하여 찍혔습니다. 물론 store에서의 state값이 변하지 않았으므로 재렌더링은 일어나지 않았습니다. 하지만...왜 이렇게 찍히는지 궁금합니다.
- 미해결실전 리액트 프로그래밍
이전 상태값에 대한 수정시
안녕하세요. 강좌 유익하게 시청중에 있습니다. 다름아니라 set을 통하여 이전 상태값에 대해 추가적인 연산을 할때는 prev을 이용하라는 글을 어디선가 본적이 있는데 그렇게 사용하지 않아도 문제 없나요? 예를 들면, setCount((prev)=> prev+1); setCount(count+1) 입니다. 그렇지 않다면 setCount((prev)=> prev+1); 처럼 사용하라는 이유가 혹여나 불변성을 해칠 수 있기 때문일까요?
- 미해결실전 리액트 프로그래밍
에러 처리 문의드립니다.
강사님 안녕하세요. 예전에 자바스크립트나 jQuery 개발을 할 때는 개발실수로 스크립트 에러가 발생하면 콘솔에 오류가 떠도, 화면은 그 상태로 유지되어 있었던 것 같은데 리액트에서는 에러메시지가 떡하니 화면에 뜨면서 기본에러페이지로 전환이 되는 것 같습니다. 리액트 공식홈페이지에서 에러경계에 대한 글이 있어서 읽어보면서 참고하고 있는데 "이벤트 핸들러 내부에서는 에러를 포착하지 않습니다." "이벤트 핸들러 내에서 에러를 잡아야 하는 경우, 일반 자바스크립트의 try/catch 문을 사용하세요." 라고 설명이 되어 있네요. 개발자가 언제 실수를 할 지 모르는 상황이니, try/catch로 접근하는 것은 좀 잘못된 상황 같은데 개발자들이 실수하여 스크립트 오류가 발생하여도, 내 현재 화면이 unmount 되지 않도록 할 수 있는 방법이 있을까요?
- 미해결실전 리액트 프로그래밍
클린업에 대해 궁금한 점이 있습니다!
예제를 보면 useEffect를 사용해서 등록된 이벤트 리스너addEventListener(), removeEventListener()를 클린업 해주는데, 이렇게 처리하는 이유가 궁금합니다. 또 리엑트에서는 왜 클린업을 해줘야 하는건가요?
- 미해결실전 리액트 프로그래밍
likeButton이 생기지 않습니다.
강의 잘 듣고 있습니다! 코드를 잘 따라친 것 같은데 버튼이 생성되지 않습니다. 무엇이 문제인지 잘 모르겠습니다..
- 해결됨실전 리액트 프로그래밍
실습한 내용 개인 깃헙에 public으로 올려도 되나요?
공부한 흔적을 남겨서 회사 지원이나 동아리 지원 때 포트폴리오로 쓰려 하는데 실습 코드를 개인 깃헙에 올려도 될까요?
- 미해결실전 리액트 프로그래밍
useEffect 의존성 배열이 있을 경우,
안녕하세요. 질문 드립니다. 7:50초쯤 useEffect에 의존성 빈배열을 선언하고 리사이즈 하게 될때도 console1 하나만 찍히나요? 처음 빈배열 일때 콘솔 확인이 어렵네요
- 미해결실전 리액트 프로그래밍
프로젝트 생성하시고 나서가 궁금합니다
강사님께서는 매 실습을 create-react-app으로 프로젝트를 생성하시는거 맞으시죠? 지금 저도 실전 리액트프로그래밍 개정판 책과 강사님의 강좌를 같이 보며 따라가고있는데, create-react-app으로 프로젝트 생성하고 있습니다. 책 20p에 index.html, index.js, package.json파일을 제외한 나머지 파일은 데모앱을 위한 파일이기 때문에 마음대로 수정하거나 삭제해도 괜찮다고 하셔서 대부분 지우고 사용하고 있는데, 항상 같이 다운되는 node-modules는 삭제하면 안되는 거같아서 여쭤봅니다. 그래서 항상 node-modules는 저의 모든 프로젝트 폴더마다 있는데, 강사님의 파일창에는 2-virtual-dom처럼 package.josn도 없고 .js파일들만 이쁘게 있어서, node-modules까지 다 삭제하고 해도되는지, node-modules는 하나만 설치하고 다같이 사용하시는건지... 프로젝트 생성부터 같이 해보지 않고, 항상 미리 세팅이 되신 상태에서 바로 시작하셔서 항상 궁금하다가 여쭤봅니다... ㅜㅜ 답변 부탁드려요
- 미해결실전 리액트 프로그래밍
action 의 재활용
강사님 안녕하세요.질문 하나 남기고 갑니다. A 목록조회 B 목록조회 C 목록조회 위 3개의 업무를 각각 수행하는 action 함수와 그에 맵핑된 saga 함수들이 이미 만들어져 있다고 가정하겠습니다.만약 어떤 특이한 컴포넌트에서, 위 3개 정보들을 한번에 출력해야 하는 경우가 생겼을 시 이미 만들어져 있는 action 을 재사용하는 측면에서 아래와 같이 3개의 action 을 순차적으로 호출하는 식으로 개발해도 무방한지 궁금합니다. const aList = useSelector(state => state.xxx.aList);const bList = useSelector(state => state.xxx.bList);const cList = useSelector(state => state.xxx.cList);..... onClick = () => { dispatch(actions.getAList(...)); dispatch(actions.getBList(...)); dispatch(actions.getCList(...));} 아니면 3개의 api 를 병렬로 호출하는 별도의 saga 함수를 만들고, api 의 결과를 store 에 담는 하나의 reducer 를 만들어서 처리하는 게 나은 개발방식인지 알고 싶습니다. dispatch를 연달아 3번 호출하면 기존 action 을 재사용 측면에서는 좋지만 렌더링이 여러번 발생할 듯 한데렌더링이 여러번 발생하는 단점을 고려하여, 최적화된 별도의 action 과 saga 함수를 만들어 사용하는 것이 좋을 지 강사님 의견을 듣고 싶습니다.
- 미해결실전 리액트 프로그래밍
action에서 배열 state를 불러올 수 있는 방법이 있을까요?
안녕하세요. createReducer 사용해서 구현하던 중 문제가 발생하여 문의 드립니다. state에 배열을 넣은 뒤, action에서 필요한 일이 있어 불러오려고 했더니 값이 없다고 뜨더라구요. 예를 들어서 const INITIAL_STATE = { test: [1, 2, 3] } ... [Types.SetTest]: (state, action) => { console.log(state.test) } 이런 식으로 했는데 로그에 [Proxy, Proxy, Proxy, Proxy] 이렇게 뜨고 값을 가져올 수가 없었습니다. 혹시 어떻게 해야 state 값을 가져올 수 있을까요?
- 해결됨실전 리액트 프로그래밍
질문 드립니다!
안녕하세요 재승님! 영상 참 재밌고 유익하게 보고 있습니다. useEffect에 종속성 배열을 없애고 사용하는 활용법을 알려주셨는데요. 여기서 궁금증이 생각나서 글을 쓰게 되었습니다.. 종속성 배열을 없애고 콜백함수 내부에서 조건을 통해 로직을 핸들링하는 경우에 useEffect가 리액트에 의해 실행? 될텐데요. 이러한 경우 콜백함수는 매번 호출되고 내부로직에서 조건을 분기할 것 같아요. 제가 이해한 내용으로는 이 경우가 조금 불필요한 동작이라고 생각이 드는데요. 여기서 종속성배열과 콜백함수 내부 조건을 함께 사용하면 좋을 것 같다고 생각 했어요. 그때 종속성배열을 관리하는 리소스와 비교하였을 때 어느쪽에 중점을 두어 프로그래밍하면 좋을지 궁금증이 생겼습니다... -> 그런데 제가 생각한 것이 틀렸다면 useEffect의 실행동작을 잘 이해하지 못했을 것 같은데요. 리액트에 의해서 해당 useEffect 훅의 동작 순서가 온다면 종속성 배열로 콜백함수의 불변성만 지켜주는 것인가요? 그렇다면 매번 콜백함수를 실행해서 별로 상관 없을 것 같기두 하구요.. 여러개의 종속성 값으로 useEffect나 useMemo, useCallback류의 훅이 여러번 호출되는 것 때문에 조금 스트레스 였는데.. 이번 강의를 보고 코드 개선 아이디어에 도움이 많이 되었습니다. 주절주절 쓰다보니 길어졌네요.. 두서없이 글로만 쓰려니 정리가 안되고 있슴다ㅎㅎ; 양해 부탁드립니다; 후배에게 답변해주시는 것 같이 편하게 답변해주시면 좋겠습니다. 항상 감사드립니다!!
- 해결됨실전 리액트 프로그래밍
redux useSelector에 대해 질문있습니다.
강의 내용중 const user = useSelector((state) => { console.log("User useSelector"); return state.user; }); const product = useSelector((state) => { console.log("product useSelector"); return state.product; }); useSelector 로그를 찍어 봤는데 User render User useSelector Product render product useSelector 까지는 예상된 결과였는데 그 후 User useSelector product useSelector는 왜 찍히는 건지 궁금합니다.
- 미해결실전 리액트 프로그래밍
빌드 문의 드립니다.
강사님 안녕하세요. 리액트 빌드 관련해서 질문을 하나 남기고 갑니다.CRA 환경에서 npm build 를 하면 static 폴더에 많은 chunk.js 파일들이 생기던데요. npm build 를 할 때마다 chunk 파일들의 이름이 랜덤하게 변경되어 버려서새롭게 배포를 하기 위해 빌드를 하고 나면 이미 해당 사이트에 접속하여 특정 페이지가 떠있는 상황에서다른 화면으로 이동하게 되면 (Lazy loading 기준)chunk 파일을 찾지 못해 오류가 발생하네요. 혹시 SPA 는 배포를 하게 되면 사용자들이 이런 불편함을 겪어야 하는 것일까요?좋은 대응 방안이 있는지 알고 싶습니다.
- 미해결실전 리액트 프로그래밍
node_modules
안녕하세요! css1-normal디렉토리 하위에 node_modules가 안보이는데 이거 없이 어떻게 npm start 작동시키신건가요?
- 미해결실전 리액트 프로그래밍
컴포넌트 외부에 선언한 const 호이스팅
추천하는 컴포넌트 파일 작성법 강의 3:00 에서 MyComponent 하단에 선언된 COLUMNS 및 URL_PRODUCT_LIST는 어떻게 MyComponent에서 사용할 수 있는건가요? hoisting이슈가 있을것 같아서 직접 돌려봤는데 에러없이 잘되네요..? export default 처리되는 함수는 webpack이 코드 아래쪽으로 옮겨주는건가 싶기도하고.... 답을 알려주세요ㅠ 혼란스럽네요
- 미해결실전 리액트 프로그래밍
강의 내부에 반응형웹 에 관련한 내용이 있나요??
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결실전 리액트 프로그래밍
yield all 관련 질문있습니다
안녕하세요! saga.js에서 yield all에서 등록한 함수들을 합치는? 기능으로 이해했는데요. 배운내용을 바탕으로 코드를 수정하였더니 에러가 발생하는데 이해가 안가서요.. 아래 스샷에서 takeLeading으로 처리한 fetchBoardListSaga는 정상작동하는데, debounce(500, types.TRY_SET_TEXT, trySetText) 부분이 추가되면 다음과 같은 에러가 발생합니다. 강의에서 사용하신 코드와 제 코드가 차이점이 거의 없어보이는데 왜 이런 에러가 발생하는걸까요..
- 미해결실전 리액트 프로그래밍
Greeting 함수에서 username이 없는데 어떻게 값을 받아오는지 이해가 되지 않습니다.
안녕하세요 App 함수에서는 UserContext.Provider 객체의 value 속성으로 mike 값을 입력했고 username 이라는 속성값은 전달하지 않았는데 Greeting 함수에서 useContext 훅을 사용하기 전에 어떻게 username을 가져오는지 이해가 되지 않네요. <UserContext.Consumer> {username => <p>{`${username}님 안녕하세요`}</p>} </UserContext.Consumer>