동기통신과 비동기통신

동기 실행과 비동기 실행

데이터를 주고받기 위해 브라우자에서 데이터를 요청하면 요청을 받은 백엔드 유저는 데이터베이스에서 데이터를 처리해 브라우저에 응답을 주어야한다.

이 때, 게시글을 등록 요청 후 백엔드 유저에 요청을 전송하고 데이터가 처리된 후 게시글 불러오기 과정이 실행돼야 하는데 데이터 처리 이전에 게시글 불러오기 과정이 실행돼 문제가 발생한다.

비동기 실행

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

동기 실행

서버 컴퓨터의 작업이 끝날 때까지 기다린 후 다음 작업을 실행하는 통신
등록 요청을 하게 되면 등록 과정이 모두 완료될 때까지 기다린 후 게시글 불러오기 과정이 실행되므로 문제 없이 작업이 가능하다.

비동기 통신 코드

import React from 'react';
import axios from 'axios';
import {useState} from 'react';

export default function RestGetPage(){

   const [title, setTitle] = useState("")

   /* 비동기 */
   function onClickAsync(){
      const result = axios.get("https://koreanjson.com/posts/1")
      console.log(result)
   }
   
   return (
      <>
         <button onClick={onClickAsync}>REST-API 비동기 요청하기</button>
         <div>{title}</div>
      </>
   );
};

REST-API에서 데이터 요청과 응답을 위해 axios를 통한 비동기 통신을 사용했다.
코드는 상단에서부터 실행되며 백엔드에 데이터를 요청하고 데이터를 가져와 응답을 하는 구조이다.
위 코드는 요청된 응답을 가져와 데이터에 저장하고, 저장된 데이터를 콘솔에 나타나도록 작성한 코드이다.


해당 코드를 실행하면 콘솔창에 리턴된 Promise객체가 출력된다.

💡Promise 객체

자바스크립트에서 비동기 처리에 사용되는 객체로, 주로 서버에서 받아온 데이터를 화며네 출력하기 위해 사용하며, 데이터를 받아오기도 전에 데이터를 화면에 표시하려고 하면 오류가 발생하거나 빈 화면이 출력된다.

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과값을 반환해 준 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

동기 통신(async / await)

import React from 'react';
import axios from 'axios';
import {useState} from 'react';

export default function RestGetPage(){

	const [title, setTitle] = useState("")
    
    /* 동기 */
    
   // async function onClickSync(){    => 원래방식
   
      const onClickSync = async () => {
      const result = await axios.get("https://koreanjson.com/posts/1")
      /* console.log(result)
      console.log(result.data)
      console.log(result.data.title) */
      setTitle(result.data.title)
   }

   return (
      <>
         <button onClick={onClickSync}>REST-API 동기 요청하기</button>
         <div>{title}</div>
      </>
   );

await가 작성된 부분의 코드 실행이 완전히 완료되기 전까지는 하단의 코드로 실행이 넘어가지 않는다. 완전히 완료된 후 완성된 데이터를 받아오기 때문에 해당 코드를 실행하면 콘솔창에 출력하고자 했던 데이터가 제대로 출력된다.

호이스팅(Hoisting)

호이스팅이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.
즉, 변수의 선언과 초기화를 분리해 선언만 코드의 최상단으로 끌어올리는 것으로, 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있다.

함수(Function)의 호이스팅

myName('나')

function myName(name){
	console.log (name + '는 학생입니다')
}

함수는 코드를 실행하기 전에 함수 선언에 대한 메모리부터 할당되어 함수를 호출하는 코드를 함수 선언 앞에 배치한다. 따라서 const를 사용한 화살표형 함수 선언 방식을 통해 에러를 방지할 수 있다.

변수 선언 방식(var)의 호이스팅

console.log(num);	// 호이스팅한 var 선언으로 인해 undefined출력
var num;			// 선언
num = 6;			// 초기화

변수 선언 시 초기화를 제외한 선언만 호이스팅한다.
변수를 먼저 사용하고 그 후 선언과 초기화가 나타나면 사용하는 시점의 변수는 기본 초기화 상태인 undefined이다.
let과 const로 선언한 변수도 호이스팅 되긴 하지만, var과는 달리 undefined로 변수를 초기화 하지 않기 때문에 변수 선언 전에 먼저 사용하게 되면 오류가 발생한다.