안녕하세요수업에서 보여주는 nextjs13 관련 pdf 문서는 따로 공유 안 되는 걸까요...?

다이나믹 라우팅을 할때 next-redux-wrapper 7버전 이상 사용하고 있는데질문이 2가지가 있습니다!구동방식에 대해서는 이해했는데 getServerSideProps 에 loadPost에 context.params.id 가 아니라 7버전 이상이여서 req.params.id로 넣어줬는데 백엔드에서 받는 postId가 undefined로 뜹니다 혹시 7버전이상일땐 loadPost에는 어떤 값을 넣어줘야하나요..!? 게시글에 <Link>를 사용해서 다이나믹 라우터를 이용하면 처음에 CSR 방식으로 값을 받아와서 데이터가 없기 때문에 undefined가 뜨기 때문에 그 동안 로딩창을 띄워줘야 된다고 말씀하셨는데 그 말씀 자체에는 이해가 됐는데 그러면 getServerSideProps 에 따로 작업을 해줘야하는건가요!?

PostImages.jsimport React, { useCallback, useState } from 'react'; import PropTypes from 'prop-types'; import { PlusOutlined } from '@ant-design/icons'; import ImagesZoom from './ImagesZoom'; const PostImages = ({ images }) => { const [showImagesZoom, setShowImagesZoom] = useState(false); const onZoom = useCallback(() => { setShowImagesZoom(true); }, []); const onClose = useCallback(() => { setShowImagesZoom(false); }, []); if (images.length === 1) { return ( <> <img role="presentation" src={images[0].src} alt={images[0].src} onClick={onZoom} /> {showImagesZoom && <ImagesZoom images={images} onClose={onClose} />} </> ); } if (images.length === 2) { return ( <> <div> <img role="presentation" src={images[0].src} alt={images[0].src} width="50%" onClick={onZoom} /> <img role="presentation" src={images[1].src} alt={images[1].src} width="50%" onClick={onZoom} /> </div> {showImagesZoom && <ImagesZoom images={images} onClose={onClose} />} </> ); } return ( <> <div> <img role="presentation" src={images[0].src} alt={images[0].src} width="50%" onClick={onZoom} /> <div role="presentation" style={{ display: 'inline-block', width: '50%', textAlign: 'center', verticalAlign: 'middle' }} onClick={onZoom} > <PlusOutlined /> <br /> {images.length - 1} 개의 사진 더보기 </div> </div> {showImagesZoom && <ImagesZoom images={images} onClose={onClose} />} </> ); }; PostImages.propTypes = { images: PropTypes.arrayOf(PropTypes.shape({ src: PropTypes.string, })).isRequired, }; export default PostImages;Post.jsexport const initialState = { mainPosts: [{ id: 1, User: { id: 1, nickname: '제로초', }, content: '첫 번째 게시글', Images: [{ src: 'https://bookthumb-phinf.pstatic.net/cover/137/995/13799585.jpg?udate=20180726', }, { src: 'https://gimg.gilbut.co.kr/book/BN001958/rn_view_BN001958.jpg', }, { src: 'https://gimg.gilbut.co.kr/book/BN001998/rn_view_BN001998.jpg', }], Comments: [{ User: { nickname: 'nero', }, content: '우와 개정판이 나왔군요~', }, { User: { nickname: 'hero', }, content: '얼른 사고싶어요~', }] }], imagePaths: [], postAdded: false, }; const ADD_POST = 'ADD_POST'; export const addPost = { type: ADD_POST, }; const dummyPost = { id: 2, content: '더미데이터입니다.', User: { id: 1, nickname: '제로초', }, Images: [], Comments: [], }; export default (state = initialState, action) => { switch (action.type) { case ADD_POST: { return { ...state, mainPosts: [dummyPost, ...state.mainPosts], postAdded: true, }; } default: { return { ...state, }; } } };코드에 문제가 없는 것 같은데 위와 같이 에러가 뜹니다.post.js파일도 비교해보면서 찾아봤는데도.. 답이 안보입니다.ㅠㅠ 

강의 진도 : 액션과 상태 정리하기state(=initialState) 중에 me: null 을 저희가 왜 만들어줬었죠?? 길을 잃었습니다. me가 무슨 정보는 담고 있는 걸까요..??

퀴즈 내용엔 '체크박스를 체크하고 삭제 버튼을 클릭하면, 해당 줄을 삭제해 주세요.'라고 되어있는데 체크 여부에 따라서 버튼의 활성화 여부를 지정하려고 하는데 제대로 작동하지 않습니다. 어떻게 코드를 작성하면 될까요?import {useQuery, gql, useMutation} from '@apollo/client' import styled from '@emotion/styled' const FETCH_PRODUCTS = gql` query fetchProducts{ fetchProducts{ _id seller name price } } ` const DELETE_PRODUCT = gql` mutation deleteProduct($productId:ID){ deleteProduct(productId: $productId){ message } } ` const Row = styled.div` display: flex; ` const Column = styled.div` width: 100px; border: 1px solid; ` export default function FetchDeleteProduct(){ const [deleteBoard] = useMutation(DELETE_PRODUCT) const {data} = useQuery(FETCH_PRODUCTS) console.log(data?.fetchProducts) const onClickDelete = async (event) => { if(document.getElementById("check")) { await deleteBoard({ variables : { productId: event.target.id }, refetchQueries:[{query:FETCH_PRODUCTS}] }) } } return ( <> {data?.fetchProducts.map((el) => <Row key={el._id}> <Column> <input type="checkbox" id="check"/> </Column> <Column>{el._id}</Column> <Column>{el.seller}</Column> <Column>{el.name}</Column> <Column>{el.price}</Column> <Column> <button id={el._id} onClick={onClickDelete}>삭제</button> </Column> </Row> )} </> ) }

강의를 따라서 simplediary 코드를 작성해보는데 첫번째 일기 id가 계속 20으로 떠서 제가 코드를 잘못 적은 부분이 있나, 싶어 codesandbox에 올려주신 코드를 붙여넣기 해도 제 브라우저에서는 계속 id가 20 - 39로 생성이 되더라구요.그래서 뭐가 문젠가 싶어서 봤는데 강의 버전의 npm은 프로젝트 생성시 index.js 코드가 ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById("root") );이렇게 생성이 되는데 제가 설치한 8.19.3 npm 버전에서는const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> );이렇게 생성이 됩니다.src에 App.js와 컴포넌트 코드들만 수정했다가 index 코드도 강의 버전대로 수정을 하니 해결이 되던데, 제가 보기엔 두 코드가 그렇게 다르지 않은 것 같은데 왜 다른 결과가 나오는지 궁금합니다. 

서버쪽도 타입스크립트 써도 되나요?? 프론트쪽 타입스크립트로 하고있어가지고요

안녕하세요 멘토님항상 좋은 강의 잘 보고 있습니다.궁금한 점이 생겨서 문의를 드렸는데요,수업을 하면서는 몰랐는데 타입스크립트와 graphql-codegen에 대하여 강의를 들으면서 09-01 폴더를 10-01로 복사 후, 수업 후반부까지 import 부분에서 계속 빨간줄이 뜨길래 원인을 한참 찾았는데알고보니 저는 여태까지 컴포넌트를 import 할 때 절대경로를 사용하고 있었습니다. (import 할 때 자동완성 사용)왜 인지는 모르겠지만 .js 파일까지는 절대 경로를 사용해도 문제가 없었는데 타입스크립트로 변환을 하니까 여태 잘 사용하던 절대경로가 빨간줄이 계속 뜨고 상대경로를 입력하니까 빨간줄이 사라지더라구요.09-01 .js 실습 파일 (빨간줄 없이 정상작동)10-01 .tsx 실습 파일 (절대경로 - 빨간줄, 상대경로 - 정상 작동) 이렇게 JS에서는 되던 절대경로가 TS에서는 왜 안되는 것인지가 궁금하여 질문드렸습니다. 감사합니다! 

바로 이전 강의인 useReduce까지는 모두 작동이 잘 되었습니다.이번 강의에서 일기 생성과 삭제는 잘 이루어지는데 수정에서만 오류가 발생하고 있습니다.강의를 세 번 돌려봤는데 무슨 문제인지 모르겠습니다ㅠhttps://codesandbox.io/s/gallant-kilby-4l2tr7?file=/src/App.js

강의를 따라가는중 docker run --rm -p 9000:8000 test_dj에서 도커를 실행시켰는데 접속페이지가 강의상에선http://localhost:9000/에서 접속이 가능한데 반해 저는http://localhost:8000/에서만 접속이 가능합니다어떤설정을 제가 잘못했길래 이렇게 될까요? 

6:00 에 dist 파일이제 파일이랑 구조가 다른데 따로 설정을 해주신건가요??

 컨트롤 씨 눌러도 안꺼져서 계속 깜빡이는 상태로 있네요  

 postman 설치후 빈화면을 보여주라고 하시는데 저는 선생님이랑 다른 화면이 나오는데 어떤메뉴로 들어가야 하나요?

 강의 보고 따라하는 중인데 yarn generate가 제대로 작동하지 않고 에러가 나옵니다

안녕하세요 🙋‍♂️import DiaryItem from "./DiaryItem"; const DiaryList = ({ diaryList }) => { return ( <div className="DiaryList"> <h2>일기 테스트</h2> <h4>{diaryList.length}개의 일기가 있습니다.</h4> <div> {diaryList.map((it) => ( <DiaryItem key={it.id} {...it} /> ))} </div> </div> ); // 컴포넌트 이름과 동일하게 만들기 }; DiaryList.defaultProps = { diaryList: [], }; export default DiaryList; // es 모듈 내보내기{diaryList.map((it) => ( <DiaryItem key={it.id} {...it} /> ))}맨 밑에 부분을 보면 diayList가 부모한테 받은 리스트를 map으로 하나씩 찾은 it 객체 까지는 이해가 됩니다. 그리고 아이템 컴포넌트한테 id까지 전달 하는것도 이해됩니다.이해가 조금 안 된 부분을 말씀 드릴게요1. {...it}이 아이템 컴포넌트한테 보내는 prop인데 이전까지의 prop은 name={name} 이렇게 앞에 변수명이 있었는데 왜 이건 없이 보내는데아이템에서 저렇게 받을 수 있나요?const DiaryItem = ({ author, content, emotion, created_date }) => {2. 여기서 it이라는 것은 내가 쓴 일기 하나하나 객체인데 일기리스트 state를 하나씩 map으로 접근해서 it 객체를 얻어내고 있는데 {...it} 이것은 스프리드 연산자로 전체 보내는 거 아닌가요? {it} 으로 보내도 되는지 확인해봤는데 에러가 뜨네요 map으로 돌면서 얻은 객체 it을 보내는데 왜 스프리드 연산자를 사용하는지 궁금합니다. it 안에 어떤 리스트의 하나의 일기 객체가 있을 텐데요 {diaryList.map((it) => ( <DiaryItem key={it.id} {...it} /> ))} console.log(it) 해봤는데 아래와 같은 객체를 그냥 뿌리면 되는데 {...it}을 왜 사용하는지 궁금합니다. it 자체에 정보가 다 있지 않나요??  

제가 axios 설치 이후 npm start에서 지속적으로 오류가 나길래 stackflow를 보고 -i npm ~... 무엇을 터미널에서 진행시키고.node_modules 폴더와 package.json & lock.json 파일 삭제후 npm start 다시 했는데 아래와 같이모듈 오류가 지속적으로 뜨네요.모듈 파일명들이 전에는 @로 시작하는 파일들이 다 날라간 것 같구요.모듈 중 Axios 폴더에서 index.d.ts 파일에서 오류가 발견되고 있는 상황입니다.그랩님 조금만 도와주실 수 있을까요

import useSWR, { useSWRInfinite } from 'swr'; const { data: chatData, mutate: mutateChat, revalidate, setSize } = useSWRInfinite<IDM[]>( (index) => `/api/workspaces/${workspace}/dms/${id}/chats?perPage=20&page=${index + 1}`, fetcher, );이렇게 하면 useSWRInfinite 가 import가 안되는데,import useSWRInfinite from 'swr/infinite'이렇게 따로 import 해주어야 import가 제대로 되네요

안녕하세요.노드버드강의 saga 쪼개기 부분 강의 듣고 있습니다. 로그인을 요청, 성공, 실패 이렇게 세세하게 나누시는데 이유가 궁금합니다. 로그인 요청을 보내면 무조건 성공하는게 아닌건가요? 저는 LOG_IN_ACTION 액션에 isLoggedIn 만 true/false 왔다갔다 하면 될거 라고 단순하게 생각하고 있었는데 왜 굳이 이렇게 나눠서 해야 되는지 와닿지가 않습니다. 뒤쪽의 서버 강의 까지 들으면 이해가 갈까요?

게시판 보면서 수정했는데 오류가 사라지지 않습니다.어떻게 수정하면 될까요?(LoginPage.js)(index.js)(App.js) (발생하는 오류)도와주시면 감사하겠습니다...ㅠㅠ

소스코드에 server와 client에도 Dockerfile이 있던데 이걸로 Dockerlize가 되나요?