프론트 엔드 1주 4일차 동기, 비동기 실행

1. 동기 실행과 비동기 실행

비동기 실행 : 서버 컴퓨터의 작업이 끝나는 걸 기다리지 않는 통신으로 서버에 요청이 저장될 때까지 기다리지 않고 다른 작업을 진행한다.따라서 요청들 사이에 연관이 없으면 여러 요청을 동시에 처리해 줄 수 있다. 연관이 있는 요청들을 동시에 보낼 시에는 오류가 발생하므로 이런 경우 동기 실행을 써야한다.

동기 실행 : 서버 컴퓨터의 작업이 끝날 때까지 다른 요청을 보내지 않고 작업을 정지하고 기다리는 실행 방법. 서로 연관이 있는 요청을 할 경우 오류없이 실행할 수 있다.

비동기 통신을 동기 통신으로 바꾸는 방법

async/await를 사용하면 비동기 방식을 동기 방식으로 바꾸는 것이 가능하다.

 

예시

*자바스크립트*는 기본적으로 동기처리 방식입니다! 하지만, 외부 설치프로그램은 대부분 비동기 처리를 해두어서 실행시에 비동기로 실행됩니다.

 

호이스팅

호이스팅이란 인터프리터가 변수와 함수의 메모리 공간을 선언하기 전에 미리 할당하는 것을 말한다. 즉 변수를 정의하는 것보다 코드를 사용하는 게 먼저 등장할 수 있는 것이다. 

 

함수의 호이스팅

함수는 코드 실행 전에 함수 선언에 대한 메모리부터 할당되어 함수를 호출하는 코드를 함수 선언 앞에 배치할 수 있고 이 때문에 생길 수 있는 에러는 화살표 함수 선언 방식으로 방지할 수 있습니다.

 

예시

hoistFunction()

function hoistFunction() {

console.log("호이스팅!")

}

//호이스팅!

변수(var)의 호이스팅

변수 선언 시 초기화를 제외한 선언만 호이스팅이 된다. 변수를 먼저 사용하고 그 후에 선언 및 초기화하며 사용하는 시점의 변수는 기본 초기화 상태인 undefined이고 let과 const는 변수를 초기화하지 않기 때문에 변수 선언 전에 먼저 사용하게 되면 오류가 발생하지만 var은 오류가 발생하지 않습니다. 그래서 var 사용을 삼가해야 합니다.

 

예시

console.log(num);

var num;

num = 201;

 

오늘의 코딩 (axios로 REST-API 실행,apollo-client 셋팅 및 apollo-client로 뮤테이션 실행)

알고리즘

function countLetter(str) {
let count = 0;
for (i in str){
if(str[i] === "a" || str[i] === "A"){
count++;
}
}
return count;
}

countLetter("I am from Korea")                         // 2
countLetter("A day without laughter is a day wasted.") // 6

function makeNumber(num) {
let str = '';
for (i = 1 ; i <= num ; i++){

if (i === num){
str += i; 
}else {
strplus = i+"-"
str += strplus;
}
}
return str;
}

makeNumber(12)


function makeOdd(num) {
let str = '';
for (let i = 1; i <= num; i++ ){
if( (i%2) === 1){
str += i
}
}
return str;
}


makeOdd(123)

function bigNum(str) {
let biggest = 0;
for (i in str) {
if (Number(str[i])> biggest){
biggest = Number(str[i]);
}
}
return biggest;
}

bigNum("15648351");