[ESLint] no-return-await 에러 발생
상황
vs code에 저장버튼을 누를 때 마다 async await 코드 중 await이 자꾸 지워져서 저장되었다.
아래와 같은 코드를 작성했다면 return await 부분에 await이 자꾸 제거되었다.
@Patch('/:id')
async patch(
@Param('id', ParseIntPipe) movieId: number,
@Body() updateData: UpdateMovieDto
): Promise<Movie> {
return await this.movieService.update(movieId, updateData)
}
}
원인
이유는 간단하였다. ESLint에 위반되어서 저장할 때 자동으로 지워준것이었다.
위반 규칙은 https://eslint.org/docs/latest/rules/no-return-await no -return-await 이었다.
영어를 읽어보는데 해석이 잘 안돼서 찾아보니 잘 설명해준 블로그가 있었다.
https://yohanpro.com/posts/programming/eslint/return-await
Disallows unnecessary return await (no-return-await) Eslint 오류 - Yohan's Developer Diary
최근에 업무를 하다가 아래와 같이 두 줄로 끝나는 함수가 있어서 한 줄로 그냥 리턴하면 어떨까 하고 생각해보게 됬는데요. async fetchStoreDetailBrowser (_, { storeId }) { const storeDetail = await this.$axios.$ge
yohanpro.com
no-return-await 에러는 async function 내부에서 return await을 사용하는 것은 대기 중인 Promise가 해결될 때 까지 호출 스택에 현재 함수가 유지된다는 뜻이었다.
쉽게 말하면 Call stack 내부에 함수를 붙잡아 두어 CPU 낭비가 발생하기 때문이다.
(https://yohanpro.com/posts/programming/eslint/return-await 블로그 내용)
call stack 내부? 쉽게 말씀하셔도 한번에 이해하기 어려웠다. js 지식에 한숨이 나온다.
생각해보니 js에서 이벤트 루프, 콜스택, Web api에 관해 공부한 적이 있다.
아래 블로그를 참고해서 다시 글을 읽어보았는데 js에서 오래걸리는 작업, 예를 들어 setTimeout같은 함수는 webapi에서 제공한다 이러한 함수는 webapi에서 실행되며 콜스택에서의 작업을 차단하지 않고 큐라고 하는 곳에 전달되어 최종적으로 이벤트 루프가 콜 스택에 다시 집어넣는다.
https://www.devh.kr/2021/JavaScript-Visualized-Event-Loop/
[번역] 시각화된 자바스크립트: 이벤트 루프 | dev.h
✨♻️ JavaScript Visualized: Event Loop
www.devh.kr