[6일차] codecamp 첫 주말/ 복습1

부트캠프 코드캠프 정규수업 일주일째가 끝나고 첫 주말이 찾아왔다.

어제 수업이 이번주 배운 내용들의 전반적인 응용이었고 아직 숙지를 못한 부분이 있었기 때문에 오늘은 숙제 완료 후 어제 실습 내용을 다시 해보았다.

텍스트 데이터 입력 후 버튼을 누르면 작성한 이름명의 페이지로 넘어가면서

이렇게 결과가 나와야한다.

수업할 때에는 알려주신 내용을 따라가느라 바빴기 때문에 혼자서 작성하려면 아직은 막막하다. 그래서 오늘은 실습 내용을 처음부터 직접 작성하는 연습을 해보았다.

---

-필요 기능 목록 파악해보기-

1. 통신 기능 - API -> apollo - mutation, gql
   async/await, try/catch,
2. 사이트 이동 - next -> router
   router.push()
3. 객체 데이터 묶기 - react -> state
   spread 활용
4. 기타 - onClick, onChange

---

1. playground에서 gql 프로필 작성법, 데이터 확인하기.
   주의!*데이터 값 뒤에 !가 있으면 반드시 그것이 들어가야 한다는 것.

2. gql을 사용해야 하므로 mutation, gql 사용.
   데이터를 담기 위해 state 사용.
   페이지 이동해야 하므로 router 사용.

import {useMutation, gql} from '@apollo/client'
import {useState} from 'react'
import {useRouter} from 'next/router'

3. 메인 함수 기재
   텍스트 입력값과 클릭시 감지하기 위한 onClick과 onChange 사용.

export default function ProfilePage2(){

return (
<div>
            <span>이름: </span><input type = "text" name = "name" onChange = {onChangeInput}></input><br />
            <span>나이: </span><input type = "text" name = "age" onChange = {onChangeInput}></input><br />
            <span>학교: </span><input type = "text" name = "school" onChange = {onChangeInput}></input><br />
            <button onClick = {onClickRegist}>프로필 등록하기</button>
        </div>
	)
}

4. 필요한 3가지 값을 묶어서 사용하기 위해 State 사용. 여러번 사용하므로 생략 가능한 spread 활용 예정.

const [apple, setApple] = useState(
        {
        name:"",
        age:"",
        school:"",
        }
    )

5. apple 안에 들어갈 텍스트값을 읽는 함수를 선언.

    function onChangeInput(event){

        const banana = {...apple, [event.target.name]:event.target.value}
//여기의 스프레드와 []가 이해하기 어려웠다.
//키에 []대괄호가 없으면 값이 되어버림.키로 만들기 위한 JS에서의 약속.
        setApple(banana)

    }

6. gql, mutation 호출.

//gql의 선언할 때 대문자를 넣는 것이 관례라고 한다.
// $는 값을 여기로 가져오라는 유도 기능인 듯.
// cat~()부분은 gql에서는 없던 부분인데, 
// gql 에서 ()가 있어 사용하는 듯. 
const PROFILE = gql`
        mutation cat ( $name:String, $age:Int, $school:String)
            {
                createProfile (
                name:$name
                age:$age
                school:$school
                ){
                message
                }
            }
`

const[gorila] = useMutation(PROFILE)
//[]안에는 아무거나 써도 된다.
//useMutation()에 gql 할당한 PROFILE 넣기.  

7. 사이트 이동을 위한 router 작성.

const router = useRouter()

8-1. 버튼 클릭 시 데이터 전송되는 기능 작성. 요청에 대한 응답으로 받은 객체를 변수에 넣어야한다. 통신이 완료될 때 까지 기다려야하므로 async/await 사용(동기 통신).

8-2. API 기능의 성공, 실패의 경우를 나눠야 하기 때문에 try, catch 사용.

8-3. variable은 gql에서 ()가 있을 시에 사용한다고 한다. 아까 선언한 state에 spread 기능인 ...을 사용했다.

8-4. 클릭 시 해당 사이트에 이동해야 하므로 router.push객체 사용.

async function clickRegist(){
  try{
  const result = await gorila({
  	variable:{...apple, age:Number(apple.age)
      //age:Number는 gql에서 저 부분이 Int라서 사용하는 듯?
      //Int가 아니면 {...apple}만 써도 되는건지 애매함.
             }
  })
  alert("성공메세지")
  router.push(`/quary/${apple.name}`)
//작성한 이름값이 들어가야 하므로 ${}안에 객체 키 name 입력. 
//해당 경로에도 index가 있어야함.
  }catch(error){
  alert("실패메세지")
  }
}

---

여기까지가 첫 화면. 넘어가면 나오는 페이지는 내일 작성할 예정.
내 수준에서 최대한 알기 쉽게 정리해봤다.
이 과정에 익숙해져 안 보고 작성이 가능할 때까지 반복해봐야겠다.