프론트엔드 개발자가 되기위한 여정-4

이정우·2022년 9월 1일
0

frontend-bootcamp

목록 보기
4/60

---4일차---

4일차가 되었습니다!
오늘도 힘차게 달려볼까요~~

오늘 할것은 ! 동기와 비동기방식!에 대해서 알아볼것입니다!

동기 VS 비동기

저번시간과 같이 컴퓨터 2대로 시작해 보겠습니다 .

잠깐 복습을 하고 가겠습니다.
프론트엔드 컴퓨터와 백엔드 컴퓨터가 있습니다
프론트엔드 컴퓨터가 HTTP프로토콜을 사용하면서 req를 백엔드 컴퓨터에 줍니다
그러면 백엔드 컴퓨터는 데이터베이스에 들어가기전에 검증을 하게되죠
이때 저장이 잘 되게 되면 res를 프론트엔드 컴퓨터에 주게 됩니다

자! 여기서
오늘 주제에 대해서 이야기를 해볼건데요

서버와의 통신을 하면서 이전까지는 응답이 올때까지 0.1초이던지 0.01 초이던지 등록하고 통신하는데 시간이 걸릴 것입니다
이렇게 하면 이 중간 통신시간중 어떠한 요청을 하더라도 응답하지 않겠죠

이러한 개념이 동기입니다!
쉽게 말해

동기란

어떠한 수행과정을 전부 끝낸이후 다음작업을 하는것 이라고 할수 있겠습니다

그럼 이런 의문이 들 것입니다
비동기는 언제 사용하는 걸까??

비동기란

비동기는 동시에 여러 일을 할 떄 사용 합니다

무슨말이냐

동기가 한가지의 수행작업이 끝난 이후 다음작업을 수행한다면
비동기의 경우는 한가지의 수행작업이 끝날때 까지 기다리지 않는것이겠죠

서로 영향을 미치지 않는 별개의 영역을 동시에 처리할수 있다는 겁니다
쉽게 저희 일상을 예시로 들어보겠습니다

예를들어
저희가 게임을 다운받는다고 가정을 해봅시다
게임을 다운받으며 카톡이 온다면 카톡을 확인하겠죠??
이런 방식을 비동기 방식이라고도 볼 수 있다는 거죠
조금더 이해가 쉬워졌나요??

동기와 비동기의 개념에 대한 설명은 이정도로 넘어가고
그 다음 과정을 한번 봐보겠습니다
프론트 엔드 개발자가 되기위해 저희는
javascript를 사용 하게 됩니다

그런데 기본적으로 javascript는 동기적으로 작동을 합니다
하지만 이러한 문제점을 해결하기 위해
axios등 외부 설치프로그램 곧 라이브러리를 사용해 비동기적으로도 작동을 가능하게 할수있습니다.

다음으로 볼 것은 async와 await입니다

async & await

async와 await란 뭘까요??

async 음....비동기화 인가??
await 음...기다리라는데 뭐를??

자 이런 의문들이 들 수 있는데 오늘 볼것은

정의와 간단한 사용법에 대해서 포스팅을 해 보겠습니다

먼저
async를 볼 수 있도록 하겠습니다
async란 단어 그대로 ascychronize의 줄임말 로써

비동기화를 적용하는데 사용하는 것 입니다

그럼 이 비동기화는 어떻게 사용하는 것일까요??

저희가 기억해야할것!
async는 항상 함수 앞에 붙는다는것 입니다
즉 이함수를 비동기화 하겠다 라는 의미인거죠

쉽게말해 async를 사용하게 되면 promise 객체를 반환하게 되는데
이 promise객체란 값을 주겠다고 예정 곧 약속을 해놓은 상황이라고도 할 수 있겠습니다

이 async를 사용하게 된다면 프로미스 값이 아닌 객체라도 프로미스 객체로도 변환할수 있다니 얼마나 좋나요!

그럼 다음으로 볼 것은
await 입니다!

await 말 그대로 기다리는것입니다
어떤것을요??
앞서 async를 사용하면 promise객체가 온다고 했죠??
이 promise객체가 처리가 되어 값을 받아 올때까지 기다리 라는 의미입니다

그렇다면
이렇게 한 번 생각해 볼수가 있겠죠??

async와 await를 같이 사용할수 있지 않을까??

맞습니다!
async와 await 가 주로 쌍을 이루어 사용이 되며
async는 프로미스 객체를 반환하고
await는 이 프로미스 객체가 처리가 될때까지 기다린다는거죠!
참 쉽죠!!

오늘은 여기까지 포스팅하고 내일또 뵈요!

profile
주니어 프론트엔드 개발자

0개의 댓글