[새싹x코딩온] 웹 개발자 부트캠프 과정 5주차 회고 | node.js readFile()과 readFileSync()(비동기와 동기의 차이)

 

1. 들어가며

• Node.js의 fs 모듈에서 사용하는 메서드인 readFile() 과 readFileSync() 를 통해 비동기와 동기의 차이에 대해 알아보기

2. 비동기와 동기

Node.js 에서 제공되는 모듈 중 하나인 fs 모듈은 파일을 관리할 때 사용하는 모듈이다.

위 모듈에서 사용하는 readFile()과 readFileSync()는 둘 다 파일을 읽어오는 메서드다.

이 둘의 차이는 readFile()은 비동기식으로 파일을 읽어오고, readFileSync()는 동기식으로 파일을 불러온다는 것이다.

이 둘의 차이를 확인하면서 비동기와 동기의 차이에 대해 알아보고자 한다.

 

readFile() 로 파일 읽기

// fs 모듈
const fs = require('fs')

console.log('abc');
fs.readFile('./test.txt', 'utf-8', function(err, data){
    console.log(data);

})
console.log('ㄱㄴㄷ');

위의 코드들이 실행되는 순서를 알고자 readFile 메서드 위 아래로 로그를 찍어보았다.

위의 코드를 실행한 결과는 아래와 같다. 

readFile() 메서드를  console.log('ㄱㄴㄷ')보다 먼저 호출했지만 맨마지막으로 코드가 실행되었음을 확인할 수 있다.

 

readFileSync() 로 파일 읽기

// fs 모듈
const fs = require('fs')

console.log('abc');
const data = fs.readFileSync('./test.txt', 'utf-8')
console.log(data);
console.log('ㄱㄴㄷ');

readFileSync()도 실행되는 순서를 알고자 위아래로 로그를 찍었다.

위의 코드를 실행한 결과는 아래와 같다. 

코드가 작성된 순서대로 실행된 것을 확인할 수 있다.

readFile()와 readFileSync()의 차이

앞에서 언급했듯이 readFile() 는 비동기식, readFileSync()는 동기식으로 파일을 읽어들인다.

readFile()은 비동기식으로 실행되기 때문에 메서드가 실행되면서

세번째 파라미터로 전달된 콜백함수를 읽어들이는 작업이 끝났을때 호출된다.

따라서 console.log()보다 먼저 코드가 작성됐음에도 호출은 나중에 된 것이다.

 

readFileSync() 는 동기식으로 실행이 되어서 입력된 순서대로 코드가 실행된다.

동기식으로 작동하기 때문에 readFileSync()의 첫번째 파라미터로 받은 파일을 다 읽을 때까지

뒤에 작성된 console.log() 는 실행되지 않는다.

 

둘은 함수의 사용방법에도 차이가 있다. readFileSync()는 일반적인 함수처럼 반환값을 반환하는 반면, 

readFile()은 반환값이 없고, 실행이 끝났을 때 콜백함수에 반환값을 인자로 받아서 실행한다.

// readFile()의 메서드 형태
fs.readFile(filename, encoding, callback)

// readFileSync()의 메서드 형태
fs.readFileSync(filename, encoding)

readFile()은 콜백함수를 인자로 쓰기 때문에 에러가 났을 경우의 예외처리를 해줄 수 있다.

콜백함수에서 두개의 파라미터 err와 data를 전달받아서 오류가 발생했는지 확인하고 오류가 발생한것이

아니면 제대로 실행되었는지 알 수 있다.

오류가 발생하면 err에 오류 데이터가 들어가고 그렇지 않으면 err 변수가 null 값이 된다.

그래서 보통 if문을 사용해서 err가 null 값인지 체크하는 코드를 사용하여 문제가 없으면 파일 읽기에 

성공한 것으로 처리한다.

 

그렇다면 여기서 의문 왜 굳이 비동기식으로 처리하는 메서드를 만들어서 사용하게 했을까?

 

 

비동기와 동기

이를 알기 위해서는 자바스크립트 엔진이 어떻게 동작하는지 알아야 한다.

자바스크립트 엔진은 싱글 스레드 방식으로 동작한다.

싱글 스레드 방식은 한 번의 하나의 태스트만 실행할 수 있어서 처리에 시간이 걸리는 태스크를 실행하면

블로킹(작업중단)이 발생한다.

즉 처리에 시간이 걸리는 태스크 뒤에 작성된 코드들은 그 태스크가 다 처리될 때까지 대기를 해야한다.

 

 

이처럼 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식을 동기 처리라고 한다.

반면 비동기 처리는 현재 실행중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행한다.

대표적인 비동기 함수인 setTimeout() 써보자.

setTimeout() 은 콜백함수와 지연시간을 인자로 받는 타이머함수다.

지연시간이 지나면 콜백함수를 실행한다.

function one() {
    console.log(1);
}

function two() {
    console.log(2);
}

function three() {
    console.log(3);
}

one()
two()
three()

위와 같은 코드가 있을 때 동기적으로 처리하면 아래의 실행결과와 같이 순서대로 나온다.

 

 

 

function one() {
    console.log(1);
}

function two() {
    console.log(2);
}

function three() {
    console.log(3);
}

one()
setTimeout(two, 500) // 0.5초 뒤에 함수 실행
three()

위와 같이 setTimeout()을 써주면 2번째로 코드를 호출했음에도 비동기적으로 처리하기 때문에 지연시간이 지난 뒤 호출된 것을 확인할 수 있다.

 

코드를 동기 처리 방식으로만 작성한다면 실행 순서가 보장은 되겠지만 때로는 너무 복잡해서 시간이 걸리는 연산이 걸리면 그 뒤에 처리되어야 하는 코드들이 블로킹이 된다.

이런 단점을 보완하기 위해 비동기식으로 처리하는 메서드도 같이 사용하는 것이다.

 

Node.js 는 하나의 요청 처리가 끝날 때까지 기다리지 않고 다른 요청을 동시에 처리할 수 있는 

비동기 입출력(논블로킹 입출력, Non-Blocking IO) 방식을 적용해서 만들어진 개발 도구다.

만약 동기 입출력 방식으로 사용해서 파일을 읽어올때까지 아무런 작업을 못하게 된다면 대기 시간이 너무 길어져

속도가 느려지는 문제가 생긴다.

이것을 비동기 방식으로 바꾸면 파일을 읽어 들일 때 대기하는 시간이 없어진다.

파일 읽기 요청을 한 후 대기하지 않고 다른 작업을 진행해서 더 빠른 속도로 실행을 할 수 있다.

 

3. 마치며

비동기 방식에 대해서 약간 애매하게 알고 있는 것 같아서 이번 기회에 정리를 해보았다.

순서대로 처리가 되면 개발자 입장에서 예측이 가능하므로 편할 것 같지만

사용자 입장에서는 그것이 다 처리될 때까지 대기를 해야하니 불편할 것 같다.

동기 처리와 비동기 처리에 대해서 잘 숙지하고 적절한 상황에 알맞게 써야 겠다.

 

4. Reference

1. 코딩온 강의 자료

 

2. Node.js 프로그래밍

https://product.kyobobook.co.kr/detail/S000001900875

Do it! Node.js 프로그래밍 | 정재곤 - 교보문고

 

 

3. 모던 자바스크립트 Deep Dive

http://product.kyobobook.co.kr/detail/S000001766445?LINK=NVB&NaPm=ct%3Dlwt20us8%7Cci%3D3eeae87413d188962c2189bfc03af972cec288fd%7Ctr%3Dboksl1%7Csn%3D5342564%7Chk%3D0a86971807241e21311b2f82ad997d61e4c24ab4

 

4. https://sirius7.tistory.com/44

[Node.js] 4. 동기 / 비동기

5. https://balmostory.tistory.com/33

nodejs readFile과 readFileSync의 차이(비동기와 동기의 차이)

 

6. https://velog.io/@gil0127/%EC%8B%B1%EA%B8%80%EC%8A%A4%EB%A0%88%EB%93%9CSingle-thread-vs-%EB%A9%80%ED%8B%B0%EC%8A%A4%EB%A0%88%EB%93%9C-Multi-thread-t5gv4udj

싱글스레드(Single thread) vs 멀티스레드 (Multi thread)

 

7. https://poiemaweb.com/js-async

Asynchronous processing model | PoiemaWeb