항상 좋은 강의 감사합니다.다름이 아니라 혹시 강의 들으면서 같이 볼만한 책이나 교재 같은게 있을까요? 

라우츠 파일에 보면 제일 밑에 코드에서 pages 를 익스포트해주는데, 쓰는곳이 없더라구요...!혹시 이 코드가 반드시 필요한 것인지 궁금해서 질문 남깁니다:)import GlobalLayout from './pages/_layout'; import Index from './pages/index'; import ProductsIndex from './pages/products/index'; import ProductsId from './pages/products/[id]'; import Cart from './pages/cart'; export const routes = [ { path: '/', element: <GlobalLayout />, children: [ { path: '/', element: <Index />, index: true }, { path: '/products', element: <ProductsIndex />, index: true }, { path: '/products/:id', element: <ProductsId /> }, { path: '/cart', element: <Cart />, index: true }, ], }, ]; export const pages = [{ route: '/' }, { route: '/products' }, { route: '/products/:id' }, { route: '/cart' }];

vite-plugin-next-react-router 다운받고 강의를 따라했는데요.. routes.tsx파일이 자동으로 생성이 되지않습니다.그런데 이상하게 페이지가 작동이되요..이유가 뭘까요..?vite.config.ts 내용은 조금 다릅니다.reactRouterPlugin를 사용하면 오류가 생겨서 withReactRouter으로 교체했습니다.나머지 파일생성과 코드는 동일합니다..import { defineConfig } from "vite"; import withReactRouter from "vite-plugin-next-react-router"; import react from "@vitejs/plugin-react"; export default defineConfig({ plugins: [react(), withReactRouter()], });

chapter07 Custom Hook에서 ServerAPI 에러가 나오는데 해결을 못하여 도움 요청합니다 에러 

이렇게 코드를 짰는데..맞는 것 같은데...이렇게 뜹니다...

const products 에서 products는 result.data.products를 담기 위해 선언한 products 이므로 위에서 선언한const [products, setProducts] 에서의 products 와 다른 것이 맞나요?또 setProducts() 안에 들어가는 products를 넣은 것은 const[products, setProducts] 에서의 products에 const products에서의 products를 대입하기 위해 넣은 것으로 보면 되나요?즉, const products = result.data.products;setProducts(products); 를 setProducts(result.data.products); 라고 해도 문제가 없는 건가요?

main/index.js에서 컴포넌트 함수명(MainPage)와 App.js에서 import 하는 함수명(MainPageComponent)가 달라도 괜찮은 이유가 뭔가요?혹시 한 js파일에서는 export를 한 개의 컴포넌트만 할 수 있어서 그런건가요?(컴포넌트는 여러개 만들어도 문제가 괜찮던데 export를 2번 쓰니까 빨간줄이 생겨요.)

useEffect의 두번째 파라미터에는 useState로 인해 할당된 변수인 time만 쓸 수 있는건가요?function TimerComponent() { const [time, setTime] = React.useState(0); const cnt = 0; React.useEffect(function() { setTime(time+1); }, [cnt]); return ( <div> <h3>{time}초</h3> <button onClick={function() { cnt++; }}>1씩 올려주세요.</button> </div> ); }이런식으로 사용이 안되는건가요?

안녕하세요. 항상 좋은 강의를 해주셔서 감사합니다.다름이 아니라 글 작성시 콘솔에 ADD_POST_REQUEST에 대한 리듀서 작동은 확인했으나 그 뒤에 addPost 사가가 작동하지 않는 것에 대해 질문이 있습니다.위 문제는 watchAddPost()가 정상적으로 ADD_POST_REQUEST에 대한 이벤트를 캐치하지 못 해서 다음 과정이 진행되지 않는 것이라고 생각합니다. 다만 콘솔에서는 이에 대한 것도 뜨지 않아 해당 오류를 해결하기 어려워 질문 드립니다.다음은 제가 작성한 코드입니다. ()@/component/PostFrom.jsconst PostForm = () => { const dispatch = useDispatch(); const { imagePaths, addPostDone } = useSelector((state) => state.post); const [text, onChangeText, setText] = useInput(""); const onSubmit = useCallback(() => { dispatch(addPostRequestAction(text)); }, [text]); ... }@/reducer/post.jsexport const initialState = { mainPosts: [...], ... addPostLoading: false, addPostDone: false, addPostError: null } export const ADD_POST_REQUEST = "ADD_POST_REQUEST"; export const ADD_POST_SUCCESS = "ADD_POST_SUCCESS"; export const ADD_POST_FAILURE = "ADD_POST_FAILURE"; export const addPostRequestAction = (data) => ({ type: ADD_POST_REQUEST, data, }); const dummyPost = (data) => ({ id: 2, content: data, User: { id: 1, nickname: "윤섭", }, Images: [], Comments: [], }); const reducer = (state: initialState, action) => { switch (action.type) { case ADD_POST_REQUEST: console.log("REDUCER: ADD_POST_REQUEST"); return { ...state, addPostLoading: true, addPostDone: false, addPostError: null, }; case ADD_POST_SUCCESS: console.log("REDUCER: ADD_POST_SUCCESS"); return { ...state, mainPosts: [dummyPost(action.data), ...state.mainPosts], addPostLoading: false, addPostDone: true, }; ... } }@/sagas/post.jsimport { all, fork, delay, put, takeLatest } from "redux-saga/effects"; import axios from "axios"; import { ADD_POST_REQUEST, ADD_POST_SUCCESS, ADD_POST_FAILURE, ADD_COMMENT_REQUEST, ADD_COMMENT_SUCCESS, ADD_COMMENT_FAILURE, } from "@/reducers/post"; // add post function addPostAPI(data) { return axios.post("/api/post"); } function* addPost(action) { try { // const result = yield call(addPostAPI); yield delay(1000); console.log("SAGA: addPost"); yield put({ type: ADD_POST_SUCCESS, data: action.data, }); } catch (err) { yield put({ type: ADD_POST_FAILURE, error: err.response.data, }); } } function* watchAddPost() { yield takeLatest(ADD_POST_REQUEST, addPost); } export default function* postSaga() { yield all([fork(watchAddPost), fork(watchAddComment)]); }아래는 ADD_POST_REQUEST 이후 아무런 반응이 없는 스크린샷입니다.

선생님께서 보여주신 React App 시계 만들기 실습 화면에는 "오후 6:35:38" 처럼 시간 부분에 반짝거리는 효과가 나오는데, 제 화면에서는 다음과 같이 div 부분에 효과가 나오는데, 이게 18 버전이라서 다른건가요? 그게 아니라면 어떤 이유 때문에 다르게 나오는건지 궁금합니다.

작성된 코드는 똑같은데 타이머가 작동하지 않아요 ㅠㅠ min과 sec 두 변수 모두 String으로 감싸줘보기도 하고 min "+" sec 부분을 String으로 감싸주기도 해봤는데 해결이 안돼요 let auth = () => { const token = String(Math.floor(Math.random() * 1000000)).padStart(6, "0"); document.getElementById("number").innerText = token; document.getElementById("number").style.color = "#" + token; let time = 180; setInterval(function () { if (time >= 0) { let min = Math.floor(time / 60); let sec = Stirng(time % 60).padStart(2, "0"); document.getElementById("timer").innerText = min + ":" + sec; time = time - 1; } else { document.getElementById("finish").disabled = true; } }, 1000); };

안녕하세요.커스텀 유저 모델을 만들어 잘 적용하였습니다.템플릿 쪽에서는 로그인된 유저의 {{ user }} 형태로 접근하여 커스텀으로 만든 필드들의 값에 접근이 잘 됩니다.views에서 request.user 를 할 경우, 커스텀 된 필드들의 값을 사용할 수 없고 기본 유저 모델의 필드값만 나오고 있습니다. 어떤 장치를 해주어야 커스텀 된 필드 값들을 모두 사용할 수 있는지 찾아보았지만 정확히 알아내지 못하였습니다... 임시로 request.user를 통해 현재 로그인 된 사용자 정보를 가져오고 커스텀 유저 모델에서 동일한 유저를 찾아서 정보를 사용하는 형태로 해두었는데, 좋은 방향이 아닌듯하여 도움을 얻고자 질문을 남기게 되었습니다. def home(request): login_user = request.user user_site = User.objects.filter(email=login_user).get().site site_id = SiteInfo.objects.filter(site_name=user_site).get().pk boat_info = BoatInfo.objects.filter(site=site_id) return render(request, 'monitoring/home.html', { 'boat_info': boat_info, }) 번외로 템플릿에서 DB 데이터 갯수만큼만 DIV를 행렬로 만들어야 하는데, 짧은 지식으로 아래와 같이 구현해 보았습니다만, 좋은 방향으로 보이진 않아서 계속 고민 중에 있습니다. 한번 살펴봐 주시면 감사하겠습니다(꾸벅){% for boat in boat_info %} {% if forloop.counter0 != 0 and forloop.counter0|divisibleby:3 %} </div> {% endif %} {% if forloop.counter0|divisibleby:3 %} <div class="row"> {% endif %} <div class="col">{{ boat }}}</div> {% if forloop.last %} </div> {% endif %} {% endfor %}

강사님 안녕하세요!다름이 아니라 firebase 데이터 업데이트 하는 부분이 막혀 질문하려고 합니다.아래 사진은 Firebase 데이터 업데이트 함수와 발생하는 에러 사진입니다.해당 문제를 해결할 수 있게 도움 부탁드립니다 ㅠㅠ해당 오류 해결하기 위해 firebase 룰을 변경했는데도 해결되지 않았습니다.  

http://localhost:3000/에 뜬 오류Server ErrorTypeError: Cannot read properties of undefined (reading 'user')This error happened while generating the page. Any console logs will be displayed in the terminal window.Sourcecomponents/AppLayout.js (15:52) @ eval 13 | 14 | const AppLayout = ({ children }) => { > 15 | const isLoggedIn = useSelector((state) => state.user.isLoggedIn); | ^ 16 | // const { isLoggedIn } = useSelector(state => state.user); 17 | 18 | return (Call StackAppLayoutcomponents/AppLayout.js (15:36)Show collapsed frames  터미널에 뜬 오류TypeError: Cannot read properties of undefined (reading 'user')at eval (webpack-internal:///./components/AppLayout.js:32:101)at /Users/hyeonyeongjeong/Documents/2023project/nodebird/prepare/front/node_modules/react-redux/lib/hooks/useSelector.js:67:26 npm run dev를 하고http://localhost:3000/ 들어갔더니이런 오류가 뜨면서 안됩니다.유저를 왜 읽지 못하는 걸까요?오류 해결하고 싶습니다 ㅠ 

강사님 안녕하세요, 혹시 밑에 질문했는데 제가 잘못 말을 전달한것 같아서요비로그인일때는 피그마에서 작성자, 비밀번호를 입력하게 나타나는데로그인일때는 작성자, 비밀번호를 입력 못하게 나타나더라고여 근데 playground 가보면 파라미터를 받는곳을 보면 user 정보를 받는 파라미터가 없더라구요그래서 fetchBoard를 들어가서 user정보를 가져와도 null값이 나옵니다.그럼 피그마에 있는 저거는 로그인유저도 비로그인유저 화면으로 만들어야하나요?

제가 이번에 loadPosts를 createAsyncThunk로 구현하면서 createAsyncThunk의 진행 순서가 궁금해서 질문 드립니index.js useEffect(() => { console.log("dipathch hi"); dispatch(loadPosts(10)); }, [dispatch]);reducers/post.js export const loadPosts = createAsyncThunk(LOAD_POST, async (data) => { trottle(); return data; }); const trottle = () => listenerMiddleware.startListening({ type: LOAD_POST, effect: async (action, listenerApi) => { listenerApi.unsubscribe(); console.log("Original state ", listenerApi.getOriginalState()); await listenerApi.delay(5000); console.log("Current state ", listenerApi.getState()); listenerApi.subscribe(); }, }); const postSlice = createSlice({ name: "post", initialState, extraReducers: (builder) => builder .addCase([HYDRATE], (state, action) => ({ ...state, ...action.payload.post, })) // loadPosts .addCase(loadPosts.pending, (state, action) => { state.loadPostsLoading = true; state.loadPostsDone = false; }) .addCase(loadPosts.fulfilled, (state, action) => { action.payload = generateDummpyPost(action.payload); state.mainPosts = action.payload.concat(state.mainPosts); state.hasMorePost = state.mainPosts.length < 50; state.loadPostsLoading = false; state.loadPostsDone = true; }) .addCase(loadPosts.rejected, (state, action) => { state.loadPostsLoading = false; state.loadPostsError = action.error; }) .addDefaultCase((state) => state), });제가 하나하나 console.log를 찍어서 확인한 진행 순서를 얘기해 드리겠습니다일단 화면을 처음 랜더링할때 index.js에서 dispatch가 제일 먼저 실행됩니다 그리고 post.js로 넘어와서 loadPost.pending -> loadPosts.fulfilled ->loadPosts = createAsyncThunk(LOAD_POST) 이 순서대로 진행이 됩니다 그래서 loadPosts.fulfilled에 generateDummpyPost()함수를 작성한 것입니다그래서 마지막에 createAsyncThunk가 실행이 되니 return이 필요없지 않나? 라는 생각에 return을 지워봤더니 post가 하나만 작성되고 그 이후는 작성되지 않았습니다제가 궁금한 부분은 세개입니다createAsyncThunk의 정확한 진행순서가 궁금합니다generateDummpyPost()함수를 저렇게 작성하는게 맞는지 궁금합니다https://blog.logrocket.com/redux-toolkits-new-listener-middleware-vs-redux-saga/ 에서 Throttling관련 얘기가 있어서 똑같이 따라 해봤는데 쓰로틀링을 createAsyncThunk에 장착하는 방법을 잘 모르겠습니다 쓰로틀링이 없어도 윈도우 이밴트로 요청이 한번에 많이 오는 현상은 없지만 그래도 궁금해서 질문 드립니다 

4분 15초경부터 25초까지 잡음이 들려서 강의 소리가 잘 안들리네요참고하시면 좋을 것 같습니다.

pdf파일로도 보고싶은데 따로 제공안되나요?

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.- options.allowedHosts[0] should be a non-empty string.client 부분에서 실행시 요런오류가나옵니다.1. 시도해본것allowedHosts 옵션관련을 찾기위해 client node_modules./webpackDevServer.config.jsallowedHosts: disableFirewall ? 'all' : [allowedHost], ->확인했을떄 빈문자열이아닌데 왜 이런오류가나오는지..?해결책이궁금합니다.2. 시도해본것 ...client 단 proxy 설정을 지워주면 동작함.->해결.혹시에러원인이 무엇이엿을지 궁금합니다.

아래 질문(reduxjs/toolkit 에서 loadPost 한번만 가게하기)에서 비슷한 내용의 질문이 올라왔는데delay란 함수를 어떻게 설정하는지 잘 이해가 안되서 질문드립니다