[TIL] 22.11.03 - 동기/비동기, Async-Await, Apollo-Client로 gql mutation, URI/URN/URL

nana·2022년 11월 3일
0

TIL

목록 보기
20/50
post-thumbnail

동기 / 비동기

1) 비동기 실행

서버 컴퓨터의 작업이 끝날 때까지 기다리지 않는 통신으로 서버에 요청(등록, 수정, 삭제 등)이 저장될 때까지 기다리지 않고 다른 작업을 진행한다.

요청들이 서로 기다릴 필요 없을때, 여러가지 요청을 동시에 처리할 때 사용한다.
예) 네이버의 게시물 목록, 상품 목록을 동시에 가져옴

위의 사진 예시처럼 게시글 등록과 게시글 불러오기 작업을 동시에 진행하게 되므로 게시글이 제대로 보이지 않는 오류가 발생하게 된다.

📌 외부에 데이터를 요청하는 작업은 대부분 비동기적 방식이다.


2) 동기 실행

서버 컴퓨터의 작업이 끝날 때까지 기다린 후 다음 작업을 실행하는 통신이다.

동기 실행 방식은 등록 요청을 하게 되면 등록 과정이 모두 완료될 때까지 기다려준 후, 게시글 불러오기 과정이 실행된다.

위의 예시에서 게시글 등록이 완료된 후에 불러오기가 진행되어 게시글이 제대로 나타나게 된다.


Async-Await

vscode에서 비동기적 방식 사용하는 방법

axios 설치 필요

function qqq() {
	const data = axios.get('https://koreanjson.com/posts/1')
	console.log(data) // Promise 객체
}

비동기를 동기로 바꾸어주는 명령어

비동기 실행 방식에서 동기 실행 방식으로 변경해주기 위해서는
async / await 이 필요하다.

await 사용하는 방법

  • async 필수
  • 함수 안에 사용해야 한다.
async function qqq () {
  const data = await axios.get('https://koreanjson.com/posts/1')
  console.log(data)	// {id:1, title:"~~~~", ~~~}
}

이렇게 작성하면 await 이 작성된 부분의 코드 실행이 완전히 완료되기 전까지는 하단의 코드로 실행이 넘어가지 않는다.

📌 자바스크립트는 기본적으로 동기처리 방식이다.
그러나, 외부 설치프로그램은 대부분 비동기 처리를 해두어서 실행시에 비동기로 실행된다.

📌 Fragments
React에서 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화 할 수 있는 태그이다.
사용 시 key가 없다면 <></> 처럼 빈 태그로 사용할 수 있지만,
만약 key가 있다면 <Fragment></Fragment> 문법으로 명시적으로 선언해주어야 한다.

export default qqq =  () => {
  
  return (
  	<Fragment>
    	<div>안녕하세요</div>
    	<div>반갑습니다</div>
    <Fragment/>
  )
}

Apollo-Client 셋팅

playground 에서 실습했던 내용의 코드를 vscode에서 적용하기 위해서는 apollo-client 설치와 셋팅이 필요하다.

설치한 도구들을 셋팅하는 위치는 일반적으로 _app.js 이다.

_app.js에 아래와 같이 작성해 준다.

import {ApolloClient, ApolloProvider, InMemoryCache} from '@apollo/client'

function MyApp({ Component, pageProps }){
	const client = new ApolloClient({
		uri: "http://example.codebootcamp.co.kr/graphql",
		cache: new InMemoryCache()
	})

	return (
		<ApoloProvider client={client}>
			<Component {...pageProps}/>
		</ApolloProvider>
	)
}

Apollo-Client 로 graphql mutation 실행

예시) createBoard

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

// graphql 코드 생성 -> 함수 바깥에 작성해야한다.
const CREATE_BOARD = gql`
	mutation createBoard ($writer: String, $title: String, $contents: String ){	//데이터 타입설정
		createBoard(
			writer: $writer,		// 전달할 데이터
			title: $title,
			contents: $contents
		){
			number		// return받을 데이터
		}
	}

export default function GraphqlMutationpage() {
  const [writer, setWriter] = useState("");
  const [title, setTitle] = useState("");
  const [contents, setContents] = useState("");

// mutation 코드 생성
  const [createBoard] = useMutation(CREATE_BOARD);

// async / await 로 동기적 처리
  const onClickSubmit = async () => {
    const result = await createBoard({
      variables: {		// $는 variables 역할
        writer: writer,
        title: title,
        contents: contents,
      },
    });
  };

  const onChangeWriter = (event) => {
    setWriter(event.target.value);
  };

  const onChangeTitle = (event) => {
    setTitle(event.target.value);
  };
  const onChangeContents = (event) => {
    setContents(event.target.value);
  };

  return (
    <div>
      작성자: <input type="text" onChange={onChangeWriter} />
      제목: <input type="text" onChange={onChangeTitle} />
      내용: <input type="text" onChange={onChangeContents} />
      <button onClick={onClickSubmit}>GRAPHQL-API(동기) 요청하기</button>
    </div>
  );
}

URI, URN, URL

URL : 데이터 위치
URN : http 제외한 부분
URI : 주소 전체
#aaa : aaa id를 가진 태그의 스크롤위치

profile
프론트엔드 개발자 도전기

0개의 댓글