이진욱의코딩

(Node.js) 동기와 비동기 그리고 콜백_callback에 대해서 알아봅시다. 본문

JS

(Node.js) 동기와 비동기 그리고 콜백_callback에 대해서 알아봅시다.

Crucifi 2019. 10. 30. 23:14

이번 시간에는 동기와 비동기 그리고 콜백에 대해서 알아보도록 하겠습니다.

 

우선 동기와 비동기에 대해 알아보겠습니다.

 

Node.js에서 매우 중요한 특징인 비동기 처리방식을 살펴보겠습니다. 이번 내용은 Node.js의 실행 순서를 파악하는 것이 목적입니다.

 

syntax라는 폴더안에 sync.js와 sample.txt 파일을 만들겠습니다.

 

이런식으로여 코드는 밑에 적어드리겠습니다.

 

먼저 fs라는 모듈을 불러와서 fs라는 변수에 넣도록 하겠습니다.

 

var fs = require('fs');

 

그리고 sample.txt라는 파일을 만들어서 텍스트를 넣은상태로 저장합니다.

내용은 apple이라고만 적어두겠습니다.

 

그리고 filesync 부터 해보도록 하겠습니다.

외부에서 불러들일 생각이기 때문에 외부 파일의 위치를 적어주고 utf-8을 적어줍시다.

 

코드입니다.

 

var fs = require('fs');

// readFileSync

console.log('samsung');
var result = fs.readFileSync('C:/Users/이진욱/Desktop/web2-nodejs/syntax/sample.txt', 'utf8');
console.log(result);
console.log('lg');

이렇게하면 어떻게 나올까요?

 

 

이렇게 차례대로 출력되는 것을 볼 수 있습니다.

 

여기서 apple은 sample.txt안에 있는 것이 출력되었습니다.

 

이어서 이번에는 sync가 없는것을 해보겠습니다. sync가 있으면 동기적인 방식으로 처리하고, 없으면 비동기적으로 처리를 합니다. 

 

그 말은 node.js가 없는 것을 더 선호한다고 볼 수 있다.(비동기적으로 처리하는 것을 선호함)

 

코드를 보면 

fs.readFileSync('C:/Users/이진욱/Desktop/web2-nodejs/syntax/sample.txt', 'utf8', '여기');

3번째 '여기'라는 자리에 콜백이 오는 것이라고 적혀있습니다.(공식적으로)

 

console.log('samsung');
 fs.readFile('C:/Users/이진욱/Desktop/web2-nodejs/syntax/sample.txt', 'utf8', function(err, result){
  console.log(result);
});
console.log('lg');

 

저는 이렇게 3번째자리의 인수를 함수로 입력을 했습니다. 이렇게 되면  Node.js가 'C:/Users/이진욱/Desktop/web2-nodejs/syntax/sample.txt'를 읽는 작업이 끝나면 인자로 준 function(err, result)에서 첫 번째 인자에는 err가 있으면 err을 제공하고 두 번째 파라미터에는 파일의 내용을 인자로써 공급해 주도록 약속되어있기 때문에 결과를 한번 보도록 하겠습니다.

 

이렇게 코드를 입력하고 실행을 시키면

 

위에서의 결과는 순차적으로 실행이 되어서 값이 나왔지만 이번결과에서는 apple과 lg의 값이 서로 바뀐 것을 볼 수 있습니다.

덧붙쳐서 코드에 대해 설명을 드리자면

 

"node.js님 님이 가지고 있는 readfile이라는 기능을 통해서 내가 파일을 하나 불러올게 but 시간이 많이 걸리니까 작업이 끝난 뒤에 내가 너한테 전달한 세 번째 인자에 있는 것을 실행해줘"라는 뜻입니다. 그래서 samsung이 나오고 그다음에 마지막에 있는 lg가 나오고 마지막으로 function에 있는 apple을 불러왔습니다.

 

이것이 동기와 비동기입니다.

 

내용이 좀 어렵습니다. 그래서 쉬운 예시를 하나 들려드리겠습니다.

 

인터넷 사용환경에서 예를 들어드리자면,
유튜브 영상이나 웹페이지가 로딩되는 동안 로딩 표시가 되는 걸 보신 적이 있으시죠?
만약 이걸 동기방식으로 프로그래밍 했으면 어떻게 될까요?

<예상했던 결과>
버튼클릭 -> 로딩 시작 및 로딩 이미지 표시 -> 로딩이 완료되면 로딩 이미지가 사라지고 로딩된 결과 표시
<동기방식으로 프로그래밍 시 나타날 수 있는 잘못된 결과>
1. 버튼클릭 -> '로딩 중' 이미지 표시 -> '로딩 중' 이미지가 사라지고 로딩하는 동안 아무런 변화가 없음 -> 로딩된 결과가 보임
2. 버튼 클릭 -> 로딩하는 동안 아무런 변화가 없음 -> 로딩된 결과가 보임 -> 로딩된 결과 위에 '로딩 중' 이미지가 표시 되거나 이미 결과가 로딩되었기 때문에 '로딩중' 이미지 표시되지 않음

위의 예시를 보시면 비동기 방식의 필요성이 이해가 되실까요? (초보인 제 실력에서 생각해본 극단적인 설명입니다.)

 

이제 콜백에 대해서 알아보도록 합시다.

 

 

§콜백

 

우선 앞에서 마지막으로 썼던 코드를 봅시다.

 

console.log('samsung');
 fs.readFile('C:/Users/이진욱/Desktop/web2-nodejs/syntax/sample.txt', 'utf8', function(err, result){
  console.log(result);
});
console.log('lg');

말 그대로 콜백은 마지막에 실행시켜라 정도로만 이해하면 될 것 같습니다.

 

코드를 먼저 보도록 하겠습니다.

 

var a = function(){
  console.log('avvvv');
}

function slowfunc(callback){
  callback();
}
slowfunc(a);

이 코드에서 만약 상당히 오래 걸리는 slowfunc라는 함수가 있다고 가정을 하면 이 함수의 기능이 실행된 다음에 

이 기능이 실행된 곳에 함수의 실행이 끝났으니 다음일을 해!!라고 하고 싶다면 callback을 받으면 됩니다.

 

그리고 callback을 실행시키면 됩니다.

 

결론적으로 slowfunc(a);라는 오래 걸리는 함수를 실행하면 callback이라는 파라미터는 a가 가리키는

 

function(){
  console.log('avvvv');
}

이 함수를 갖게 됩니다. 그리고 callback();을 호출하면 

 

  console.log('avvvv');

이 코드가 실행이 됩니다.

 

그러므로

 

이렇게 출력됩니다.

 

여기까지가 오늘 제가 공부한 내용입니다.

 

되게 어렵네요 저번에 한번 듣고 이번에 한 번 더 해보는 것인데도 불구하고

상당히 어렵습니다....