사건의 발단

회사에서 작업하던 도중 코드리뷰를 통해 await을 빼먹은 비동기 함수를 발견해버렸습니다...🤦

대부분의 비동기 함수가 값을 리턴받아서 사용하기 때문에 await 혹은 then 처리를 안해준것을 쉽게 찾을 수 있지만,

리턴값이 없거나 굳이 필요하지 않은 비동기 로직들은 await이나 then을 빼먹은 사실을 깨닫기 어렵더군요.

저의 경우 외부 API를 호출하여 WEB 발신 메세지를 전송하는 로직이었는데, 메세지가 잘 전송되었구나라는 사실만 확인하고 await을 빼먹은 것을 잘 확인하지 못하였습니다.

그래서! 이것을 방지하기 위해 eslint와 github action을 사용하여 처리되지 않은 비동기 함수를 확인하는 방법을 찾아보았고, 실제 프로젝트에 적용해본 경험을 공유해보려고 합니다!

적용해봅시다

1. 일단 eslint로 unhandle된 promise를 찾을 수 있도록설정합니다.
   .eslintrc.json 파일에 아래와 같은 설정을 추가해줍니다.

     //.eslintrc.json
   
     {
   
     ...
   
     rules: {
         ...
         "@typescript-eslint/no-floating-promises": "error",
         ...
     }

   이는 eslint 규칙중 no-floating-promises를 어긴 경우를 오류로 표시해주도록 설정해주는 것입니다.

   no-floating-promises 규칙은 핸들링 되지 않는 promise를 허용하지 않는 규칙입니다.

   위 규칙을 적용하면 await, .then()를 붙여주지 않은 비동기 로직에 대해 아래와 같이 오류를 띄우게 됩니다.
   
   경험적으로 말씀드리자면, await이 누락되었고, 비동기 함수의 결과값을 다른 변수에 할당하지 않은 경우 오류를 보여주었습니다.

        ex)
        
        aysnc foo() {
            ...
        }
    
        await foo(); // 통과
        foo(); // 오류 출력
        const bar = foo() // 통과

2. 이제 소스코드가 eslint에 부합하는지 체크하도록 해봅시다.
   eslint가 설치되어 있다면 아래의 커맨드를 통해 소스코드의 lint를 체크할 수 있습니다.

   //shell
   
   eslint src --ext .ts,.tsx
   

   저는 위 명령어를 npm 커맨드로 등록하여 사용하였습니다.

   //pacakge.json
   
   {
   	...
   	scripts: {
   		...
   		"lint:check": "eslint src --ext .ts,.tsx",
   		...
   	}
   }

3. github action 스크립트에서 lint:check 명령어를 수행할 수 있도록 추가합니다.

   저의 경우 push마다 실행하는 github action 스크립트에서 단위 테스트를 돌리기 전에 lint 검사를 하도록 추가하였습니다.

   name: CI
   
   on: [push]
   
   env:
     ...
   
   jobs:
     build:
   
       runs-on: ubuntu-latest
       steps:
         - name: Checkout branch
           uses: actions/checkout@v2
   
         - name: Use Node.js
           uses: actions/setup-node@v1
           with:
             node-version: '16.13.0'
   
         - uses: actions/cache@v2
   
         - name: Install dependencies
           run: -
   
         - name: Check eslint
           run: npm run lint:check
   
         - name: Run test
           run: -
   
         - name: Build node js project
           run: -

결과는?

이제 push를 해보면 eslint가 어긋나는 코드가 있을 경우 테스트에 실패한 것 처럼 FAIL이 발생하게 됩니다.

뿐만 아니라, 어느 부분에서 eslint에 어긋났는지 github PR내에 코맨트로 확인할 수 있게 됩니다.

아래는 제가 비동기 로직에서 await을 빠뜨린 상황을 가정하여 커밋을 했었는데, 이런 실수를 잘 잡아주는 모습입니다.

lint 오류 뿐만아니라 warning까지도 코맨트를 통해 확인할 수 있습니다.

효과는?

개인적으로 생각하는 가장 큰 효과는 찾기 힘든 오류를 사전에 방지 할 수 있다는 점입니다. await이 누락된 코드로 발생하는 오류는 언뜻 잘 돌아가는 것 처럼 보일때가 있어서 코드를 전부 뜯어보고 난 후에야 발견했던 경험이 몇번 있었는데, 이러한 리소스 낭비를 줄일 수 있다는 장점이 있는것 같습니다.

또한 리뷰의 부담을 줄일 수 있을것 같습니다. 자동으로 남겨주는 코맨트를 통해 리뷰 중에 이러한 오류를 찾아야한다는 부담을 덜 수 있으므로 리뷰 속도가 좀 더 빨라질 수 있을것 같습니다.