🧋TIL 0114

[Routing]

: Moving from one page to the other by using router

Code:

const router = useRouter()
router.push("web page address")

--> Then the user can go in to the web page address.

Types of router:

router.reload() ex) this command can refresh the page
router.replace()
router.pathname()
etc.

• Router is a type of object: If the user types < router. > (period after router), then vs code shows other functions that is related after router. .

---

[Static Routing / Dynamic Routing]

⬇️ Static Routing

import {useRouter} from 'next/router'

export default function StaticRoutingPage(){
    const router = useRouter()
    
    const onClickMove1= (event)=> {
        router.push("/05-04-static-routed-board/1")
    }
    
    const onClickMove2= (event)=> {
        router.push("/05-04-static-routed-board/2")
    }

    const onClickMove3= (event)=> {
        router.push("/05-04-static-routed-board/3")
    }

    return (
        <div>
            <button onClick={onClickMove1}>1번 게시글로 이동하기</button>
            <button onClick={onClickMove2}>2번 게시글로 이동하기</button>
            <button onClick={onClickMove3}>3번 게시글로 이동하기</button>
        </div>
        )
}

⬇️ Static Routed

export default function StaticRoutedPage(){

    return(
        <div>1번 게시글 페이지 이동완료</div>
    )
}
-----------------------------------------------
export default function StaticRoutedPage(){

    return(
        <div>2번 게시글 페이지 이동완료</div>
    )
}
-----------------------------------------------
export default function StaticRoutedPage(){

    return(
        <div>3번 게시글 페이지 이동완료</div>
    )
}

• Static Routing needs import: import {useRouter] from 'next/router'
• Static Routing needs exact amount of static routed pages to execute. If the user wants to make 3 buttons and wants to enable all 3 of them to be able to move to the other page, the user needs to make a separate 1,2,3 folders and files.

---

⬇️ Dynamic Routing

import {useRouter} from 'next/router'

export default function DynamicRoutingPage(){
    const router = useRouter()
    
    const onClickMove1= (event)=> {
        router.push("/05-06-dynamic-routed-board/1")
    }
    
    const onClickMove2= (event)=> {
        router.push("/05-06-dynamic-routed-board/2")
    }

    const onClickMove3= (event)=> {
        router.push("/05-06-dynamic-routed-board/3")
    }

    const onClickMove4= (event)=> {
        router.push("/05-06-dynamic-routed-board/4")
    }

    const onClickMove100= (event)=> {
        router.push("/05-06-dynamic-routed-board/100")
    }

    return (
        <div>
            <button onClick={onClickMove1}>1번 게시글로 이동하기</button>
            <button onClick={onClickMove2}>2번 게시글로 이동하기</button>
            <button onClick={onClickMove3}>3번 게시글로 이동하기</button>
            <button onClick={onClickMove4}>4번 게시글로 이동하기</button>
            <button onClick={onClickMove100}>100번 게시글로 이동하기</button>

        </div>
        )
}

⬇️ Dynamic Routed

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

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

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

    const {data} = useQuery(FETCH_BOARD, {
        variables: {number: Number(router.query.qqq)}
    })

    console.log(data)

    return (
        <div>
            <div>{router.query.qqq}번 게시글 페이지 이동 완료</div>
            <div>작성자:{data?.fetchBoard?.writer}</div>
            <div>제목: {data?.fetchBoard?.title}</div>
            <div>내용: {data?.fetchBoard?.contents}</div>
        </div>
    )
}

• For mutation, it needed [any names of variables] that the user wanted to execute. However, for query, it is limited to {data}. It cannot be changed into any other names.
• Alike mutation, query also needs variable within the bracket after the comma. (-- useQuery(FETCH_BOARD, {variables: {---}}))
• To check whther the data is well-operating, the user must check with < console.log(data) >.
• Dynamic routing only requires one folder [aaa](can be in any kind of name) and it's more efficient than static routing.

Difference:

• Static routing is activated when user types ~~boards/100. Specific page number is required.
• Dynamic routing is activated just by [aaa].
  --> Can just enter in related index, which automatically saves into [aaa].
  --> It pulls out the specific variable data and let users see it.
• [aaa]: variable name(Could be anything, like "myname")
  --> It is no more page, but a variable name.
  --> When user type boards/1, it is automatically saves into aaa, so it goes boards/aaa.
  --> Thus, only one index.js is okay in [aaa] folder. One folder, multi pages can be moved through qqq and distributes data.
  --> If executed, ~~board/3

[aaa] Code:

(First Post boards: http://localhost:3000/boards/1(or [aaa]))

const router = userRouter()
router.query={aaa: 1} //part that is executed

---

How it works:

const router = useRouter()
const {data} = useQuery(FETCH_BOARD)

• These commands go to backend with requests. --> Backend saves them to data base and responses with data
  *That data is put into useQuery(FETCH_DATA) and it sets the data into {data}.

---

[Conditional Rendering]

(Ko. 조건부 렌더링)

• When the code ends as {data.fetchBoard.contents}, the computer says that the data is undefined. So the code must be in asynchronous state, which mutiple data can be saved or be in a process at the same time.
• So {data && data.fetchBoard?.writer} is used to make sure that the data is shown when the data exists. If not, then none of data is shown.
• "It's literally like conditional statement. If the condition matches, computer recognizes the code as "true" so the code is executed successfully. But if the computer recognizes as "false", that false-code isn't executed and the following codes are executed.

---

[Optional Chaining]

• Since the developers wanted to make conditional rendering even more condnese, the made optional changing.
• Optional changing is literally combining redundant code inside conditional rendering.
• The code goes like this: {data?.fetchBoard?.writer}

---

[Template Literal ]

const apppleNum = 3
    const bananaNum = 10
    console.log("철수는 사과를 "+ apple +"개 가지고 있고 바나나를 " + banana) + "개 가지고 있어요"
    console.log(`JB has ${appleNum} apples and ${bananaNum} bananas`)

• Template Literal enables the user to write execution code in a simple way with ${} and backticks.
• Users used to make execution codes as: ("JB has "+appleNum+"apples and "+ bananaNum + "bananas.")
  --> Here, template literal is deleting all the "quotation marks" and plus signs. All the codes go inside backticks and use $dollar sign and {curly brackets}.

[try () / catch(error)]

• try() helps users to check the errors before actually running the file.
• catch(error) finds and tells the errors from backend. When there happens an error, rest of the codes are immediately skipped and it takes the user to finally{} to execute the final code anyway.

[Shorthand Property]

• If key and value take same variables, then the user can shorten the code:
  writer: writer; --> writer;

  ---

[Algorithms]

• return () function executes the code once it matches the condition. It does not look for the rest of the code when once it is executed.
• Conditional statements are executed from top to bottom like looking at the condition one by one. So computer takes look at all the codes and find out the execution code that highly matches with the condition.