[4일차] apollo-client 세팅/ graphql mutation 활용/ async, await 적용

1. 동기와 비동기

동기

데이터 전송을 하나씩 진행. 요청1이 완료되면 요청2가 진행됨.

ex) 좋아요 버튼을 눌렀을 시 누른 즉시 데이터를 백엔드에 전송. 그 후 화면에 나옴.

비동기

등록, 수정 삭제 등 서버에 요청 저장을 기다리지 않고 한번에 여러 전송이 동시에 진행됨.

ex) 좋아요 버튼을 누르면 백엔드에 보내기도 전에 내 화면에 먼저 표기가 됨.

async / await

비동기 통신
async function 함수이름(){
	//서버 컴퓨터에 요청하는 코드
  axios('API 이름')
} console.log(data) // promise
// promise는 줄테니까 기다려 
  -> 데이터가 전달되기전에 코드 실행. 


동기 통신
async function 함수이름(){
	await  axios('API 이름')
  // 서버 컴퓨터에 요청하는 코드    
} console.log(data) // 서버 컴퓨터에 요청(기다림)
-> 데이타 전송 후 코드 실행.

응답 결과를 변수에 담아서 사용할 경우 동기가 더 확실한 것 같다. 이럴 때 async/await를 활용.

---

2.mutation 사용법

1._app.js 설정.

참고할 수 있는 공시 사이트
https://www.apollographql.com/docs/react/get-started/

2. graphql mutation 을 사용하려는 페이지 상단에 불러오기 명령.

import { useMutation, gql } from '@apollo/client'

3.JS입력 부분에 필요한 코드 복사

	const CREATE_BOARD = gql`
	mutation createBoard($writer: String, $password: String, $title: String, $contents: String) { 
	createBoard( 
		writer: $writer,
		password: $password,
		title: $title,
		contents: $contents
		){
	message
		}
	}
`

4. 위의 gql 변수 활용하여 useMutation 만들기.

---

오늘 내게 아쉬웠던 점.

1. 새로 배운 mutation을 State와 함께 사용하려고 하니 코드 작성의 범위가 넓어져 전체 흐름 파악이 어려웠다. 함수와 변수가 많아지면서 인자가 어디서 어디로 가는지 파악이 잘 안되었고, 거기에 스프레드 사용으로 새 함수가 선언되어 더 복잡해졌다. 당분간 이 연습을 반복하여 수업한다고 하니 노력해야겠다.

2. 하나에 몰입하다보니 알고리즘 문제를 전혀 못풀었다. 내일부터는 당일 수업 내용에 올인하기보다 알고리즘 푸는 시간을 별도로 지정해놔야겠다. 한가지 문제에 너무 오랜 시간 소비하면 집중력이 풀리며 피로도만 더 쌓이는 것 같다.

3. playground 에서 표기 방식이 조금만 바뀌면 적용을 못한다. 내일 다시 여쭤봐서 정확하게 파악하는 법을 익혀야겠다.