33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Redux vs MobX (둘 다 배우자!)
mobx state action 변화 감지 관련
안녕하세요. mobx 강의 관련 친절하고 쉬운 설명 감사합니다.제가 질문할려는 것은 강의에서는 언급하지는 않았지만, reaction과 거의 유사한 mobx 함수인 autorun에 대해 여쭤볼게 있어 질문 올립니다.reaction은 감지할 state를 언급하면 그 state에 따라만 언급하는 걸로 알고 있고,autorun은 모든 observable state에 대해 반응 하는 걸로 제가 알고 있는데요.. var renderCount = 1; const App = observer (() => { const [object, setObject] =useState({name :' inha', id: 0}) //const [renderCount, setRenderCount] = useState(0); const test_state = useLocalObservable(()=>({ name : '', id : 0, })) function handle_Click() { renderCount++; test_state.id++; mobx_store.setarr(renderCount); } autorun(()=>{ console.log('autorun') }) useEffect ( ()=>{ reaction(()=>{ return test_state.id },()=>{ console.log('test_atate_reaction') }) },[]) 해당 코드에서 보시면 autorun과 reaction을 호출 등록하였고, reaction에 대해 test_state.id에 반응 하도록 했습니다. 실행을 하고 click 이벤트를 진행하면 reaction에 있는 console은 찍히지만, autorun에 있는 console은 제일 처음 실행 했을 때 말고는 찍히지가 않아여. return (//useObserver hook 나 Observer 감싸줘야 react에서 mobx가 제대로 적용 가능 <div > <p> current render count : {renderCount} </p> <button onClick={() => handle_Click()}> Click </button> </div> );그리고 해당 return문에 observable로 감싼 state가 따로 쓰이지 않으면 렌더링도 새로 되지 않아요.ㅠㅠ만약에 return문에 observable로 감싼 state가 있으면 리렌더링이 되고, 그때는 autorun도 호출됩니다.( 아마 렌더링 시에 자동으로 호출되서 그런것 같아요. 이건) 혹시 정확한 이유를 알 수 있을까요??autorun 같은 경우에는 꼭 observale로 감싼 것이 아닌 usestate로 선언한 state의 action에 의해 렌더링이 되도 호출 됩니다.
- 미해결Redux vs MobX (둘 다 배우자!)
mobx configure
Mobx configure 사용할 때 observable을 스고 있는 모든 컨포넌트에 다 적용시켜야하나여?
- 미해결Redux vs MobX (둘 다 배우자!)
리덕스 툴킷 과 saga질문
안녕하세요. 제로초님 빠른 답변 항상 감사드립니다. 툴킷과 saga 활용에 대해 질문 드리려고 합니다. 1. 요즘에 거의 툴킷만 실무에서 사용한다고 들었는데,빠르게 리덕스부분 익히고 노드버드로 넘어가려해서 툴킷과 mobx까지만 듣고 saga는 건너뛰어도 실제 업무 및 노드버드 듣는데 문제 없나요? 2. 노드버드는 툴킷을 사용하지 않는데, 노드버드에서 saga 부분을 듣지 않아도 그 부분을 쉽게 툴킷으로 변환가능한가요?
- 미해결Redux vs MobX (둘 다 배우자!)
로깅 미들웨어 질문입니다
안녕하세요. 제로초님 항상 잘 보고 있습니다. 강의 중에 궁금한게 있어 질문드립니다. 이런식으로 계속해서 로그가 찍히는데 dispatch 전에 로그를 찍는 건 알겠으나, firstMiddleware를 실행하는 dispatch 호출이 store.dispatch(logIn({ id: 1, name: 'zerocho', admin: true,})); 로 하나 뿐이니, firstMiddleware 미들웨어는 처음에 한번 (dispatch, getState) => { // async action dispatch(logInRequest(data)); try { setTimeout(() => { dispatch(logInSuccess({ userId: 1, nickname: 'zerocho' })); }, 2000); } catch (e) { dispatch(logInFailure(e)); } };}; 를 로그 찍어주고 기능이 종료되며, thunkMiddleware로 넘어가는것 아닌가요? thunkMiddleware가 실행되면서 내부 action이 dispatch 될때마다 어떻게 계속 로그가 찍히는지 궁금합니다. 아니면 혹시, 미들웨어는 일회성으로 한번 실행되고 끝나는게 아닌, dispatch 될때마다 실행되는 건가요?
- 미해결Redux vs MobX (둘 다 배우자!)
제너레이터 질문드립니다.
안녕하세요. 제너레이터 질문드립니다. 1. function* 을 통해 제너레이터를 만들 수 있는데, 검색해보니 화살표 함수로는 제너레이터를 만드는 방법을 찾지 못했는데 화살표 함수로는 제너레이터 생성이 불가능한가요? 2. 리덕스 사가외에 제너레이터가 또 자주 사용되는 예시가 있다면 어떤 것이 있을까요?
- 미해결Redux vs MobX (둘 다 배우자!)
MobX 데코레이터 질문드립니다.
안녕하세요. MobX 데코레이터 질문드립니다. 현재 2022년 6월 기준 MobX공식 문서를 찾아봤더니 데코레이터가 아직도 표준화가 되지 않았고, 데코레이터를 많이 사용하지 않는 추세로 바뀐 것 같은데 이 부분은 어떻게 생각하시는지 궁금합니다. 또 뒤에 나오는 수업에서는 데코레이터를 다루는데 만약 데코레이터를 현재는 잘 사용하지 않는 추세라면 가볍게 보고 넘어가는 정도로만 해도 문제가 없을까요?
- 미해결Redux vs MobX (둘 다 배우자!)
메모이제이션 질문드립니다.
안녕하세요. 메모이제이션 질문드립니다. 강의 10:45~10:50 에 의존성 배열을 연산하는 비용이 useMemo의 콜백 함수 안을 연산하는 비용보다 더 많아지면 오히려 메모이제이션이 안 좋을 수 있다라고 하셨는데 의존성 배열은 그냥 값이 바뀌었는지를 비교하는 정도 아닌가요? 단순 비교가 다른 연산보다 더 연산하는데 드는 비용이 많아질 수가 있나요? const totalPrice = useMemo(() => { return prices.reduce((a, c) => a + c, 0); }, [prices]);
- 미해결Redux vs MobX (둘 다 배우자!)
리덕스 썽크, 리덕스 사가 질문드립니다.
안녕하세요. 리덕스 썽크, 리덕스 사가 질문드립니다. 간단한 것만 할 때는 리덕스 썽크, 복잡한 비동기 작업을 할 때는 리덕스 사가를 사용하는 것이 좋다고 하셨는데 실무에서 간단한 프로젝트는 주로 리덕스 썽크, 규모가 있는 프로젝트는 리덕스 사가를 사용하시는 편인가요? 현재 2022년 기준으로 어떻게 생각하시는지 궁금합니다.
- 해결됨Redux vs MobX (둘 다 배우자!)
redux 글 수정
안녕하세요 수업 잘 듣고 있습니다! 해결이 되지 않아서 질문 남깁니다 ㅠㅠㅠㅠ 리덕스로 글 수정을 시도 중입니다 현재 글 list의 내용을 input에 불러온 뒤 수정한 내용과 같이 보내서 수정을 하고 있습니다 문제는 list를 콘솔에 찍게 되면 2가지의 목록이 불러와지고 있습니다 2번째의 list에는 현재 게시물의 목록, 첫번째는 그 전에 눌렀던 목록이 나오고 있습니다 제가 원하는 list는 두번째의 목록의 list인데 input창까지는 두번째의 list가 잘 불러와지지만 postEditInfo에서는 첫번째 목록이 불러와진 상태이고 이 데이터를 서버에 보내게 되면 그 전에 눌렀던 목록의 list가 현재 목록에 덮어지는 현상이 발생하고 있습니다 그래서 default를 ' ' 로 변경을 하고 나서 목록을 수정하게 되면 postEditInfo가 수정하지 않은 목록은 undefined로 뜨게되고 서버에서 undefiend인 목록은 수정을 하지 않게 막아놓은 상태라서 일단 제대로 수정이 되고 있습니다 하지만 한번 수정을 하고나서 다른 게시물을 수정하게 된다면 원래 남아있던 postEditInfo가 다른게시물에 덮어집니다 ㅠㅠㅠ 왜 두번 목록이 불러와지는지, 현재의 목록을 한번만 불러오려면 어떻게 해야 되는지 궁금합니다 ㅠㅠㅠ const list = useSelector((state)=> state.postsDetailReducer) console.log('list====',list) const [postEditInfo, setPostEditInfo] = useState({ restaurant_name: list.restaurant_name, recruitment_personnel: list.recruitment_personnel, delivery_fee: list.delivery_fee, address: list.address, body: list.body, }) ... <input defaultValue={list.address} onChange={handleInputValue('address')} /> const postDetailInitialState = { address: null, body: null, category_food: null, closed: null, created_at: null, delivery_fee: null, id: null, lat: null, lng: null, recruitment_personnel: null, restaurant_name: null, user_id: null, }; const postsDetailReducer = (state=postDetailInitialState, action) => { switch(action.type){ case SHOW_POST_LIST_SUCCESS: let post = action.payload.data.data; let newData = { address: post.address, body: post.body, category_food: post.category_food, closed: post.closed, created_at: post.created_at, delivery_fee: post.delivery_fee, id: post.id, lat: post.lat, lng: post.lng, recruitment_personnel: post.recruitment_personnel, restaurant_name: post.restaurant_name, user_id: post.user_id, } return Object.assign({}, state, newData); case SHOW_POST_EDIT_SUCCESS: return Object.assign({}, state, { contendId: post.contendId, restaurant_name: post.restaurant_name, recruitment_personnel: post.recruitment_personnel, delivery_fee: post.delivery_fee, address: post.address, body: post.body, }); default: return ''; // default: return state; // 원래 코드 } }
- 미해결Redux vs MobX (둘 다 배우자!)
질문입니다
rtk query나 react-query를 사용하면 비동기처리를 해주는걸로 아는데 미들웨어 thunk를 대체한다라고 생각하면 될까요??
- 미해결Redux vs MobX (둘 다 배우자!)
익명함수와 화살표함수 this
강의 중 궁금한 것이 있습니다 .(10:22 관련) useLocalStore로 감싼 객체리터럴 중 메소드를 action으로 감쌌을 때 { name: '', onChangeName: action((e)=>{ this.name = e.target.value; }) } this가 어째서 익명함수를 사용했을 때는 작동하고, 화살표함수로 했을 때는 작동을 안하는지 이해가 잘 안됩니다. 만약 action함수가 this를 바꾼다면.. 오히려 화살표함수의 this가 바깥의 객체로 bind 되니까 작동해야하고 익명함수의 this는 action으로 바뀌니까 작동을 안해야하는것 아닌지요??화살표함수는 this문제를 해결하기 위해 나온것으로 알고 있는데.. 화살표함수는 프로토타입이 존재하지 않는다라는 말을 들어서 그 특성과 연관이 되어있는지요???
- 해결됨Redux vs MobX (둘 다 배우자!)
useDispatch 관련 질문드립니다
안녕하세요 :) const dispatch = useDispatch(); const getTodoDatum = useCallback(() => { dispatch(fechLocal());}, [dispatch]); 이런식으로 dispatch를 사용하는 함수를 useCallback으로 감싸고 의존성 배열에 dispatch를 넣었는데요 상태가 변경될 때마다 disptach가 새로 생성되어서 getTodoDatum도 새로 생성되더라구요. 또 이 함수를 전달받는 컴포넌트들도 리렌더링되구요. 그래서 useMemo를 사용하려 했지만, 콜백함수 안에 useDispatch를 넣으니 hook은 컴포넌트 최상단에 넣어야한다는 에러가 뜨더라구요. 음.. 잘 전달됐을지 모르지만 요약하자면 useDispatch()의 값을 메모이제이션 할 수 있는 방법이 궁금합니다! 참고 할 수 있는 키워드 혹은 사이트만 알려주셔도 감사하겠습니다:)
- 미해결Redux vs MobX (둘 다 배우자!)
mobx observable 객체의 트래킹 뎁스
안녕하세요 mobx에서 observable 객체가 복잡해짐에 따라 어느 깊이까지 트래킹 되는지 테스트해보려 하다 공식문서를 보니 deep, shallow 등의 옵션이 있더라구요 구글링 했을 때는 사용법이 전부 데코레이터 기반이라 함수형에서는 어떻게 사용하는지 궁금합니다.
- 미해결Redux vs MobX (둘 다 배우자!)
함수선언문과 표현식
강의를 보다가 의문점이 하나 있어서 질문드립니다. actions/user.js를 보면 제일 위에 표현한 logIn 안에서 그보다 아래 표현한 logInRequest, logInSuccess 등을 사용하고 있는데요.. 함수선언문이 아니고 표현식인데.. 어떻게 아래에 선언했는데 위에 선언한 것에서 에러 없이 사용가능한것인가요? 호이스팅이 안될 것 같아서 질문드립니다.
- 해결됨Redux vs MobX (둘 다 배우자!)
next 에서 mobx
여기있는 예제를 보고 next 에서 mobx 사용중인데 https://dev.to/ivandotv/mobx-server-side-rendering-with-next-js-4m18 깃헙코드: https://github.com/ivandotv/mobx-nextjs-root-store 참고로 저 예제에선 rootStore를 각 store 마다 생성자에 넘겨주긴했지만 직접적으로 rootStore를 사용하지 않았습니다. 그러나 제가 사용하는 서비스는 A store B store가 있을때 B store에서 action이 발생했을때 A store 에대한 상태가 바뀌어야되서 rootStore를 생성자로 받아야될것같더라고요 이 예제를 참고했습니다. 저기서 store 만들떄 RootStore 만들고 Counter Store에 CountStore 에 this 를 넘겨줘서 이렇게 rootStore 를 받고있는데 mobx devtools 보니까 makeObservable 에 root 를 넣지도 않았는데 devtools 에서 countStore 안에 RootStore가 있고 그 RootStore 안에 countSotre가 있고 1. 이렇게 재귀처럼 state 가 존재하는데 성능에 영향을 미칠까요? 2. 특정 변수만 observe 하고싶지 않은데 어떻게 하는게 좋을까요? 전 makeobservable 에 observable을 설정안해주면 안될줄 알았는데 devtools를 보니 rootStore가 있어서요. devTools에 있는 이유가 아마 annotation 에서 observable를 세팅해주는건 observable한 값이 변경됬을때 observer() 를 감싼 컴포넌트에서 리렌더링 하기위해 있는것같더라고요 2-1. 제 개인적으로 이 문제를 해결해보고자 이런식으로 넣긴 했거든요 makeObservable 의 첫번째 인자가 target 인데 감지할 state 를 넣는것같더라고요 두번째 인자에는 annotation (action인지 observable인지)붙혀주는것같아서 첫번째 인자에서 this 는 클래스를 가르키니까, root 도 같이 traget 된것같아 this에 대한 값을 바꾸면 될것같아서 state 변수를만들고 const state = this; 를 하면 참조되는 문제때문에 {...this} 이런식으로 복사해주고 root를 undefined 해주고 makeObservable에 this 대신 state 변수를 넘기니 rootStore가 devtools에 안나오는데 이렇게 해도 되는건가요?
- 해결됨Redux vs MobX (둘 다 배우자!)
mobx makeAutoObservable 과 mobx로 비동기처리해야될때 질문입니다.
class Store{ repository; rootStore; num = 0; constructor(repository,rootStore){ makeAutoObservable(this); this.repository = repository; this.rootStore = rootStore; } addnum = ()=>{ num++; } } mobx makeautoObservable 관련 질문입니다. 대충 이런식으로 store 가 있는데 makeAutoObservable이 알아서 action 이랑 observable을 지정해줍니다. 1-1. respository와 rootStore는 observable 하게 하고싶지 않은데 mobx devtools를보니 repository와 rootStore를 감지하고 있더라고요 특정 변수 또는 함수를 autoObservable 에 제외시킬수 있나요? repository 나 rootStore 앞에 private 키워드를 줘봤는데도 감지하고 있었습니다. 1-2. 위처럼 메모리에 불필요한 상태값까지 감지하게되면 나중에 state 가 커지면 성능과 메모리 차지에 큰 영향을 끼칠까요? mobx로 비동기 처리해야될때 질문입니다. 네트워크 요청해서 데이터를 보여줘야되는데 리스트로 항목 4개 보여주고 화살표로 다음 페이지버튼 보거나 이전페이지 버튼 보게 하고 있습니다. 다음페이지로 넘기면 네트워크 요청하고 응답받으면 데이터를 보여주게되고 요청을 날릴때는 빈화면이고 요청에대한 응답을 받았을때 데이터를 뿌려줘야됩니다. <button onClick = {()=>store.loadPrevious()}>previous</button> {store.listData && <MyListComponent data={store.listData.slice(store.page*4,store.page+4)}/>} <button onClick = {()=>store.loadNext()}>next</button> 이런식으로 store.listData 가 있을때 컴포넌트가 나오게 했습니다. 첫화면 로딩시 즉 useEffect() 에서 요청날렸을땐 제대로 동작하는데 다음페이지 버튼을 누르면 이미 store.listData는 이미 null이 아니기떄문에 네트워크요청 응답을 받기도전에 화면을 넘겨서 데이터를 제대로 뿌려주지를 못합니다. 2-1. 이런경우는어떻게 처리하는게 좋을까요?
- 미해결Redux vs MobX (둘 다 배우자!)
useSelector 사용시 성능 문제점 문의드립니다.
안녕하세요 제로초님 실무에서 redux를 사용중입니다.강의에서 class형과 달리 훅스 방식으로는 useSelector 사용시 const { user , post } = useSelector((state) => state)이렇게 구조분해할당 으로 가져오게 된다면 const user = useSelector((state) => state.user);const post = useSelector((state) => state.user );이렇게 따로 가져오는것에 비해 낭비가 발생하는걸까요?낭비가 발생하는 이유는 비구조화할당으로 해당 객체의 값이 바뀌었는지 알지못해서 항상 기존 값을 기억하지못해서 그런걸까요? 질문드립니다
- 해결됨Redux vs MobX (둘 다 배우자!)
runInAction 에 비동기
mobx react next 로 하고 있는데 runInAction 에서 비동기처리를 하려면 어떻게 해야되나요? Component.tsx const store = useIndexStore(); useEffect(() => { const fetchData = async () => { await store.loadNewMemberData(); console.log(store.newMember) } fetchData(); }, []) 일단 훅스 컴포넌트에서 useEffect에서 store 에 저장된 정보를 불러와야되는데 Promise 기때문에 따로 함수를 만들어줘서 호출을 했고요. useEffect 뜯어보니 함수 리턴타입이 void|Destructor(?) 라 Promise 타입을 못받아서 저렇게 만들었습니다. 1. useEffect 에서 비동기 작업을 할때 저렇게 async 함수 만들어서 호출해야되는건가요? 2. async 함수를 만들었으면 꼭 await 으로 호출안해도 되는건가요? store.ts class IndexStore { root; repository rtrMenu: MenuItem[] = []// constructor(root: RootStore, repository: BaseRepository) { this.root = root this.repository = repository makeAutoObservable(this) } loadRealtimeRequestData = async (): Promise<void> => { runInAction(() => { this.rtrMenu =this.repository.getRealTimeRequestItem() }); } } store에선 loadRealtimeRequestData() 함수에서 네트워크 요청한 결과를 받습니다. await this.repository.... 여기가 await axios.get() 이런 역할을 하게 되는데 then 을 하면 쉽게 해결될문제지만 async awiat 으로 runInAction 안에서 처리할려면 어떻게 해야되나요?
- 해결됨Redux vs MobX (둘 다 배우자!)
2-5 react-redux 질문드립니다.
안녕하세요 제로초님 영상 잘보고 있습니다 :) 2-5 react-redux를 듣고 따라하다가 질문이 있어서요. react 세팅은 성공해서 hellow 메시지 브라우저에 띄우는데까진 성공 했습니다. (오류가 있어서 제로초님 웹 게임 강의 react설정 공부하였습니다) 그 다음이 문제인데 액션, 리듀서 폴더와 index2파일을 가져와서 세팅 후 npm run dev로 다시 실행 했는데 이전 hellow 메시지만 뜨고 새로 만든 로그인 버튼이 뜨지 않습니다. (저장은 다 했고, 껏다 켜봤습니다) 오류메시지라도 뜨면 찾아보는데 정상적으로 컴파일 됐다고 뜹니다.
- 해결됨Redux vs MobX (둘 다 배우자!)
리덕스 툴킷에서 rejected 일 때 에러메세지 처리하기
안녕하세요 제로초님! 궁금한 게 있어서 질문 남깁니다! 로그인을 처리하는 로직에서 error 발생시 직접 정의한 에러 메시지를 보여주고 싶은데요.. 툴킷을 사용하기 전에는 axios에 error.response를 통해서 직접 정의한 메세지를 뽑아 사용했었는데 rejected에서 action.error.message 를 담아도 원하는 값이 안나오네요 "존재하지 않는 이메일입니다!" 라는 문구를 logInError에 넣고싶습니다! 방법을 알 수 있을까요? 감사합니다! 혹시 몰라서 코드도 같이 올리겠습니다! import { createSlice, PayloadAction } from '@reduxjs/toolkit' import { ResUserData } from 'api/user/types' import { userLogin } from 'store/user/action' interface UserState { logInLoading: boolean logInDone: boolean logInError: string | null user: ResUserData | null } const initialState: UserState = { logInLoading: false, logInDone: false, logInError: null, user: null } const userSlice = createSlice({ name: 'user', initialState, reducers: {}, extraReducers: bulid => bulid .addCase(userLogin.pending, (state: UserState) => { state.logInLoading = true state.logInDone = false state.logInError = null }) .addCase( userLogin.fulfilled, (state: UserState, action: PayloadAction<ResUserData>) => { state.logInLoading = false state.logInDone = true state.user = action.payload } ) .addCase(userLogin.rejected, (state: UserState, action) => { state.logInLoading = false state.logInError = action.error.message! }) }) export default userSlice.reducer