[7일차] codecamp 첫 주말/ 복습2

0

TIL

목록 보기
7/21
post-thumbnail

어제에 이어 두번째 페이지 만들기 도전.
아직 완벽히 이해 안가는 부분도 있으나 일단은 따라해보며 파악해보자.

버튼 클릭 시 결과화면에 띄우기 -> 데이터 조회 요청 -> query


-필요 기능 목록-

  1. 통신 기능(조회) - API -> apollo -> usequery, gql
  2. 라우터 활용(정확한 용도 재확인 필요) -> next -> router
  3. 삼항연산자 활용.

  1. playground에서 프로필 조회 확인하기.

  2. useRouter와 useQuery, gql 불러오기.

import {useRouter} from "next/router"
import {useQuery, gql} from "apollo/client"
  1. 메인 함수 선언.
export default function(){
  
 
return(
        <div>
            <div>이름:{}</div>
            <div>나이:{}</div>
            <div>학교:{}</div>
    //중괄호 안에 조회한 데이터 들어갈 예정.
        </div>
  )
}
  1. router 선언 및 할당.
const router = useRouter()
  1. 조회할 gql 선언 및 할당.
//5-1. 먼저 playground에서 조회한 내용 복사하기.
  const KOF = gql`
  query{fetchProfile(
    name:"도우너")
    {
      name
      age
      school
    }
  }
  `
//5-2. query에서 조회된 값을 나타내기 위해 백틱 안의 내용 수정하기.
//iori는 query화면에 띄울 때 다시 사용됨.
  const KOF = gql`
  query kyo ($iori:String) 
      {fetchProfile(name:$iori)
    {
      name
      age
      school
    }
  }
  `
  1. 앞에 gql 할당한 값을 사용하여 query로 데이터 조회하기.
const singo = useQuery(KOF, {variable:{iori:router.query.name}})
//여기 이오리 뒤에가 왜 라우터일까.
//variable에도 {}가 왜 사용될까.
//const{} = useQuery(a,b)의 활용법 찾아보기.

7.return에 조회한 값 나타내기. 데이터가 없을 경우도 고려해야 하며 짧은 코드 입력을 위해 삼항연산자 사용.

return(
        <div>
            <div>이름:{singo && singo.fetchProfile.name}</div>
            <div>나이:{singo === undefined ? '' : singo.fetchProfile.age}</div>
            <div>학교:{!singo ? '' : singo.fetchProfile.school}</div>
//useQuery를 할당한 singo 안의 fetchProfile안의 값을 조회.
        </div>
  )
}

아직 명확하지 않은 부분이 군데군데 보인다. 찾아보고 수정할 예정.

오늘 할 일

실습 몇번 더 반복해보고 숙제 다시 해보기.
알고리즘 풀기.
느리더라도 내 학습 속도에 맞춰 꾸준히 공부할 것.


profile
코린이의 코딩 성장기

0개의 댓글