요약

점점 제목이 짧아지는 것은 기분탓일뿐.

1. 페이지를 이동하자 → Routing
2. 게시물을 가져오자 → Apollo-Cluent / Query
3. API 요청시 에러가 났어요 → try - catch

---

Router / Routing

Router 객체란 페이지 이동과 관련된 기능을 가지고 있는 객체임

이 객체를 사용해서 페이지로 이동할때 페이지 이동을 라우팅한다 라고 말하는 것

import { useRouter } from 'next/router'
export default function StaticRoutingPage(){
// 호이스팅에서 선언식보다 표현식이 안전성이 있다. 화살표함수가 더 간단해서 쓴다.
    const onClickMove = () =>{
        router.push('/05-02-static-routed')
    }
    const router = useRouter()
    return (
        <>
            <button onClick={onClickMove}> 페이지를 이동합니다.</button>
        </>
    )
}

useRouter() 을통해 페이지를 이동시키는 것

• useRouter import
• 버튼 클릭시 router.push를 이용해 페이지를 넘기는 방식
  ++쓸모없는 div 묶어주는거 : Fragment <> </>

---

정적라우팅과 동적라우팅

정적라우팅

: 누가 언제 접속해도 항상 같은 페이지가 나온다.

동적라우팅

페이지는 하나만 만들고 (지금까진 하드코딩)

그 하나에서 페이지를 이동하게 되는 주소를 변수형태로 저장해서 불러온다.

/board/1 ⇒ 1번 게시글 상세보기 페이지
/board/2 ⇒ 2번 게시글 상세보기 페이지
/board/3 ⇒ 3번 게시글 상세보기 페이지
/board/4 ⇒ 4번 게시글 상세보기 페이지

---

useQuery()

useState data 를 감싸는 괄호가 다르다 → *구조분해할당(=비구조화할당) 나중에 알아보자.

, 이부분은 mutation 처럼 변경하는 것이 아닌 data로 반드시 작성해야한다.

---

폴더명에 [] 씌어주면 폴더이름이 변수명이 된다. (폴더로 보지않고 변수로 본다)

---

게시판 적용해보기

게시글 등록(createBoard)에서 back에 요청 back이 DB에 저장하고 200완료 메세지 받음

플레이 그라운드는 데이터 조회 (fetchBoard) , 둘다 같은 백엔드 컴퓨터와 DB를 이용하고 있음

node.js 와 React 라우터의 차이 : 라우터 이동방식이 다르다

---

2022-05-14(15)

금요일이다보니까 집에가서 공부도 안할게 뻔히 보인다.
오늘은 24시간 여기에 있어보자는 마음으로 모자랑 겉옷까지 챙겨왔다.
근데 어처피 오늘배운 router를 이용해 페이지를 동적으로 이동시키고 그걸 또 graphql에서 값을 받아와 그 값들을 게시글 상세페이지에 띄우는 과제 떄문에 막차시간 애매하게 끝낼거 같았다.😭
그래서 그냥 저녁먹고 천천히 다른 코캠러분들 가는 걸 구경하면서 떠들며 쉬엄쉬엄 하다보니까 자리가 듬성듬성; 머리머리빔 맞아버렸다.
잘하시는 분들도 떠나가셔서 정신차리고 div작업하고 emotion 적용시키고 라우터까지 연결하고 나니까 12시..
결국 남아있으신분들하고 이야기 좀 하다가 보니 4시(새벽) 첫차를 기다리며 작성하는 14,15일 TIL