비동기식 JavaScript를 15분 이내에 사용 가능(콜백, 약속 및 비동기/Await 포함)

반응형

당신이 자바스크립트를 처음 배우기 시작할 때, 당신이 쓰는 첫 번째 코드는 아마도 동기화된 자바스크립트가 될 것이다. 그러나 한 번에 여러 기능을 수행해야 하는 응용 프로그램을 개발하기 시작하면 비동기 자바스크립트라는 것을 사용하게 될 것이다.

이것은 특히 백엔드에서 일부 기능을 수행해야 하는 웹 앱 작성을 시작할 때 해당됩니다. 비동기 자바스크립트는 간단히 말해서, 당신이 앱의 나머지 부분을 실행하면서 불확정 시간이 걸리는 함수를 수행할 수 있게 한다. 백엔드 서버의 응답을 기다리는 동안에도 애플리케이션의 프런트엔드를 가동하고 실행할 수 있다는 것이 이 솔루션의 주요 이점 중 하나입니다. 대신 동기식 javascript를 사용하면 해당 백엔드 서버에서 성공적으로 응답할 때까지 모든 프런트엔드 UI(사용자 인터페이스)가 중지됩니다. 비동기식 js를 사용하는 또 다른 주요 이점은 실패한 응답을 훨씬 더 원활하게 처리할 수 있다는 것입니다. 이렇게 하면 사용자에게 훨씬 더 원활한 환경을 제공할 뿐만 아니라 실패를 염두에 두고 코드를 작성할 수 있습니다.

무정형 자바스크립트에 관한 한, 그것을 성취하는 세 가지 주요한 방법이 있다. 이 세 가지 방법을 불명예스럽게 부른다.

• 콜백
• 약속들
• 비동기/대기

 

이 튜토리얼에서는 세 가지 방법에 대해 알아야 할 모든 기본 사항에 대해 알아봅니다. 이 튜토리얼을 나중에 참조할 수 있도록 즐겨찾기에 추가하는 것이 좋습니다.

업계 업데이트와 함께 모든 기사 기반 튜토리얼에 무제한으로 액세스할 수 있는 Medium 회원이 되어 이러한 튜토리얼로부터 더 많은 정보를 얻고 싶다면 아래 링크를 통해 Medium 회원이 될 수 있습니다. 아래 링크를 통해 회원가입 시, 회원비 일부도 이와 같은 튜토리얼을 추가 비용 없이 지원해 드립니다. 관심 있으신 분들을 위해, 중간 회원이 되기 위한 링크는 다음과 같습니다.

코딩 환경 설정(선택 사항)

이 튜토리얼의 모든 내용을 직접 입력하여 추가 연습을 할 수 있습니다. 자바스크립트 실행 환경에 갈 준비가 되지 않은 사람들은 코데플리를 사용하여 연습할 수 있습니다. 기본적으로 자바스크립트 코드를 실행하고 공유하는 데 상당히 일반적으로 사용되는 온라인 코딩 환경이다. 다음은 사용자의 편의를 위해 Codeply에 대한 링크입니다.

 

일단 거기에 가면 이런 화면이 나올 거예요. 화면 왼쪽 상단에 있는 "NEW PLY +"를 클릭하면 자바스크립트를 위한 새로운 코딩 환경을 만들 수 있습니다. 코드 작성 및 실행을 시작하기 위해 로그인하거나 설치할 필요가 없습니다. 이렇게 하면 전화기를 통해 이 튜토리얼을 따라가는 경우에도 이 튜토리얼의 모든 내용을 연습할 수 있습니다.

"NEW PLY+"를 클릭하면 새로운 코딩 환경이 열립니다. 우리가 할 첫 번째 일 중 하나는 "수평적"에서 "수직적"으로 관점을 바꾸는 것이다. 이렇게 하면 모든 코딩 창이 화면 왼쪽에 정렬됩니다. 화면 왼쪽 상단에 있는 다음 아이콘을 클릭하여 보기를 "수직"으로 변경할 수 있습니다.

클릭하면 다음과 같은 화면이 나타납니다.

 

다음으로 자바스크립트 콘솔을 열겠습니다. Mac에서 "명령 + 옵션 + j" 바로 가기를 사용하여 javascript 콘솔을 열 수 있습니다. Windows 장치에 있는 경우 "Control + Shift+ j"를 사용할 수 있습니다. 또는 View -> Developer -> JavaScript Console을 클릭하여 열 수도 있습니다.

어느 방법을 선택하든, 당신은 결국 자바스크립트 콘솔을 열게 될 것입니다. 자, 여러분은 다음과 같은 것을 보게 될 것입니다.

당신이 또한 알고 있듯이, 우리는 자바스크립트와 함께 HTML, CSS에 대한 코드 편집 창도 가지고 있습니다. 이 튜토리얼에서는 편집기의 자바스크립트 부분만 사용할 것이므로 나머지 두 가지는 안전하게 최소화하여 더 큰 화면을 가질 수 있습니다. HTML과 CSS는 각 창 상단의 마이너스 버튼을 클릭하여 최소화 할 수도 있고 잡고 끌어서 최소화 할 수도 있습니다.

 

이제 여러분은 다음과 같은 것을 보게 될 것입니다.

이전에 설정된 코드가 없었다면 이제 모두 설정되었습니다! 제공된 단계를 사용하여 튜토리얼과 함께 전체 코드를 작성하고 결과를 직접 볼 수도 있습니다.

이전에 이미 코딩 환경을 가지고 있었다면, 그것을 모든 업무에 사용하셔도 됩니다. 이제 더 이상 떠들지 않고 자바스크립트에서 비동기 코드를 얻는 첫 번째 방법부터 시작해보자.

1) 콜백

 

동기 콜백

콜백 함수 또는 콜백 함수는 인수로 다른 함수에 전달되는 함수이다. 이렇게 하면 점점 더 복잡해지는 작업을 모듈식으로 수행할 수 있습니다. 콜백 함수에 대해 알아야 할 첫 번째 사항 중 하나는 동기 및 비동기 작업을 모두 수행하는 데 사용할 수 있다는 것입니다. 동기식 태스크는 라인별로 평소처럼 작동합니다. 다음 코드는 콜백 함수의 예입니다.

function greet() {
      console.log("Hi there!");
}
function greetUser(callback){
      callback();
      console.log("Performing additional functionality...");
}
greetUser();

위의 코드에서, 우리는 greetUser 함수에 인수로 greet 함수를 전달했습니다. 여기서 콜백 기능은 greetUser 함수 내에서 실행할 함수를 명시적으로 결정하지 않고도 우리가 전달할 수 있는 기능을 유연하게 실행할 수 있게 해준다. 콜백 기능을 실행하는 것 외에도 greetUser 기능 내에서 다른 기능을 계속 수행할 수 있습니다. 화면의 왼쪽 상단 모서리에 있는 재생 버튼을 클릭하여 결과에 대한 코드를 실행합니다.

 

예상대로, 먼저 콜백 기능의 결과를 보고 콘솔이 "Hi there!"를 기록한 다음 greetUser 함수에 있을 수 있는 다른 기능의 결과를 확인합니다. 우리는 동기식으로 콜백 함수를 사용했을 뿐이지만, 콜백 함수는 비동기식 코드 실행을 위해서도 사용할 수 있습니다.

비동기 콜백

자바스크립트에서 일반적으로 사용되는 많은 비동기 콜백 함수들이 있다. 이들을 사용하는 주된 이유는 특정 이벤트가 발생할 때 비동기 작업을 실행하기 위함이다. 이렇게 하면 이벤트에 기반하여 코드를 실행할 수 있습니다. 버튼을 클릭하여 특정 기간이나 간격이 경과할 때까지 기다린 후 서버에 가져오기 요청을 하고 결과를 예상하는 것이 웹 개발에서 수행되는 비동기 작업에 대한 일반적인 예입니다. 아마도 이것에 대한 가장 간단한 예는 "setTimeout()" 함수일 것이다. 어떤 내용인지 아래 예를 들어 보겠습니다.

먼저, console.log 문 묶음을 작성하면 예상된 결과가 발생하고 모든 console.log 문이 순차적으로 실행되어 콘솔에 인쇄됩니다. 자바스크립트 편집 영역에 다음 코드를 작성한 후 화면 왼쪽 상단에 있는 "재생" 버튼을 클릭하면 코드가 실행됩니다.

 

console.log("First Line");
console.log("Second Line");
console.log("Third Line");

코드를 실행하면 JavaScript 콘솔 영역에 인쇄된 결과를 볼 수 있습니다.

이 예에서, 우리의 코드는 위에서 아래로 한 줄씩 순차적으로 실행되었다. javascript의 기본 동작이기 때문에 여기서는 예상하지 못한 동작은 없습니다.

 

이제 자바스크립트에서 디폴트 동작을 보았으니, setTimeout 함수를 이용하여 비동기 자바스크립트를 도입하겠습니다. 다음과 같은 코드를 사용하여 이를 달성할 수 있습니다.

console.log("First Line");
setTimeout(()=>{console.log("Async Second Line")} ,2000);
console.log("Third Line");

여기서 setTimeout 함수는 다른 많은 비동기 콜백 함수와 마찬가지로 특정한 것이 발생할 것으로 예상하며, 특정 기준이 발생할 때만 주어진 함수를 실행합니다. 이 경우 setTimeout 함수에 전달하는 함수는 2000밀리초(2초)가 경과할 때 실행됩니다. 이것은 또한 우리가 코드를 실행할 때 다음과 같은 현상이 발생하는 이유이기도 하다.

우리의 코드가 실행될 때, 첫 번째 줄은 콘솔 로그로 쓰여지고 "첫 번째 줄"은 실행된다. 두 번째 라인이 실행되면, 2초의 타이머가 시작되고, 우리가 setTimeout 함수에 전달하는 함수는 미리 정해진 시간(2초)이 경과할 때까지 실행을 위해 보류됩니다. 그러나 그 동안 나머지 코드는 주어진 순서대로 계속 실행 중입니다. 그렇기 때문에 타이머를 2초 정도 시작하면 세 번째 줄이 읽히고 실행됩니다. 첫 번째 라인과 세 번째 라인의 출력이 거의 즉시 나오지만 아식스 세컨드 라인의 출력은 2초 지연 후 콘솔에 출력되는 이유이기도 하다.

 

setTimeout 함수를 사용하면서 우리가 사용한 구문을 잘 모르신다면, "javascript의 화살표 함수"를 확인해보시길 강력히 추천합니다. 화살표 기능은 ES6 기능으로 야생에서 많이 사용됩니다. 화살표 함수는 기본적으로 이름 없는 함수를 가능한 가장 간단하고 최단한 방법으로 쓸 수 있게 해준다. 화살표 함수를 작성하는 방법은 여러 가지가 있지만 일반적으로 다음과 같은 형식을 취한다.

(input) => {functionBody}

우리가 사용한 예에서는 입력이 없어서 처음 괄호는 비워뒀고, 곱슬곱슬한 괄호 안은 함수 본문을 쓰는 곳이다. 문장이 하나뿐이었기 때문에, 우리는 화살표 기능의 본체 안에 console.log 문구만 작성했습니다.

높은 수준에서 먼저 setTimeout 함수에 첫 번째 인수로 실행할 함수를 제공하고, 두 번째 인수로 경과해야 하는 밀리초 수를 제공했다. 이러한 방식으로 콜백 함수를 사용하여 비동기 동작을 달성했다. 다음으로, 우리는 자바스크립트에서 약속과 그것이 제공하는 주요 이점을 볼 것이다.

2) 약속

 

자바스크립트에서의 약속은 현실에서의 약속과 같습니다. 약속이 이루어졌을 때, 그 약속의 주된 목적은 성공적으로 이행되는 것이지만, 모든 약속은 "보류"라는 상태에서 시작됩니다. 약속이 성공적으로 "이행되면" 해결되고 승인 코드가 실행됩니다. 약속의 결과가 실패할 경우, "거부됨" 상태의 시나리오를 처리하는 코드를 정의한다.

또한 Promits를 통해 어떠한 경우에도 실행될 기능 집합을 정의할 수 있습니다. 이 마지막 부분은 선택 사항이며 약속 종료 시 실행됩니다. 이제 몇 가지 실제 코드 예제를 통해 약속에 대해 알아보겠습니다.

먼저, 우리는 새로운 코드를 작성하기 위해 자바스크립트 코드 창을 지우거나, 모든 코드 예제를 별도의 탭에 보관하기 위해 자유롭게 새로운 코데플리에 작성할 수 있다.

코딩 영역이 명확해지면 다음 코드를 작성하겠습니다.

// Create a promise
const somePromise = new Promise((resolve, reject)=>{
      const requestFulfilled = true;
      if (requestFulfilled){
                resolve("ExpectedValue");
      } else {
                reject("Something went wrong.");
      }
});
// Consume a promise
somePromise.then((value)=>{
      console.log("Returned result successfully: " + value);
})
.catch((error)=>{
      console.log(error)

})
.finally(()=>{
      console.log("End of promise.");

})

 

처음에는 많은 암호처럼 보일지 모르지만, 그것을 분해하자.

약속이 있는 행동에는 크게 약속을 만드는 행동과 약속을 소비하는 행동이 있습니다.

첫 번째 부분에서 우리는 약속을 만들고, 코드의 두 번째 부분에서 우리는 그 약속을 소비한다. 우리는 새로운 Promise의 인스턴스를 만드는 것으로 시작하고, Promise 내에서 일어날 일을 정의하는 화살표 함수를 전달합니다. 우리는 기본적으로 두 가지 시나리오를 처리합니다. 첫 번째는 "해결"이고 두 번째는 "거부"입니다. 만약 어떤 일이 성공적으로 수행될 수 있다면, 우리는 약속을 해결하고 최종 값을 통과할 것입니다. 이 작업은 웹 서버에서 일부 파일을 가져오거나 사용자가 이미지를 업로드할 때까지 기다리는 등 우리가 예상하는 모든 작업이 될 수 있습니다. 우리는 이러한 것들을 완성하는 데 시간이 좀 걸릴 수 있고 상당한 실패 가능성이 있다는 것을 알고 있는데, 우리는 이에 대해 계획을 세워야 합니다. 위의 코드 예제에서는 requestFulfilled라는 변수로 이 조건을 표현했습니다. 만약 그 경우가 사실이라면, 우리는 약속을 해결하고 결과값을 전달합니다. 이 기대값은 기본적으로 우리가 요청한 결과로 얻은 데이터입니다. 그러나 당면한 작업이 실패하면 "뭔가 잘못되었습니다"라는 오류 메시지가 표시됩니다. 이제 약속을 소비하기 위한 코드를 살펴보겠습니다.

먼저 약속을 받고 그 끝에 ".()"를 붙입니다. 그리고 그 안에서 우리는 약속이 성공할 경우 취할 일련의 행동을 정의한다. 이 경우 실제 반환된 결과와 함께 콘솔 로깅 "Return result successfully"입니다. 이 코드가 작동하는 것을 보려면 코드를 실행합니다.

 

requestFulfilled = true로 설정했으므로 .thenness 메소드가 실행되어 이 요청으로부터 예상값과 함께 성공 메시지가 표시됩니다. "End of Promise"라는 또 다른 메시지가 있는데, 그 내용은 나중에 튜토리얼에서 다루도록 하겠습니다.

다른 시나리오를 확인하기 위해 requestFulfilled의 값을 "false"로 변경하고 코드를 다시 실행한다.

// Create a promise
const somePromise = new Promise((resolve, reject)=>{
      const requestFulfilled = false;
      if (requestFulfilled){
                resolve("ExpectedValue");
      } else {
                reject("Something went wrong.");
      }
});
// Consume a promise
somePromise.then((value)=>{
      console.log("Returned result successfully: " + value);
})
.catch((error)=>{
      console.log(error)

})
.finally(()=>{
      console.log("End of promise.");

})

 

이 경우, 우리는 먼저 "뭔가 잘못되었다"라는 값을 얻었고 그 다음에 "약속 끝"이라는 값을 얻었습니다. 그 이유는 우리의 requestFulfilled가 false로 설정되어 있기 때문에 우리의 요청이 잘못된 것처럼 약속 생성 부분에서 else 블록이 실행되고, 거부 안에 있는 값이 약속 소비자에게 전달되기 때문입니다. 오류를 "캐치"하기 위해 ".the()" 메소드 끝에 ".catch()" 블록을 추가합니다. 그러므로 요청이 실패하면 .then()에서 코드를 실행하는 대신 .catch()로 오류를 잡아내고 이제 오류를 처리할 수 있다. 이 경우 "뭔가 잘못되었습니다."라는 오류 메시지가 콘솔에 기록됩니다.

이 부분은 선택 사항이지만, 만약 우리가 어느 경우든 무언가를 수행하고자 한다면, 우리는 약속의 마지막에 ".finally()" 방법을 사용할 수 있습니다. 여기서 제공하는 코드는 요청의 이행 여부와 상관없이 실행됩니다. 위의 코드 예제에서는 "End of promise"라는 메시지를 콘솔 로그로 기록합니다.

필요에 따라 요청 종료 시 여러 작업을 수행해야 할 수도 있습니다. 이 경우 위의 코드에서 약속에 추가된 것처럼 여러 ".then()" 블록을 각 블록의 끝에 부착할 수 있습니다.

somePromise.then().then().then().catch().finally()

ES2015 또는 ES6와 함께 자바스크립트에 비동기 기능을 더 잘 다루기 위해 도입되었지만, ES2017과 함께 비동기 기능을 처리하는 또 다른 방법이 자바스크립트에서 훨씬 더 나은 비동기 기능을 다루기 위해 도입되었다. 이 새로운 방식을 흔히 "Async/Await"라고 부른다. 그리고 이것은 커뮤니티에서 널리 채택되어 왔고 많은 개발자들에게 비동기 자바스크립트를 다루는 방법이 되어왔다. 그렇다면 Async/Await이 무엇인지 살펴보겠습니다.

 

3) 비동기/대기

현재 비동기/대기 기능은 javascript에서 비동기 기능을 처리하는 가장 명확하고 간결한 방법을 제공합니다. 다른 유형에 대해 배우면 조건에 따라 구현해야 할 경우(예를 들어, ES2017을 사용자 환경에서 사용할 수 없는 경우) 언어 내에서 사용할 수 있는 도구를 알고 있는 더 나은 개발자가 될 수 있을 뿐만 아니라 실제로 도움이 될 수 있습니다. 비동기 /await 위에 있는 다른 유형을 알면 일부 레거시 코드를 업데이트하고 읽기 쉽도록 비동기 /await로 변환할 수도 있습니다.

일부 비동기 기능을 수행하고자 할 때마다 비동기식이 대기하기 때문에, 우리는 함수 정의의 시작 부분에 키워드 "async"를 추가한다. 그리고 답을 기다리고 싶은 모든 작업에 대해, 우리는 그 함수의 시작 부분에 "wait" 키워드를 추가합니다. 몇 가지 코드 예제와 함께 봅시다.

function firstTask(){
      console.log("First task successfully complete.");
}
function secondTask(){
      console.log("Second task successfully complete.");
}
async function performAsyncFunctions(){
      const firstRequest = await firstTask();
      const secondRequest = await secondTask();
      console.log("All tasks complete.");
}
performAsyncFunctions();

 

대기 중인 비동기 기능을 확인하려면 수행해야 하는 여러 비동기 함수를 정의하는 데 도움이 됩니다. 이 예에서는 첫 번째 태스크와 두 번째 태스크라고 불렀는데, 이러한 태스크는 사용자나 웹 서버로부터 데이터를 가져오는 것과 같이 수행할 수 있는 비동기 작업이나 알 수 없는 시간 동안 기다려야 하는 다른 작업이 될 수 있습니다. 함수 키워드 바로 앞에 이러한 작업을 처리하는 주요 함수에 "async" 키워드를 추가했고 함수 호출마다 호출하기 전에 "await" 키워드를 추가했다. 이제 이 코드를 실행하여 작동 상태를 확인합니다.

콘솔 로그에서도 볼 수 있듯이, 예상된 순서대로 가능한 모든 비동기 작업을 수행했습니다. 이러한 작업 끝에 "모든 작업 완료" 로그를 콘솔할 수 있었습니다. 이러한 방식으로 개별 함수에 알 수 없는 시간이 걸리더라도 웹 사이트의 UI와 같은 다른 프로세스를 차단하지 않고 비동기적으로 실행할 수 있습니다.

비동기 /await는 Promise가 할 수 있는 모든 것을 할 수 있지만, 보다 깔끔하고 전반적으로 더 우아한 방식으로 비동기 /await가 많은 개발자들이 비동기 자바스크립트 기능을 처리하는 데 있어 유리한 이유이기도 합니다.

이 문서에서는 작업 코드 예제와 함께 자바스크립트에서 비동기 기능을 처리하는 3가지 방법을 살펴보았습니다. 이 실습 튜토리얼을 통해 유익한 정보를 얻으시길 바랍니다. 이런 튜토리얼이 더 필요하시면 저를 따라오시면 됩니다. 여기 있는 모든 튜토리얼에 대한 모든 액세스 권한을 가지려면 Medium 회원이 될 수 있습니다. 아래 링크를 통해 회원가입 시, 회원비 일부도 이와 같은 튜토리얼을 추가 비용 없이 지원해 드립니다. 관심 있으신 분들을 위해, 중간 회원이 되기 위한 링크는 다음과 같습니다.

 

이 튜토리얼에 대해 궁금한 점이 있으시면 언제든지 연락하시거나 댓글로 남겨주시면 최대한 빨리 답변을 드리도록 하겠습니다. 당신이 이 기사에서 어떤 가치를 얻기를 바라며 다음 기사에서 뵙겠습니다. 시청을 통해 더 잘 알게 되면 이 튜토리얼을 YouTube에서도 비디오 형식으로 볼 수 있습니다.