ReferenceError: boardId is not defined
안녕하세요 선생님! 전에 Bad request 400 문제로 글 올렸던 사람입니다
답변 주신 부분은 잘 확인 했습니다.
그런데 variables는 잘 작성했구 연결도 했습니다.
그런데 useEffect로 boardId가 유효하면 실행, 아니면 loading이라는 문구를 내보내게 작성한 후 확인을 해보니 아래와 같은 문제가 있었습니다
console.log(router.query.boardId);에서 undefined가 떳길래
useRouter가 작성됐는지 import했는지랑 확인했고, 문제 없었습니다.
또, ReferenceError: boardId is not defined 메시지가 떳습니다 . . ]
그래서 다른 방법으로 해결을 해보고자
console.log(router.query.boardId);가 담긴 index에서 import를 선언하는 부분 최상위에 "use client"를 작성하고, import { useRouter } from 'next/router' 를 'next/navigation'으로 바꿨더니
아래와 같이 오류가 확인 됐습니다.. .
아래는 문제가 있는 컴포넌트입니다(useEffect 지움, next/router로 바꿈)
"use client"
import { useRouter } from "next/router";
import { gql, useQuery } from "@apollo/client";
import {
Avatar, AvatarWrapper, Body, BottomWrapper, Button, CardWrapper, Contents, CreatedAt, Header, Info, Title, Wrapper, Writer
} from "../../../styles/boardnewpage";
export const FETCH_BOARD = gql`
query fetchBoard($boardId: ID!) {
fetchBoard(boardId: $boardId) {
_id
writer
title
contents
createdAt
}
}
`;
export default function BoardDetailPage() {
const router = useRouter();
console.log(router.query.boardId);
const { data } = useQuery(FETCH_BOARD, {
variables: {
boardId: router.query.boardId
},
});
if (!data) {
// boardId가 없는 경우에 대한 처리 (예: 로딩 스피너 표시 등)
return <div>Loading...</div>;
}
return (
<Wrapper>
<CardWrapper>
<Header>
<AvatarWrapper>
<Avatar src="/images/ic_profile.png" />
<Info>
<Writer>{data?.fetchBoard?.writer}</Writer>
<CreatedAt>
{data?.fetchBoard?.createdAt}
</CreatedAt>
</Info>
</AvatarWrapper>
</Header>
<Body>
<Title>{data?.fetchBoard?.title}</Title>
<Contents>{data?.fetchBoard?.contents}</Contents>
</Body>
</CardWrapper>
<BottomWrapper>
<Button>목록으로</Button>
<Button>수정하기</Button>
<Button>삭제하기</Button>
</BottomWrapper>
</Wrapper>
);
}
아래는 위 컴포넌트를 실행하고 나서 뜨는 화면 입니다
if문을 지우고 나면 저번에 올렸던 질문 글 처럼 화면은 넘어가는데 varibales 데이터들만 안뜹니다...!
+ 로딩 뜬 화면의 개발자도구 화면 입니다!!
확인해주시고 답변 주시면 감사하겠습니다.!!!😂🥹
답변 1
1
안녕하세요! nyang님!
먼저, 올려주신 질문의 "use client" 부분과 next/navigation 모듈은 react 18버전에서 사용하는 부분이에요!
react 18버전에서는 서버컴포넌트가 등장하여 이러한 기능을 구분하여 사용하게 되었습니다!
따라서, 현재 우리 수업 과정에서는 use client와 next/navigation은 사용하지 않습니다!
올려주신 에러와 소스코드를 자세히 보니, 아무래도 오타가 있는 것 같아요!
다이나믹 라우팅을 위한 폴더 이름에는 [boardid] 라고 되어있지만,
소스코드에는 router.query.boardId 라고 되어있네요!(i의 대소문자가 다른 것 같아요!)
해당 이슈를 수정하여 다시 한 번 진행해 보세요!^^
fetchBoardsOfMine, fetchBoardsCountOfMine 에러 문의드립니다
0
36
1
댓글 기능 구현 중 질문드립니다.
0
66
1
쿠폰코드 발급
0
132
2
example 서버 플레이그라운드, API 접속 모두 안됩니다.
0
86
2
문의드립니다!! ㅠㅠ
0
101
2
graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.
0
76
2
_app.js 작성 이후로 에러가 발생하네요
0
93
2
학습자료
0
70
2
학습자료가 안열립니다.
0
49
2
플레이 그라운드 퀴즈 문제 질문이 있습니다.
0
59
0
기존강의 구매자, 업데이트 끝인가요?
0
109
3
업데이트 버전 수강
0
88
2
완벽한 프론트엔드
0
136
2
나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.
0
82
1
graphql 접속이 안됩니다.
0
100
2
const, let 사용 질문 드립니다.
0
70
2
싸이월드 만들기 1탄 피드백 부탁드립니다.
0
122
2
회원가입 과제 피드백 부탁드립니다.
0
80
2
styled.span / styled.input "CSS 자동완성"
0
47
1
쿠폰 발급 관련
0
166
2
서버 502 error
0
247
2
쿠폰 다시 부탁드려도 될가여?
0
140
2
a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요
0
184
2
2분 44초 질문
0
131
3