05) 화내지않는 나 제법 젠틀해요

이희주·2022년 5월 13일
0
post-thumbnail

오늘의 요약

지난 시간까지 우리는 게시물 등록 과정에 관해 배웠습니다.😉
등록이 완료될 때까지 기다리는 async/await 도 있었죠!

이번 시간에는 등록된 게시물ID, 또는 게시물 번호를 가지고 동적 라우팅을 진행했습니다.
이동된 페이지에서 router.query를 활용하여 게시물ID 또는 게시물 번호를 가져올 수도 있었어요!
또한, 가져온 게시물ID와 게시물번호를 활용하여 데이터를 조회했습니다!

조회하는 방법은 useQuery()를 사용했고, 사용 방법은 useMutation()과 거의 동일했습니다.
하지만 차이점은 useQuery는 비동기방식으로 페이지가 그려질(렌더링)때 자동으로 요청이 날아가고,
응답을 받기 전에 먼저 html을 그려주고 난 후 data가 받아지면 내용을 채워 넣어준다는 것이였습니다!

하지만 이로 인해 발생하는 문제가 있었고, 이를 해결하기 위해 조건부 렌더링을 사용했습니다.
조건부 렌더링에는 &&연산자와 삼항연산자를 사용하는 방법이 있었죠?
또한, &&연산자를 사용하는 경우엔, 옵셔널체이닝을 사용해서 코드 양을 줄이는 방법이 주로 사용됐습니다!

마지막으로 통신에 성공 / 실패 분기를 나눠주는 try,catch 또한 배웠습니다!
여기까지가 최소한의 데이터 통신 세트가 되겠습니다.

이 방법을 응용하여, 안에 데이터만 SNS, 동영상, 이미지 등등으로 변경된다면, 페이스북, 유튜브, 인스타그램 등 우리가 사용하는 서비스들의 원리는 모두 동일하겠죠?!

📢5/13 과제📢

1️⃣ 노션 퀴즈 1주차의 5일차 내용(다이나믹 라우팅 & 데이터 조회)
2️⃣ freeboard_frontend 게시글 상세 페이지 UI, 게시글 등록 시 상세 페이지가 보이도록 동적 라우팅(조건부 렌더링, try ~ catch 사용)

과제 수행 성실히 잘 해주시고, 궁금하신 점 있으시면 QT 작성해주시면 되겠습니다!
과제 완료 후 구글 클래스룸 제출! 매일 블로그 작성하시고 노션에 url 올려주시는 것도 잊지 말아주세요!

React

오늘은 등록한 게시물 보는방법, 이동된 페이지에서 저장해서 화면에 보여주는 방법을 배우자 !

오늘 배울것

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

관리자모드에서
네트워크
payload 가 내가 요청한것
preview, response 가 응답

<<어제 한 자유게시판 리뷰>>

프리보드 코드 진행과정

브라우저에서 게시물 등록하기 버튼 클릭 -> 크리에이트보드 라는 api를 통해 백엔드에 요청을 보내고 데이터베이스에 데이터를 넣음 -> 그다음 응답을 받아옴 (아이디)

플레이그라운드에서는 재생버튼 클릭 -> 패치보드 에이피아이로 데이터베이스로 감 -> 데이터를 꺼내와서
가져다 준 것이 보여짐 (실제로 저장이 되었는지 확인)

왜 달러가 있나요???

왜 달러가 있냐면?
크리에이트 보드 안에 여러가지들을 요청 할 수 있어서!
createBoard, createProduct 등등

<<오늘 수업 할 것>>
게시글 등록 페이지에서 게시글 상세 페이지로 이동하기
게시글상세 : 제목, 내용, 작성자 어쩌구로 화면에 예쁘게 그려줘야댐

(이것도 패치보드를 요청해서 데이터베이르고 가서 데이터 꺼내서 가져다주는것
그 데이터를 어떤 변수에 담아서 스테이트 등에 저장한다음 화면에 보여주게 되는 것이댜)

Routing

라우팅이란?
: 페이지 이동

이동시켜주는 도구가 router

useState() useMutation() 했던 것처럼 
페이지 이동하려면 useRouter() 만들어서

const router = useRouter()
router.push("이동할 페이지") 입력 후 해당 페이지로 이동
((router.reload(), router.replace(), router.pathname 등 자세한 것은 노션에 있따))

라우팅 실습

라우팅의 종류에는 정적 라우팅과 동적 라우팅이 있는데
정적 라우팅은 static-routing (일반적으로 알고있는 라우팅임)

정적라우팅

페이지 두개 만들어서
페이지1에 이동하기 버튼을 만들고
이동하기 버튼을 클릭하면
페이지2로 전환 시킬것이다

페이지 이동하기

게시글 이동하기

각 페이지의 개수를 만들어서
이동시키기

1번게시글입니다 2번게시글이니다 어쩌구가 나오려면
/05-04-static-routed-board/1
/05-04-static-routed-board/2
/05-04-static-routed-board/3 이렇게 나와야해!

라우팅 하기

1번 페이지에서 1번 게시물을 불러오기 위해 useQuery() 사용

const {data} = useQuery()

ustMutation, useState는 대괄호였는데 왜 Query는 중괄호인가요?

구조분해할당(=비구조화할당)을 나중에 배우는데 그때 이해가능하고,,
지금은 암기하긔,,, 유즈쿼리안에서는 중괄호 안에 데이터 를 쓴다,,

useQuery(FETCH_BOARD)로 useQeury안에 데이터를 넣고
그것을 data 넣음 (data.fechBoard.writer 하면 안에 데이터를 볼 수 있음)

근데 지금은 number:6 이 하드코딩되어있어서
다른번호 게시물도 보고싶으면 $number 로 변경해줘야 함

데이터조회 실습

페이지1
이동하기 버튼 만들 페이지

import {useRouter} from 'next/router'

export default function StaticRoutingPage() {

const router = useRouter()
//게시물을 이동시켜주기 위한 도구 router를 사용하기 위해
//userRouter() 만들기

const onClickMove1 = () => {
    router.push("/05-04-static-routed-board/4")
}
    //게시물 이동하기 버튼 클릭하면 실행될 함수 onClickMove를 만들고
    //함수가 실행되면 router.push로 routed게시물로 이동해주기

const onClickMove2 = () => {
    router.push("/05-04-static-routed-board/5")
}

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

return (
    <>
        <button onClick={onClickMove1}>4번 게시글 이동하기 !</button>
        <button onClick={onClickMove2}>5번 게시글 이동하기 !</button>
        <button onClick={onClickMove3}>7번 게시글 이동하기 !</button>
    </>
        //각각의 게시글 이동하기 버튼 누르면 onClickMove 함수가 실행됨
)
} //이동할 게시물 3개 만들었으니까 이동할 버튼 3개 만들기

전환시킬 게시물4

  import {gql, useQuery} from '@apollo/client'
  //1번 게시물을 불러오기 위해서 useQuery() 사용

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

	export default function StaticRoutedPage() {

    const {data} = useQuery(FETCH_BOARD)
    	//useMutation 과 다르게 이 data는 변경 할 수 없음
    	//반드시 data 라고 작성

    	//페이지 이동과는 다르게 버튼같은걸 클릭하는게 아니라
    	//상세 페이지가 실행되면 자동으로 요청 날아감
    	//그다음에 데이터베이스에서 데이터를 꺼내서 가지고 온 뒤에
    	//data에 데이터가 들어감

    console.log(data)
    	//data가 잘 들어가있는지 확인해보기

    return (
        <div>
            <div>4번 게시글 이동이 완료되었습니다 !</div>
            <div>작성자: {data?. fetchBoard.writer}</div>
            {/* 조건부 렌더링으로 데이터가 있으면 뒤에껄 보여주고 없으면 앞에껄 보여주기 */}
            {/* 근데 어차피 지금 데이터가 안들어있어서 빈 화면이 나올것 */}
            <div>제목: {data?. fetchBoard.title}</div>
            <div>내용: {data ? data.fetchBoard.contents : "조금만 기다려주세요..."}</div>
        </div>
    )
	// 조금 기다렸더니 데이터 들어옴 !! 
}

페이지 하나만 만들고
05-04-static../4 이런 주소값을 가지고와서 변수형태로 저장해서 불러오기!
그 변수를 fetchBoard(number: 에서 숫자를 $로 바꾼다음 넣어주면 된다

주소에 관련된건 다 router 로 들어감,,
router.query
router.pathname

정적 라우팅과 동적 라우팅의 차이

동적 라우팅은
1번 게시글 상세 페이지가
정적 라우팅처럼 http://localhost:3000/boards/1 이 아니라
http://localhost:3000/boards/[aaa] 이렇게
변수가 [aaa] 안으로 들어가는것 ! (대괄호를 붙였기 때뮨에)

1이 aaa 안으로
const router = useRouter()
	router.query = {
    	aaa: 1
	}

동적 라우팅

동적라우팅 실습!

// 전환시킬 게시물

import {gql, useQuery} from '@apollo/client'
import { useRouter } from 'next/router'
//게시물을 불러오기 위해서 useQuery() 사용

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

export default function StaticRoutedPage() {

const router = useRouter(FETCH_BOARD)
//4,5,5 페이지들이 fetchBoard number 안에 들어가게 하기 위해서 router사용
//05 routing-board에서 어떤페이지를 클릭하던 다 06 routed 페이지로 오게되는데
//그것들이 [aaa]라는 변수로 들어오게 되는것 

const {data} = useQuery(FETCH_BOARD, {
    variables: {number: Number(router.query.aaa)}
    //주소에 숫자를 입력해도 문자로 들어오기 때문에 number로 감싸줘서 숫자로 변환
})
//useMutation 과 다르게 이 data는 변경 할 수 없음
//반드시 data 라고 작성

//페이지 이동과는 다르게 버튼같은걸 클릭하는게 아니라
//상세 페이지가 실행되면 자동으로 요청 날아감
//그다음에 데이터베이스에서 데이터를 꺼내서 가지고 온 뒤에
//data에 데이터가 들어감

console.log(data)
//data가 잘 들어가있는지 확인해보기

return (
    <div>
        <div>{router.query.aaa}번 게시글 이동이 완료되었습니다 !</div>
        <div>작성자: {data?. fetchBoard.writer}</div>
        <div>제목: {data?. fetchBoard.title}</div>
        <div>내용: {data ? data.fetchBoard.contents : "조금만 기다려주세요..."}</div>
    </div>
	)
}

오늘의 팁

  1. shorthand property
    자바스크립트에서 키와 밸류가 같으면 밸류는 생략해도 되는 것

그래프큐엘은 자바스크립트랑 주석처리 방법이 다르다 !
그래프큐엘에서 주석처리하는 방법

  1. 자바스크립트에서는 button 세개 저렇게 나열할수가 없어서
    div같은걸로 한번 묶어줘야하는데 그냥 <> 이렇게 묶어줘도 묶임

  2. 바나나3개, 애플2개가 있을때 

    //const banana =3
    //apple = 2
  
    //"철수는 바나나를" + banana + "개 가지고 있고," + "사과를" + apple + "개 가지고 있습니다" 를
    //`철수는 바나나를 ${banana}개 가지고 있고, 사과를 ${apple}개 가지고 있습니다`
    로 간단한게 가능한 ,,
  1. css에서 로그인버튼
    백그라운드에 transparent 주기
    #000000 인데 뒤에 숫자 붙이면 투명도 변경가능함
    rgba(0,0,0,0) 일때 숫자 맨 뒷 자리가 투명도 !
    이거하면 글자는 안투명해지고 버튼색만 투명해짐 !

TIL

오늘으 할일
등록버튼 누를때 페이지 이동해서 화면에 그려주기 !
상세페이지 ui 먼저 그리고 useQuery()로 불러오기

Courese Feedback & PF Review

profile
이희주
어제보다 오늘 발전하는 프론트엔드 개발자
이전 포스트

04) 암낫오케

다음 포스트

06) 주말은 왜이렇게 짧은지 왜냐면 이틀밖에 없으니까

0개의 댓글