[TIL] 220708 코드캠프 5일차

포토폴리오 리뷰

console.log(result.data.createBoard._id) //id만 콘솔에 출력하고 싶을 때 

페이지 이동 (Routing)

Router

• 컴퓨터 네트워크 간에 데이터 패킷 전송하는 네트워크 장치 (네트워크 계층)
• Router 객체 : 페이지 이동과 관련된 기능을 가진 객체

Routing

• 어떤 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정

정적 라우팅

• Static Routing

import {useRouter} from 'next/router'

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

    const onClickMove = () => {
        router.push("/05-02-static-routed") 
      //http://localhost:3000 생략가능, 앞에 '/'는 남기기
    }

    return <button onClick={onClickMove}>페이지 이동하기</button>
			//return은 '한줄'만 있을 시 () 생략 가능 
}

• Static Routed

export default function StaticRoutedPage() {
    
    return  <div>페이지 이동이 완료되었습니다</div>
}

폴더 하나에 Static Routed 추가 -> index.js 만들기
페이지 100개일 시 폴더 100개를 만들어야 하는 경우 발생, 비효율적
-> 동적 라우팅 사용

동적 라우팅

• 폴더명에 대괄호 [ ]를 넣어주기
• http://localhost:3000/boards/asd
• router.query = { 보드아이디: 1 } 이런식으로 게시글 번호를 꺼내올 수 있음

import { useQuery, gql } from '@apollo/client'
import { useRouter } from 'next/router'

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

export default function StaticRoutedPage(){
    const router = useRouter() 
    const { data } = useQuery(FETCH_BOARD, { 
        variables: { number: Number(router.query.number) }  //문자열이기 때문에 숫자로 변환해줘야함 
    })

    console.log(data)

    return (
        <>
            <div>{router.query.number}번 게시글 이동이 완료되었습니다.</div>
        </>
    )
}

동적라우팅이라고 오류가 안나는 건 아님! mutation이라고 항상 성공하는건 아니다!
이걸 방지하기 위해 ⬇️ 사용

try / catch

• try 안의 내용이 실패하면 실행안한 것들이 남아있어도 바로 catch로 건너뜀

try {
		await createBoard({
				variables: {
						aaa: "훈이",
						bbb: "1234",
				}
		})

} catch(error) {
		alert(error.message)     // 경고창(실패했습니다.)  ==>  백엔드 개발자가 보내주는 실패 메시지
} finally {
	// 성공, 실패 여부와 상관없이 무조건 마지막에 실행되는 부분
	// 필요없다면 생략 가능
}

옵셔널 체이닝(Optional - Chaining)

• 기존에 && 연산자를 쓰면서 길어졌던 코드를 간결하게 사용하는 연산자

//삼항 연산자
<div>작성자: { data !== undefined ? data.fetchboard.writer : "얍"}</div> 
<div>작성자: { data ? data.fetchboard.writer : "얍"}</div>

// && 연산자
<div>작성자: { data && data.fetchboard.writer : "얍"}</div>

// ES2020 옵셔널체이닝
<div>작성자: { data ?.fetchboard.writer : "얍"}</div>

템플릿 리터럴(Template Literal)

• 문자와 변수를 함께 쓸 수 있는 도구

`${변수명}`

 //router.push("/05-08-dynamic-routed-board-query/" + result(data.createBoard.number)) //이렇게 안더해줘도 된다 
router.push(`/05-08-dynamic-routed-board-query/${result(data.createBoard.number)}` ) //템플릿 리터럴(Template Literal)