3년정도 묵은 프로젝트가 계속 상용되고 있는데 이번에 서버도 이전하면서 커널 업그레이드를 한다고해서 하기전에 먼저 dependency, framework등을 업그레이드를 하기로 했다.
우리의 어플리케이션은 4년정도 지속적인 기능과 수 많은 개발자의 손이 거쳐가며 코드의 가독성과 확장성에는 거리가 아주 멀었고, 특히 front코드는 lib에 의존적이여서 그 중 하나만 지원을 하지 않아도 골치 아픈상황이였다..
framework는 fe - next.js , be - nest.js를 사용중이다.
두개의 프레임 워크도 버전이 매우 낮지만 그 보다 node버전이 무려 16버전을 사용중이다.
애초에 next 최신버전은 node major 16버전을 지원하지 않을 뿐더러 동시에 다른 패키지의 버전도 프레임워크에 의존적인 버전이 있으므로 보안상의 문제나 호환성과 같은 문제가 많다.
가장 먼저 해야 할 조치는 node 와 npm을 각각 16, 8 버전에서 20, 10 버전으로 최신 LTS버전을 변경 할것이다.
nvm을 사용하고있어서 nvm list를 확인하고 latest LTS버전으로 업그레이드를 했다. 이전 버전도 오래되긴했지만 node와 npm은 기능이 추가되었어도 다른 라이브러리에 비해 호환성이 좋은 편이라 특별한 에러가 나지 않았다.
이후 npm audit 으로 경고가 나오는 라이브러리에 대해서 하나씩 업그레이드를 할 것이다.
몰랐던 팁인데 package.json에서 버전이 명시되어있는 부분을 지우고 마우스를 호버하거나 ctrl + space를 누르면 아래와 같이 사용할 수 있는 버전이 전부 뜨니깐 라이브러리명이 바뀐게 아니라면 이렇게 버전 확인해도 되긴함..
frontend부터 할 생각인데 next.js는 이미 major version이 두번이나 큰 업데이트가 있었기 때문에 쉽사리 건들기가 쉽지 않았다. 가장 만만해보였던 라이브러리는 axios였다. 데이터 통신이 많은 서비스에서 axios는 매우 중요하기도 하고 0.26.1버전인 마이너버전에서 새로 업데이트된 1.7.7버전을 사용하고 싶었기 때문이다. 기능이 많이 추가되긴했지만 서비스에 사용하고있는 코드에 문제가 생기진 않을것 같았다.
하지만 모든 page에 비슷한 function이 처리 할 수 없는 데이터를 받아온다고 나왔고 해당 코드에 debugger를 걸고 불러오는 데이터를 찾아보니 정상적으로 array data를 받아오고 있었다.
처음엔 slice문법의 사용이 바뀐건가..? 했지만 그건 아니였다.
혹시 몰라서 debugger가 실행 중일때 콘솔에서 typeOf로 'priceTableList'의 타입을 체크해보니 string타입으로 출력되었다; json데이터가 parsing될 때 설정을 해주지 않은것 같아서 'priceTableList'를 사용하는 부분에 JSON.parse(priceTableList).slice().sort()코드를 그대로 사용했더니 아까와 같은 에러가 뜨지 않았다. 이전버전의 axios는 parsing된 데이터의 타입을 정의하지 않아도 무조건 json에서 자동으로 변환해주었던것이 이제는 명시해줘야 한다는 변경이 있었고 axios.confing 파일에서 수정해 주었다.
요청 헤더에 'Content-Type' 추가
getOptions 함수에서 인증 헤더를 설정할 때, 'Content-Type': 'application/json'을 추가했다. 이는 서버에 JSON 형식의 데이터를 보내고 받을 것임을 명시해줌.
if (typeof window !== 'undefined') {
options.headers = {
Authorization: `Bearer ${localStorage.getItem('tk')}`,
'Content-Type': 'application/json' // 추가된 부분
};
}
응답 데이터 파싱 로직 추가
get 함수에서 응답 처리 부분을 수정하여, 문자열로 받은 데이터를 JSON으로 파싱하는 로직을 추가했다.
export const get = async (url, params, responseType = 'JSON') => {
const options = getOptions('GET', url, true, params, responseType);
return await axiosClient
.request(options)
.then((res) => {
if (typeof res.data === 'string') {
try {
return JSON.parse(res.data); // 문자열인 경우 JSON 파싱 시도
} catch (err) {
console.error('Error parsing JSON:', err);
return false;
}
}
return res.data;
})
.catch((err) => {
console.log(err);
return false;
});
};
이 변경사항으로 인해 응답 데이터가 문자열로 오는 경우에도 JSON 객체로 올바르게 파싱될 수 있게 되었다.
Axios 버전 업그레이드 시 발생할 수 있는 데이터 파싱 이슈에 대해 알아보았는데 이러한 문제는 서버 응답 형식, 콘텐츠 타입 설정, 그리고 클라이언트 측 파싱 로직의 조합으로 해결할 수 있다.
항상 라이브러리 업그레이드 시에는 주의가 필요하며, 특히 네트워크 요청을 처리하는 중요한 부분에서는 세심한 테스트와 에러 처리가 필요하다.
사실 프레임워크 업그레이드까지 전부 변경하고 작성하려고 했지만 일정 상 다음에 추가로 포스팅 할 예정이다..
