영어학원 사이트 오류 해결

얼마전 아는 지인이 영어학원 사이트 오류와 몇 가지 기능을 구현 해달라는 부탁을 받았습니다.

하지만 제 실력으로 다른 사람이 구현한 코드를 해석하고 문제를 해결해줄 정도는 안된다고 생각하여 거절 하였지만

계속되는 부탁에 결국 오류정도는 봐보자는 생각을 하게 되어 해당 사이트와 소스코드를 보았습니다.

 

해당 사이트는 프론트는 리액트로 백엔드는 파이썬으로 구현이 된 영어학원의 학생관리 및 실제 시험을 볼 수 있는 사이트였고 readme가 작성되어 있지 않아 readme가 작성 되어있지 않아 인수인계 관련해서 물어보았는데 현재 프론트 개발자와 연락이 안 되는 상태라는 이야기를 들었습니다.. 결국 맨땅에 헤딩 하면서 해결하는 방법밖에 없다고 생각 했습니다.

더군다나 현 사이트에서 사용하는 Netlify와 Ant-design은 한번도 사용해본적이 없습니다... 

 

그래도 다행히 백엔드 개발자분과는 연락이 닿아 간단한 이야기와 내용을 들었는데 프론트 어떠한 이유인지는 모르겠지만 프론트 개발자 분이 개발을 하다 도중에 그만두게 되었고 현재는 연락이 닿지 않는다는 이야기 였습니다...

 

[아래의 사진은 실제 사이트 사진은 아니고 가장 비슷해 보이는 사이트를 가져왔습니다. 유사하게 생겼습니다.]

출처: https://aiedutom.co.kr/community/notice/view/30

 

 

백엔드 개발자분께 API문서와 admin 계정, Netlify 계정, 도메인 계정 등을 전달 받았고 오류를 확인해 보니 Netlify에 react-json-to-excel 패키지로 인해 Deploy가 되지 않는 오류였습니다.

 

Netlify에서 나오는 오류만으로는 정확한 원인을 찾기 어렵다고 판단하여 깃에서 파일을 클론하여 install 하고 있었는데 아래와 같은 오류가 떴습니다

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: frontend@0.1.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.2" from react-json-to-excel@1.0.7
npm ERR! node_modules/react-json-to-excel
npm ERR!   react-json-to-excel@"^1.0.7" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

 

 react-json-to-excel버전과 react 버전의 충돌 문제가 있어 Netlfy에서도 빌드 오류가 났던거 같습니다.

 

리액트 18버전에 맞는 react-json-to-excel 버전을 업그레이드 해주면 끝나는 간단한 문제이기 때문에 npm 사이트에 가서 업데이트 버전을 확인하러 갔는데 웬걸... 리액트 18 버전에 맞춰 업데이트 된 버전이 없네요 :(

 

머릿속으로 수만가지 생각이 스쳐지나 가며.. 역시 쉬운길은 없다는 말이 다시 한번더 떠오르게 되었습니다.

 

이렇게 되면 react-json-to-excel 패키지에 맞춰서 리액트 버전을 낮춰주거나 아니면 react-json-to-excel 패키지를 다른 패키지로 변경을 해주는 방법밖에 없는데 (--force, or --legacy-peer-deps를 사용하는 방법도 있지만 이것은 결국 원인을 해결하는 것이 아니기 때문에 저는 웬만하면 사용하지 않습니다)

 

전자는 리액트 18 버전에서만 사용 가능한 기능들을 모두 낮춰진 버전에 맞춰줘야 하고 후자는 다른 패키지로 대체한 뒤 기능을 다시 구현해 줘야하기 때문에 어느 한쪽도 쉽지않은 상태입니다.

고민을 하다.. 현재 사이트에서 Transition이나 Suspencse을 사용하지 않고 변경된 Render만 사용하고 있어 리액트 버전을 17로 다운그레이드 하기로 선택하였습니다.

ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: frontend@0.1.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.0.0" from @testing-library/react@13.4.0
npm ERR! node_modules/@testing-library/react
npm ERR!   @testing-library/react@"^13.3.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

 

응?..????... 하... 그래요 그냥 react-json-to-excel 패키지를 다른 패키지로 변경 합시다

 

결국 이럴거면 처음부터.. 패키지를 변경할걸 싶네요 ㅠㅠ

react-json-to-excel 대신 어떤 패키지를 사용하면 좋을지 고민하다 react-csv패키지를 선택하게 되었습니다

 

react-csv에 대해 간단하게 설명을 드리자면 

csvData에 배열데이터를 주면 해당 데이터를 csv형태로 다운로드를 받거나 컴포넌트가 마운트 되었을때 자동으로 csv를 다운로드 받을수 있게 해주는 패키지 입니다

import { CSVLink, CSVDownload } from "react-csv";

const csvData = [
  ["firstname", "lastname", "email"],
  ["Ahmed", "Tomi", "ah@smthing.co.com"],
  ["Raed", "Labes", "rl@smthing.co.com"],
  ["Yezzi", "Min l3b", "ymin@cocococo.com"]
];
<CSVLink data={csvData}>Download me</CSVLink>;
// or
<CSVDownload data={csvData} target="_blank" />;

https://github.com/react-csv/react-csv

https://dinosaur1.tistory.com/119  

사용 방법과 예시는 공식 깃허브 사이트와 제가 작성한 글 올려 드립니다.

 

이제 남은것은 기존의 엑셀 코드를 제거한 뒤 react-csv로 대체만 하면 오류는 해결이 되는데 문제는 처음 사용해보는 타입스크립트와 인수인계를 받지 않아 API를 보며 코드를 하나하나 찍어봐야 했기 때문에 기능을 구현하는게 굉장히 까다로웠습니다.

또한, react-csv 패키지의 문제점도 있었는데 CSVLink를 통해 다운로드 시 데이터가 생성되는 시점의 데이터만 가져오기 때문에 이후의 데이터는 작성되지 않은 상태로 다운로드가 되서 여러모로 해결하는데 시간이 오래 걸렸습니다.

 

기존의 코드와 이미지

 

변경된 코드와 이미지

 

모든 코드 내용을 보여드릴 수는 없지만 정상적으로 작동한 것 을 확인하였고 깃에 커밋 후 Netlify에 정상적으로 Deploy가 되는 것을 확인 하였습니다.