문제의 시작

옛날부터 다른 github repository들을 보면 contributors에 dependabot이 있고, 자동으로 pull request를 날려주길래 나도 저 설정을 해놔야겠다 생각하고 있었다. 근데 이 alert을 보고 나서 이번에 본격적으로 설정을 해보기로 마음먹었다.

기억이 안 나서 몰랐는데 옛날에 이 설정을 해둔 적이 있었나 보다. 그러니까 저런 알림이 올 수 있었을 것이다. (아마도)

근데 이런 alert만 뜨고 dependabot이 pull request를 추가해주지 않았다. 그래서 추가 설정이 필요한가 보다 하고 찾아 봤다.

(근데 나중에 발견한 걸로 추측해보건대 이 alert들은 dependabot이 수정할 수 없어서 pull request를 안 날려줬던 것 같다. 밑에서 하는 yml 파일 설정은 커스터마이징할 때만 하면 되는 것 같다. 이와 관련된 내용은 이 글의 뒷 부분에 나온다.)

삽질의 연속

Configuration options for dependency updates

이 페이지의 가이드에 따라 .github 디렉토리 안에 .dependabot.yml 파일을 만들었다. 그리고 설정을 다음과 같이 간단하게 해주었다.

version: 2
updates:
  - package-ecosystem: 'npm'
    directory: '/'
    schedule:
      interval: 'daily'
    labels:
      - 'dependencies'

이 파일을 깃헙에 push하고 나서 조금 기다리면 dependabot이 pull request를 해주겠지? 라고 생각하고 있으면서 alert들은 무슨 내용인가 더 자세히 보았다.

그.런.데 … 이런 문구를 발견했다.

Dependabot cannot update DEPENDENCY to a non-vulnerable version

예??? 왜 업데이트해주지 못하죠?
놀라서 당장 검색해봤다.

Dependabot cannot update DEPENDENCY to a non-vulnerable version

아뿔싸.. dependabot이 풀 리퀘를 날려줄 수 없다고 한다.. 그래서 풀 리퀘스트를 못 해줬던 거구나.. dependabot.yml 파일이 없어서가 아니었구나.. (이건 추측)

문제의 해결

그래서 client와 server 폴더 각각에서 node_modules 폴더와 package.lock.json 파일을 삭제하고 다시 npm i를 해서 3가지 취약성(validator, is-svg, json-schema)은 해결이 됐는데.. 나머지 1가지가 문제였다.

얘는 버전 문제도 아니었다.

package.lock.json에서 찾아 보니 이걸 쓰고 있는 라이브러리가 직접 설치한 적 없는 것들이었다. 즉, CRA 내부적으로 쓰이고 있다는 건데 그렇다면 관련해서 똑같은 문제를 겪고 있는 사람이 많을 것이고 질문이 이미 많이 올라왔을 것이라는 판단 하에 바로 검색해보았다.
역시 이미 같은 문제를 겪고 있는 사람들이 있었고, 해결책도 다 마련해주었다.

ansi-html github issue
고맙게도 누군가가 이 문제를 해결하기 위해 ansi-html-community라는 새로운 라이브러리를 만들어주었다. 이걸로 ansi-html을 대체하면 됐다. 그런데 난 직접 ansi-html을 깐 적이 없는데 어떻게 해결하지..? 라고 생각하며 다른 답변들도 보았다.

yarn을 이용한 해결책 이 답변대로, yarn을 사용한다면 resolutions 프로퍼티를 추가해서 해결하면 됐다. 그런데 npm은…? 하는 찰나 npm을 이용한 해결책 이런 답변을 남겨준 사람이 있었고, 알려준 stackoverflow의 방법대로 package.json을 다음과 같이 수정하여 github에 다시 push했다.

// package.json

  "scripts": {
    "preinstall": "npx npm-force-resolutions"
  }

  "resolutions": {
    "ansi-html": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz"
}

사용하는 라이브러리의 하위 모듈 버전 고정하기
이 글도 이해하는 데에 도움이 된다.

느낀 점 & 배운 점

• 영어라고 넘기지 말고 설명을 잘 읽자!
• 다음 프로젝트할 때는 yml 파일 생성하지 말고 github settings에서 dependabot 관련 설정만 하고 pull request를 날려주는지 확인해보자.
• 내가 직접 설치한 dependency가 아닌, 한 라이브러리에서 내부적으로 쓰이는 dependency의 경우, resolutions 옵션을 이용하여 수정해줄 수 있다.