1. 정적라우팅(static-routing)

기본적인 페이지 이동 방법

<link href="이동할주소"> 이동하기 </link>

1-2. 게시글 등록 후 등록된 게시글의 상세페이지로 이동하는 방법

const router = useRouter()
function 기능(){
	router.push("이동할 페이지")
}

return <button onClick={기능}>등록하기</button>

• useRouter()를 받아주는 변수를 만들어주면 import { useRouter } from "next/navigation"; 이 코드가 생성되고 무언갈 클릭하면 onclick함수로 만들어서 변수.push(이동할 페이지) 실행하면 된다.

1-3. 게시글의 상세페이지를 함께 보여주는 방법

import { gql, useQuery } from "@apollo/client";

const FETCH_BOARD = gql`
  query {
    fetchBoard(number: 1) {
      number
      writer
      title
      contents
    }
  }
`;

export default function StaticRoutingMovedPage() {
  const { data } = useQuery(FETCH_BOARD);

  console.log(data);
  return (
    <>
      <div>1번 게시글 상세페이지 이동이 완료되었습니다.</div>
      <div>작성자: {data && data.fetchBoard.writer} </div>
      <div>제목: {data?.fetchBoard.title} </div>
      <div>내용: {data ? data.fetchBoard.contents : ""} </div>
    </>
  );

• graphQL을 사용할때 등록하는것은 mutation이였고, 불러오는 것은 query였다.
• query를 세팅해줘서 버튼 클릭시에 보여주게 할 수있다.

1-4. 비동기 통신과 리렌더링

	  <div>작성자: {data.fetchBoard.writer} </div>
      <div>제목: {data.fetchBoard.title} </div>
      <div>내용: {data.fetchBoard.contents} </div>

      <div>작성자: {data && data.fetchBoard.writer} </div>
      <div>제목: {data?.fetchBoard.title} </div>
      <div>내용: {data ? data.fetchBoard.contents : ""} </div>

• 이 부분에서는 데이터를 받아와 화면에 그리게 된다. 하지만 데이터를 받아오기까지 undefined이므로 에러가 발생하게 된다.

• 이러한 부분을 실행하기 위해 조건부렌더링을 사용한다

조건부렌더링

1. && 연산자

data && data.fetchBoard.writer

data ?? data.fetchBoard

data || data.fetchBoard

• 데이터가 없을 경우 자동으로 undefined를 반환해준다.
• &&연산자는 앞의 값이 참일 경우에만 뒤의 값을 보여주었는데, 반대로 앞의 값이 거짓일때 뒤의 값을 보여주는 경우도 있다. 이를 Nullish coalescing 연산자라 한다.
• ??연산자는 앞의 값이 빈 값이면 뒤의 값을 보여주며 ||연산자는 앞의 값이 거짓(false)일 경우 뒤의 값을 보여준다.

2. 삼항 연산자

data ? data.fetchBoard : undefined

• data는 동기적으로 받아와야하는 데이터이지만 데이터가 오기 전에 이미 return 부분에서 rendering을 해주고 있기 때문에 삼항 연산자를 써서 데이터가 있을 때, 없을 때를 모두 적어줘야 했다.

3. 옵셔널체이닝

data?.fetchBoard

• optional-chaining이란 기존의 && 연산자를 쓰면서 길어졌던 코드를 더욱 간결하게 사용하는 연산자 입니다.
• 데이터를 화면에 렌더링 할 때 사용되며, 백엔드와 통신해서 받아오는 데이터들은 시간이 걸리기 때문에 옵셔널 체이닝을 사용해야 화면에 오류가 안나고 잘 렌더 된다.

2. 동적라우팅(dynamic-routing)

• 만약 화면상으로 보여줘야 하는 게시물이 100개라고 가정한다면? 정적라우팅으로는 100개의 폴더가 필요하다. 이런 문제점을 해결하기 위해서는 동적라우팅을 활용해야함.

2-1. 사용방법

"use client";

import { useRouter } from "next/navigation";

export default function StaticRoutingPage() {
  const router = useRouter();

  const onClickSubmit1 = () => {

    router.push("/section07/07-03-dynamic-routing-board-moved/1");
  };

  const onClickSubmit2 = () => {
    router.push("/section07/07-03-dynamic-routing-board-moved/2");
  };
  
  <button onClick={onClickSubmit1}>1번 게시글 등록하기</button>
  	<br />
  <button onClick={onClickSubmit2}>2번 게시글 등록하기</button>

import { gql, useQuery } from "@apollo/client";
import { useParams } from "next/navigation";

const FETCH_BOARD = gql`
  query fetchBoard($mynumber: Int) {
    fetchBoard(number: $mynumber) {
      number
      writer
      title
      contents
      like
      createdAt
    }
  }
`;

export default function StaticRoutingMovedPage() {
  // 구버전 방식
  // const router = useRouter()
  // router.push("")
  // router.query.qqq

  // 신버전 방식
  const params = useParams();

  const { data } = useQuery(FETCH_BOARD, {
    variables: {
      mynumber: Number(params.qqq),
    },
  });

  console.log(data);
  return (
    <>
      <div>{params.qqq}번 게시글 상세페이지 이동이 완료되었습니다.</div>
      <div>작성자: {data && data.fetchBoard.writer} </div>
      <div>제목: {data?.fetchBoard.title} </div>
      <div>내용: {data ? data.fetchBoard.contents : ""} </div>
    </>
  );
}

• 폴더를 [이름]으로 정한다. 이렇게 폴더를 만들면 폴더가 변수처럼 사용된다.

• moved/ 뒤에 1과 2가 있는데 버튼이 클릭되면 그 숫자가 []변수에 담겨 넘어간다.

• useParams()를 사용한 URL 파라미터 추출

• gql은 GraphQL 쿼리를 정의하기 위한 템플릿 리터럴 태그이다. 여기서는 fetchBoard라는 쿼리를 작성하고, mynumber라는 매개변수를 받습니다.

• 이 쿼리를 통해 특정 번호(mynumber)의 게시글을 서버에서 가져와 number, writer, title, contents, like, createdAt 등의 데이터를 불러온다.

• useQuery는 Apollo Client에서 제공하는 훅으로, GraphQL 쿼리를 실행하고 그 결과를 가져온다. 첫 번째 인자로 FETCH_BOARD 쿼리를 전달하고, 두 번째 인자로는 쿼리에 필요한 변수인 mynumber를 전달한다.

• mynumber는 URL에서 추출한 params.qqq 값(게시글 번호)을 숫자로 변환하여 전달한다. useQuery는 data, loading, error 등의 상태를 반환하며, 여기서는 data만 사용하여 데이터를 확인한다.

3. try & catch

try {
  // 에러가 발생할 수 있는 코드
} catch (error) {
  // 에러가 발생했을 때 실행되는 코드
} finally {
  

• try...catch 문은 JavaScript에서 에러가 발생할 수 있는 코드 블록을 실행하고, 에러가 발생했을 때 이를 처리하는 구조이다.

• 추가적으로 finally 블록을 사용할 수 있다, 에러 발생 여부와 상관없이 항상 실행된다.

주 사용처

• 에러 핸들링
• 디버깅
• 예외 처리