주식 분석 앱을 만들다가 Vercel에 배포했는데, 빌드 로그가 노란 경고로 도배됐습니다. npm warn deprecated가 줄줄이. 학생 시험지에 빨간 줄이 쫙 그어진 걸 볼 때랑 비슷한 심정이었어요. “이거 다 틀린 건가?” 싶은.
당황스러웠던 건 제가 뭘 잘못한 기억이 없다는 점이었습니다. 방금 만든 앱이고 코드도 몇백 줄뿐인데 경고가 왜 이렇게 많나. 그래서 하나씩 검색하기 시작했는데, 30분을 태우고 나서야 대부분은 애초에 제가 고칠 수 없는 것임을 알았습니다.
결론부터: 대부분 무시해도 됩니다. 다만 그중 딱 하나, 지금 챙기면 좋은 게 섞여 있었습니다. 같은 화면 보고 당황하신 분들을 위해 정리합니다.
내가 본 실제 로그 (그대로)
가공 없이 붙입니다. 검색해서 들어온 분은 본인 로그랑 대조해 보세요.
14:56:45.902 npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
14:56:46.654 npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. ... use lru-cache ...
14:56:48.436 npm warn deprecated @humanwhocodes/config-array@0.13.0: Use @eslint/config-array instead
14:56:48.626 npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
14:56:48.759 npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
14:56:50.233 npm warn deprecated uuid@9.0.1: uuid@10 and below is no longer supported. ...
14:56:50.621 npm warn deprecated glob@9.3.5: Old versions of glob are not supported, ... security vulnerabilities ...
14:56:53.568 npm warn deprecated eslint@8.57.1: This version is no longer supported. ...
14:57:02.971 warn - It seems like you don't have a global error handler set up.
It is recommended that you add a global-error.js file ...
deprecated는 “이제 지원 안 함(낡았음)” 이라는 뜻이지 “고장났다”가 아닙니다. 만든 사람이 “이거 이제 관리 안 해요, 새 거 쓰세요”라고 안내문을 붙여둔 상태예요. 그래서 에러가 아니라 경고(warn)일 뿐이고 빌드는 그대로 성공합니다. 이 구분이 중요한 건, 빌드 실패는 선택의 여지 없이 고쳐야 하지만 경고는 “고칠지 말지 내가 정하는” 영역이기 때문입니다.
핵심 한 가지: “내가 깐 것” vs “남이 끌고 온 것”
npm warn deprecated의 대부분은 내가 직접 설치한 패키지가 아니라 전이 의존성에서 납니다.
전이 의존성: 내가 직접 깐 게 아니라, 내가 깐 패키지가 또 내부적으로 끌어오는 패키지. 사슬처럼 딸려 옵니다.
요즘 패키지는 혼자 일하지 않습니다. A를 설치하면 A가 자기 일을 하려고 B를 끌어오고, B는 또 C를 끌어와요. package.json에 적은 건 열 줄인데 실제로 깔린 건 수백 개가 됩니다. 제 코드가 짧은데도 경고가 열 줄씩 뜬 이유가 이거였어요. 제 앱이 부실해서가 아니라 남의 사슬 저 아래에서 나는 소리인 겁니다.
로그의 rimraf, inflight, glob, @humanwhocodes/*가 전부 그렇습니다. 죄다 빌드 도구나 린터가 내부적으로 끌고 오는 것들이에요.
린터(linter): 코드의 문법·스타일을 자동으로 검사해 잔실수를 잡아주는 도구. 대표가 ESLint입니다.
그리고 결정적인 사실. 저는 이것들의 버전을 직접 못 올립니다. glob을 최신으로 바꿔봤자 그걸 쓰는 상위 패키지가 “나는 옛날 glob이랑만 맞다”고 하면 오히려 깨져요. 상위 패키지가 자기 쪽에서 올려주길 기다리는 수밖에 없습니다. 제가 손댈 수 없는 걸 붙잡고 30분을 태웠던 겁니다.
판단 기준은 딱 이겁니다: 빌드가 실패했나, 경고만 떴나? 그리고 내가 직접 깐 건가, 딸려온 건가? 경고만 떴고 딸려온 거면 지금 멈추고 고칠 일이 아닙니다.
그래서 뭘 하면 되나 (분류표)
| 경고 | 정체 | 액션 |
|---|---|---|
rimraf@3, inflight, glob@7/9 | 빌드 도구의 전이 의존성 | 🟢 무시 (내가 못 고침) |
@humanwhocodes/config-array·object-schema | ESLint 내부 의존성 | 🟢 무시 |
uuid@9 | 내가 직접 쓰면 메이저 올릴 후보 | 🟡 백로그 |
eslint@8.57.1 no longer supported | 린터 메이저 업그레이드 신호 | 🟡 백로그 |
global-error.js 없음 (Next.js) | 남의 패키지가 아니라 내 앱 문제 → 파일 1개 추가로 직접 해결 | 🔴 지금 (5분) |
🟡 백로그: “지금 말고 나중에 할 일” 목록. 잊지는 않되, 오늘 밤 작업을 멈추게 두진 않는 칸입니다.
표에서 읽어내실 건 열 줄 중 여덟 줄이 🟢, 오늘 할 일이 아니라는 것입니다. 경고의 양이 곧 문제의 크기가 아니었어요. 🟡 두 개는 제가 직접 깐 것일 수 있어 언젠가는 올려야 하지만, 메이저 업그레이드는 다른 게 깨질 수 있는 작업이라 배포하다 말고 즉흥적으로 손댈 일은 아닙니다.
한 문장 요약: 노란 deprecated는 거의 다 무시, eslint·uuid는 직접 쓰면 백로그, 진짜 지금 할 건 global-error.js 하나.
마지막 줄의 Next.js 경고만 성격이 다릅니다. 잘 보면 deprecated도 아니에요. 이건 전이 의존성이 아니라 내 앱에 전역 에러 핸들러가 없다는 실제 권고입니다. 운영 중 예기치 못한 에러가 나면 사용자에게 아무 설명 없는 흰 화면이 뜨는데, 만든 사람은 로그로 원인을 알지만 쓰는 사람은 앱이 죽었는지 인터넷이 끊겼는지도 모른 채 나가버려요. 이 파일이 그 순간을 받아줍니다.
// app/global-error.jsx
'use client'
export default function GlobalError({ error, reset }) {
return (
<html>
<body>
<h2>문제가 발생했어요.</h2>
<button onClick={() => reset()}>다시 시도</button>
</body>
</html>
)
}
에러가 어디선가 터져 위로 올라오면 이 화면이 대신 뜨고, reset()은 새로고침 없이 한 번 더 시도하게 해줍니다. 5분 투자로 경고도 사라지고 흰 화면도 막으니, 열 줄짜리 경고 폭탄 중 투자 대비 효과가 있는 건 이거 하나뿐이었습니다.
10분이면 끝나는 빠른 분류 (triage)
triage(트리아지): 응급실에서 환자를 위중도 순으로 빠르게 분류하듯, “뭐부터 처리할지”를 짧게 가르는 것.
다음에 또 경고 폭탄을 보면 검색부터 하지 마시고, 이 순서로 거르세요.
# 1) 이 패키지가 '내 직접 의존'인지 확인 (없으면 전이 의존성 = 무시)
npm ls uuid
# 2) 뭐가 그걸 끌고 오는지 추적
npm explain glob
# 3) 보안 관련 자동 정리(가능한 것만) 적용
npm audit fix
1번 npm ls가 핵심입니다. 결과에 안 잡히거나 남의 패키지 밑에 딸려 나오면 어쩔 수 없는 전이 의존성이라 🟢 무시, 최상단에 내 프로젝트 바로 아래로 잡히면 직접 쓰는 거라 🟡 백로그 후보. 이 한 줄이면 “고쳐야 하나 말아야 하나”가 바로 갈립니다. 2번 npm explain은 “대체 누가 이 낡은 걸 끌고 왔냐” 싶을 때 사슬을 거슬러 범인을 보여주고, 3번 npm audit fix는 보안 문제 중 자동으로 고칠 수 있는 것만 정리해줍니다.
마무리
같은 오답을 그대로 다시 내면 점수가 안 오르는 건 수학이나 코딩이나 똑같습니다. 다만 여기선 먼저 “이게 정말 내 오답인지”부터 가려야 합니다. 남이 틀린 걸 내 오답노트에 옮겨 적고 앉아 있으면 정작 내 실수는 그대로 남으니까요.
빌드 실패와 경고를 가르고, 전이 의존성은 과감히 🟢 무시,
직접 쓰는 것만 🟡 백로그,
파일 하나 추가하면 끝나는 것(global-error.js)만 🔴 지금
— 이렇게 오늘의 오답노트를 끊고 정리하시면 됩니다. 노란 줄이 열 개든 스무 개든, 실제로 손댈 건 보통 한두 개예요.