Static, Dynamic Routing

5.13 금요일

게시글등록 누르면 백엔드 -> db에서 값을 가져와서 ->백엔드 거쳐서 -> 브라우져로

게시글 상세페이지는 어떻게 될까???
-게시글 상세페이지는 예쁘게 그려져야됨

자바스크립트에서 key값과 value값이 같으면 writer : writer 와 같이 쓰는게 아니라
뒤의 writer를 생략가능,
writer,
password,
title,
contents
와 같이 써도 됨

html, 자바스크립트, Graphql은 모두 주석 처리가 다름
(html:*/)
(자바스크립트://)
(graphql:#)

(이동시켜주는 도구는 “라우터”라고 함)

const router = useRouter()를 적어줘야 라우터 실행가능함!!

(router.블라블라 여러가지 있음////자세한 내용은 노션을 참고)

![](https://velog.velcdn.com/images/hskwon517/post/f1187224-0154-4c0a-9590-42b312f186de/image.png)

<button onClick={onClickMove}>여기를 누르면 페이지를 이동합니다</button>
<button onClick={onClickMove}>여기를 누르면 페이지를 이동합니다</button>
<button onClick={onClickMove}>여기를 누르면 페이지를 이동합니다</button>
이렇게 써주면 오류가 남!!, 하나로 묶어줘야함!!!!

=><> 나 <div> or <fragment>로 묶어주기
굳이 div를 더 써주지 않더라도 <>와 같이 프래그먼트로 묶어줘도됨




만약 페이지가 1000개가 있다면…? 파일을 각각1000개를 다 만들것인가? 불가능함
=> 다이나믹 라우팅 방식을 사용해야함
![](https://velog.velcdn.com/images/hskwon517/post/570e7b98-ddba-4e46-b0da-dfb9e366f8d5/image.png)


![](https://velog.velcdn.com/images/hskwon517/post/8372bfa2-7ebf-4392-80ff-e71e778a668d/image.png)

결국 얘도 6번 게시글밖에 못가져옴 (6번이 하드코딩되어있음)


<차이점!!!!>
mutation은 내가 원하는 순간 버튼을 누르면!!! 백엔드 요청이 날라가서 받아옴

usequery는 페이지 접속하는순간 “자동으로” 백엔드 요청이 날라가버림(비동기방식)
->데이터를 가져올때까지 기다리고 다음줄로 넘어가는게 아니라!!! 
일단 요청은 된 상태로 그대로 코드 아랫줄로 내려가버림

=>
![](https://velog.velcdn.com/images/hskwon517/post/1c9cccdb-bde9-4b33-976a-7fc40a0cb58c/image.png)

(이렇게 쓰면 fetchBoard가 없다고 오류메세지가 나올것임)



![](https://velog.velcdn.com/images/hskwon517/post/0c742027-c230-4d75-8e83-a1832f75e24f/image.png)

바로 보여줄 수 있는 “작성자”, “제목”, “내용” 과 같은 글씨는 먼저 보여주고, fetchboard로 불러와야하는 것은 나중에 보여주는게 효율적임

![](https://velog.velcdn.com/images/hskwon517/post/ad3704fa-cc5c-463f-829d-5c4a336c93ed/image.png)

(조건부 렌더링) 데이터가 있으면 앞에걸 보여주고, 데이터가 없으면 뒤에걸 보여준다


(옵셔널체이닝)
![](https://velog.velcdn.com/images/hskwon517/post/7bf2a641-a4cf-4731-b85a-eacddd2a26ad/image.png)

data && data.fetchBoard.writer 써주는게 귀찮기 때문에
data?.fetchBoard.writer 라는 문법이 나옴(옵셔널체이닝)



(3항 연산자)
![](https://velog.velcdn.com/images/hskwon517/post/a39a0c74-f976-49a2-af08-9b2923560e84/image.png)

data가 있으면 data.fetchBoard.contents를 보여줌
data가 없으면 “조금만 기다려주세요…”를 보여줌



![](https://velog.velcdn.com/images/hskwon517/post/438499df-d6f3-43a1-aab7-1805dd860cec/image.png)

페이지가 수천개이면 일일이 고칠 수가 없음
페이지는 하나만 만들고 내부 삽입형태로 해야함

=>
![](https://velog.velcdn.com/images/hskwon517/post/03df0a09-6d8c-4012-99dd-07a99f1bc244/image.png)



정적라우팅 vs 동적라우팅

정적라우팅:게시글이 여러개인 상세페이지를 만들기에는 부적합함!!!
![](https://velog.velcdn.com/images/hskwon517/post/a71523b8-ead8-43bd-96ef-52c7220ebb51/image.png)

동적라우팅 : aaa는 변수이고 변수에 대괄호를 써줘야함

![](https://velog.velcdn.com/images/hskwon517/post/3250c92b-1189-4cf1-9372-7424cb86d4fd/image.png)


![](https://velog.velcdn.com/images/hskwon517/post/00cc1388-f4e6-4fff-850e-dc433e53ec50/image.png)

[aaa] 폴더 안에 index.js파일은 하나만 만들기

[aaa]로 만들면 // 1을 넣어도 [aaa]로 접속되고 apple을 넣어도 [aaa]로 접속됨…..
(이렇게)
![](https://velog.velcdn.com/images/hskwon517/post/d2a6483c-e2e2-4270-ac51-c0c7c3481c65/image.png)


![](https://velog.velcdn.com/images/hskwon517/post/374a4781-9dc8-43b7-a7bd-f59f7bfaaf06/image.png)



삼항연산자 num%2 ===0 ? “Even” : “Odd”