構成部品単位で開発

Component Driven Development

CDDは,レゴのように部品を組み立てるように,部品単位でUIコンポーネントを製造する開発である.

計画者からページに至るまで、デザイナーと開発者が協力して設計と開発を行った.

ページがすべて完了し、別のページに適用されるボタンの追加企画案が近づいています

しかし、追加ページのボタンは、以前の計画時に使用されたボタンと同じように要求される.

このような場合に使用することを指す.쉽게 말하면 재사용 할수 있게 구현을 따로 해놓는 것을 말한다.実際にCDDを使用しているサイト

https://bbc.github.io/psammead/?path=/story/components-brand--with-brand-link

https://uikit.wfp.org/docs/index.html?path=/docs/templates-browser-warning-outdated--error-dialog

CDDがブレイクするにつれて、素子ブラウザというものが現れ、そのうちの1つ:Storybookを理解しましょう.

Storybook

UI開発を行うツールと考えられる.
各構成部品は個別に表示でき、一度に1つの構成部品でのみ動作します.
再利用性を向上させるために、素子を記録して自動的に可視化し、シミュレーション可能な様々なテストステータスを表示することもできます.
StoryBookがサポートする主な機能
ディレクトリ

UIコンポーネント

構成部品の変更をStories

に保存

は、ホットモジュールの再ロードなどの開発ツールの経験を提供します.

反応器

を含む複数のビューレイヤをサポート
何の話かよくわからないそうなんです!!

JSでのCSSメソッド

インターネットの発展に伴い、CSSも成長した.
開発者にとって、統一されていないCSSモデルはすでに大きな障害となっており、モバイル機器やタブレットなどの各種機器の出現によりウェブサイトの形式が多様化しているため、CSSもさらに複雑になっている.ううう
したがって,CSSを構造化する必要がある.
これらの問題によりCSS前処理の概念が出現した.
ツール

は、CSSを構造的に作成するのに役立つ
私たちはよくCSSを使って、大量の重複作業を要求します.
それだけでなくクラスの転送などによりCSSが複雑になりメンテナンスが難しくなってきています.
これらの問題は,プログラミング概念(変数,関数,継承など)を用いて解決できる.
ただし、これらのプリプロセッサのみを使用することはWebサーバに認知させることができないため、CSSプリプロセッサごとに一致するコンパイルを使用する必要があります.コンパイルされたドキュメントは、実際には私たちが使用しているCSSドキュメントです.

に変換します.

CSS前処理で最も有名なSASSはCSSを拡張するスクリプト言語である.
つまり、CSSを生成する言語としては、JSのように、ある属性の値を変数として宣言し、必要な場所に宣言された変数を適用し、重複するコードを一度の宣言として複数の場所で重複させることができる.&base-color: rgba(0,0,0,0)のように変数を宣言し、必要に応じて使用します.
しかし、間もなくSASSの欠点が優位性よりも多いことがわかりました.これらの問題を補うために、
BEM、OOCS、およびSMACSSのようなCSS方法が出現する.
方法論の共通点
1.コードの再使用
2.コードの簡潔化
3.コードの拡張性
4.コードの予測性
これらCSSメソッド論はチーム同僚のチームワークにもつながりますので,コラボレーションを行う場合にはルールを作ることが重要です

BEM

代表的なCSS方法論である.
Block-Filement-MOdifierを使用してクラス名を作成します.
-と区切ります.header_navigation--navi-test{ color:red; }使用します.
しかし、まだ問題があるため、CS-In-JSが誕生した.

CSSを構成部品領域

に導入する方法
代表的なStyled-Component

は、UIを機能またはステータスコンポーネントから完全に分離して使用することができる非常に簡単なモードを提供する.

の代わりに、ページをすばやくロードするのは不利です.

Styled-Component

既存のCSS構文でも、スタイル属性の返信コンポーネントを含むライブラリを作成します.
たとえば、別のページに移動する機能を持つButtonを作成すると、コードはこのようになります.

const Button = styled.a`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
`;

これは私たちが通常知っているCSSと変わらない.

ここでaはtagを定義し、

スタイル属性を定義するには、

のカッコの代わりに`.を使用します.

このライブラリの特性と利点は多様ですが、私はそれを深く理解するのではなく、その使用方法を理解しているので、深く議論しません.
インストール方法

npm install --save styled-components

- package.json에 추가되는 부분

{
  "resolutions": {
    "styled-components": "^5"
  }
}

その部分を追加した理由はアドバイスです.

には複数のバージョンのライブラリがインストールされており、問題が発生しないようにしています.
使用方法

は最も基本的な使い方です.

その名の通り、コンポーネントにCSSを適用すればよい.

個人的にはCSSを直接使うのが便利だと思います.

.
コンポーネントにラベルのプロパティ(h 1,section)を指定し、対応するcssを適用できます.

これは

がさらに適用された使い方です.

以前使用した3つの演算子を使用します.
primaryのpropsという名前が付いているかどうかを判断し、CSSの適用を異にすることができます.

Primary

また、classを上書きして特定の部分だけを変更することもできます.

Tomato

は別の応用活用法である.

CSSは、素子にパラメータがあるか否かに応じて適用することもできる.

useRef

一度だけ議論したことがありますが、コンセプトがまた出てきたので、もう一度議論したいと思います.

- 기본적인 사용법

const 변수명 = useRef(null)

<input ref={secondRef} onKeyUp={handleInput} />

これでラベルにrefで指定すればいいです.
では、변수명.currentにラベルの値があります.

このまま!!
Currentの後の方法はいろいろあります
上の図ではFocusがアクティブになり、次のラベルに移動します.

これは似たような活用方法です.
ボタンをクリックすると再生し、操作を停止するref.
同様に、タグの値があることがわかります.

実習後期

今までハンスプリントで一番難しかったのは...

テストはすべて合格したが、実現しなかった場合もある.

이 부분은 내방식으로 하면 구현을 제대로 이루어 지지만 테스트가 통과가 안된다...いずれにしても.難しすぎて一緒に勉強する人も歴代級の難関です.
まじめに復習してまじめにコメントを聞くともっと頑張ります!