서두

이번에 만드는 토이 프로젝트에서 로그인 처리 부분이 잘 해결되지 않고 있다. 아직도 해결하지 못하고 있지만 그 원인은 명확하게 알 수 있게 됐다. 원인은 내가 비동기를 전혀 이해하고 있지 않은 상태에서 코드를 짜려고 하니 전혀 원하는대로 이루어지지 않고 있기 때문이다. 그래서 비동기를 이해하고 공부한 부분을 적어보려 한다.

비동기란?

비동기란 동시에 일이 일어나지 않는다는 의미이다. 실시간이라는 의미는 아니다. 그래서 사용자의 요청을 그 자리에서 바로 처리하지 않아도 된다. 이는 작업간의 전환을 자유롭게 해주어 개발자가 작업을 어떻게 분배하느냐에 따라 효율성이 다를 수 있다.

나는 '~하면서~한다.' 라고 이해했다.

예시

이미지

사진을 통해 예시를 들어보자

이미지 출처: https://simju9397.tistory.com/45

위의 예시가 비동기의 예를 잘 들어준다. 요청은 요청대로 받고 결과는 결과대로 처리할 수 있게 해준다. 이는 유저가 많은 웹 사이트에서 유용하며 Javascript가 왜 비동기를 지향했는지 알 수 있다.

코드

이번에는 비동기 코드를 통해 예시를 들어보려 한다.

출처: https://elvanov.com/2682
(도움을 주셔서 감사합니다.)

코드는 파일을 읽고 출력하는 코드이다. 우선 동기 버전으로 작성한 코드다. 말 그대로 한줄 한줄 쓰면 된다.

const fs = require('fs'); // 파일 모듈 가져오기

const data = fs.readFileSync('/etc/hosts'); //파일 읽기

console.log(data.toString()); // 파일 출력하기

console.log('script end');

이번에는 비동기 버전으로 작성한 코드다. 비동기 버전으로 작성했다는 말은 파일을 읽으면서 출력한다는 의미이다.

const fs = require('fs'); // 파일 모듈 가져오기

fs.readFile('/etc/hosts', (err, data) => {
  console.log(data.toString());
}); // 파일 읽으면서 출력. (콜백함수 사용)

console.log('script end');

readFile함수는 인자로 또 다른 함수를 갖고 있다. 이를 콜백함수라고 한다. 여기서 콜백함수는 파일읽기가 끝난 후 실행할 함수를 지정하면 된다는 의미다. 하지만 fs.readFile을 호출했다고 해서 곧바로 출력되는 것이 아니라 script end가 출력된 후에 출력된다. 이는 싱글 스레드이기 때문인데 이는 다음 번에 자세히 다룰 것이다.

정리하기

프로젝트를 하면서 마주한 문제를 해결하기 위해 비동기를 이해했다. 아직도 100% 이해하지는 못했다. 하지만 비동기에 대한 그림을 그릴 수는 있게 되었다. 동시는 아니지만 ~하면서 ~하는 느낌을 간직하면 될 것 같다. 이번에 배운 것을 토대로 프로젝트의 문제가 해결됐으면 좋겠다.

공부의 도움을 주신 분들 출처
1. https://velog.io/@alicia-mkkim/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0%EB%9E%80
2. https://elvanov.com/2682
감사합니다.