프로젝트 34/100 - React + Firebase Exercise Tracker v2(보너스: npm 나쁜 단어 패키지로 텍스트 입력 필터링)

여기요! 저는 3월 8일에 끝나는 100개의 React.js 프로젝트를 만드는 임무를 수행하고 있습니다. 내 dev.to 프로필을 팔로우하거나 업데이트를 확인하고 질문이 있으면 언제든지 연락해 주세요. 지원해 주셔서 감사합니다!

오늘 배포된 앱 링크: Link
저장소 링크: github

따라서 내 응용 프로그램이 "잘못된 단어 증명"이라고 주장하는 것은 아마도 부정 행위를 불러일으킬 것입니다. 하려고 하면 욕설이 생기기 쉽지만 인증이나 유효성 검사 없이 애플리케이션을 만들어 공개하면 예상치 못한 결과가 나올 수 있다는 것을 지난 프로젝트를 통해 깨달았습니다. 내 운동 추적기의 텍스트 상자에 욕설이 쉽게 입력되지 않도록 방지하기 위해 bad-words npm 패키지를 사용했습니다.

프로젝트 요약

내 블로그나 Linkedin/Twitter 게시물에 주의를 기울이면 내 마지막 프로젝트가 동일한 Firestore 백엔드를 사용하는 운동 추적기였음을 알 수 있습니다. 정보를 구체화합니다. 그런 이유로 나는 당신이 실제로 사용할 수 있는 것과 같은 더 멋진 Bootstrap 기반 프런트 엔드로 이 프로젝트를 다시 수행하고 백엔드 코드를 다시 연습하고 싶었습니다.

이렇게 생겼고 차이점은 다음과 같습니다.


애플리케이션의 src 디렉터리에 firebase.js 파일을 생성하고 거기에서 Firebase에 대한 연결을 초기화하는 동일한 프로세스를 거치고 구성한 연결을 export 문이 있는 모듈로 앱의 나머지 부분에 대한 연결로 내보냅니다.

그런 다음 양식 구성 요소를 빌드하고 ReactuseState 후크를 사용하여 양식을 통해 사용자로부터 입력 데이터를 수집합니다. 양식이 완성되면 해당 데이터를 Firestore 데이터베이스로 보내고 다음과 같이 연결된 Firebase 메서드의 간단한 라인을 사용하여 runs 컬렉션 아래에 보관합니다.

import firebase from './firebase'

function handleSubmit(e) {
  ...
  firebase.firestore().collection('runs').add({run data goes here})
}

불필요한 욕설을 필터링하기 위해 bad-words npm 패키지의 미리 빌드된 메서드를 사용한 것은 Firestore로 보낼 객체를 정의할 때였습니다. 이에 대해서는 나중에 자세히 설명합니다.

데이터베이스에 저장된 연습 문제를 보기 위해 div로 둘러싸인 간단한 Bootstrap 테이블이 있는 RunsList.js라는 또 다른 구성 요소를 만들었습니다. 조건부 렌더링을 사용하여 "현재 표시할 실행이 없습니다."라는 문장을 표시합니다. 데이터베이스가 비어 있거나 데이터를 반환하지 않는 경우. 데이터가 있는 경우 테이블tr 요소를 채우고 Javascriptmap 메서드를 사용하여 데이터에서 행을 작성하여 각 개체를 반복합니다.

나쁜 단어 npm 패키지

멋진 npm 패키지의 전체 세계가 있으며 응용 프로그램에서 무언가를 수행해야 하는 경우 이를 위한 패키지가 있을 가능성이 있습니다. 나는 욕설 필터링에 대한 질문을 Google에 올렸고 이것이 나왔습니다. 랜딩 페이지는 매주 24,000회 이상의 다운로드를 자랑하며 패키지 구현은 매우 쉽습니다.

패키지를 설치한 후 파일에 패키지를 포함하고 다음과 같이 인스턴스화하십시오.

var Filter = require('bad-words'),
    filter = new Filter();

console.log(filter.clean("Don't be an ash0le"));

방금 네이티브 비속어 라이브러리를 사용했지만 자신만의 비속어를 정의할 수 있는 옵션도 제공하는데 매우 편리합니다. 이와 같은 패키지는 정규식으로 구축하기가 매우 간단하지만 누군가 그것을 내놓고 유지 관리하는 것이 좋습니다.

오늘은 간단한 요약이지만 더 나은 사용자 경험을 위해 더 나은 스타일과 약간의 데이터 조작으로 이 작업을 다시 수행하는 것이 즐거웠습니다. 앞으로 몇 주 동안 Firebase 학습에 더 집중할 예정입니다.