라우팅

• 라우팅 = 페이지 이동
• 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로 줘야한다.

• 오타 오류

1. router.push(/boards/detail/${result.data.createBoard._id}}) 에 _id 를 계속 넣어봐도 똑같은 id를 출력하고 있었음
2. 근데 playground 에서는 내가 쓴 글이 조회되었다.
3. 최근방식이라고 하신 탬플릿 리터럴을 뺴고 옛날방식이라 한
   router.push("/boards/detail/" + result.data.createBoard._id) 를 적용하니 되었다.
4. 탬플릿 리터럴이 안되었던 이유는 뭘까?
5. 알고보니 중괄호( } ) 를 하나 더 써서 그랬다... 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 에서 난 오류였다 - 멘토님껄 복붙하니까 다시 됐다.