📒 오늘 공부한 내용
🔍수업목차
[4-1] 동기 실행과 비동기 실행
[4-2] 호이스팅(Hoisting)
[4-3] apollo-client 셋팅하기
[4-4] apollo-client 로 graphql 뮤테이션 실행
✅ 동기 실행과 비동기 실행
데이터를 주고 받기 위해서 브라우저에서 데이터를 요청하면 요청을 받은 백엔드 컴퓨터는 데이터베이스에서 데이터를 처리하여 브라우저에 응답을 돌려준다.
이 때, 게시글을 등록 후 게시글을 불러왔을 때 게시글이 불러와지지 않는 경우가 있다. 이러한 문제는 게시글 등록 요청 후 백엔드 컴퓨터에 요청을 전송하고 데이터가 처리된 후 게시글 불러오기 과정이 실행되어야 하는데 데이터 처리 이전에 게시글 불러오기 과정이 실행되어져 문제가 발생한다. 이러한 실행 방식을 비동기 실행이라고 한다.
- 비동기 실행 :
서버 컴퓨터의 작업이 끝날 때까지 기다리지 않는 통신으로 서버에 요청(등록, 수정, 삭제 등)이 저장될 때까지 기다리지 않고 다른 작업을 진행한다. 이러한 특징 때문에 비동기 실행은 요청들 사이에 서로 기다려 줄 필요가 없을 경우, 여러 가지 요청을 동시에 처리해 줄 때에 사용된다.
이전에 게시글 등록 후 불러왔을 때 게시글이 불러와지지 않는 오류에 직면한 것처럼 비동기 실행 방식이 아닌 다른 통신 방식을 사용해야할 경우가 있다. 이러한 경우에 사용하는 것이 동기 실행 이라고 한다.
- 동기 실행:
서버 컴퓨터의 작업이 끝날 때까지 기다린 후 다음 작업을 실행하는 통신이다.
동기 실행 방식은 등록 요청을 하게 되면 등록 과정이 모두 완료될 때까지 기다려준 후 게시글 불러오기 과정이 실행되기 때문에 문제 없이 작업이 가능하다.
📂 VSCODE에서 비동기
- REST-API 비동기 통신
import axios from "axios" export default function 함수이름() { function onClickAsync() { const result = axios.get("https://koreanjson.com/posts/1") console.log(result) }
REST-API에서 데이터의 요청과 응답을 위해 axios를 사용하여 비동기 통신을 사용해주었다.
코드는 상단에서부터 실행되면서 백엔드 컴퓨터에 데이터를 요청하고 데이터를 가져와서 응답을 준다.
해당 코드를 실행하면 콘솔창에는 리턴된 Promise 객체가 보여지게 된다.
💡 Promise 객체
Promise 객체는 자바스크립트에서 비동기 처리에서 사용되는 객체다. 주로 서버에서 받아온 데이터를 화면에 표시하기 위해서 사용하며 데이터를 받아오기도 전에 데이터를 화면에 표시하려고 하면 오류가 발생하거나 빈 화면이 뜨게 되는데, 이러한 문제를 해결하기 위한 방법 중 하나다.
- Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
- Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해 준 상태
- Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
- REST-API 동기 통신
async function 함수이름() { const data = await axios.get('https://koreanjson.com/posts/1') console.log(data) // {id: 1, title: "정당의 목적이나 활동이 ...", ...} }
비동기 실행 방식에서 동기 실행 방식으로 변경해주기 위해서는 async/awiat이 필요하다.
이렇게 작성해주시면 await이 작성된 부분의 코드 실행이 완전히 완료되기 전까지는 하단의 코드로 실행이 넘어가지 않는다.
💡 자바스크립트는 기본적으로 동기처리 방식이다!!
✅ 호이스팅(Hoisting)
호이스팅 : 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.
쉽게 말해서 호이스팅은 변수의 선언과 초기화를 분리하여 선언만 코드의 최상단으로 끌어올려주는 것이다.
- 함수(function)의 호이스팅
catName('클로이') function catName(name) { console.log('제 고양이의 이름은' + name + '입니다')' } // '제 고양이의 이름은 클로이입니다'
- 변수 선언 방식(var)의 호이스팅
console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력 var num; // 선언 num = 6; // 초기화
let과 const로 선언한 변수도 호이스팅이 되긴 하지만, var와는 달리 undefined로 변수를 초기화 하지 않기 때문에 변수 선언 전에 먼저 사용하게되면 오류가 발생한다.
✅ apollo-client 셋팅하기
playground 에서 실습했던 내용의 코드를 vscode에서 적용하기 위해서는 apollo-client라는 도구가 필요하다.
설치한 도구들을 셋팅하는 위치는 일반적으로 _app.js 다.
import {ApolloClient, ApolloProvider, InMemoryCache} from '@apollo/client'
function MyApp({ Component, pageProps }){
const client = new ApolloClient({
uri: "http://backend-example.codebootcamp.co.kr/graphql",
cache: new InMemoryCache()
})
return (
<ApoloProvider client={client}>
<Component {...pageProps}/>
</ApolloProvider>
)
}💡 _app.js의 작동 원리
index.js(페이지)가 실행되는 것이 아닌 index.js가 app.js로 합쳐져서 app.js가 실행되는 것 이다.
✅ apollo-client 로 graphql 뮤테이션 실행
1️⃣ mutation을 사용하기 전, playground에서 제대로 작동하는지 확인
2️⃣ 제대로 작동한다면, graphql mutation을 실행하려는 페이지 상단에서, apollo-client 의 도구들을 불러오기.
// graphql 요청에 필요한 도구 불러오기 import { useMutation, gql } from '@apollo/client'
3️⃣ javascript 입력 부분에 playground의 코드를 복사하여 gql`` 사이에 붙여넣어 변수/상수를 만들어 준다..
# graphql 코드 생성 const CREATE_BOARD = gql` mutation { createBoard( writer: "훈이", title: "안녕하세요!", contents: "내용입니다." ){ _id number message } } `
4️⃣ gql 변수/상수를 활용하여, useMutation을 만들어 준다.
// mutation 코드 생성 const [나의함수] = useMutation(CREATE_BOARD)
5️⃣ 게시물 등록 버튼을 클릭했을 때 실행되는 함수에서 mutation 코드를 실행해 준다.
const [나의함수] = useMutation(CREATE_BOARD); const onClickSubmit = () => { 나의함수({ variables :{ writer: "훈이", title: "안녕하세요!", contents: "내용입니다." } }); } return <button onClick={onClickSubmit}>버튼</button>;
✅ 오류 잡기 (중요)
1. HTML/ CSS에서 문제가 생기면
: elements로 가서 도구 창에서 먼저 수정해보고 확인후 가능하면 vs코드를 수정해 준다.
: css도 마찬가지로 도구창에서 먼저 수정해서 확인해보고 vs코드에서 최종 입력해본다.
2. javascript에서 문제가 생기면
: 콘솔로 찍어서 확인해보면서 확인해본다.
: 네트워크에 가서 클릭해본 후 다시 기능을 확인해본다.
: 빨간색으로 나오는 오류를 확인해보고 status를 확인해서 오류를 클릭해서 확인해본다.
: 페이로드는 내가 뭐를 보냈는지 확인할 수 있다.
: response가 중요하다. 많이 읽어봐야 한다!!!!!!!
