내 React-Node.js 프로젝트에 CSV 가져오기를 추가하는 방법

터치베이스는 괜찮았습니다. 멋진 프로젝트였습니다. 효과가 있었습니다. 하지만 현실을 직시해 봅시다. 사용할 수 있었나요? (Touch Base는 제가 만든 풀스택 React 연락처 관리 앱입니다.)

이런 생각을 하다가 분명한 사실을 깨달았습니다. 사용자가 Touch Base를 사용하기 시작하면 연락처를 수동으로 추가해야 합니다. 연락처가 5개라면 괜찮을 것 같습니다. 추가하고 싶은 연락처가 1,000개라면 정말 짜증나는 일이고 아마도 이 시스템을 사용하고 싶지 않을 것입니다. 그래서 당연히 연락처 가져오기 기능을 추가해야 한다는 걸 알았습니다.

옵션 조사

제가 처음으로 Google에서 검색한 내용은 'csv importers' 등이었습니다. 사용 가능한 옵션 중 일부를 살펴보고 FlatFile을 찾았습니다. 주요 제목은 "데이터를 수집, 탑재 및 마이그레이션하는 가장 빠른 방법"이었습니다. 완벽해요… 하지만 제게는 그게 전부가 아니었습니다. 이제 이것은 아마도 내 잘못일 것입니다(놀라운 서비스인 것 같습니다). 그러나 임포터를 구현하는 과정에는 제가 기꺼이 투자하려는 것보다 더 많은 노력이 필요했습니다. 지금은 약간의 사이드바 컨텍스트를 살펴보기에 완벽한 시간입니다.

요즘 저는 허름함을 정말 중요하게 생각해요. 나는 일을 빨리 끝내고 싶다. 이것은 모퉁이를 자르려는 것이 아닙니다. 단지 변명이나 불필요한 지연을 원하지 않습니다. 결국, 나는 사이드 프로젝트를 진행하는 한 사람일 뿐입니다. 그래서 나의 현재 태도는 실패하고, 배우고, 빠르게 반복하는 것입니다. 그동안 좋은 일 하시면서.

플랫파일로 돌아갑니다. 나는 그들의 유망한 소프트웨어를 사용하고 싶었지만 정말로 그들의 모든 부가 기능이 필요한지, 그들의 문서와 싸우는 것이 그만한 가치가 있는지 스스로에게 물었습니다. 확실히 그렇지 않습니다. 그래서 나는 검색으로 돌아가서 Papa Parse에 착륙했습니다. 예전 검색에서 본 기억이 나네요. 주요 제목은 "큰 소년과 소녀를 위한 강력한 브라우저 내 CSV 파서"였습니다. ? 들어가 있었어요.

구현

먼저 API에 POST 경로를 추가했습니다.

verifyToken은 사용자 ID 토큰을 확인하는 작업을 정확하게 수행하는 모든 경로에서 사용하는 기능입니다. 내 앱에서는 파일 업로드를 처리하기 위한 node.js 미들웨어인 multer를 사용합니다. upload.single('file')은 S3 버킷에 파일을 업로드하는 데 도움이 되는 다중 기능입니다.

경로 내부에서 구조분해를 통해 사용자 ID와 파일을 가져옵니다.

Papa Parse 상태에 대한 npm 패키지 문서와 마찬가지로 "Papa Parse는 일반 문자열 외에도 Node.js 환경에서 사용될 때 파일 대신 읽기 가능한 스트림을 구문 분석할 수 있습니다."

그래서 결과 데이터를 보관할 빈 배열과 s3 버킷에서 해당 스트림을 생성하여 파일을 Papa Parse로 직접 스트리밍할 준비를 했습니다. 잠재적인 오류 처리를 잊어서는 안 됩니다.

그런 다음 마지막으로 스트림을 Papa Parse에 전달하고 구성 옵션을 설정하고 결과에서 발생하는 모든 오류를 처리합니다.

위 코드에서 Complete는 콜백 함수를 취하는 Papa Parse 속성입니다. 구문 분석이 완료되면 실행됩니다. 그런 다음 결과에서 제공된 데이터를 ParsedData로 가져옵니다.

이후에는 데이터베이스에서 몇 가지 쿼리를 실행하고 연락처를 처리할 차례입니다. 하지만 먼저 쿼리를 실행하려면 DB에 연결을 저장해야 합니다.

이 다음 부분은 try catch 문에 많은 코드가 포함되어 있으므로 이에 대한 몇 가지 설명과 함께 바로 설명하겠습니다.

보시다시피 저는

• 기존 연락처 가져오기
• 두 개의 이메일이 동일할 수 없으므로 이메일을 사용하여 중복된 연락처를 필터링하세요
• 중복되지 않은 연락처를 테이블에 대량 삽입

프런트엔드

프런트엔드는 주로 내 앱 접근 방식에 따라 다르지만 여기에서 점들을 연결해 보겠습니다.

연락처 가져오기 페이지는 한 가지 작업을 수행하므로 매우 간단합니다. 실제로는 입력인 기본 파일 업로드 버튼을 사용합니다.

입력이 변경 사항을 감지하면 handlerFileUpload 함수를 트리거합니다.

handleFileUpload 함수 내에서 먼저 로딩 상태를 true로 설정하여 이 프로세스가 진행되는 동안 사용자에게 작은 로딩 스피너를 표시할 수 있습니다.

사용자가 .csv 파일을 성공적으로 업로드하면 이를 새 formData 개체에 추가하고 위의 백엔드 경로로 보내 처리합니다. 여기서는 가져오기 요청을 직접 사용합니다. 왜냐하면 내 앱에서 /import-contacts 엔드포인트에 도달하는 유일한 장소이기 때문입니다. 내 앱의 다른 부분이 경로에 도달해야 하는 경우 컨텍스트를 사용하여 요청을 저장하고 이를 사용하여 코드 반복을 방지합니다. 그리고 제가 설정한 오류 처리도 보실 수 있습니다…

파일을 성공적으로 처리하거나 오류가 발생하면 로드 상태가 다시 false로 설정되고 사용자에게 무슨 일이 일어났는지 정확하게 알 수 있도록 적절한 토스트 알림이 실행됩니다.

로그인하고, 연락처의 .csv 파일을 업로드하고, 성공적인 토스트 알림을 받고, 계정에 입력된 새 연락처를 모두 확인할 수 있어서 정말 좋습니다. 그리고 너무 빠릅니다. 잠시 동안 로딩 스피너가 표시될 수도 있습니다. 대량 삽입 쿼리도 거기에 많은 도움이 됩니다.

사용 가능에서 사용 가능으로

이 기능을 추가하기 전에는 앱이 실제로 얼마나 유용할지 궁금했습니다. 이제 그것에 대해서는 의문의 여지가 없습니다. 매우 복잡하지는 않지만 이러한 유형의 애플리케이션에서 볼 것으로 예상되는 기능이므로 구현해야 할 요구 사항이라고 생각했습니다. 나는 그것이 프로젝트를 좀 더 진지하게 만든다고 생각합니다. 그 외에도 저는 .csv 파일을 사용하여 이 작업을 매우 재미있게 만든 적이 없습니다. Papa Parse는 제가 이미 사용하고 있던 모든 도구와 매우 잘 통합되어 매우 쉬워졌습니다. 꼭 사용하시길 추천드립니다.

여기까지 오셨다면 이 글을 읽어주신 여러분을 응원할까요?...
그리고 형편없는 소프트웨어를 응원하시나요 ?

p.s 아직도 내 프로젝트가 형편없는지 궁금하네요 ?
확인하고 싶으시다면 다시 링크를 확인해주세요.

다음 시간까지!

위 내용은 내 React-Node.js 프로젝트에 CSV 가져오기를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!