210903 코드캠프 5일차
라우팅
- 라우팅 = 페이지 이동
router
= 페이지 이동하는 도구const router = useRouter() -> router.push("이동할 페이지") // [노션참고]
라우팅 종류 - 정적 / 동적 라우팅
📔 정적라우팅
- 하나하나 지정(하나하나 다 만들어야함)
ex)
http://localhost:3000/boards/1
http://localhost:3000/boards/2
http://localhost:3000/boards/3
📔 동적라우팅
- 변수 지정(하나만 만들어도 됨)
- 넘어갈 폴더이름을 [ ]로 감싸주어야 변수가 됨
ex)
[aaa]란 폴더를 만들었다 하면
http://localhost:3000/boards/aaa
주석
// 자바스크립트 주석입니다. # gql 주석입니다 {/* html 주석입니다 */}
게시물 등록 후 상세페이지로 넘어가기
📔 등록페이지
📔 상세페이지
💻 등록페이지 js / html - router
import { useRouter } from "next/router"; // useRouter 를 사용하기위한 import export default function BoardsNewPage() { const router = useRouter(); // router 선언 router.push(`/boards/detail/${result.data.createBoard._id}`); //router.push를 사용해서 이동할 페이지 쓰기 return( ) }
💻 상세페이지 js / html
import { useRouter } from "next/router"; import { useQuery, gql } from "@apollo/client"; const FETCH_BOARD = gql` query fetchBoard($boardId: ID!) { fetchBoard(boardId: $boardId) { writer title contents } } `; export default function Detail() { const router = useRouter(); const { data } = useQuery(FETCH_BOARD, { variables: { boardId: router.query.number, }, }); return ( <Name>{data && data.fetchBoard.writer}</Name> <Title>{data && data.fetchBoard.title}</Title> <Contents>{data && data.fetchBoard.contents}</Contents> );
💻 상세페이지 js / html 중요포인트
router
와graplql
을 쓰기위한import
import { useRouter } from "next/router"; import { useQuery, gql } from "@apollo/client";
query
const FETCH_BOARD = gql` query fetchBoard($boardId: ID!) { fetchBoard(boardId: $boardId) { writer title contents } } `;
useRouter()
를 쓰기위한router
선언const router = useRouter();
useQuery
const { data } = useQuery(FETCH_BOARD, { variables: { boardId: router.query.number, }, });
조건부렌더링
옵셔널체이닝
{data && data.fetchBoard.writer} // &&: 있으면 표시하고 없으면 표시하지말고 {data ? data.fetchBoard.writer: "loading..."} // 삼항연산자 있으면 표시하고 없으면 "loading..." 표시하기 // 조건부 렌더링 {data?.fetchBoard.writer} // 옵셔널 체이닝 // 실무에서 가장 많이 씀 ( 코드가 더 간결하고 편하기 때문에 )
textarea
내용을 입력하세요 텍스트창 가운데에 뜨는 이유 :textarea
로 줘야한다.
- 오타 오류
- router.push(
/boards/detail/${result.data.createBoard._id}}
) 에 _id 를 계속 넣어봐도 똑같은 id를 출력하고 있었음- 근데 playground 에서는 내가 쓴 글이 조회되었다.
- 최근방식이라고 하신 탬플릿 리터럴을 뺴고 옛날방식이라 한
router.push("/boards/detail/" + result.data.createBoard._id) 를 적용하니 되었다.- 탬플릿 리터럴이 안되었던 이유는 뭘까?
- 알고보니 중괄호( } ) 를 하나 더 써서 그랬다... 4시간 걸렸다..
app.js
오류작성중
Invariant Violation: Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance in via options.
라는 오류가 떴다.
-> 해결 : app.js 에서 난 오류였다 - 멘토님껄 복붙하니까 다시 됐다.
Author And Source
이 문제에 관하여(210903 코드캠프 5일차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@as5427072/210903-코드캠프-5일차저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)