Week 1: OT
ガイダンス
入る前に
彼は
IT業界に転職しようとしたが、まだ満腹だ. の中で最も多く感じたのは開発言語に対する理解ではなく、コラボレーションに関するもの(Soft Skill). 傾向的に私の評価が厳しいので、自分に自信を持つには少し時間がかかります. だから実は今必要なのは自己客観化の仕事で、私のレベルがどこにあるかを理解して、もっと自信のある開発者になりたいです. とにかく、すべての勉強が集まって、もっと成長してほしい、1.フロントエンド開発者の役割
フロントエンド開発者?「論理」を作成し、「結果」をユーザーに示す
ユーザーエクスペリエンスなぜ
の先端開発者はを見つけるのが難しいのか.
Web上で起こったすべてのことを担当するすべてのビジネス
Webフル機能実施パブリッシング->ZeplinとFigmaを使用したコラボレーション設計システム実施/管理設計統一規則の系統化ページの統一設計を変更する必要がある場合は、を有効に変更できます.
Storybookは、小単位の素子でを分割するという観点を生み出す.
サービスの運用と導入
ソースコードの統合/導入には、 Frontend独自のプロジェクトが頻繁に使用されます.少量DevOpsキャラクター(CI/CD)コードの変更構築/導入、およびリリースの自動完了
CI:新しいコード変更書項目は定期的に生成され、テストされ、共有パブリケーションに統合されます.コラボレーション時に競合する可能性のある問題を解決できます. CD(継続的な導入):開発コンテンツを公開からユーザー環境へ
ボーダフォンvs愛子の日沃達豊:滝技法愛子の日:要求に応じて小区分開発会社の状況
1)チークが単独であれば、
機能実装/運用導入
2)設計システムなし機能実装/リリース/運用導入
3)SI/フリーライター機能実装/公開2.人気の先端技術
3.Gitの機能理解
Git
ローカル管理バージョン制御システムソースコード修正における他のバージョンの管理Github
クラウド管理バージョン管理システムは、独自に構築するのではなく、クラウドコンセプトを借りています.Commit Conventionを明確に記入することが重要です
ユタ州提出情報スタイル衛士代表性タイトルはすべて現在の形式でを記入する.
英語でコマンドグループを書き、ハングルで文法を書く命令語
どのコマンド/機能が重要かを知る GUIツールの使用に賛成
Gitベース
git init git add git commit/push Branchを利用する
Git深化
tag Gitコミット-修正:最終コミット revert reset rebase 最大Gitflow(⭐️)
約10年前、VincentDriessenのブログ記事が広がり始めた.
これは協力者同士でGitを使う約束です
分岐操作を規範化して分岐操作を簡略化する方法
最も一般的な方法
5つのブランチを使用(ブランチごとに1つの目的があります)
master/developmentで基本的に存在します.
必要に応じて他のブランチを追加/削除
master(ベース):ブランチ、導入製品のブランド
develop#:ブランチを開発します.このブランチに基づいて開発された機能を統合
Feature:開発ユニット機能のブランチ、機能開発完了後に開発ブランチにマージ
release:メインブランチバーの前にQAのブランチを行います
hoxfix:導入後の緊急エラー修復
Github Actions
自動配置を実現
Github Pages
Github適切なWebサイト管理サービスを提供
4.コラボレーション用設計ツール：Figma
フロントエンド開発者は設計要素を追加しない
デザイナーが製作する部品を受け取る実施作業.
5. React
整理反应的基础概念
UIライブラリは、グローバル状態管理、ルーティング、構築システムを直接構築する必要がある.
反応器は、仮想ドームを介してUIを更新する. 以前のUI状態はメモリに保持されており、変更された部分のみをドームに反映する技術.
仮想ドームはjsオブジェクト形式のです.
DOMを直接修正するよりも、の方が効率的です.
Create-React-App(CRA)
CRAは、反応を使用する環境を設定するテンプレートである.
CRAでは、サーバ側レンダリングはサポートされていません.バックグラウンドオフィスなどのSSRが不要な場合は、CRAを使用するのがベストです.npx
npm 5.2.0で新しく追加されたツールの既存のグローバルインストールでcliが使用されている場合、CRAに含まれる依存ライブラリはコンピュータに保持されます.バージョンが更新されると、再インストールが必要になり、他のグローバルインストールライブラリと競合する可能性があります. npxを使用してCRAパッケージを一時的にダウンロードし、作成後にパッケージを再削除します.file and folder structure
反応ではフォルダやファイル構造は提案されなかった. 反応生態系において、よく見られる方法はである.
ファイルの機能またはルーティングに基づいて分類
CSS、JS、Testファイルを機能またはルーティング分類のフォルダに格納する方法機能の定義は一般的ではなく、その細分化の程度に依存する.common/
Avatar.js
Avatar.css
APIUtils.js
APIUtils.test.js
feed/
index.js
Feed.js
Feed.css
FeedStory.js
FeedStory.test.js
FeedAPI.js
profile/
index.js
Profile.js
ProfileHeader.js
ProfileHeader.css
ProfileAPI.js
ファイルタイプ別に分類
類似ファイル間のバンドル方法アプリケーションでの役割に応じて、コンポーネントを異なるフォルダ(atomic design)に分離する場合があります.
api/
APIUtils.js
APIUtils.test.js
ProfileAPI.js
UserAPI.js
components/
Avatar.js
Avatar.css
Feed.js
Feed.css
FeedStory.js
FeedStory.test.js
Profile.js
ProfileHeader.js
ProfileHeader.css
オーバーラップを避ける
の重複が深すぎると、プロジェクト間の相対パス入力やファイル転送時の更新の問題が発生する可能性があります.~3~4回フォルダを最大限に重ねることをお勧めします.
あまり深く考えないで
が先に始まりますが、問題があればに交換したほうがいいです.
6.集中学習+回顧
git flow Git機能のコア:を追加/コミット/プッシュ/プル/ブランチ/チェックアウト
は現在gitlflow方式を使用しているのでよく知られています.Gitに不思議な恐怖を抱いているようだ. そして私がよくやったかどうかの確信も必要です. はそのために考えを変えた. は私が今知っているGitで、いくつかのよく使われる機能を使っています.これらを知るだけでGitをもっと自信にすることができます. 以外は特殊な場合に使う機能なので、いつ使うかは必要なときに見つけて熟知したほうがいいと知っています. しかし、今日git remote update->を使用してgit remote情報を更新し、すべてのremote情報を更新し、fetchを実行します.
-状況:同僚が初期設定のブランチをインポートして使用する場合は、ローカルブランチを作成し、remote update->pullでコードを受信し、をダンプします.