동기 실행과 비동기 실행

huni_·2022년 7월 1일
0

동기 실행과 비동기 실행

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

⭐ 비동기 실행
서버 컴퓨터의 작업이 끝날 때까지 기다리지 않는 통신으로 서버에 요청(등록, 수정, 삭제 등)이 저장될 때까지 기다리지 않고 다른 작업을 진행합니다.
이러한 특징 때문에 비동기 실행은 요청들 사이에 서로 기다려 줄 필요가 없을 경우, 여러가지 요청을 동시에 처리해 줄 때에 사용됩니다.

await 를 사용하기 위해서는 async를 붙여야 합니다.

우리가 비동기 실행 방식에서 동기 실행 방식을 변경해주기 위해서는 async/await이 필요합니다.

호이스팅

let, const 호이스팅 됩니다.

TDZ
Tempral Dead Zone
적고 싶어도 적지 못한다?

hello()

function hello(){
    console.log("안녕하세요~~")
}

위에서부터 한 줄씩 읽어나가는 방식인데 실행이 됩니다.
이렇기 때문에 프로젝트가 커질수록 예기치 못한 오류가 발생합니다.

hello2()

const hello2 = function(){
    console.log("안녕하세요~~")
}

이렇게 만들면 호이스팅이 되지 않습니다.

hello2()

const hello2 = () => {
    console.log("안녕하세요~~")
}

화살표 함수를 사용해서 보다 간단히 만듭니다.

중복해서 만들수 있다???

var child = "철수"
var child = "영희"
console.log(child)
const child2 = "철수"
const child2 = "영희"
console.log(child2)
let child3 = "철수"
let child3 = "영희"
console.log(child3)
function hello(){
    console.log("안녕하세요!!")
}
function hello(){
    console.log("반갑습니다.")
}
hello()
const hello = () => {
    console.log("안녕하세요!!")
}
const hello = () => {
    console.log("반갑습니다.")
}
hello()

실행할때 app.js 부터 실행이 됩니다.

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

여기서 우리가 적은 함수 부분이 component 부분으로 들어가 실행이 됩니다.

그래서 함수를 함수컴포넌트라고 부릅니다.

pageProps 다음주에 배운다.

Component는 이 부분을 의미합니다.

1. 호이스팅 실습
===================
console.log(child)
var child = "철수" // 호이스팅 됨
===================
console.log(child2)
const child2 = "영희" // 호이스팅 되지만, TDZ에 들어가서 접근 불가
===================
console.log(child3)
let child3 = "훈이" // 호이스팅 되지만, TDZ에 들어가서 접근 불가
===================
hello()
function hello(){
    console.log("안녕하세요!!")
}
===================

2. 중복선언 실습
===================
var child = "철수"
var child = "영희"
console.log(child)
===================
const child2 = "철수"
const child2 = "영희"
console.log(child2)
===================
let child3 = "철수"
let child3 = "영희"
console.log(child3)
===================
function hello(){
    console.log("안녕하세요!!")
}
function hello(){
    console.log("반갑습니다@@")
}
hello()
===================

3. 함수 호이스팅+중복선언 실습
===================
hello()
function hello(){
    console.log("안녕하세요!!")
}
function hello(){
    console.log("반갑습니다@@")
}
===================

const [실행함수] = useMutation(뭘 실행할거야?? 부분 === create_board)

  1. call 부분과
  2. setting 부분이 나뉩니다.

사용하는 목적

부분적으로 가지고 오기위해

사용자가 많을수록 한꺼번에 가지고 오기 힘드니까 그래프쿠

비동기 한꺼번에 작업 여러일을 하는것

동기 한줄씩 작업 한개만 작업

await 이 작업이 완료되기 전까지는 못 넘어가요

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

const CREATE_BOARD = gql`
    mutation mymutation() {

        createBoard(writer: "huni", title: "daily", contents: "내용이예요!!!")
        {
            _id
            number
            message
        }
    }
`

export default function GraphqlMutationPage (){
    const [data, setData] = useState("")
    const [callApi] = useMutation(CREATE_BOARD)

    const callGraphqlApi = async () => {
        const result = await callApi({
            variables: { writer: "huni", title: "daily", contens: "내용이예요!!!" }
            // 위 데이터에 전송해서 출력하겠습니다.
        }) // graphql-api 방식
        console.log(result)
        console.log(result.data.createBord.message)
        setData(result.data.createBord.message)
    }

    return (
        <>
            <div>{data}</div>
            <button onClick={callGraphqlApi}>GRAPHQL-API 요청하기!!!</button>
        </>
    )

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

const CREATE_BOARD = gql`
    mutation mymutation($writer: String, $title: String, $contents: String) {

        createBoard(writer: "huni", title: "daily", contents: "내용이예요!!!")
        {
            _id
            number
            message
        }
    }
`

export default function GraphqlMutationPage (){
    const [data, setData] = useState("")
    const [callApi] = useMutation(CREATE_BOARD)

    const callGraphqlApi = async () => {
        const result = await callApi({
            variables: { writer: "huni", title: "daily", contents: "내용이예요!!!" }
            // 위 데이터에 전송해서 출력하겠습니다.
        }) // graphql-api 방식
        console.log(result)
        console.log(result.data.createBord.message)
        setData(result.data.createBord.message)
    }

    return (
        <>
            <div>{data}</div>
            <button onClick={callGraphqlApi}>GRAPHQL-API 요청하기!!!</button>
        </>
    )

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

const CREATE_BOARD = gql`
    mutation mymutation($writer: String, $title: String, $contents: String) {

        createBoard(writer: $, title: $title, contents: $contents {
            _id
            number
            message
        }
    }
`

export default function GraphqlMutationPage (){
    const [data, setData] = useState("")
    const [callApi] = useMutation(CREATE_BOARD)

    const callGraphqlApi = async () => {
        const result = await callApi({
            variables: { writer: "huni", title: "daily", contents: "내용이예요!!!" }
            // 위 데이터에 전송해서 출력하겠습니다.
        }) // graphql-api 방식
        console.log(result)
        console.log(result.data.createBord.message)
        setData(result.data.createBord.message)
    }

    return (
        <>
            <div>{data}</div>
            <button onClick={callGraphqlApi}>GRAPHQL-API 요청하기!!!</button>
        </>
    )

}

궁금증

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

const CREATE_BOARD = gql`
    mutation mymutation($writer: String, $title: String, $contents: String) {

        createProduct(){}

        fetchBoards(){}

        createBoard(writer: $writer, title: $title, contents: $contents {
            _id
            number
            message
        }
    }
`

export default function GraphqlMutationPage (){
    const [data, setData] = useState("")
    const [callApi] = useMutation(CREATE_BOARD)

    const callGraphqlApi = async () => {
        // const result = await axios.get("https://koreanjson.com/posts/1")  // rest-api 방식
        const result = await callApi({
            variables: { writer: "huni", title: "daily", contents: "내용이예요!!!" }
            // 위 데이터에 전송해서 출력하겠습니다.
        }) // graphql-api 방식
        console.log(result)
        console.log(result.data.createBord.message)
        setData(result.data.createBord.message)
    }

    return (
        <>
            <div>{data}</div>
            <button onClick={callGraphqlApi}>GRAPHQL-API 요청하기!!!</button>
        </>
    )

}

묶음 배송 가능

그렇기에 효율적인 데이터 활용이 가능합니다.

api 요청할때마다 

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

const CREATE_BOARD = gql`
//이름을 같이해서 보기 ㅕㄴ하게
    mutation createBoard($writer: String, $title: String, $contents: String) {

        createBoard(writer: $writer, title: $title, contents: $contents {
            _id
            number
            message
        }
    }
`

export default function GraphqlMutationPage (){
    const [data, setData] = useState("")
    const [callApi] = useMutation(CREATE_BOARD)

    const callGraphqlApi = async () => {
        // const result = await axios.get("https://koreanjson.com/posts/1")  // rest-api 방식
        const result = await callApi({
            variables: { writer: "huni", title: "daily", contents: "내용이예요!!!" }
            // 위 데이터에 전송해서 출력하겠습니다.
        }) // graphql-api 방식
        console.log(result)
        console.log(result.data.createBord.message)
        setData(result.data.createBord.message)
    }

    return (
        <>
            <div>{data}</div>
            <button onClick={callGraphqlApi}>GRAPHQL-API 요청하기!!!</button>
        </>
    )

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

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

        createBoard(writer: $writer, title: $title, contents: $contents) {
            _id
            number
            message
        }
    }
`

export default function GraphqlMutationPage (){
    const [data, setData] = useState("")
    const [callApi] = useMutation(CREATE_BOARD)

    const callGraphqlApi = async () => {
        // const result = await axios.get("https://koreanjson.com/posts/1")  // rest-api 방식
        
        const result = await callApi({
            variables: { writer: "huni", title: "daily", contents: "내용이예요!!!" }
            // 위 데이터에 전송해서 출력하겠습니다.
        }) // graphql-api 방식
        console.log(result)
        console.log(result.data.createBord.message)
        setData(result.data.createBord.message)
    }

    const onChangeWriter = (이벤토 헨들러) => {
        
    }

    const onChangeTitle = () => {

    }
    
    const onChangeContents = () => {

    }

    return (
        <>
            {/* <div>{data}</div> */}
            작성자: <input type="text" onChange = {} /><br />
            작성자: <input type="text" onChange = {} /><br />
            작성자: <input type="text" onChange = {} /><br />
            <button onClick={callGraphqlApi}>GRAPHQL-API 요청하기!!!</button>
        </>
    )

}

board! 부분에서 무조건 한개는 받아야 합니다.

profile
huni_
FrontEnd Developer
이전 포스트

API

다음 포스트

변수 var, let, const

0개의 댓글