월 19,800원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결처음 만난 리덕스(Redux)
counter 애플리케이션에서 toString 질문입니다
counter 애플리케이션의 코드 중 render함수에서store에서 getState를 사용해 state 값을 가져오는데 이 때 toString()을 해주는 이유가 궁금합니다. function render() { console.log(typeof store.getState()); valueElem.innerHTML = store.getState().toString(); }
- 미해결처음 만난 리덕스(Redux)
redux-thunk CRA로 세팅 후 오류
ㅠㅠㅠㅠㅠㅠ 강사님 ... ㅠㅠㅠㅠㅠ이번에는 yarn, create-react-app으로 해서 다시 해당 실습 진행해보고 있는데요...(npx로 cra 설치하는데 예전엔 잘 썼었는데 왜인지 모르겠는데 계속 에러가 나서 똑같이는 못했어요...)강의와 동일한 코드인데 에러문구대로 한건지 모르겠는데 import thunkMiddleware from "redux-thunk";의 thunkMiddleware 키워드를 thunk로 변경했더니어제와 같이 vite 패키지 에러가 콘솔창에 뜨더라구여.....살려주세요ㅠㅠ해당 작업한 것까지 커밋한 내용인데 혹시 봐주실 수 있을까요...ㅜㅜhttps://github.com/laurenCho9/soaple-redux-cra
- 미해결처음 만난 리덕스(Redux)
redux-thunk 실습 오류
Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/redux-thunk.js?v=c406571d' does not provide an export named 'default' (at store.js:3:8)(내용 수정 및 진행상태 업데이트 2023.03.21 am 02:33)비트로 설치한 모듈에서 제공하지 않는 내보내기라길래해결방법 찾아보다가https://github.com/reduxjs/redux-templates여기에 있는 리드미 내용대로yarn add vite-template-redux설치를 하긴 했는데 Vite, with TypeScript 가 아니라 React로 해서 그런지는 모르겠는데그래도 같은 오류가 뜨네요ㅠㅠㅠ 아래는 각각 입력한 코드 내용입니다store.jsimport { applyMiddleware, compose, createStore } from "redux"; import rootReducer from "./reducers"; import thunkMiddleware from "redux-thunk"; // import asyncFunctionMiddleware from "./middlewares/asyncFunctionMiddleware"; const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const store = createStore( rootReducer, composeEnhancers(applyMiddleware(thunkMiddleware)) ); export default store;addTodoThunks.jsimport { addTodo as addTodoActionCreator, removeTodo as removeTodoActionCreator, } from "../actions/todoAction"; const TODO_MAX_COUNT = 3; function addTodoThunkActionCreator(text) { return async function addTodoThunk(dispatch, getState) { const state = getState(); if (state.todo.length < TODO_MAX_COUNT) { dispatch(addTodoActionCreator("아이템 추가중...")); setTimeout(() => { dispatch(removeTodoActionCreator()); dispatch(addTodoActionCreator(text)); }, 3000); return; } else { dispatch(addTodoActionCreator("최대 개수 초과!")); setTimeout(() => { dispatch(removeTodoActionCreator()); }, 3000); } }; } export default addTodoThunkActionCreator; TodoAppContainer.jsimport { connect } from "react-redux"; // import { // addTodoActionCreator, // removeTodoActionCreator, // removeAllActionCreator, // } from "../actions"; // import { // addTodoActionCreator, // removeTodoActionCreator, // removeAllActionCreator, // } from "../ducks/todoDuck"; import { addTodo as addTodoActionCreator, removeTodo as removeTodoActionCreator, removeAll as removeAllActionCreator, } from "../actions/todoAction"; import addTodoThunkActionCreator from "../thunks/addTodoThunks"; import TodoApp from "../../components/TodoApp"; function mapStateToProps(state, ownProps) { return { todoItems: state.todo, }; } function mapDispatchToProps(dispatch, ownProps) { return { addTodo: (text) => { // dispatch(addTodoActionCreator(text)); dispatch(addTodoThunkActionCreator(text)); }, removeTodo: () => { dispatch(removeTodoActionCreator()); }, removeAll: () => { dispatch(removeAllActionCreator()); }, triggerAsyncFunction: (asyncFunction) => { dispatch(asyncFunction); }, }; } const TodoAppContainer = connect(mapStateToProps, mapDispatchToProps)(TodoApp); export default TodoAppContainer;
- 미해결처음 만난 리덕스(Redux)
실습코드를 발을수 있는 곳이 있나요?
실습코드 부분이 빠르게 지나가는데,실습코드를 따로 받을수 있는 곳이 있을까요?
- 미해결처음 만난 리덕스(Redux)
첫강의에 팝업 뜬 내용 못읽고 꺼버렸는데 무슨 내용이었는지 아시는 분
첫강의에 팝업 뜬 내용 못읽고 꺼버렸는데 무슨 내용이었는지 아시는 분 있으신가요ㅠㅠ최초 1회만 뜨는 거라 그런지 재접속 해봐도 안뜨네요 ㅠ
- 미해결처음 만난 리덕스(Redux)
UI에 대한 질문이 있습니다
선생님 안녕하세요, 강의 항상 잘 듣고 있습니다.다름이 아니라 UI에 관련된 질문을 드리고자 합니다.Redux 관련 질문이 아닌 질문이라 먼저 양해의 말씀 드립니다 ㅜㅜ지난 React 강의에서도, 이번 강의에서도 궁금했던 점이라..내용은 아래와 같습니다 보통 컴포넌트를 작성할 때 Wrapper 태그를 만들어 한번 감싸주는데,스타일 목적 외에 Wrapper로 감싸주는 것이 일종의 컨벤션인지 궁금합니다.예를들어 스타일을 줄 목적이 없다면 굳이 Wrapper로 감싸주지 않아도 되는지 여쭤보고 싶습니다. 현업에서 styled-components를 사용할 때, 모든 스타일을 styled-components로 작성하는지 궁금합니다.일단 드는 생각으로는 styled-components로는 해당 컴포넌트의 기본적인 스타일을 지정하고,세부적인 부분이나 반응형 스타일을 index.css 등에서 작성할 것 같다는 생각이 들긴 하는데..어떨지 궁금해서 여줘봅니다 ㅜㅜ만약 styled-components와 index.css 등으로 스타일을 나눠 작성한다면 특정한 기준이 있을까요? 감사합니다.
- 미해결처음 만난 리덕스(Redux)
강의자료문의
ppt 강의 자료는 어디서 받을 수 있나요?
- 미해결처음 만난 리덕스(Redux)
기존 Storage API를 사용하지 않고 redux-persist를 사용하는 이유가 궁금합니다
안녕하세요 소플님, 강의 정말 잘 보고 있습니다!항상 이해하기 쉽게 질 높은 강의를 제공해주셔서 감사드립니다.아래와 같은 점이 궁금해 질문을 드립니다. 제목에서처럼 브라우저에서 제공하는 Storage API를 사용하지 않고 redux-persist를 사용하는 이유가 궁금합니다. 브라우저 Storage API를 사용하는 것과 비교해 어떤 이점을 갖고 있는지 여쭤보고 싶습니다.브라우저 Storage API를 react에서 사용했을 때 react에서 제공하는 기능을 사용할 수 없게 되는 제약 같은 것이 있는지 궁금합니다. 만약 그렇다면 가상 DOM환경과 관련이 있는지도 궁금합니다. 예를 들어 localStorage에 저장되어 있는 데이터를 useMemo로 의존성을 갖게 하여 데이터를 관리할 수 있는지와 같은 것입니다. React를 배운지 얼마 안되어서, React에 대해 잘 파악하지 못하고 하는 질문일 수도 있는 점 양해를 구하고 싶습니다 ㅜㅜ,, 감사합니다!
- 미해결처음 만난 리덕스(Redux)
counter 예제에서 script로 redux를 CDN으로 불러올 때
counter 예제에서 script로 redux를 CDN으로 불러올 때404가 나는 것 같습니다!<script src=">"https://unpkg.com/browse/redux@5.0.1/dist/redux.mjs"></script>위와 같이 수정했는데 Redux를 찾을 수 없다고 나오네요..!혹시 뭐가 문제일까요 ?
- 해결됨처음 만난 리덕스(Redux)
Ducks 패턴에 대해서
안녕하세요. Ducks패턴 강의를 방금 들었습니다.실습에서 todoDuck.js에 todo 컴포넌트에서 사용되는 action만을 넣었는데,duck file은 컴포넌트로 구분하여 만드는것인가요??
- 미해결처음 만난 리덕스(Redux)
상태관리 불변성 질문드립니다
안녕하세요 소플님 리액트와 리덕스툴킷을 같이 사용 할때 궁금한 점이 있어 질문 드립니다상태관리에서 데이터를 계속 해서 추가 할 때 불변성을 유지하나요?상태관리에서 데이터를 수정, 삭제 할 때 불변성을 유지하나요?
- 해결됨처음 만난 리덕스(Redux)
getDefaultMiddleware 질문 드립니다
const store = configureStore({ reducer:rootReducer, middleware: (getDefaultMiddleware)=>{ const defaultMiddleware = getDefaultMiddleware(); return [...defaultMiddleware]; } });강사님 마지막 실습코드에서여기서 기본미들 웨어를 가져 오는 이유를 잘 모르겠습니다
- 해결됨처음 만난 리덕스(Redux)
강사님 질문이 있어요
serializableCheck: { ignoredActions: [ REHYDRATE, FLUSH, PAUSE, PERSIST, PURGE, REGISTER, ], },강사님 마지막 실습 코드에서 질문드려요 여기 코드는 검색을 하니 직렬화,역질렬화 검사 할때 사용 하는거라는데 마지막 실습 코드에서는 어떻게 사용 되는 건가요? 어떤 연관성? 이 있는 건가요?
- 미해결처음 만난 리덕스(Redux)
저질문이있습니다 .
react랑 redux 연결해서 화면 처음 띄우고 있는데 이처럼 강의랑 똑같이 코딩했는데,화면이 나오질않고있습니다. ㅠ 뭐가 문제일까요?
- 해결됨처음 만난 리덕스(Redux)
createStore()와 combineReducers()에 대한 질문
각각의 todoReducer, memoReducer에 initialState를 전달하는 방법말고 createStore() 함수의 2번째 인자로 preloadedState를 전달하는 방법은 없나요?const preloadedState = { todo: initialTodoState, memo: initialMemoState, }; const store = createStore( rootReducer, preloadedState, applyMiddleware(loggerMiddleware), );(추가) 위와 같이 작성 후(각 reducer의 초기 상태 전달 안함), 애플리케이션이 동작하지 않더라구요..!(추가) 해서 GPT에게 물어봤습니다! 그랬더니 답변으로이 방법을 사용하면 preloadedState를 통해 전체 앱의 초기 상태를 한 곳에서 관리할 수 있어 유용합니다. 하지만 이 방법은 각 리듀서에서 초기 상태를 설정하는 방법과 병행해서 사용해야 합니다. 왜냐하면 preloadedState는 앱이 시작될 때 한 번만 사용되고, 그 이후에는 각 리듀서에서 정의한 초기 상태가 사용되기 때문입니다.해서 각 reducer에도 각각의 initialState 배열을 전달하니 동작은 하긴 하는데, 이럴꺼면 굳이 preloadedState를 전달하는 의미가 없는 것 같아서 조금 헷갈리네요..!결론적으로 질문은 아래와 같습니다..!1) 각 reducer에게 초기 상태를 전달하지않고 combine한 reducer를 createStore에 전달할 때, 초기 상태를 전달해서 사용하는 방법이 있나요?
- 해결됨처음 만난 리덕스(Redux)
action creator에 관해서 질문이 있습니다!
const ACTION_TYPE_ADD_TODO = "ADD_TODO"; const ACTION_TYPE_REMOVE_TODO = "REMOVE_TODO"; const ACTION_TYPE_REMOVE_ALL = "REMOVE_ALL"; function addTodoActionCreator(text) { return { type: ACTION_TYPE_ADD_TODO, text, }; } function removeTodoActionCreator() { return { type: ACTION_TYPE_REMOVE_TODO, }; } function removeAllActionCreator() { return { type: ACTION_TYPE_REMOVE_ALL, }; }위와 같은 actionCreator들을 하나의 함수로 묶어서 쓰는 경우는 잘 없나요? 예를 들어 아래처럼요!function actionCreator(type, payload = {}) { return { type, ...payload, }; }정답은 없겠지만 뭔가 위에 3개로 분리되어있는 것도 하나로 표현하면 좋지 않을까 싶어서 여쭤봅니다!
- 미해결처음 만난 리덕스(Redux)
todo 추가, 삭제, 모두삭제는 되는데 devtools에서 변화가 없어요
기능은 동작하는데 devtools에 state, diff 에서 정상적으로 나오지 않습니다.. 뭐가 문제일까요?
- 해결됨처음 만난 리덕스(Redux)
안녕하세요, Counter 애플리케이션 실습 부분에서 질문있습니다!
function render() { valueEl.innerHTML = store.getState().toString(); } render(); // redux store에 변화가 있을 때마다 render 함수를 호출한다. store.subscribe(render);정말 별건 아니지만 store.subscribe(render) 부분이 그냥 문맥 상 읽으면 store가 render를 구독한다 의 표현이 되는데, 코드 상의 흐름은 store의 변화에 따라 render가 실행되니 render가 store를 구독하는 걸로 이해했습니다. 이게 맞는지 궁금합니다.
- 미해결처음 만난 리덕스(Redux)
안녕하세요~ 혹시 pdf파일은 따로 제공안되나요?
pdf파일로도 보고싶은데 따로 제공안되나요?
- 미해결처음 만난 리덕스(Redux)
안녕하세요! RTK Query 에 대해 궁금합니다
RTK Query 에 대한 강의도 추후에 올려주실 생각 있으신가요 ??RTK Query 에 대한 한국어 자료가 별로 없네요 ㅠ