02.GIFTプロジェクトの回顧:ページ、コンポーネントの紹介

期間:22.01.06～22.01.28
名称:GIFT
件名:GIPHY Webサイトのクローン作成と改善
技術:React、Type script、styled-componses、StoryBook、Redux、Webpack
リンク:GIFT配置リンク
ウィキペディア:GIFT Kindhub Weki
チームメンバー:@congaweb、@jkpark104、@sosoYim
🚩 GIPHYの公式Webサイトgiphy.comをクローンし、パフォーマンス、アクセス性、UXの改善、react、styled-componse、typescript、storybookなどの技術を熟知したいと考えています.

ページの概要

ホームページ

キー構成部品の概要

プロジェクトの進行中に印象に残ったコンポーネントを紹介しましょう.

ロゴアニメーション

各要素を順次描画

動画を一定時間ごとに繰り返し再生

このプロジェクトで使用するframer-motionは、コントロール要素のアニメーションを宣言するライブラリです.Framer motion公式ドキュメントショートカット
SVGアニメーションは不透明またはscaleX、scaleY属性で実現されます.ライブラリで指定したuseAnimation hookを使用して順次再生し、sequenceAnimation関数を作成し、実行時にアニメーションを定義および実行します.

// useAnimation 훅을 사용하여 컨트롤 객체 생성
const control1 = useAnimation();
const control2 = useAnimation();

function sequenceAnimation() {
  // (기타 컨트롤 생략)
  // 초기 값 설정
  control1.set({ opacity: 0, scale: 0 });
  control2.set({ scaleX: 0, x: '-5%' });

  // promise를 반환하는 start 메서드를 호출하여 순차적으로 애니메이션을 실행하는 sequences 함수 만들기
  const sequences = async () => {
    await control1.start({
      opacity: 1,
      scale: 1,
      transition: { duration: 0.2 },
    });
    await control2.start({ scaleX: 1, x: 0 });
  };
  sequences();
}

上で定義したuseEffectをsequenceAnimationで実行します.次に、setIntervalを使用してタスクを繰り返し実行し、一度実行したスケジューリング関数はclearIdで受信され、削除されます.

  useEffect(() => {
    sequenceAnimation();
    const clearId = setInterval(sequenceAnimation, 6000);
    return () => clearInterval(clearId);
  }, [control1, control2, control3, control4, control5]);

✨ SvgIcon

装飾的か有意義かを区別する

svg-spriteテクノロジーsvg画像-useプロパティ

をレンダリングする

デフォルトでは親が満たされています

size可変-width,height属性

モノクロで色を変更可能-fillプロパティ

を使用
svg-spriteテクノロジーを使用して、propsのコンポーネントとしてuse属性に使用するidを受信します.値をlabel propsに渡すかどうかによって、装飾的な要素として使用したり、意味のある要素として使用したりすることができます.
装飾要素として使用:次の検索ボタンの内部で使用されるアイコンは、検索ラベルが付いているため、装飾要素としてのみ使用されます.

意味のある要素として使用:逆に、「検証済み」の意味を持つバッジ要素はverifiedをlabel propsに渡し、次のタイトルを持つようにします.

✨ A11yhidden

必要なタグを指定できる必要があります

タグのサブエレメントは画面に表示されませんが、アシストデバイスで

を読み込む必要があります.

focusの場合、表示

に設定できる必要があります.
デザインでは表示されないタイトルラベルやラベルなどの構成部品に使用されます.styled-componsesなので、どのhtmlタグをpropsとして渡すだけでいいです.エレメントのサブアイテムとして非表示にするエレメントを作成します.

  overflow: hidden;
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  clip-path: circle(0);
  width: 1px;
  height: 1px;
  margin: -1px;
  white-space: nowrap;

A 11 yHidden要素のルート要素には、画面に表示されないように、上記のスタイルが用意されています.
focusの処理は$focasablepropsを受け取り,この値がtrueである場合にのみ,上記要素の隠蔽に対して逆の処理を行った.

検索バー

クエリーを入力するたびに、イベントハンドラは再定義されません.useCallback

を使用します.

関連クエリーを受信し、推奨する-エスケープ・テクノロジーを使用

同一クエリーの発行時に再登録しない-submitプロセッサによって制御

質問:検索バー(Input)のonBlurイベントでフォーカスが離れた場合、関連する検索語コンポーネントが非表示になります.したがって、関連クエリーをクリックすると、リンクを移動する前にコンポーネントが非表示になり、リンクを移動できません.

悩み:まず考えられる解決策は、関連クエリー領域と他の領域を区別してイベントを処理することです.ただし、区別するためには、イベント処理を最上位のルート要素にアップグレードする必要があります.素子ユニットの開発の観点から,これはあまり適切ではないようだ.

解決策::focusで処理しますが、関連クエリーの処理が追加されました.まず、関連検索語のステータスonBlurと、現在のページで検索されたキーワードisOpenが表示されるかどうかを管理します.操作手順は次のとおりです.

「最近」を使用して、フォーカス移動の要素actualKeyword「ローカルエリアネットワークツリー」に特定のクラスが含まれているかどうかを決定します

isOpenをfalseまたは検索バーまたは関連検索に置き換えます.

関連クエリー領域の場合、選択したリンクのテキスト(関連クエリー)を抽出することによって、実際の値Keywordが更新されます.

ステータスの変更により再登録され、新しい検索結果が表示されます.

定規

インタラクティブ-ウィンドウビューポートの幅に応じて条件付きレンダリング

Cimantic構造-Cimanticラベル

を使用

サブメニューはタイトル上部の真下にあり、位置属性

を使用します.

最小再読み込み-タイトル上部のusemo

再読み込みの最小化:

質問:テキストを入力し、画面幅を調整するとすぐに検索を再読み込みし、タイトル上部

を再読み込みします.

ソリューション:useMemoを使用して検索バー以外のtop-stext

を記憶する

状態に応じて条件付きレンダリングを行い、反作用を実現します.

relatedTarget現在のモバイル版とデスクトップ版のどちらを管理

documentのwidth値が既存のismobile状態と一致しない場合の更新状態
(widthがブレークポイントより小さい場合、ismobileはfalse、逆も同様)

✨ Taglist

@congawebで作成され、コードコメントで作業中の悩みを共有できます.これは単純に見えるTaglitだが,反応の動作原理を知る必要があるタスクである.

タスク:

現在のブラウザから出力されているgifの水平長を超えない場合に登録タグリスト

登録されていないタグがある場合は、「その他」(+)ボタン

を入力してください.

gifの大きさは固定しない

tagの文字数に制限はありません

各文字の幅が異なる

ソリューション:Layoutとステータス変更を使用して実装

スクリーンに最初に出力されるタグのテキストと、[その他]ボタンをクリックしたときに表示されるテキストを含む配列を選択しました.

スクリーンレイアウトを描画してから、上記の条件でどのくらいのTagコンポーネントをレンダリングするかがわかります.useLayoutのレイアウトは測定状態にあるため、必要なタグの長さを計算することができ、塗装前のステップであるため、再アップロード時に点滅せずにアップロードすることができる.

の最後の部分

次の章では、GIFTチームがパフォーマンスの最適化とアクセス性の面で行った努力を共有し、まとめを振り返ります.