宣陵ビール

2週間のチームプロジェクトが終わった後、READMDを作りました.今、私は本当のプロジェクトが終わったという実感があります.
フロントを担当し、済州ビールの仙陵ビールをクローンしたプロジェクトを行いました.
仙陵ビールフロント住所github.
下のホームページをクリックするとYouTubeのデモ動画を閲覧できます.

フロントエンドでは,応答によりプロジェクトを行い,クラス素子を用いて実装した.
適用されたテクノロジーについては、CRAはデフォルトのアイテムを設定し、主にreact、react router、Sass、およびより高度なJavaScriptを使用します.
また,DompurifyとReact Daum Postcodeを用いて必要な機能を実現した.
総実現ページにはホームページ、登録、会員入力、商品リスト、商品詳細、ショッピングバスケット、支払いなどが含まれており、私が実現したページはホームページ、商品詳細、支払いページです.

ホームページ

ホームページについては、上記の画像と同様に、ホームページについては、キャッシュユニット機能のみを有し、キャッシュユニットを応答として実装しようとするのは初めてであるため、非常に困難なタスクである.
画面切り替え時にスムーズに切り替えたいと思っていましたが、今はページ切り替えだけに注目しています.これは、応答の中でページ切り替えとステータスを管理する方法を考えるきっかけです.
初期段階で、各ページのステータス値をホームページごとに持ち、値を変更してアイデンティティが選択されているかどうかを判断する場合は、現在選択されている配列のcurrentIndex:0のインデックス値を使用してステータスを変更して、現在のロケーション、移動する場所や選択する場所など、位置の変化に柔軟に対応できます.

Before :
{
    "id": 1,
    "imgUrl": "주소",
    "imgAlt": "alt",
    "isSelected": true
 }
After :
currentIndex: 0 

詳細ページ

ホームページの後に実装される詳細ページ.
詳細ページでは、react-router-domの動的ルーティングにより商品IDをJSON形式のデータにインポートし、stateにより商品詳細を取得し、innerHtmlを用いて以下の商品説明を処理する.
初期reactでinnerHtmlをどのように処理するかを考えたところ,dangerouslySetInnerHTMLが理解され,xss部分のフィードバックが得られ,Dompurifyというライブラリを介して以下のフィルタリングによりhtmlが挿入され実現された.
[詳細]ページでは、分割された構成部品内でイベントとステータスを管理する方法を学習した可能性があります.

class GoodsDetail extends React.Component {
  render() {
    const { goods, detailRef } = this.props;
    const desc = DOMPurify.sanitize(goods.description);

    return (
      <div className="goods-detail" ref={detailRef}>
        <div className="goods-wrapper">
          <div dangerouslySetInnerHTML={{ __html: desc }}></div>
          <GoodsInfo info={goods.info} />
          <DeliveryInfo />
          <Refunds />
        </div>
      </div>
    );
  }
}

Mock Dataを使用した開発では、数のイベントの一部をコンポーネントに配置しますが、実際に変更したイベントに必要な内容は、次の他のコンポーネントに適用され、ステータスとステータスの変更を適用する必要があるコンポーネントに移動し、コンポーネントを最初に分割したときに明らかになりました.これは、2回見逃した場合に1回のタスクを完了し、構成部品のステータスとイベントの位置を考慮できるきっかけです.

金を払う

これが最後の支払いページです.
最初は、支払いページは難しくないと思っていましたが、チェックロジックが思ったよりずっと複雑なので、状態、イベント、関数が多すぎるので、非常に難しいページでした.
初期最終支払金額の数と合計金額を計算する際、reduceを使用しようと考えたことがありますが、この部分では、reduceの初期設定値の関数の理解が少なく、困難に直面しています.
価格と数量の面では配列中のオブジェクトとして管理しているが,既存のreduceを学習する際には配列の下の数値タイプの形式しか使用していないため,オブジェクトに入るデータの初期値がオブジェクトであるとは思わなかったため,reduce関数内では初期値type of関数でオブジェクトタイプを分岐処理した場合,最終的な支払金額を算出した.産賀と表現した
ただし、プロジェクトの1つがプロジェクトである場合、objectタイプがすぐに返され、値を正しく参照できなくなり、エラーが発生します.これはreduceドキュメントを再参照して問題を解決するきっかけです.

var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) {
    return accumulator + currentValue.x;
},initialValue)

console.log(sum) // logs 6

チェックロジックの一部は、必要な部分の状態を管理しようとするが、多くの状態とチェックに使用される関数のため、これを直感的に見ることは困難であり、this.props.childrenを使用して各情報を実現しようとすると、結果的に表示されるページのhtmlコードが多すぎてhtmlスクリーンが直感的ではない.
表示を容易にするために、構成部品を再分割するかどうかを検討してきましたが、このセクションでは、ㅣㅣㅣSLASH 21-業務で直接使用するFrontend Clear Codeという参照資料を使用して構成部品を分割することにしました.そのため、いくつかの構成部品を追加しましたが、より簡潔なページ自体と実際に実行されている各要素では、これらの構成部品をより直感的に処理することができます.すべて

最後に...

プロジェクトは無事に終了しましたが、私が知っている部分や、私が知りたい基本的な反応のstateを間違っていました.これは、スプレッドシート演算子(propsによるステータス管理など)をより明確に理解し、コンポーネントをよりよく管理する方法と、簡潔なコードの準備方法を自分で考える良い機会です.
このことをきっかけに、今まで持っていたきれいできれいなコードを作っていきたいと思い、近づいていきたいと思います.