🏌️‍♀️ 覚えたいコード

「削除付き」から「テキスト」へのHTMLコードを追加したい場合!!

私たちのグループはKakafriendsゴルフのホームページの画像の著作権の問題のため、著作権のない役を探して、직접 목이미지들을 만들어 웹페이지에 활용、だから製品によって詳しい画像を作るのは時間の制限があります.

なので、製品別ではなく카테고리(일렉트로닉, 웨어, 리빙)별로 같은 상세 이미지 리스트を飛ばすことにしました.

に達するために、各カテゴリに必要なHTMLがバックエンドに渡され、バックエンドはカテゴリに適合する寸法に제품 정보와 함께 해당 HTMl정보를 데이터화を提供する.

今はページにデータを置くだけでいいので、他のデータをレンダリングするのはレンダリングのように簡単だと思いますが、データはstring형으로 전달되기 때문에 프로그램으로 하여금 HTMl이라는 것을 인식하게 하려면 특정 메서드가 필요です.

以降も役に立つ場所があるので、このように記録しておきます😋

Reactでは、サイト間スクリプト(XSS)攻撃を防ぐために、htmlタグを含む文字列形式をレンダリング方法の内部でレンダリングすると、ラベルは無効になり、文字列に従ってレンダリングされます.

この場合、

を用いて“난 문자열을 html 형태로 렌더링하게되면 취약한걸 알고있어. 그리고 여기에 난 대비하고 있으니까 걱정 마!”というコードの ‘dangerouslySetInnerHTML’に通知すると、所望の結果が得られる.

注意すべき部分
その後javascript構文が必要な場所があったので、HTMLコードをバックエンドに転送しました.これらのデータをレンダリングしたときは자바스크립트 문법을 사용한 부분이 전혀 적용되지 않는 것でした.
ここで再学習した部分-> ‘dangerouslySetInnerHTML’はHTMLコードのみ受信でき、残りの部分は適用されません...だから途中でjavascript文法が必要な部分を除いて悲しい話を改めて伝えました...しかし、必要な部分を学びました:)

「消費者クラス詳細」ページのAPI fetch()

カートを実施する過程で、カートの内部機能の実現自体も困難に直面したが、最初のプロジェクトが発表される前に、バックエンドとどのようにデータ交換を行うかが最も困惑し、困難であった.
私は詳細なページとショッピングバスケットを担当しています.ある意味では、消費者から구매가 이루어질 수 있는 거의 모든 루트を担当しています.カートの内部機能を実施する際、バックグラウンドスタッフは상세페이지 - 장바구니페이지 - 구매페이지間のデータ移動ロジックを整理し、教えてくれたが、エンドポイントを取得しようとする前に、全く感じなかった.

order typeキー

バックエンドで記述される論理には、次の4つのorder typeキーのbellクラス値があり、データを送信するたびにこれらの値を入力する必要があります.これらの値は状況に応じて正確に入力する必要があるため、バックエンドスタッフはTRELOというコラボレーションツールで親切に説明した.

"IN CART":注文リストをカートに入れる(たとえば、詳細ページのカートボタンをクリックする)

.

「PURCHASE INSTANT」:注文をすぐに購入して「注文」ページに表示したい場合(たとえば「詳細ページ」をクリック)、

「PURCHASE CART」:選択した受注リストをカートの受注ページに送信する場合(たとえば、「カートから購入する製品を選択」ボタンをクリック)、

「PURCHASED」:製品を購入したい場合(たとえば、「注文」ページの「支払」ボタンをクリック)

HTTPメソッド-メソッド:「POST」/「PATCH」

GETおよびDELETEに加えて、POST、PUT、およびPATCHは、要求の送信時に本明細書を一緒に送信することができる.

メソッド:「POST」-メッセージ・ボディを介して要求データをサーバに送信します.サーバは、メッセージボディを介して受信データを処理するすべての機能を実行します.主に新資源の登録、プロセス処理などに用いられる

方法:PATCH-リソースの一部を変更します(完全な変更とは異なります).

POST /orders

の詳細ページにカートを記入すると、次のようになります.
order typeをIN CART POST

とする
「

」をクリックして詳細ページを購入します.
order typeをPURCHASE INSTANT POST

とする

カートページで数量を変更
変更されたアイテム情報POSTからorder type「IN CART」へ
-ショッピングバスケットでアイテムの数を変更したり、リストからアイテムを削除したりした場合、ショッピングバスケットページから注文ページに移動すると、'POST'を介して変更データが渡されます.
-->受注ページに移動した場合、上記の手順が成功した場合(status==="SUCCESS")、order type"PURCCHASE CART"を使用して'PATCH'(下記のPATCH/ordersを参照)

を行います.

PATCH /orders

カートページで「注文」(Order)をクリックします.
注文する製品のorder idをorder idリストに含め、order typeをPURCCHASE CARTとしてPATCHする

//카트에서 주문하기 버튼
onClickOderBtn = () => {
    const currentCart = [];
    this.state.cartProductData.forEach(el => {
      const newObj = {};
      newObj['product_id'] = el.product_id;
      newObj['quantity'] = el.quantity;
      currentCart.push(newObj);
    });
    const orderData = this.state.cartProductData.map((el, i) => el.order_id);
    fetch('http://api.kokoafriendsmart.com/orders', {
      method: 'POST',
      headers: {
        Authorization: localStorage.getItem('accessToken'),
      },
      body: JSON.stringify({
        order_list: currentCart,
        order_type: 'IN_CART', //카트에서 수정데이터 전달
      }),
    })
      .then(res => res.json())
      .then(data => {
        if (data.status === 'SUCCESS') {
          fetch('http://api.kokoafriendsmart.com/orders', {
            method: 'PATCH',
            headers: {
              Authorization: localStorage.getItem('accessToken'),
            },
            body: JSON.stringify({
              order_id_list: orderData,
              order_type: 'PURCHASE_CART', //카트에서 주문하기 버튼
            }),
          })
            .then(res => res.json())
            .then(data => {
              if (data.status === 'SUCCESS') {
                this.props.history.push('/payment?orderType=PURCHASE_CART');
              }
            });
        }
      });
  };

  //상세페이지 장바구니 추가 버튼
  onClickAddCartBtn = e => {
    if (window.confirm('이 상품을 장바구니 추가하시겠습니까?')) {
      fetch('http://api.kokoafriendsmart.com/orders', {
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('accessToken'),
        },
        body: JSON.stringify({
          order_list: [
            {
              product_id: this.props.match.params.id,
              quantity: this.state.quantity,
            },
          ],
          order_type: 'IN_CART', //상세페이지 장바구니 추가 버튼
        }),
      });
    } else {
      e.preventDefault();
    }
  };

//상세페이지 구매 버튼
  purchaseInstantBtn = e => {
    if (window.confirm('이 상품을 구매하시겠습니까?')) {
      fetch('http://api.kokoafriendsmart.com/orders', {
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('accessToken'),
        },
        body: JSON.stringify({
          order_list: [
            {
              product_id: this.props.match.params.id,
              quantity: this.state.quantity,
            },
          ],
          order_type: 'PURCHASE_INSTANT', //상세페이지 구매 버튼
        }),
      })
        .then(response => response.json())
        .then(result => {
          if (result.status === 'SUCCESS') {
            this.props.history.push('/payment?orderType=PURCHASE_INSTANT');
          }
        });
    } else {
      e.preventDefault();
    }
  };

機能の実現も重要ですが、個人的には非常に重要なプロジェクトだと思います.バックエンドとのコミュニケーション方法と、データとのシームレスなコミュニケーション方法がどれほど重要かを理解しました.)