WeCode Boopdogyクローン符号化(Front-End)

プロジェクトの概要🤔

海外で子犬の飼料を専門に提供するCummersサイトクローンコード

Github

イメージ

開発サイクル🤔

20 2020年12月14日~2020年12月24日(11日)

組員🤔

3名フロント

両バックエンド

テクノロジースタックと実装機能🤔

フロントエンド

React.js(class component)

React Router

Sass/Scss

実装機能

私が実施した部分は⌝で、チームメンバーが実施した部分は👏🏻
1.会員登録ページ👏🏻
2.ホームページ👏🏻
3.カタログページ
4.商品詳細ページ👏🏻
5.ショッピングバスケット👏🏻
6.完全商品検索ページ
7.コメントページ👏🏻
私が担当している部分は商品リストページ(3)、商品検索ページ全体(6).
特に、商品リストページについてはcategoryの変更時に異なる商品のデータを受信するためのコードを作成し、title基準の昇順/降順と価格基準の昇順/降順にソートできるように論理を構成した.

残念な点

商品リストは全部で3つの状況に分かれている.(一般商品、割引商品、在庫無し商品)
3つの構成部品をそれぞれ作成し、条件付きでレンダリングします.この3つの構成部品にも重複する部分がたくさんあります.したがって、3つの構成部品の共通部分を1つの構成部品としてレンダリングし、異なる部分だけを異なる条件でレンダリングすると、重複するコードを減らすことができます.

覚えたい部分1

カテゴリの構成にはselect,optionTagを用いた.
問題は!ページをリフレッシュすると、UIは常に選択したカテゴリではなく、最初のカテゴリに置き換えられていることがわかります.

この部分では、正式なドキュメントの重要性を改めて感じました.私が参考にした部分はhttps://ko.reactjs.org/docs/forms.htmlのselectラベル部分です.
商品カテゴリを変更するたびに、option tagのvalueセクションにsetState値を指定し、selecttagのvalueセクションに割り当てます.

覚えたい部分2

product.price.toLocaleString('en-US', {
                  style: 'currency',
                  currency: 'EUR',
                })

ToLocaleStringメソッドを使用して、価格を受け取り、ご希望のフォーマットで処理します.「mdnサイト」を参照してください.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString

ファイルツリー構造

├── Components
│   ├── Footer
│   │   ├── Footer.jsx
│   │   └── Footer.scss
│   ├── MainHeader
│   │   ├── MainHeader.jsx
│   │   ├── MainHeader.scss
│   │   └── mainHeader_img.jpg
│   ├── Nav
│   │   ├── Nav.jsx
│   │   └── Nav.scss
│   ├── Reviews
│   │   ├── Components
│   │   │   └── ReviewCard
│   │   │   ├── ReviewCard.jsx
│   │   │   └── ReviewCard.scss
│   │   ├── Reviews.jsx
│   │   └── Reviews.scss
│   └── Search
│   ├── SearchBarModal.jsx
│   ├── SearchBarModal.scss
│   ├── SearchResults.jsx
│   └── SearchResults.scss
├── Pages
│   ├── Account
│   │   ├── Account.jsx
│   │   └── Account.scss
│   ├── Cart
│   │   ├── Cart.jsx
│   │   ├── Cart.scss
│   │   └── Components
│   │   └── CartList
│   │   ├── CartList.jsx
│   │   └── CartList.scss
│   ├── Login
│   │   ├── Components
│   │   │   ├── SignIn.jsx
│   │   │   ├── SignIn.scss
│   │   │   ├── SignUp.jsx
│   │   │   └── SignUp.scss
│   │   ├── Login.jsx
│   │   └── Login.scss
│   ├── Main
│   │   ├── Components
│   │   │   ├── Categories
│   │   │   │   ├── Categories.jsx
│   │   │   │   └── Categories.scss
│   │   │   ├── FeaturedProduct
│   │   │   │   ├── FeaturedProduct.jsx
│   │   │   │   └── FeaturedProduct.scss
│   │   │   ├── Features
│   │   │   │   ├── Features.jsx
│   │   │   │   ├── Features.scss
│   │   │   │   └── features_img.jpg
│   │   │   ├── Intro
│   │   │   │   ├── Intro.jsx
│   │   │   │   └── Intro.scss
│   │   │   └── Steps
│   │   │   ├── Steps.jsx
│   │   │   └── Steps.scss
│   │   └── Main.jsx
│   ├── ProductDetail
│   │   ├── Components
│   │   │   ├── ProductSection.jsx
│   │   │   ├── ProductSection.scss
│   │   │   ├── ReviewCard.jsx
│   │   │   ├── ReviewCard.scss
│   │   │   ├── Reviews.jsx
│   │   │   └── Reviews.scss
│   │   ├── ProductDetail.jsx
│   │   └── ProductDetail.scss
│   └── ProductList
│   ├── Components
│   │   ├── Option.jsx
│   │   ├── Product.jsx
│   │   ├── Product.scss
│   │   ├── ProductListHeader.jsx
│   │   ├── ProductListHeader.scss
│   │   ├── ProductSale.jsx
│   │   ├── ProductSale.scss
│   │   ├── ProductSoldOut.jsx
│   │   └── ProductSoldOut.scss
│   ├── Data
│   │   └── ProudctListData.js
│   ├── ProductList.jsx
│   └── ProductList.scss
├── Routes.js
├── config.js
├── fonts
│   ├── THICCCBOI-Black.woff2
│   ├── THICCCBOI-Bold.woff2
│   ├── THICCCBOI-ExtraBold.woff2
│   ├── THICCCBOI-Light.woff2
│   ├── THICCCBOI-Medium.woff2
│   ├── THICCCBOI-Regular.woff2
│   ├── THICCCBOI-SemiBold.woff2
│   ├── THICCCBOI-ThicccAF.woff2
│   └── THICCCBOI-Thin.woff2
├── index.js
└── styles
├── _color.scss
├── _font.scss
├── common.scss
└── reset.scss
29 directories, 75 files

感じている

のバックエンドとのコミュニケーションが非常に重要であることに気づきました.まず、私が担当しているページはバックエンドから情報を受信して展示している部分ですが、キー値がどのように与えられているのか、apiアドレスが何なのか、一つ一つ調整する過程は初めてなので、うまくいきません.以下のプロジェクトはこれらの方面に対していくつか補充を行って、私达に深くプロジェクトを展開する必要性を体得させました.