이전에는 잘 되었는데 faker로 더미데이터 사용 후에 다음과 같은 에러가 뜹니다!faker 버전 이슈를 보고 삭제 후 npm i -D faker@5 로 재설치했는데 오류가 해결되지 않았습니다ㅠ  console.log 찍어본 postData의 타입이랑 에러메시지 입니다!4. WrappedApp created new store with withRedux(NodeBird) { initialState: undefined, initialStateFromGSPorGSSR: undefined }type : stringtype : functionTypeError: postData.split is not a functionat PostCardContent (C:\Users\pc\react-nodebird\prepare\front\.next\server\pages\index.js:1131:13)at processChild (C:\Users\pc\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3043:14)at resolve (C:\Users\pc\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:2960:5)at ReactDOMServerRenderer.render (C:\Users\pc\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3435:22)at ReactDOMServerRenderer.read (C:\Users\pc\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29)at renderToString (C:\Users\pc\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27)at Object.renderPage (C:\Users\pc\react-nodebird\prepare\front\node_modules\next\dist\next-server\server\render.js:50:851)at Document.getInitialProps (C:\Users\pc\react-nodebird\prepare\front\.next\server\pages\_document.js:264:19)at loadGetInitialProps (C:\Users\pc\react-nodebird\prepare\front\node_modules\next\dist\next-server\lib\utils.js:5:101)at renderToHTML (C:\Users\pc\react-nodebird\prepare\front\node_modules\next\dist\next-server\server\render.js:50:1142)   PostCardContent.js 코드 중 의심스러운 부분입니다const PostCardContent = ({ postData }) => ( <div> {postData.split(/(#[^\s#]+)/g).map((v, i) => { if (v.match(/(#[^\s#]+)/)) { return <Link href={`/hashtag/${v.slice(1)}`} key={i}><a>{v}</a></Link>; } return v; })} </div> ); PostCardContent.propTypes = { postData: PropTypes.string.isRequired, };  

안녕하세요 조은님! 완강 후에 Data Fetching 관련해서 질문 드릴게 있어서 왔습니다.Q. Next 12에서는 정적인 페이지와 주기적으로 데이터 값이 바뀌어야 할 때 (SSG, SSR) 등 상황에 맞게 Data Fetching을 사용하고 있었는데 Next 13에서는 Server component 만으로 SSG와 SSR을 대체가 가능한걸까요? Q. 강의에서 데이터를 가져올 때 fetch를 사용하셨었는데 Server component에서는 fetch 말고 axios를 사용해도 상관없는지 궁금합니다.Q. 저는 아래와 같이 axios를 사용해서 Time 데이터를 가져왔는데 캐시 비우기 버튼을 누르지도 않았는데 새로고침 할 때 마다 초가 계속 바뀌더라구요(disabled cache 체크 안했습니다!) 그래서 fetch로 바꾸어서 해봤더니 강의에서 나온 것 처럼 잘 동작하고 있었습니다. 혹시 어떤 차이가 있는건지 궁금합니다.import customAxios from "./customAxios"; import { METHOD } from "@/type/common"; export const getTime = async (timeZone: string) => { const data = await customAxios( METHOD.GET, `https://timeapi.io/api/Time/current/zone?timeZone=${timeZone}`, { next: { tags: ["time"] } } ); return data; };

안녕하세요, indexOf 메소드를 사용하다가 -1 값이 변환되었습니다. 파이썬에서는 인덱스가 -1이라면 맨마지막에 있는 인덱스 순서를 의미하는데 자바스크립트는 의미가 다른가요?자바스크립트에서 가지는 '-1'의 의미가 궁금합니다. 코드를 보시면 제가 indexOf 메소드 값 안에 오타를 넣었습니다.오류가 날 줄 알았는데 오타의 인덱스 값이 -1이 반환되어서 -1 값이 나온 이유에 대해 설명 부탁드립니다. 감사합니다. 수업 잘 듣고 있습니다. :)

next 14 버전부터 next export 가 없어지고 next.config.js 파일에서 output: "export" 로 대체되었다는데 이대로 진행해도 문제 없을까요?

비밀번호와 비밀번호 확인이 서로 일치하는지 검증하는 코드를 어떻게 짜야할 지 모르겠어요.. 현재 코드로 하면 에러가 납니다..! 봐주시면 감사하겠습니다ㅠㅠ 해당코드 //문제부분!!!!!!!!!!!!!!!!!!!!********* 으로 해놓았습니다!! import { useState } from 'react'; export default function signUpPage() { //이메일, 비밀번호 담기 const [ email, setEmail ] = useState(""); const [ password, setPassWord ] = useState(""); const [ Repassword, setRePassWord ] = useState(""); //이메일 에러 const [ emailError, setEmailError ] = useState(""); //비밀번호 에러 const [ passWordError, setPassWordError ] = useState(""); //비밀번호확인 에러 const [ RepassWordError, setRePassWordError ] = useState(""); //이메일 const onChangeEmail = (event) =>{ //이벤트 핸들러 console.log(event); console.log(event.target); //작동된 태그 console.log(event.target.value); //작동된 태그에 입력된 값 //변경된 이메일 값을 넣음 setEmail(event.target.value); if(event.target.value !== ''){ //내용 입력시 에러 없애주는거 setEmailError(""); } } const onChangePassWord = (event) => { setPassWord(event.target.value); if(event.target.value !== ''){ setPassWordError(""); } } //문제부분!!!!!!!!!!!!!!!!!!!!********* const onChangeRePassWord = (event) => { // const currentPassWord = event.target.value; // setRePassWord(currentPassWord); // if(password === currentPassWord){ // setRePassWordError(""); // } setRePassWord(event.target.value); if((password === Repassword()) || (event.target.value !== '')){ setRePassWordError(""); } } //등록하기 버튼 에러검증 const onClickSign = () => { //이메일 @ 검증 //includes("") 해당 문자가 있냐 없냐 if(email.includes("@") === false) { setEmailError("이메일이 올바르지 않습니다. @ 형태로 입력해주세요!") } if(!password){ setPassWordError("비밀번호를 입력해주세요") } //문제부분!!!!!!!!!!!!!!!!!!!!********* if((password !== Repassword) || (!Repassword)){ setRePassWordError("비밀번호를 확인해주세요") } //회원가입 완료 if(email && password === Repassword) { alert("회원가입이 완료되었습니다") } } return( <> 이메일: <input type="text" onChange={onChangeEmail} /> <div>{emailError}</div> 비밀번호 :<input type="text" onChange={onChangePassWord} /> <div>{passWordError}</div> 비밀번호확인 :<input type="text" onChange={onChangeRePassWord} /> <div>{RepassWordError}</div> <button id="submit" onClick={onClickSign}>회원가입</button> </> ) }  

'Assertion' 형식에 'toBe' 속성이 없습니다. 이 오류가 jest관련 toBe, toEqual, toBeInTheDocument등에 다 뜹니다

상세이미지에서 전체화면까지는 되었는데, 이미지가 안 떠서 질문드립니다 밑에 이미지 Indicator를 보면 스크롤하면 다음으로 넘어가는 기능은 잘 작동하는 것 같은데이미지 불러오기가 안 되는 것 같습니다만 이유를 모르겠습니다.. 컴파일도 잘 되었구요ㅠ  ImagesZoom/index.js 코드 첨부합니다const ImagesZoom = ({ images, onClose }) => { const [currentSlide, setCurrentSlide] = useState(0); return ( <Overlay> <Global /> <Header> <h1>상세 이미지</h1> <CloseBtn onClick={onClose}>X</CloseBtn> </Header> <SlickWrapper> <div> <Slick initialSlide={0} beforeChange={(slide) => setCurrentSlide(slide)} infinite arrows={false} slidesToShow={1} slidesToScroll={1} > {images.map((v) => ( <ImgWrapper key={v.src}> <img src={v.src} alt={v.src} /> </ImgWrapper> ))} </Slick> <Indicator> <div> {currentSlide + 1} {' '} / {images.length} </div> </Indicator> </div> </SlickWrapper> </Overlay> ); };  PostImages.js 코드입니다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 style={{ width: "50%", display: 'inline-block' }} role="presentation" src={images[0].src} alt={images[0].src} onClick={onZoom} /> <img style={{ width: "50%", display: 'inline-block' }} role="presentation" src={images[1].src} alt={images[1].src} onClick={onZoom} /> </div> {showImagesZoom && <ImagesZoom images={images} onClose={onClose} />} </> ); } return ( <> <div> <img style={{ width: "50%" }} role="presentation" src={images[0].src} alt={images[0].src} 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} />} </> ); }; 

이미지 업로드를 위한 multer 강의까지 수강을 하였습니다.이미지 업로드를 할때 uploads 폴더에도 이미지가 잘 들어가고UPLOAD_IMAGES_SUCCESS도 잘 나오는 상황입니다.하지만 제로초님의 화면은 제거 버튼과 비록 깨지지만 이미지가 올라간 화면이 보이는데 저는 그 부분이 나오지 않아서 이 점이 궁금하여 질문 드립니다.import React, { useState } from "react"; import { Button, Card, Popover, Avatar, Image, List, Comment } from "antd"; import { RetweetOutlined, HeartOutlined, MessageOutlined, EllipsisOutlined, HeartTwoTone, } from "@ant-design/icons"; import { useCallback } from "react"; import { useSelector, useDispatch } from "react-redux"; import PropTypes from "prop-types"; import PostImages from "./PostImages"; import CommentForm from "./CommentForm"; import PostCardContent from "./PostCardContent"; import { REMOVE_POST_REQUEST, LIKE_POST_REQUEST, UNLIKE_POST_REQUEST, } from "../reducers/post"; import FollowButton from "./FollowButton"; const PostCard = ({ post }) => { //pages/index.js에서 mainPosts에서 하나씩 뜯어서 보내줌 const dispatch = useDispatch(); const [commentFormOpened, setCommentFormOpened] = useState(false); //댓글창 열지 말지 const onLike = useCallback(() => { dispatch({ type: LIKE_POST_REQUEST, data: post.id, }); }, []); //좋아요 const onUnlike = useCallback(() => { dispatch({ type: UNLIKE_POST_REQUEST, data: post.id, }); }, []); //좋아요 취소 const onToggleComment = useCallback(() => { setCommentFormOpened((prev) => !prev); }, []); //폼 버튼 한번 더 누르면 폼 닫기 const onRemovePost = useCallback(() => { return dispatch({ type: REMOVE_POST_REQUEST, data: post.id, }); }, [id]); const id = useSelector((state) => state.user.me?.id); const { removePostloading } = useSelector((state) => state.post); const liked = post.Likers.find((v) => v.id === id); //게시글 좋아요 누른 사람 중에 내가 있는지. return ( <div style={{ marginBottom: 20 }}> <Card cover={post.Images?.[0] && <PostImages images={post.Images} />} //이미지가 존재한다면 PostImages를 출력 actions={[ //카드 아래에 존재하는 것들 <RetweetOutlined key="retweet" />, liked ? ( <HeartTwoTone twoToneColor="red" onClick={onUnlike} /> ) : ( <HeartOutlined key="heart" onClick={onLike} /> ), <MessageOutlined onClick={onToggleComment} key="comment" />, <Popover //더보기 같은 역할 key="more" content={ <Button.Group> {id && post.User.id === id ? ( <> {/* 내가 쓴 글이면 수정, 삭제 */} <Button>수정</Button> <Button type="danger" onClick={onRemovePost} loading={removePostloading} > 삭제 </Button> </> ) : ( // 내가 쓴 글이 아니라면 <Button>신고</Button> )} </Button.Group> } > <EllipsisOutlined /> </Popover>, ]} extra={id && <FollowButton post={post} />} > <Card.Meta //프로필과 내용 등 avatar={<Avatar>{post.User.nickname[0]}</Avatar>} title={post.User.nickname} description={<PostCardContent postData={post.content} />} /> </Card> {commentFormOpened && ( //commentFormOpened가 true이면 열어라 <div> {/* 어떤 게시글에 댓글을 남기는지.. */} <CommentForm post={post} /> <List header={`${post.Comments.length}개의 댓글`} itemLayout="horizontal" dataSource={post.Comments} //데이터는 여기서 가져와서 renderItem={( item //이런식으로 출력한다 ) => ( <li> <Comment author={item.User.nickname} //댓글쓴사람 avatar={ <Avatar>{item.User.nickname[0]}</Avatar> //아바타 } content={item.content} /> </li> )} /> </div> )} </div> ); }; PostCard.PropTypes = { post: PropTypes.shape({ id: PropTypes.number, User: PropTypes.object, content: PropTypes.string, createdAt: PropTypes.string, Comment: PropTypes.arrayOf(PropTypes.object), Images: PropTypes.arrayOf(PropTypes.object), Likers: PropTypes.arrayOf(PropTypes.object), }).isRequired, }; export default PostCard;저의 PostCard 코드입니다 이 코드에서 cover={post.Images?.[0] && <PostImages images={post.Images} />}이 부분이 이미지들을 출력해주는 부분이 아닌가요?? 저의 화면에는 아래처럼 나오지 않습니다.  

안녕하세요!섹션2 수업내용까지 마치고 npm run dev를 하였는데 오류가 나타납니다 ;-; 커뮤니티에서 -61 에러 관련글을 찾아보니, 데이터베이스 연결 문제를 확인해보라고 하셨는데..;-; 연결 방법을 모르겠습니다..package.json "main"이 index.ts로 되어있어서server.ts로 바꾸었습니다.그랬더니 ;-; 4000번이 열리긴 합니다.그런데 터미널에는 여전히 오류가 함께 나타납니다!!;; 무엇을 확인해보면 될까요 ;-;..?

33-05 강의에서 test에서 자꾸 이 오류가 뜹니다apis.jsimport { graphql } from "msw"; const gql = graphql.link("http://mock.com/graphql") export const apis = [ gql.mutation("createBoard", (req, res, ctx) => { const { writer, title, contents } = req.variables.createBoardInput return res( ctx.data({ createBoard: { _id: "qqq", writer, title, contents, __typepname: "Board", }, }) ); }), // gql.query("fetchBoards", () => {}) ]; jest.setup.jsimport { server } from "./src/commons/mocks/index" beforeAll(() => server.listen()); afterAll(() => server.close()); index.test.tsx import { fireEvent, render, screen, waitFor } from "@testing-library/react"; import StaticRoutingMovedPage from "../../pages/section33/33-05-jest-unit-test-mocking"; import { ApolloClient, ApolloProvider, HttpLink, InMemoryCache, } from "@apollo/client"; import fetch from "cross-fetch"; import mockRouter from "next-router-mock"; jest.mock("next/router", () => require("next-router-mock")); it("게시글이 잘 등록되는지 테스트 하자!", async () => { const client = new ApolloClient({ link: new HttpLink({ uri: "http://mock.com/graphql", fetch, }), cache: new InMemoryCache(), }); render( <ApolloProvider client={client}> <StaticRoutingMovedPage /> </ApolloProvider> ); fireEvent.change(screen.getByRole("input-writer"), { target: { value: "맹구" }, }); fireEvent.change(screen.getByRole("input-title"), { target: { value: "안녕하세요" }, }); fireEvent.change(screen.getByRole("input-contents"), { target: { value: "방가방가" }, }); fireEvent.click(screen.getByRole("submit-button")); await waitFor(() => { expect(mockRouter.asPath).toEqual("/boards/qqq"); }); }); 도와주십쇼 ㅠㅠ

안녕하세요 제로초님!게시글을 작성하게되면 아래와 같이 성공했다고 응답도 잘 도착하지만 id가 undefined이라고 오류가 납니다.제가 어느 부분을 놓치고 있는건가요??

안녕하세요 제로초님 middleware.js를 사용하여로그인했을때와 하지않았을 때의 경우를 나눠놓으셨자나요!그 강좌를 듣고 코드를 그대로 작성하고 로그인을 진행해보는데올바른 이메일과 비밀번호를 입력해도 이 알림이 뜹니다.. 로그인도 실패로 응답하구요.. 어떤 부분이 문제일 가능성이 높을까요??

강의를 잘 따라가면서 작성하고 있었는데 화면을 최종적으로 확인할 때 이런 에러가 뜹니다. 코드를 두번확인했는데 틀린 부분이 보이지않습니다 ..! index.js 코드 입니다import BoardWrite from '../../../src/components/units/board/write/BoardWrite.container' export default function GraphqlMutationPage(){ return ( <> <div>###### 여기는 페이지 입니다 ######</div> {/* //로직을 가져옴 */} <BoardWrite /> <div>###### 여기는 페이지 입니다 ######</div> </> ) }BoardWrite.container.js 코드 입니다import { useMutation } from '@apollo/client' import {useState} from 'react' //UI를 가져옴(파일을 합침) import BoardWriterUI from './BoardWrite.presenter' //gql 가져옴(파일을 합침) import {나의그래프큐엘셋팅} from './BoardWrite.queries' //로직만 사용 export default function BoardWrite() { const [writer, setWriter] = useState() const [title, setTitle] = useState() const [contents, setContents] = useState() const [나의함수] = useMutation(나의그래프큐엘셋팅); const onClickSubmit = async () => { const result = await 나의함수({ variables: { writer: writer, title: title, contents: contents } }) console.log(result) }; const onChangeWriter = (event) => { setWriter(event.target.value) // => state에 저장 } const onChangeTitle = (event) => { setTitle(event.target.value) } const onChangeContents = (event) => { setContents(event.target.value) } return( <> <div>$$$$$$$ 여기는 컨테이너 입니다 $$$$$$</div> {/* UI를 가져옴(파일을 합침) */} <BoardWriterUI aaa={onClickSubmit} bbb={onChangeWriter} ccc={onChangeTitle} ddd={onChangeContents} /> <div>$$$$$$$ 여기는 컨테이너 입니다 $$$$$$</div> </> ) } BoardWrite.presenter.js 코드 입니다import {BlueButton, RedInput } from './BoardWrite.style' //UI만 사용 export default function BoardWriterUI(props){ return( <> <div>@@@@@@@@ 여기는 프리젠터 입니다 @@@@@@@</div> <div> 작성자: <RedInput type="text" onChange={props.bbb} /> 제목: <input type="text" onChange={props.ccc} /> 내용: <input type="text" onChange={props.ddd} /> <BlueButton onClick={props.aaa}>GRAPHQL-API 요청하기</BlueButton> </div> <div>@@@@@@@@ 여기는 프리젠터 입니다 @@@@@@@</div> </> ) }BoardWrite.queries.js 코드 입니다import { gql } from '@apollo/client' export const 나의그래프큐엘셋팅 = gql` mutation createBoard($writer: String, $title: String, $contents: String){ createBoard(writer : $writer , title: $title , contents: $contents) { _id number message } } BoardWrite.style.js 코드 입니다import styled from '@emotion/styled' export const RedInput = styled.input` border-color: red; ` export const BlueButton = styled.button` background-color: blue; ` app.js 코드 입니다// 모든 페이지의 공통설정들 여기서 진행 import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client' export default function App({ Component, pageProps }) { const client = new ApolloClient({ uri:"http://backend-example.codebootcamp.co.kr/graphql", cache: new InMemoryCache() //컴퓨터의 메모리에다가 백엔드에서 받아온 데이터 임시로 저장해 놓기 => 나중에 더 자세히 알아보기 }) return ( <div> <div> ========== 여기는 _app.js 컴포넌트 시작부분 입니다. ==========</div> {/* //그래프큐엘 셋팅 => 앞으로 아래 컴포넌트에서 client를 쓸 수 있다는 의미 */} <ApolloProvider client={client}> <Component /> {/* 내가 들어간 페이지들의 html이 여기로 다 들어오게 됨 */} </ApolloProvider> <div> ========== 여기는 _app.js 컴포넌트 마지막부분 입니다. ==========</div> </div> ) } 마지막으로 폴더 구조입니다  

boards/new/index.js 에서 항목 기입 후 등록하기 버튼을 누를 시 등록된 상세페이지로 넘어가지 않고 alert 알림창으로 "Response not successful: Received status code 400" 이렇게 뜹니다.오타는 혹시 있나 해서 올려주신 깃허브랑 하나하나 꼼꼼히 비교 했는데 없었어요..오류코드를 개발자도구로 뜯어보니 그래서 해당 부분 확인해봐도 모두 강사님과 동일하게 작성되있는데 뭐가 문제일까요

강좌에서처럼 me(내 정보 불러오는 상태변수) 변수를 통해 로그인 유지를 하고특정 페이지에서 비로그인 사용자를 차단할경우useEffect(() => { if(!me){ redirects(); } },[])이런식으로 로직을 짤수가 있는데문제가 브라우저 url로 접속할 경우 초기 me 의 상태가 null 이기 때문에 로그인을 한 상태더라도리다이렉트가 되는 문제가 있었습니다. 물론 ssr을 이용하면 이 문제가 해결은 되지만csr만 이용하는 선에서 리다이렉트가 정상적으로 작동하도록 하고 싶은데 어떻게 하면 좋을까요?

안녕하세요 저작권 관련 질문드립니다! 본 학습 자료의 저작권은 코드캠프에 있어 무단 도용, 배포, 복제를 금지한다고 적혀있는데 그럼 혹시 개인 블로그에 내용을 공부한 내용을 정리한 것을 공개 처리해두어도 문제가 되지 않을지 문의드립니다.

포트폴리오를 깃허브에 올리려고 하는데 git허브강좌 보면서 따라하고 있었는데 git add . 후 git status 하면은 해당 오류가 떠요 .. admin@DESKTOP-8KF9PK5 MINGW64 ~/Desktop/portfolio (master)$ git add .admin@DESKTOP-8KF9PK5 MINGW64 ~/Desktop/portfolio (master)$ git statusOn branch masterNo commits yetChanges to be committed:(use "git rm --cached <file>..." to unstage)new file: freeboard_frontendChanges not staged for commit:(use "git add <file>..." to update what will be committed)(use "git restore <file>..." to discard changes in working directory)(commit or discard the untracked or modified content in submodules)modified: freeboard_frontend (modified content, untracked content) 해당 폴더 구조는 이렇습니다 보니까 .git이 이중으로 설치되어 있는데 어디 부분을 어떤 명령어로 삭제해야하는지 알려주시면 감사하겠습니다..!

05-05-dynamic-routing-board-mutation강의에 있는 내용을 구현했습니다이상은 없게 정상 작동하는데콘솔로그가 2번 찍히는데 이해가 가지 않습니다===========================================폴더구조================================================05-05-dynamic-routing-board-mutation/index.jsimport {gql, useMutation} from "@apollo/client"; import {useRouter} from "next/router"; const 나의그래프큐엘세팅 = gql` mutation createBoard($writer: String, $title: String, $contents: String){ createBoard(writer: $writer, title: $title, contents: $contents){ _id number message } } ` export default function GraphqlMutationPage() { const router = useRouter() const [나의함수] = useMutation(나의그래프큐엘세팅) const onClickSubmit = async () => { try{ // try에 있는 내용을 시도하다가 실패하면, 다음에 있는 모든 줄들을 모두 무시하고, catch에 있는 내용이 실행됨. const result = await 나의함수({ variables: { writer: "호날두", title: "모두다 외쳐", contents: "Siuuuu~~~~~~" } }) //console.log("result 값은 다음과 같습니다", result) //console.log("동적라우팅 주소는 number라고 지칭했고 다음과 같아요", result.data.createBoard.number) // router.push('/section05/05-05-dynamic-routing-board-mutation-moved' + result.data.createBoard.number) router.push(`/section05/05-05-dynamic-routing-board-mutation-moved/${result.data.createBoard.number}`) }catch (error){ alert(error.message) } } return <button onClick={onClickSubmit}>GRAPHQL-API 요청하기</button> // 한줄일 때는 괄호 ( ) 가 필요없다. }===========================================================05-05-dynamic-routing-board-mutation-moved/[number]/index.jsimport {gql, useQuery} from "@apollo/client"; import {useRouter} from 'next/router' const FETCH_BOARD = gql` query fetchBoard($number: Int){ fetchBoard(number:$number){ # 1번 게시글 내용에 생략된 내용이 많아서 19047을 1번 게시글로 가정 number writer title contents } } ` export default function StaticRoutingMovedPage(){ const router = useRouter() console.log("라우터에 뭐가 들어있는지 알아보기",router) const { data } = useQuery(FETCH_BOARD, { variables: { number: Number(router.query.number) } }) console.log("데이터에 뭐가 들어있는지 알아보기",data) return( <> <div>{router.query.number}번 게시글 이동이 완료됐어요!!😀😀</div> <div>작성자: {data && data.fetchBoard?.writer}</div> <div>제목: {data?.fetchBoard?.title}</div> <div>내용: {data? data.fetchBoard?.contents : "로딩중입니다."}</div> </> ) }==================================================================브라우저 콘솔창-> 여기서 GraphQL요청 후 콘솔 찍어놓은게 2번 반복됩니다.위의 내용 확대 ==================================================================네트워크 탭여기에 GraphQl 요청이 두번 나간 것 같은데 그것 때문에 그런 건가요?아니면 data 내용을 콘솔 찍었을때 한번 undefined 처리가 되어서 데이터를 받아오는 과정에서 한번 더콘솔이 찍힌건가요? 

챕터3-2 useRouter 를 import하는데navigation router 는 import 가 되지 않네요..혹시 따로 설치를 해야하는 부분인가요?

다름이 아니라 제로초님의 로그인 문제 해결하기 챕터를 보다가Posts.length관련 오류 해결하는 강의를 보는데제로초님의 redux화면이랑 저의 화면이랑 구성이 좀 다른 것 같아서 문의드립니다.제로초님의 화면은 위 사진처럼 me라는 객체로 나와서 확인하기 쉬운데제 화면은 아래처럼 그냥 데이터 라고 나오고 있습니다..어느 부분을 수정해야하는지 잘 모르겠어서 질문드립니다.