동기와 비동기_1

오늘은 동기와 비동기에 대해 공부했다.

 

예전 직장에 다닐 때 성능 개선을 위해 비동기 작업에 대해 공부 했던 적이 있었다. 

당시에 자사 프로그램이 동기적으로 작동해서 성능 부분에서 문제가 있었기 때문이다.

그래서 개념 공부를 하고 코드 작업을 시작하려고 했는데...!!

코드를 확인한 결과 다른 팀의 선작업이 필요한 상황이었다.

아쉽게도 내가 퇴사하기 전까지 다른 팀이 작업해주지 못해서 아쉽게도 성능 개선을 끝내지 못하고 나왔던 기억이 있다.

 

히히.. 그렇게 시간이 지나고 프로젝트를 하게 되었는데 짧은 기간 냉 기능을 구현해야하다보니 성능면에서 아쉬운 부분이 많았다.

어떻게 하면 성능 개선을 할 수 있을지 찾아보다가 비동기 처리를 해보기로 결정했다.

 

우선 개념적인 부분을 다시 정리해봤다.

---

동기

- JS는 코드가 작성된 순서대로 작업을 처리

- 이전 작업이 진행중인 경우 다음 작업을 수행하지 않음

 

동기 방식의 문제점

- 이전 작업이 완료되지 않으면 다음 작업이 실행되지 않음 -> 성능에 영향을 줄 수 있음

-> 이를 해결 하기 위해서는 멀티 스레드 방식을 적용 시키면 되지만 JS는 싱글 스레드 방식으로 작동

 

비동기

- 먼저 작성된 코드의 결과를 기다리지 않고 다음 코드를 실행

 

JS Engine

동기 실행 방식

- Heap(메모리 할당)과 Call Stack(코드 실행)으로 구성

 

1. Call Stack에 Main Context가 쌓임

2. 선언한 함수가 순서에 맞게 Call Stack에 쌓임

3. 위에서부터 하나씩 빠짐 (후입 선출)

4. Main Context가 Call Stack에서 빠져나감으로써 실행 종료

 

- JS는 Call Stack(코드 실행)이 하나라서 싱글 스레드 방식이라고 하는 것!

 

비동기 실행 방식

- Heap, Call Stack, Web APIs, Callback Queue으로 구성

 

1. Call Stack에 Main Context가 쌓임

2. 선언한 함수가 순서에 맞게 Call Stack에 쌓임

3. 중간에 setTimeout()과 같은 비동기 함수가 있는 경우 Web APIs로 이동

4. 다음에 있던 함수가 빠짐

5. setTimeout() 함수에 설정했던 시간만큼 지난 경우 해당 함수가 Callback Queue로 이동

6. Event loop가 콜백함수를 Call Stack으로 이동

7. 콜백 함수가 Call Stack을 빠져나감

8. 나머지 함수가 Call Stack을 빠져나감

9. Main Context가 Call Stack에서 빠져나감으로써 실행 종료

 

- Event loop는 Call Stack에 Main Context만 남아있는지 검사

---

 

헤헤 오랜만에 하는 공부였지만 강의를 들으면서 새록새록 기억이 나서 재미있었다.

 

재직 당시 코드에 적용하려고 했던 내용은 바로 코루틴이다!

코루틴
- 코드의 실행을 일시 중단하고 나중에 재개할 수 있는 독립적인 실행 단위를 나타냅니다.
- 함수 또는 메서드처럼 보이지만, 중간에 실행을 중단하고 나중에 이어서 실행할 수 있는 특별한 형태의 함수
- 상태를 유지하고 이전 상태로 돌아갈 수 있는 기능을 제공

 

리액트랑 JS에도 해당 내용을 적용할 수 있는지 찾아봤는데 가능하다고 한다.

 

JS는 Promise와 async/await 패턴을 제공

리액트 생명주기 메소드를 통해 수행 가능 (componentDidMount), Redux-Saga 사용

 

등등.. 과 같은 내용을 활용해서 비동기 작업 처리를 할 수 있다고 한다.

 

위에 내용은 다음 글에서 공부해보려고 한다. :)