5일차 / 라우팅

4일차 과제 코드리뷰

createBoard 부분을 한번 더 쓰는 이유?

export const CREATE_BOARD = gql`
  mutation createBoard($createBoardInput: CreateBoardInput!) {
    createBoard(createBoardInput: $createBoardInput) {
      _id
    }
  }
`;

mutation CreateBoard(이름 자유롭게 짓기)의 값을 createBoard, creatProduct 등 여러개를 선언할 때 한꺼번에 값을 적용할 수 있기 때문이다.

shortand property

객체를 정의할 때 객체의 key 값과 value값이 같으면 둘 중 하나만 써도 된다.
(최신 버전에서 가능)

주석처리

JAVASCRIPT ==> //
graphql ==> #
JSX ==> /* */

---

라우팅

정적라우팅(static routing)

정적라우팅: 일반적인 페이지 이동

export default function StaticRoutedPage() {
  const { data } = useQuery(FETCH_BOARD, { //요청이 날아감(비어있는 상태 undefined)
    variables: { number: 83011 },
  })

return(
    <div>
    <div>{data?.fetchBoard.number}번 게시글에 오신 것을 환영합니다</div>
    <div>작성자: {data?.fetchBoard.writer}</div>
    <div>제목: {data?.fetchBoard.title}</div>
    <div>내용: {data?.fetchBoard.contents}</div>
       {/* 데이터가 있으면 뒤에꺼(데이터) 보여줘 없으면 앞에꺼(작성자..) 보여줘 */}
      {/* //  data && data.fetchBoard.number = data?.fetchBoard.number
              Optional-Chaining이라고 한다. 최신버전에서만 가능 */}

동적라우팅

폴더 이름에 대괄호를 넣을 것
ex [aaa]
어떤 내용이든 다 입력 가능하다는 의미
대괄호를 입력하는 순간부터 변수를 의미
경로 => http://localhost:3000/boards/[변수명]
변수명으로 fetchBoard를 해주면 페이지 이름을 하나하나 바꿔주지 않아도 된다.

try~catch

성공에 대한 처리, 실패에 대한 처리를 나눈다.

try가 만족하면 catch는 실행되지 않는다. 반드시 실행되어야 하는 부분은 finally에 적는다.

템플릿 리터럴(Template Literal)

템플릿 리터럴이란 문자와 변수를 함께 쓸 수 있는 도구. ${변수명}으로 string과 변수를 연산자로 더해주지 않아도 가독성 좋게 코드를 작성할 수 있다.

      router.push(
        `/05-08-dynamic-routed-input/${result.data.createBoard.number}`
      );

Optional-Chaining

연산자 앞 객체의 참조가 undefined || null 이라면 undefined를 리턴한다.

위에 있는 삼항연산자, && 연산자와 똑같은 기능을 한다.

data && data.fetchBoard.number = data?.fetchBoard.number

페이지 경로생성 Tip

/boards/30 ->30번째 게시글 상세페이지
/boards -> 목록페이지
/boards/20/edit ->20번째 게시글 수정페이지