회고 Tip
1. 지금 현재, 기분과 느낌을 표현(구체적)
2. 오늘 학습한 내용의 단어를 모두 나열
3. 나열한 단어를 하나씩 설명
4. 설명하기 어려운 단어가 있다면 그 이유를 생각
5. 스스로 설명하기 위해 질문한다면 어떻게 질문할것인가 생각
웹개발_JS/Node(동기와 비동기) 수업 후기
오늘은 Node를 처음으로 접하게 되었다.
이름만 들어봤고 내가 개발자가 되기위해 공부할 하나의 과목이라고 생각했던 그 Node를 오늘 영접하게 되었다.
공부한지 2달도 안되어서 배울 수 있을까? 앞에 배운 개념들은 숙지가 잘 되었는지 스스로 되물어보며 그러지 않았다면 이해할 수 있을까? 등의 걱정도 짧게 지나간다.
그래도 생각할 시간에 움직이고 공부하는게 나의 성향이기도 하고 이렇게 공부하면서 여기까지 와있는 나를 보며 하나씩 공부해보려 한다.
기억나는 단어들 나열해보기
-
동기와 비동기
1) 블로킹와 논블로킹 -
비동기의 동기화
1) Callback, Callback Hell
2) Promise, (Promise Hell) -
Promise
1) State, Result
2) .then, .catch, .finally
3) Promise.all()
4) Async/Await
1. 동기와 비동기란?
동기는 위 그림과 같이 하나의 작업이 완료되기 전까지 다른 작업을 시작하지 않는 것이며,
다른 작업이 시작되는 것을 막는것을 블로킹(blocking)이라고 한다.
비동기는 위 그림과 같이 동시에 여러 작업을 시작할 수 있으며 블로킹되지 않아 논블로킹(non-blocking)이라고 한다.
보다 더 합리적인 작업을 위해 Node.js는 논블로킹하고 비동기적으로 작동하는 런타임을 개발하게 된다.
2 비동기의 동기화(Callback, Promise)?
좋은 방향으로만 생각한다면 작업처리 속도가 빠르고 효율적이라고 할 수 있지만 다르게 생각해보면 제어할 수 없고 예측할 수 없다고 할 수도 있다.
따라서 비동기로 작동하는 코드를 제어할 수 있는 방법을 알아야 하며 Callback과 Promise가 있다.
1) Callback ?
콜백 함수를 사용하지 않았을때는 위 사진처럼 비동기적으로 결과값이 나오게 된다.
하지만 이렇게 콜백함수를 사용한다면 비동기 코드의 순서를 제어할 수 있게된다.
하지만, 코드가 길어질수록 복잡하고 가독성이 낮아지는 Callback Hell이 발생한다는 단점이 있다.
2) Promise?
Promise는 Callback Hell을 방지하는 역할도 수행할 수 있다.
Promise는 Class이기 때문에 new 키워드를 통해 Promise 객체를 생성한다.
Promise는 비동기 처리를 수행할 콜백함수(excutor)를 인수로 받으모 이 콜백 함수는 (resolve)함수, (reject)함수를 인수로 전달 받는다.
Promise 객체가 생성되면 (excutor)는 자동으로 실행된다.
3. Promise?
new Promise가 반환하는 Promise객체는 state, result라는 내부 property를 갖게되며, .then, .catch, .fainally의 메서드를 사용해 접근할 수 있다.
1) State, Result?
State의 기본 상태는 대기(pending)이다.
비동기 처리를 수행할 콜백함수(excutor)가 성공적으로 작동하면 상태는 이행(fulfilled)로 변경되고 에러가 발생하면 reject가 된다.
Result의 기본 상태는 undefined이다.
비동기 처리를 수행할 콜백함수(excutor)가 성공적으로 작동하면 resolve(value)가 호출되면 value상태, 에러가 발생하면 reject(error)가 호출되면 error상태로 변한다.
2) Then, Catch, Finally?
비동기적 작업을 순차적으로 진행하기 위해 Promise chaining으로 가능하며 .then, .catch, .finally의 메서드들이 있어 promise를 리턴하기 때문이다.
콜백함수에 작성했던 코드들이 정상처리가 되어 resolve함수를 호출했을때 .then 메서드로 접근해서 연결할 수 있으며,
에러가 발생할 경우 .catch로 접근할 수 있다.
.finally는 콜백함수에 작성했던 코드들의 정상 처리 여부와 상관없이 접근이 가능하다.
3) Promise.all()?
이렇게 작성한 코드들은 순차적으로 동작된다.
하지만 여러개의 비동기 작업을 동시에 처리하고 싶다면 Promise.all()을 사용 할 수 있다.
위 사진과 같이 사용할 수 있으며 Promise chaining로 작성한 코드보다 더 간결해진다.
또한 Promise 중 하나라도 에러가 발생하게 되면 즉시 종료되며 Error가 반환된 후로 더 이상 작동하지 않고 종료된다.
4) Async/Await?
Promise를 통하여 코드의 순서를 제어할 수 있지만 길어질 수록 Callback함수처럼 Promise Hell이 발생하는 단점이 있다.
그래서 ES8에서 async/await 키워드를 제공하여 Promise코드를 간결하게 작성할 수 있게 되었다.
함수 앞에 async 키워드를 사용하고 사용한 함수 내에서만 await키워드를 사용하면 된다.
사용법에 대한 예시
오늘 수업은 개념과 원리에 접근하는 시간이 많았다보니 완전히 이해하고 넘어 갈 수 있지 않았다. 하지만 개념과 원리에 대해 좀더 깊게 생각할 수 있었고 지금은 괴롭지만 나중에는 도움이 될것을 알기에 힘내보자! 이번주도 열심히 달려온거같다 주말동안 복습도 하고 다음주도 화이팅!
