목차

1. 페이지 이동 >> Routing

2. 데이터 조회 >> Apollo-Client / Query

3. API 요청시 에러 >> try-catch

shorthand proterty

키와 밸류가 같으면 해당 밸류를 생략할 수 있는 장점

네트워크에서 payload 보낸 데이터 / response 받은 데이터를 확인 할 수 있다.

1. 페이지 이동

라우팅 ?
페이지를 어떻게 이동 시킬 것인가.
이동을 하기 위해서는 사용해야 하는 Hooks가 있다

const router = useRouter()
router.push("이동할 페이지 주소")   그 페이지로 이동하게 된다.

라우팅 실습
정적 라우팅
동적 라우팅

정적 라우팅

게시글에 상세페이지 이동하기

게시글 글 갖고 오기

FETCH_BOARd 
	quert{
    	fetchBoard(number: 6) {
        	writer
            title
            contents
        }
    }
const {data} = useQuery(FETCH_BOARD)
data.fetchBoard.write

useQuery는 페이지에 들어왔을 때 자동으로 실행된다.

조건부 렌더링을 해야한다

데이터가 있으면 해줘라고 조건을 줘야한다.

옵셔널 체이닝

(data && data.fe~~~ 와 같은 조건문)

만약 페이지가 100개가 있다면.

정적 라우팅이면 폴더가 100개 생성해야한다.

동적 라우팅 [내가원하는 폴더명 예를들면 aaaa] 대괄호로 묶어주면
폴더명이 아니라 변수명이 되는 거다.
/board/aaaa 이게 아니라 어떤 내용이든 다 입력이 가능하다는 뜻
내가 /board/777을 하면 [aaa]는 [777]이 된다.
페이지를 하나 만들고 그 하나의 페이지에서 내가 원하는 것을 그릴 수 있다.

const router = useRouter () 
router.query = {
	aaa: 83011
}

// aaa는 83011로 사용이 가능하다.

백틱을 사용한다(템플릿 리터럴)

try catch finally

try에서 실행을 했는데 백엔드에서 에러가 들어온다면 트라이로 다시 내려가지 않고 캐치로 바로 점프한다
catch에서는 에러를 처리한다
finally는 실패던 성공이던 무조건 실행시켜야 하는 것 // 당분간 적용하지 않을 것이다.

정리
2. 해당 페이지에 조회
패치보드를 사용. 중요했던 부분은? 원리! 왜 data.fetchBoard.~~에러가 났는지
=> 불러오기 전에 빈 것을 찍어서 . 조건부를 줘서 해결