프로젝트 세팅 과정(clsx 설치 및 취약점 문제 해결)

프로젝트를 세팅하는 과정에서 발생했던 기록할 만한 사항들을 정리해서 적어보고자 합니다.

 

clsx 설치 및 취약점 문제 해결

1. 배경

테일윈드 css 특성상 css 구문을 추가하거나 서로 묶어야 하는 경우가 많습니다. 이전 join()문을 활용할 수도 있지만 이전 프로젝트에서 편하게 활용했고 현업에서도 잘 활용한다는 clsx를 설치하여 활용해보기로 했습니다.

 

2. 문제점 파악 및 해결방안 모색

 

<설치 후 높은 등급의 취약성이 경고로 뜬 이미지>

해당 이미지처럼 높은 취약성의 경우 문제점을 진단하는 것이 옳다고 판단했습니다.

터미널의 추천대로 바로 npm audit fix를 돌리기 보다는 문제점의 원인을 파악 후 바로 해결해야 하는 문제인지 부터 알아보고자 했습니다.

구글링 및 ai와의 상의 후, 해당 취약점이 devDependency(개발 도구) 쪽 취약점이라면 작은 규모의 사이드 프로젝트에선 배포 위험이 낮아서 수정 우선순위가 낮다는 것과 runtime dependency(실제 앱 실행 시 포함) 쪽 취약점이라면 수정 작업에 우선순위를 높게 줘야 한다는 것을 배웠습니다.

 

 

취약성이 어느쪽인지 정밀하게 판단하기 위해 npm audit --audit-level=high 으로 검사해봤습니다.

 

<검사 결과>

 

진단 결과, devDependency 쪽에서 흔히 뜨는 ReDos 취약점이라는 것을 알게 됬습니다. 

 

3. 해결방안

npm audit fix를 해도 현재 세팅에 피해는 없다고 판단해 npm audit fix를 통해 취약성을 보완했습니다. 

 

4. 느낀 점

지금까지 프로젝트 세팅을 담당해서 한 적이 없었기 때문에 이번 개인 프로젝트를 시작하며 처음으로 세팅부터 혼자 해보고 있습니다. 이 과정을 통해 세팅에서 부터 자잘한 문제들이 발생할 수 있고 프로젝트의 성격에 맞는 방향성으로 접근하고 해결해 나가야 한다는 것을 깨달았습니다.