React 프로젝트 의존성 버전 업그레이드 하기 - axios (0.18.0 → 1.7.7)

개발 인턴 3개월 차, 4년 전부터 이어오던 프로젝트를 담당하면서 처음 하는 것들이 많았다.

이번에 보안 검사를 진행하던 중, axios에서 취약점 점수가 7.5로 나타났고, 그 결과 취약점 개선을 담당하게 되었다.

해당 라이브러리의 버전 업그레이드를 진행하면서 발생한 여러 문제를 해결해야 했고, 이번 기회에 보안 관련 개념을 새롭게 학습할 수 있었다.

CVSS (Common Vulnerability Scoring System) 란?

- 보안 취약점의 심각도를 정량적으로 측정하고, 0.0~10.0 사이의 점수를 부여하는 시스템

점수 범위	심각도	예시
0.0	없음 (None)	취약점 영향 없음
0.1~3.9	낮음 (Low)	미미한 영향
4.0~6.9	보통 (Medium)	조치 필요하지만 긴급하지 않음
7.0~8.9	높음 (High)	심각한 영향, 빠른 조치 필요
9.0~10.0	긴급 (Critical)	치명적 영향, 즉각적 대응 필요

 

심각도 높음에 해당했으니 개선하는게 맞지..

처음에는 npm install axios@(해당 버전)만 하면 끝날 줄 알았지만, 실제로는 그렇지 않았다...

axios를 0.18.0에서 1.7.7로 업그레이드하는 과정에서 빌드 오류와 호환성 문제가 발생했다.

터미널에서 라이브러리를 하나씩 설치하면서 겪은 에러들과 이를 해결한 과정이다.

---

1. aixos 1.7.7 설치 후 프로젝트 실행 (첫 번째 오류 발생)

명령어

npm install axios@ 1.7.7

 

문제

axios 버전을 1.7.7로 업그레이드하면서, 기존 빌드 환경에서 오류 발생.

 

오류 내용

Failed to compile.
./node_modules/axios/lib/adapters/fetch.js
Module parse failed: Unexpected token (161:6)

 

원인 분석

1. axios 1.7.7에서 ES6 이상의 문법을 사용.

2. 기존 빌드 환경(Webpack/Babel)이 이를 트랜스파일하지 못함.

 

해결방법

1. config-overrides.js*에 Babel 설정 추가.

* CRA에서 Webpack 설정을 커스터마이징 하기 위한 파일

module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
};

---

2. babel-loader 설치 후 프로젝트 실행 (두 번째 오류 발생)

명령어

npm install babel-loader@latest

 

오류 내용

Module build failed: TypeError: this.getOptions is not a function

 

원인 분석

1. babel-loader 최신 버전(9.2.1)이 Webpack 3.x와 호환되지 않음.

2. 기존 프로젝트에서 사용 중인 Webpack(3.8.1)과 Babel 설정 간의 버전 충돌 발생.

 

해결방법

Webpack에 맞는 Babel 설정으로 변경

 

1. Webpack 4로 업그레이드

npm install --save-dev webpack@4 webpack-cli@3 webpack-dev-server@3

 

2. webpack.config.js에 적합한 로더 설정 추가

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
    ],
  },
};

 

---

3. JSX 문법 오류 후 프로젝트 실행 (해결 완료)

명령어

npm start

 

문제

JSX 문법 사용 시 변환되지 않아 빌드 오류 발생.

 

오류 내용

Syntax error: Support for the experimental syntax 'jsx' isn't currently enabled.

 

원인 분석

@babel/preset-react 설정 누락으로 JSX 문법을 트랜스파일하지 못함.

 

해결방법

1. @babel/preset-react 설치

npm install --save-dev @babel/preset-react

 

2. Babel 설정 파일(babel.config.js 또는 .babelrc)에 추가

module.exports = {
  presets: [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
};

---

보안 취약점을 해결하는 일은 평소 프로젝트에서 다루지 않던 분야였기에 처음에는 좀 막막했다. 

이 과정에서 업그레이드된 라이브러리 버전의 호환성 문제를 해결하면서, 라이브러리 관리와 버전 업그레이드의 중요성도 다시 한 번 깨닫게 되었다.