33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Redux vs MobX (둘 다 배우자!)
context api, redux를 혼용하는건 별로일까요?
웹게임이 여러개 있으면서 일부는 사용자 간에 대전도 가능한 경우서버와 주고받는 데이터(대전 게임의 진행 데이터 포함)는 redux로 관리하고, 1인용 게임 등 다른 곳에서 사용할 일이 없는 게임의 데이터들은 context api로 관리하려고 하는데 적절한가요?
- 미해결Redux vs MobX (둘 다 배우자!)
섹션 3 mobx autorun 관련 질문입니다.
const state = observable({ name: "zero", age: 28, married: false, }); autorun(() => { console.log("autorun : " + state.name); }); reaction( () => state.name, () => { console.log("reaction : name changed"); } ); runInAction(() => { state.name = "nureongi"; state.age = 26; }); const action1 = action(() => { state.married = true; }); const action2 = action(() => { state.married = false; }) action1(); action2(); /** autorun : zero autorun : nureongi reaction : name changed **/안녕하세요! 강의 잘 듣고 있습니다. 제가 궁금한 것은 강의에서 autorun은 observable에 담긴 모든 state가 변경될 때 마다 실행된다고 하셨는데실제 실험해보니 결과가 조금 다르게 나온 것 같았습니다.그래서 확인해보니 다음과 같이 동작한다는 사실을 알게 되었습니다. autorun이 정의될 때 한 번 실행autorun 함수 내부에서 참조하고 있는 observable state가 변경될 때 실행 아마 버전이 업데이트 되면서 바뀐 것 같은데 제가 알게 된 사실이 맞을까요?
- 미해결Redux vs MobX (둘 다 배우자!)
thunk 미들웨어 잡업 중 논리로직 단계? 질문이 있습니다.
미들웨어가 들어간 이후 궁금한 부분이 있어서 질문 합니다.리덕스에 dispatch를 하면 리듀서가 이를 받고, 기존에 액션함수를 만들었다면, 만든 액션함수를 매칭 시켜서 상태관리를 하잖아요? 그래서 이번 강좌(2-4.redux-thunk)에서도 비동기 로그인을 디스패치 하잖아요?store.dispatch( logIn({ id: 1, name: "goodsosbva", admin: true, })이 이후에 액션에 정의한// async action creator const logIn = (data) => { return (dispatch, getState) => { // async action dispatch(logInRequest()); try { setTimeout(() => { dispatch( logInSuccess({ userId: 1, nickname: "khszzang!", }) ); }, 2000); } catch (e) { dispatch(logInFailure(e)); } }; };여기로 가서 로직을 하잖아요? 이때, 만들어둔 미들웨어가const thunkMiddleware = (store) => (next) => (action) => { if (typeof action === "function") { // 비동기 return action(store.dispatch, store.getState); } return next(action); }; const enhancer = applyMiddleware(firstMiddleware, thunkMiddleware); const store = createStore(reducer, initialState, enhancer); 어떤 순간에 작동하는지가 감이 안와서 질문드립니다.이전 강의에서는 dispatch -> 미들웨어 -> reducer라고 하신거 같은데요.이걸 보고 나름 이해하려고 노력했는데...걸리는 점은지금은 비동기로 만든 액션함수가 하나니까 미들웨어에서 하나로 매칭될 수 있겠는데..?여러개면 어떻게 되는거지라는? 의문입니다.제질문이 좀 난해한거같기도 한데요. 요약하면, 미들웨어가 어디서 동작하는지 모르겠다.비동기 미들웨어 요청을 할때 액션함수를 알맞게 어떻게 요청하는지 몰라서 질문드립니다.
- 해결됨Redux vs MobX (둘 다 배우자!)
rootSaga에서 call를 사용하는 이유가 궁금합니다.
export default function* userSaga() { yield all([fork(watchLogin), fork(watchHello)]); } export default function* rootSaga() { yield all([call(userSaga), call(postSaga)]); }userSaga에서는 순서가 없기 때문에 fork를 썻다고 하셧는데 rootSaga에서는 call을 쓰는 이유가 있나요?rootSaga도 실행하는데 순서가 크게 중요할 것 같지 않아서 call을 써야 하는 이유가 있는지 궁금합니다.
- 해결됨Redux vs MobX (둘 다 배우자!)
observable의 함수를 익명함수로 바꿔봤습니다.
const userStore = observable({ isLogginIn: false, data: null as any, logIn(data: any) { this.isLogginIn = true; setTimeout(() => { this.data = data; this.isLogginIn = false; postStore.data.push(1); }, 2000); }, logOut() { this.data = null; }, }); const userStore = observable({ isLogginIn: false, data: null as any, logIn: (data: any) => { userStore.isLogginIn = true; setTimeout(() => { userStore.data = data; userStore.isLogginIn = false; postStore.data.push(1); }, 2000); }, logOut: () => { userStore.data = null; }, });평소에 선언적함수보다 익명함수로 코딩을 하고 있어서 코딩스타일을 맞추고 싶어위 코드를 밑에처럼 익명함수로 바꿔봤습니다.익명함수에 화살표함수를 쓰니 this가 바인딩되어undefind가 된것 같은데 그래서 this 대신 userStore에서 접근하는 방식으로 바꿔봤습니다.this대신에 useStore로 접근해도 괜찮은지 잘 모르겟습니다.
- 해결됨Redux vs MobX (둘 다 배우자!)
useSelector 리랜더링 질문있습니다.
const userData = useSelector((state) => state.user.data); const isLoggingIn = useSelector((state) => state.user.isLoggingIn); const postData = useSelector((state) => state.posts.data);강의에서는 useSelector를 한번씩 써서 가져오면 리랜더링을 줄여줄 수 있다고 하셧는데 const { userData, isLoggingIn, postData } = useSelector((state) => ({ userData: state.user.data, isLoggingIn: state.user.isLoggingIn, postData: state.posts.data, }));이처럼 객체를 새로 만들어서 리턴해줘도 동일하게 리랜더링을 줄여줄 수 있는지 궁금합니다.
- 해결됨Redux vs MobX (둘 다 배우자!)
비동기 action 타입을 뭘로 지정해야 할까요?
//비동기 const logIn = (data: any): any => { return (dispatch: Dispatch<AnyAction>, getState: any) => { dispatch(logInRequest(data)); try { return setTimeout(() => { dispatch(logInSuccess({ id: 1, name: "userName", admin: true, }) ); }, 2000); } catch (error) { return dispatch(logInFailure(error)); } }; }; const logInRequest = (data: any): AnyAction => { return { type: "LOG_IN_REQUEST", data, }; }; const logInSuccess = (data: any): AnyAction => { return { type: "LOG_IN", data, }; }; const logInFailure = (error: unknown) => { return { type: "LOG_IN_FAILURE", error, }; }; //login을 dispatch store.dispatch(logIn({ id: 1, name: "userName", admin: true })); 강좌코드를 타입스크립트로 변환해보고 있는중에 궁금한게 있어서 질문드립니다.login 비동기 함수가 return 하는게 함수이고setTimeOut함수 때문에 함수반환타입도 Action 타입이 아니라서최종적으로 리턴타입이 () => NodeJS.Timeout | AnyAction이 되는것 같습니다store.dispatch(login())을 하면 타입에러가 나오는데login 리턴타입을 any로 바꿔주는거 말고 다른 방법으로 해결 할 수 있는 방법이 있을까요?
- 해결됨Redux vs MobX (둘 다 배우자!)
redux-thunk질문
현재 강의 프로젝트 파일에서는 툴킷을 설치하지도, redux-thunk를 따로 설치하지도 않았는데 어느 부분이 thunk인 건가요? 여기서 말하는 thunk미들웨어는 그냥 이름만 thunk인 것이고 진짜 redux-thunk의 thunk미들웨어는 툴킷 영상에서 사용한 createAsyncThunk인가요?
- 해결됨Redux vs MobX (둘 다 배우자!)
state 변경 시 질문
영상에서는 배열타입의 state의 요소를 제거해주기 위해 깊은 복사한 다음 delete를 쓰는 식으로 했었는데 급하게 구현한다고 깊은 복사를 쓴 것이고 실제로는 그렇게 하면 안된다고 하셨는데 만약 immer를 쓰지 않는다면 실제로는 어떻게 요소 제거를 해야하나요?
- 미해결Redux vs MobX (둘 다 배우자!)
state변경 시 질문
영상에서는 빠르게 구현한다고 배열타입의 state의 요소를 제거해주기 위해 깊은 복사한 다음 delete를 쓰는 식으로 했었는데 immer쓰지 않는다면 실제로는 요소 제거를 어떻게 해야하나요?
- 해결됨Redux vs MobX (둘 다 배우자!)
firstMiddleware와 thunkMiddleware 순서 질문
applyMiddleware에 firstMiddleware와 thunkMiddleware를 인자로 넣을 때 넣는 순서에 따라서 어느 미들웨어 먼저 실행되는지 달라지나요?
- 해결됨Redux vs MobX (둘 다 배우자!)
객체 동적 다이나믹 속성?? 질문
[logIn.pending](state, action) { state.isLoggingIn = true; }이 문법 정확한 명칭이 뭔가요? 구글링 하고 싶은데 원하는 결과가 안나오네요
- 해결됨Redux vs MobX (둘 다 배우자!)
미들웨어 질문
firstMiddleware의 dispatch(action)이후 코드에 넣은 console.log('액션 끝') 코드가 store.subscribe 이후에 실행되는 것이면 dispatch와 reducer 사이 뿐만 아니라dispatch가 실행되고 reducer가 실행되고 state가 변경되고 나서 동작을 추가할 수 있다는 말인가요?dispatch -> 미들웨어 -> Reducer -> 미들웨어이게 맞나요?
- 미해결Redux vs MobX (둘 다 배우자!)
리덕스 사가 실습 파일 확인 부탁드립니다!
안녕하세요 제로초님 좋은 강의 잘 보고 있습니다!리덕스 사가 실습을 해보고 싶어서 노드버드 깃헙 파일 클론해서 npm i 하고 실행을 하니 next랑 react dependency가 발생해 version update도 해봤지만 잘 안되더라구요 ㅠㅠ 혹시몰라서 ch7도 해봤지만 잘 되지 않았습니다.ch3 코드기준으로 실습하면 좋던데 혹시 실습파일 확인 후 재업로드 한번 부탁드려도 될까요? ㅠㅠ
- 해결됨Redux vs MobX (둘 다 배우자!)
1-6 강의에서 질문 있습니다!
안녕하세요 제로초님! 강의를 듣던 도중 이해가 되지 않는 부분이 있어서 질문 드립니다.위의 사진은 제가 실행해본 테스트 예제입니다! 기존 posts 내용에 즉 prevState에 새로운 데이터를 추가하려면 initalState가 아닌 추가하려는 데이터 객체의 바로 이전 객체의 데이터를 복사하는게 맞다고 생각하는데 어째서 intialState로 작성하셨는지 궁금합니다. 또한 reducer에서의 prevState는 맨 처음에만 store에 저장되어 있는 initialState를 받고 이후에는 바로 이전 state를 받는 것이 맞는지 궁금합니다!예를 들면 A -> B -> C 가 있다고 하면 A -> B 에서 A는 B의 prevState,B -> C 에서는 B는 C의 prevState로 이해하고 있습니다.
- 미해결Redux vs MobX (둘 다 배우자!)
redux-saga 깃헙 파일
제로초 쌤 혹시 redux-toolkit 쓰는 법을 배우고 나서 노드버드도 같이하고 싶어서 구매한 뒤 살펴보니 redux-saga도 쓴다고 하셔서 듣고있습니다.근데 redux-saga의 깃헙 파일은 어떤 폴더를 봐야하는지 안보이는데 혹시 어떤 파일을 보면 될까요..?!
- 미해결Redux vs MobX (둘 다 배우자!)
createStore -> configureStore
zerocho쌤 이번 공식 홈페이지 가서 redux공부하면서 해당 강의도 들으면서 같이 공부하고 있는데 공식문서에서 Store를 만들 때 configureStore로 생성하라고 하는데 createStore 부분만을 다 configureStore로 변환해주면 되나요?
- 미해결Redux vs MobX (둘 다 배우자!)
전역 변수와 전역 상태 값
안녕하세요!!!Redux 전역 상태관리에 대해서 공부를 하던 중...Redux 전역 상태를 js 엔진에서 어떻게 동작할까? 라는 생각에서 출발해 전역 상태값도 변수인데 어디서 관리하지? 라는 의문점이 생겨 질문하게 되었습니다.전역 상태 관리일 경우 JavaScript엔진에서 전역 변수의 동작과 마찬가지로 Redux의 전역 상태 관리 부분이 Call Stack 맨처음에 저장되어있고 Chaining을 통해 변수를 찾고 상태변화 같은 기능을 한다고 생각했지만생각을 더 해보니Redux의 전역 상태 값은 전역 변수가 아니고 상태를 변화시킬 때마다 Chaining을 통해 이동하므로 굉장히 비효율적이어서 이렇게 동작하게 만들일 절대 없다라는 생각과 새로운 공간에 해당 변수만 저장해서 사용한다고 생각을 했습니다.[질문]Redux의 전역 상태 관리의 값이 JS 엔진에서 전역 변수와 같이 call stack 맨처음에 저장되어 관리하나요?아닌 경우 Redux의 전역 상태 값은 JS엔진 어디에 저장되어서 동작하는 건가요?추가로 관련 정보에 관한 키워드를 알려주실 수 있나요?감사합니다.!!!
- 미해결Redux vs MobX (둘 다 배우자!)
Redux toolkit 과 axios API 호출에 관한 질문입니다.
안녕하세요 제로초님!항상 감사합니다. 제로초님 강의로 실력을 매우 키우고있습니다. 친구의 API 로 개인 프로젝트를 진행하고있습니다.환경은 typescript, next.js 이고 redux toolkit으로 상태관리를 하고있습니다. getServerSideProps에서 dispatch를 하여 모든 게시글을 불러오는 작업을 하고있습니다.여기서 문제는아래 주석으로 보시는바와 같이 fetch를 통해서 API를 호출하면 정상적으로 JSON 형식의 API가 잘 호출이 됩니다. 그런데 axios 로 API를 호출해서 data를 확인하면 계속이런식으로 깨져서 나옵니다.axios config 에서 headers에 content-type을 application/json charset=utf-8 로 시도해도 똑같고axios config 에서 responseType을 json으로 변경해도 똑같이 깨져서 나옵니다.. 어디서 제가 잘못설정한게 있을가요..
- 미해결Redux vs MobX (둘 다 배우자!)
MobX Data
제로초님 안녕하세요? Redux 데이터는 내부 메모리에 저장되고 코딩 방식에 따라 Local Storage 등를 사용하면,궁금한 점이 두가지 있습니다.1 MobX 의 데이터도 기본적으로 내부 메모리에 저장하는가요?2 그리고 Redux, MobX 를 기본적인 store에만 데이터를 저장하는 방식이 더 보안에 적합한지 궁금합니다.추가적으로 Local Storage 를 사용하면 탈취의 위험이 있지 않은지요?