NgSysV.A 심각한 Svelte InfoSys: 규칙 친화적 버전

이 게시물 시리즈의 색인은 NgateSystems.com에 있습니다. 거기에서 매우 유용한 키워드 검색 기능도 찾을 수 있습니다.

최종 검토일: 2024년 11월

1. 소개

이 시리즈에서는 이전에 Google의 Firestore 데이터베이스 클라이언트 API와 함께 Svelte 프레임워크를 사용하여 유용한 정보 시스템을 빠르고 즐겁게 개발하는 방법을 설명했습니다. 그러나 안타깝게도 Post 3.3에서는 Firebase의 뛰어난 인증 시스템이 데이터베이스 규칙이 인증 개체를 참조하는 서버 측 load() 및 actions() 함수에서 Firestore 활동을 지원하지 않는다는 사실을 공개했습니다.

Firestore 인증 규칙을 건너뛰는 것은 선택 사항이 아닙니다. 이를 건너뛰지 않으면 웹 앱에서 firebaseConfig 키를 하이재킹할 수 있는 모든 사람에게 데이터베이스가 활짝 열려 있습니다. 이 게시물에서는 Firestore 규칙이 그대로 유지되는 동안 클라이언트 측에서 실행되도록 Svelte 서버 측 코드를 재작업하는 방법을 설명합니다.

2. '손상된' load() 함수 재작업

모든 load() 함수가 Firestore 규칙의 존재에 영향을 받는 것은 아닙니다. Firestore 공개 컬렉션을 참조하는 컬렉션은 여전히 ​​서버 측에서 원활하게 실행됩니다. 클라이언트 API는 page.server.js 파일에서 계속 사용할 수 있습니다. 인증으로 보호되는 컬렉션을 사용하라는 요청을 받으면 작동하지 않습니다.

load() 함수가 공개 파일을 처리하고 단순히 서버 측 디버깅을 피하려는 경우 load() 함수를 page.js 파일로 이동하는 것이 좋습니다. 이는 page.server.js 파일과 정확히 동일하게 작동합니다. Svelte는 로드 시 자동으로 함수를 실행합니다. 그러나 이는 이제 브라우저에서 디버깅할 수 있는 클라이언트 측에서 발생합니다. 자세한 내용은 데이터 로드에서 Svelte 문서를 참조하세요.

그러나 '손상된' load() 함수(일반적으로 사용자가 자신의 데이터에만 액세스할 수 있도록 하기 위해 Firestore 규칙을 사용하는 경우)는 클라이언트 측 코드로 재배치해야 합니다. 일반적으로 이는 <script> 관련 page.svelte 파일의 섹션입니다.</script>

그러나 이제 페이지 초기화 시 재배치된 load() 함수를 자동으로 실행하는 방법을 찾아야 합니다. 더 이상 기본 load() 함수에 대한 Svelte의 내장 배열의 이점을 누릴 수 없습니다. 문제는 재배치된 함수가 비동기식이므로 page.svelte 파일의 <script> 부분. 이 문제는 Svelte의 onMount 유틸리티를 사용하여 해결됩니다.</script>

"OnMount"는 웹앱 페이지가 시작될 때 자동으로 실행되는 Svelte 수명 주기 "후크"입니다. 이제 onMount() 내에서 재배치된 load() 함수를 안전하게 기다릴 수 있습니다. 이전에 로그아웃 함수에서 만났던 것을 기억하실 수 있습니다. Svelte Lifecycle Hooks에서 설명을 찾을 수 있습니다.

3. '손상된' actions() 함수 재작업

이 경우에는 선택 사항이 없습니다. 손상된 actions() 함수는 <script> 상위 page.svelte 파일의 섹션. 재배치된 기능을 참조하는 on:click 배열을 통해 작업을 "실행"하려면 여기의 양식 제출 버튼을 재작업해야 합니다.</script>

4. 예: 제품 표시 페이지의 규칙 친화적 버전

다음 코드 예제에서 새로운 products-display-rf 경로는 productNumbers의 이전 "Magical Products" 목록을 표시합니다. 여기에 사용된 load()는 손상되지 않았지만 해당 코드는 여전히 page.js 파일로 이동되어 브라우저에서 디버깅할 수 있는지 확인할 수 있습니다. 유일한 다른 변경 사항은 다음과 같습니다.

• 이제 코드에는 "Magical Products" 목록의 제품 항목을 클릭할 때 productDetails 필드를 표시하는 확장이 포함됩니다.
• firebase-config는 이제 지난 게시물에 소개된 lib 파일에서 가져옵니다.

// src/routes/products-display-rf/+page.svelte
<script>
    export let data;
</script>

<div>





<pre class="brush:php;toolbar:false">// src/routes/products-display-rf/+layout.svelte
<header>
    <h2>





<pre class="brush:php;toolbar:false">// routes/products-display-rf/+page.js
import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { db } from "$lib/utilities/firebase-client"

export async function load() {

  const productsCollRef = collection(db, "products");
  const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
  const productsSnapshot = await getDocs(productsQuery);

  let currentProducts = [];

  productsSnapshot.forEach((product) => {
    currentProducts.push({ productNumber: product.data().productNumber });
  });

  return { products: currentProducts }
}

// src/routes/products-display-rf/[productNumber]/+page.svelte
<script>
  import { goto } from "$app/navigation";
  export let data;
</script>

<div>





<pre class="brush:php;toolbar:false">// src/routes/products-display-rf/[productNumber]/+page.js
import { collection, query, getDocs, where } from "firebase/firestore";
import { db } from "$lib/utilities/firebase-client";

export async function load(event) {
  const productNumber = parseInt(event.params.productNumber, 10);

  // Now that we have the product number, we can fetch the product details from the database

  const productsCollRef = collection(db, "products");
  const productsQuery = query(productsCollRef, where("productNumber", "==", productNumber));
  const productsSnapshot = await getDocs(productsQuery);
  const productDetails = productsSnapshot.docs[0].data().productDetails;

  return {
    productNumber: productNumber, productDetails: productDetails
  };
}

이 코드를 "-rf" 접미사 폴더의 새 파일에 복사하세요. 하지만 이 작업을 수행할 때 주의를 기울이십시오. VSCode의 비좁은 폴더 계층 구조에서 혼란스러운 페이지 파일을 많이 작업하려면 집중이 필요합니다. 완료되면 개발 서버를 실행하고 http://localhost:5173/products-display-rf 주소에서 새 페이지를 테스트하세요.

'제품 표시' 페이지는 이전과 동일하게 보이지만 클릭하면 '제품 세부정보' 페이지에 동적으로 생성된 콘텐츠가 표시됩니다.

5. 예: 제품 유지 관리 페이지의 규칙 친화적 버전

클라이언트측 버전의 제품 유지 관리 페이지에서는 상황이 더 흥미로워집니다.

이제 제품 컬렉션에 대한 Firebase 규칙이 인증을 참조하므로(따라서 잠재 사용자가 '로그인'해야 함) 새 제품 문서를 추가하는 actions() 함수가 손상됩니다. 따라서 이는 page.server.js 파일에서 이동하여 상위 page.svelte 파일로 재배치되어야 합니다.

여기서 함수는 handlerSubmit()으로 이름이 바뀌고

의 on:submit={handleSubmit} 절에 의해 "실행"됩니다. 제품 데이터를 수집하는 곳입니다.

제품 유지 관리 페이지에는 load() 기능이 없지만 onMount는 여전히 업데이트된 페이지 벨트 파일에 있습니다. 이는 onMount가 로그인하기 전에 유지 관리 페이지를 실행하려는 사용자를 유용하게 리디렉션하는 유용한 방법을 제공하기 때문입니다.

새 products-maintenance-rf/ page.svelte 파일과 업데이트된 /login/ page.svelte 파일에서 아래 나열된 논리를 따를 수 있는지 확인하세요.

// src/routes/products-maintenance-rf/+page.svelte
<script>
    import { onMount } from "svelte";
    import { collection, doc, setDoc } from "firebase/firestore";
    import { db } from "$lib/utilities/firebase-client";
    import { goto } from "$app/navigation";
    import { auth } from "$lib/utilities/firebase-client";
    import { productNumberIsNumeric } from "$lib/utilities/productNumberIsNumeric";

    let productNumber = '';
    let productDetails = '';
    let formSubmitted = false;
    let databaseUpdateSuccess = null;
    let databaseError = null;

    let productNumberClass = "productNumber";
    let submitButtonClass = "submitButton";

    onMount(() => {
        if (!auth.currentUser) {
            goto("/login?redirect=/products-maintenance-rf");
            return;
        }
    });

    async function handleSubmit(event) {
        event.preventDefault(); // Prevent default form submission behavior
        formSubmitted = false; // Reset formSubmitted at the beginning of each submission

        // Convert productNumber to an integer
        const newProductNumber = parseInt(productNumber, 10);
        const productsDocData = {
            productNumber: newProductNumber,
            productDetails: productDetails,
        };

        try {
            const productsCollRef = collection(db, "products");
            const productsDocRef = doc(productsCollRef);
            await setDoc(productsDocRef, productsDocData);

            databaseUpdateSuccess = true;
            formSubmitted = true; // Set formSubmitted only after successful operation

            // Clear form fields after successful submission
            productNumber = '';
            productDetails = '';
        } catch (error) {
            databaseUpdateSuccess = false;
            databaseError = error.message;
            formSubmitted = true; // Ensure formSubmitted is set after error
        }
    }
</script>

Product Number

// src/routes/login/+page.svelte
<script>
    import { onMount } from "svelte";
    import { goto } from "$app/navigation"; // SvelteKit's navigation for redirection
    import { auth } from "$lib/utilities/firebase-client";
    import { signInWithEmailAndPassword } from "firebase/auth";

    let redirect;
    let email = "";
    let password = "";

    onMount(() => {
        // Parse the redirectTo parameter from the current URL
        const urlParams = new URLSearchParams(window.location.search);
        redirect = urlParams.get("redirect") || "/";
    });

    async function loginWithMail() {
        try {
            const result = await signInWithEmailAndPassword(
                auth,
                email,
                password,
            );
            goto(redirect);
        } catch (error) {
            window.alert("login with Mail failed" + error);
        }
    }
</script>

<div>



<p>Test this by starting your dev server and launching the /products-maintenance-rf page. Because you're not logged you'll be redirected immediately to the login page. Note that the URL displayed here includes the products-maintenance-rf return address as a parameter. </p>

<p>Once you're logged in, the login page should send you back to products-maintenance-rf. Since you're now logged in, the new version of the product input form (which now includes a product detail field) will be displayed.</p>

<p>The input form works very much as before, but note how it is cleared after a successful submission, enabling you to enter further products. Use your products-display-rf page to confirm that new products and associated product details data are being added correctly.</p>

<p>Note also, that when a user is logged in, you can use the auth object thus created to obtain user details such as email address:<br>
</p>

<pre class="brush:php;toolbar:false">const userEmail = auth.currentUser.email;

인증에서 사용할 수 있는 다른 기능을 알아보려면 chatGPT를 확인하세요. 예를 들어, 사용자의 uid를 사용하여 해당 사용자가 '소유한' 문서만 표시할 수 있습니다.

6. 요약

간단한 목표가 있는 경우 모든 결함에도 불구하고 여기에 설명된 '규칙 친화적' 접근 방식이 귀하의 요구 사항에 완벽하게 적합할 수 있습니다. 클라이언트측 Svelte는 빠르고 쉽게 개인 애플리케이션을 개발할 수 있는 멋진 놀이터를 제공합니다. 하지만 무엇을 잃었는지 주의하세요:

• 효율적인 데이터 로딩 - 데이터가 화면에 나타날 때까지 지연이 발생할 수 있습니다.
• 보안 입력 유효성 검사
• 확실한 SEO

진지한 소프트웨어 개발자로서의 경력을 쌓고 싶다면 계속 읽어보시기 바랍니다. 하지만 상황이 점점 더 "흥미로워"진다는 사실을 주의하세요!