Instagramクローンエンコーディングプロジェクト後期featwestagram
今日完成したInstagramクローンコードプロジェクトは、
約3週間、ずっと異なるバージョンの任務があって、私はこの時間のプロジェクトの過程をよく記録して、学んだことを学びたいです-!
第1クローン: を使用クローン: を使用4人でチームを構成し、汎用コンポーネントnavの作成、ファイルのマージ、git競合の解決+gitコラボレーションの熟知(4人コラボレーション、3月14日から3月24日まで) Peer Review+Live Code Review(4人勤務、3月23日、24日)
[Mission 1]ログインページレイアウト
[Mission 2]id,pw入力時にログインボタンを有効にする
[Mission 3]ホームレイアウト
[タスク4]コメント内容を入力してEnter pressを押すか、投稿ボタンをクリックしてコメントを追加
[Mission5] ID, PW validation
[Mission 6]コメントが良い/削除機能
[Mission 7]アイデンティティ検索機能
[Mission 8]navプロファイルの写真をクリックすると、メニューボックスが作成されます.
[Mission 9]反応式実施
「その他の機能」ユーザー情報のローカルストレージとログアウト機能
[タスク1]Login|ユーザ入力データストレージの実現
「タスク2」Login|ログインボタンのアクティブ化を実現
[タスク3]Main|レビュー機能の実装
[Mission 4]Main|コメントを合成し、propsでデータ転送を実現
[Mission 5]Main|Mockデータをコメント画面に表示するには、Mapを使用します.
Mapによるシードレンダリング
「付加機能」Main|コメントを削除し、「いいね」機能を実現
「その他の機能」Nav|nav検索ウィンドウユーザー検索機能の実装
「その他の機能」Nav|プロファイル・アイコンをクリックして、プロファイル・メニューの表示を行います.
✔¥プロジェクトの過程で最も緊張した瞬間、、、!初めてreactを学んだ後、すぐに実戦で応用すること自体が怖くて、同時に興奮しています.Reactを使用する場合、コンポーネントを使用して管理できることが望ましい.JavaScriptを使用すると、コードの各ページにすべての機能の実装が書かれています.Reactでは、ページ別、機能別にコンポーネントを割り当てることで、より読みやすさが向上し、管理がより簡潔になります.
✔АААААААААААААААААААААА
「✔」を使用して、「勘定科目」および「勘定科目」、「勘定科目」、「勘定科目」、「勘定科目」、「勘定科目」、「勘定科目」、「勘定科目」、「勘定科目」、「勘定科目」、「勘定科目」、「勘定科目」、「勘定科目」、「勘定科目」、「勘定科目」ステータス値が変化するたびに画面uiが自動的に再表示されるため、uiを担当する関数を別途作成する必要がない点が便利です.
最適化部分に注意するだけです.stateを乱用すると、不要な再レンダリングが発生し、関数が続行されるため、不要な操作が多く発生します.
ああ!もう一つ印象的なのは、ユーザーがinput値を入力してinputをクリアすると、
つまり、このようにして
cssのみを使用することが多く、初めてscssを使用してみます.cssからscssに変更する作業は想像以上の大きな枠組みではない.Nestingと変数の割り当て方が少し違う以外は、あまり差がありません.
構造によってネストされた方法.
ネストされた方法でHTML構造をより容易に理解できるため、scssをより容易に表示できます.
上には、変数のみを収集して作成したファイルがあります.
既存のcssでは、変数を作成する際に
@mixin次回のプロジェクトの時は必ずよく使います!
gitコラボレーションとgit競合解決プロセス ✔¥チームメンバーと共通コンポーネント(nav)を共有し、それぞれのブランチでgit作業を継続します。 ✔¥АААААААААААААААА\104 私が合併する前に、既存のNavがあったのです。jsを削除したので、新しく追加した内容ということで、何か間違いがあったのか、冷や汗がたくさん流れていたので、ほほほ、gitが衝突しても落ち着くと思っていましたが、不思議なことに、赤い字がスクリーンで少し開いても一瞬びっくりします。でもそんな時ほどよだれ!間違いだ!冷静に解決します!! 一人でずっとマイクロブログプロジェクトをしていて、初めて協力プロジェクトを行って、興奮して緊張しています。コラボレーションでは、Git内のストリームがどのような順序で行われているのか、どのコマンドがストリームに適しているのか、GitコマンドとGitの使用方法について熟知しています。(!) 私はとても喜んでいます。 ✔¥そして今回しっかり勉強したgit commit!新しい機能を追加したり、エラーを修正したり、エラーを修正するたびにコミットされます。正しいコミットされたレコードを残すために、タスクごとにきれいに分類して記録してください。このように整理して提出すると,merge後にgit競合が発生した場合でも,どの部分にエラーが発生したかを正確に知ることができる.清潔な整理と記録は、開発分野で決める!馬!私は大切なことを学んだ。約束を忘れないで! Peer Review & Live code Review ボニーにPeer Reviewを残して ✔隆すべてのマイクロブログプロジェクトが完了した後、githubはチームメンバー間でコードをコメントする時間があります。私のコードだけ見て、他の人のコードを見て、「ああ、この時はこんなに違うコードを作ることができるんだな」とか、「ああ、この時はこれでいいんだな」という考えが得られてよかったです。そして私は「読者」の観点からコードを分析し、「可読性がよく、簡潔なコード」を書くことが本当に重要であることを発見しました。開発者として、コードを書くとき、私のコードを読むことが多いからです!できるだけ親切でクリーンなコードを書く開発者になります ✔祿と指導者もライブコードReviewをリアルタイムで受け取った。 印象的な新しい認識をいくつか書きます。 👉 関心のあることによって、関連するstateは1つのオブジェクトの形に統合したほうがいいです!ex) const [state, setState] = useState({id : "", password : ""}) 👉 コードを記述するときに、中間コンテキストに基づいて良好なスペースを作成します(貼り付けが多すぎて面白くありません) 👉 3つの演算子を不要に使用しないでください。特に,結果値がtrueまたはfalseに分かれている場合は,条件自体をset関数に入れるだけでよい.ex) const isValid = email.includes('@')&& password.length>4 ; setIsActive(isValid) 👉 Data typeで終わる変数名が悪いex)Array、Object、Data String suffix 👉 すぐに戻る場合は{}ex)constdoSometing=()=>doSomethingを省略してください 👉 ) ▼Propsが受け取ったものはpropsとし、stateに入れない 」は、stateが変化値の場合のみ、state(定数データとして)nav-入力値に設定します。 計算可能であればexではなくstateと呼ぶ ex) const isActive = email.includes(@)&& password.length > 4 👍 (isActiveをstateにするのではなく) 👉 できるだけ関数形式のstateを書きます。より安全な方法(最新の価格を保証する)。 ex) setState(cur => ({comment, ...cur})) 👉 相対パスに対して、絶対パスを使用して書き写す=>変更が発生した場合、絶対パスの方が読みやすい 覚えて覚えておいて、、、、私のコードだけを見るのではなく、チームのメンバーたちのコードを一緒に見て、どのコードがもっと良いコードなのか、どのようにしてもっとよくできるのか、この間勉強するのはとても有益です。 幸いなことにfeat反応を用いて検索ウィンドウ機能を作成する 行った他の実施機能の中で、最も喜ばしいのは、反応を利用してユーザー検索ウィンドウ機能を作成したことだ。 単純な論理は次のとおりです。 Public-dataフォルダ-ユーザーデータ。jsonに検索可能なユーザー情報を記入する fetchを使用してユーザ情報navコンポーネントを受信する 伝達されたusers state内に情報を保存し、検索したusersに情報を保存し、入力値もstate内に保存します。 map関数を使用して、転送された検索ユーザを検索ウィンドウ内でレンダリングします。 コードは以下の通りです。 const Nav = () => { const [state, setState] = useState({ users: [], term: '', }); const { users, term } = state; let isSearchValid = term.length > 0; useEffect(() => { fetch('/data/usersData.json') .then(res => res.json()) .then(data => setState(state => ({ ...state, users: data }))); }, []); const handleState = e => { const { value, name } = e.target; setState(cur => ({ ...cur, [name]：value })); }; // filtered : filtered array - search user's id const filtered = ()=>{ return users.filter(user => user.id.includes(term)); } return ( <div className="Nav"> //関係のないコードをスキップ <form className="nav-form"> <input name="term" value={term} className="nav-input" type="text" プレースホルダ=検索 onChange={handleState} /> <i className={isSearchValid ? 'fas fa-search activate' : 'fas fa-search'} /> <ul className="users search-info"> {filtered().map((user, i) => { const { img, id, name } = user; return ( <li key={i} className="user"> <img className="profile" src={img} alt="profile" /> <div className="user-info"> <strong>{id}</strong> <p>{name}</p> </div> </li> ); })} </ul> </form> //関係のないコードをスキップ </div> ); }; export default Nav; 検索ウィンドウは正常に動作しています。ほほほ。嬉しいですね。 🍯 の最後の部分 小さいと小さいですが、上のコードの中で1つ目なので、意味のあるInstagramクローンコードアイテム!htmlレイアウトからgitコマンドを記録しgitに提出する過程、反応言語を使うなど、開発者の収穫が豊富なプロジェクトです。特に自分で論理を書き,論理順にコードを書き,問題を解決する過程で,「開発者の道を歩んでよかった」という考えが生まれた.問題を解決する過程はとても面白くて、私はもっとよくしたいと思って、私はずっとどのようにもっと良いコードを書くかを考えています。この過程に投入された瞬間は貴重で、次のプロジェクトも楽しみです。私の実力は日に日に上昇していると信じて、これからの毎日は充実して真剣にコードしなければなりません。👊🏻
約3週間、ずっと異なるバージョンの任務があって、私はこの時間のプロジェクトの過程をよく記録して、学んだことを学びたいです-!
3週間の異なるバージョンのプロジェクトです。🧑🏫
HTML, CSS, JavaScriptのInstagramクローンコード(個人、3月7日-3月13日)React, SCSS, Fetch APIのInstagramクローンコード(個人、3月14日から3月24日まで)🧚♀️実装機能：HTML、Vanilla JS
[Mission 1]ログインページレイアウト
[Mission 2]id,pw入力時にログインボタンを有効にする
[Mission 3]ホームレイアウト
[タスク4]コメント内容を入力してEnter pressを押すか、投稿ボタンをクリックしてコメントを追加
[Mission5] ID, PW validation
[Mission 6]コメントが良い/削除機能
[Mission 7]アイデンティティ検索機能
[Mission 8]navプロファイルの写真をクリックすると、メニューボックスが作成されます.
[Mission 9]反応式実施
「その他の機能」ユーザー情報のローカルストレージとログアウト機能
🧚♀️実装機能-RealtJS
[タスク1]Login|ユーザ入力データストレージの実現
「タスク2」Login|ログインボタンのアクティブ化を実現
[タスク3]Main|レビュー機能の実装
[Mission 4]Main|コメントを合成し、propsでデータ転送を実現
[Mission 5]Main|Mockデータをコメント画面に表示するには、Mapを使用します.
Mapによるシードレンダリング
「付加機能」Main|コメントを削除し、「いいね」機能を実現
「その他の機能」Nav|nav検索ウィンドウユーザー検索機能の実装
「その他の機能」Nav|プロファイル・アイコンをクリックして、プロファイル・メニューの表示を行います.
プロジェクト後期
🦋 HTML, Vanilla JS => React
✔¥プロジェクトの過程で最も緊張した瞬間、、、!初めてreactを学んだ後、すぐに実戦で応用すること自体が怖くて、同時に興奮しています.Reactを使用する場合、コンポーネントを使用して管理できることが望ましい.JavaScriptを使用すると、コードの各ページにすべての機能の実装が書かれています.Reactでは、ページ別、機能別にコンポーネントを割り当てることで、より読みやすさが向上し、管理がより簡潔になります.
✔АААААААААААААААААААААА
「✔」を使用して、「勘定科目」および「勘定科目」、「勘定科目」、「勘定科目」、「勘定科目」、「勘定科目」、「勘定科目」、「勘定科目」、「勘定科目」、「勘定科目」、「勘定科目」、「勘定科目」、「勘定科目」、「勘定科目」、「勘定科目」ステータス値が変化するたびに画面uiが自動的に再表示されるため、uiを担当する関数を別途作成する必要がない点が便利です.
最適化部分に注意するだけです.stateを乱用すると、不要な再レンダリングが発生し、関数が続行されるため、不要な操作が多く発生します.
ああ!もう一つ印象的なのは、ユーザーがinput値を入力してinputをクリアすると、
つまり、このようにして
setCount('')を指定すべきである.🦋 CSS => SCSS
cssのみを使用することが多く、初めてscssを使用してみます.cssからscssに変更する作業は想像以上の大きな枠組みではない.Nestingと変数の割り当て方が少し違う以外は、あまり差がありません.
構造によってネストされた方法.
ネストされた方法でHTML構造をより容易に理解できるため、scssをより容易に表示できます.
上には、変数のみを収集して作成したファイルがあります.
既存のcssでは、変数を作成する際に
--border--colorというように命名され、scssでは$を使用して変数表現が行われ、より簡便な感じがします.@mixin次回のプロジェクトの時は必ずよく使います!
gitコラボレーションとgit競合解決プロセス ✔¥チームメンバーと共通コンポーネント(nav)を共有し、それぞれのブランチでgit作業を継続します。 ✔¥АААААААААААААААА\104 私が合併する前に、既存のNavがあったのです。jsを削除したので、新しく追加した内容ということで、何か間違いがあったのか、冷や汗がたくさん流れていたので、ほほほ、gitが衝突しても落ち着くと思っていましたが、不思議なことに、赤い字がスクリーンで少し開いても一瞬びっくりします。でもそんな時ほどよだれ!間違いだ!冷静に解決します!! 一人でずっとマイクロブログプロジェクトをしていて、初めて協力プロジェクトを行って、興奮して緊張しています。コラボレーションでは、Git内のストリームがどのような順序で行われているのか、どのコマンドがストリームに適しているのか、GitコマンドとGitの使用方法について熟知しています。(!) 私はとても喜んでいます。 ✔¥そして今回しっかり勉強したgit commit!新しい機能を追加したり、エラーを修正したり、エラーを修正するたびにコミットされます。正しいコミットされたレコードを残すために、タスクごとにきれいに分類して記録してください。このように整理して提出すると,merge後にgit競合が発生した場合でも,どの部分にエラーが発生したかを正確に知ることができる.清潔な整理と記録は、開発分野で決める!馬!私は大切なことを学んだ。約束を忘れないで! Peer Review & Live code Review ボニーにPeer Reviewを残して ✔隆すべてのマイクロブログプロジェクトが完了した後、githubはチームメンバー間でコードをコメントする時間があります。私のコードだけ見て、他の人のコードを見て、「ああ、この時はこんなに違うコードを作ることができるんだな」とか、「ああ、この時はこれでいいんだな」という考えが得られてよかったです。そして私は「読者」の観点からコードを分析し、「可読性がよく、簡潔なコード」を書くことが本当に重要であることを発見しました。開発者として、コードを書くとき、私のコードを読むことが多いからです!できるだけ親切でクリーンなコードを書く開発者になります ✔祿と指導者もライブコードReviewをリアルタイムで受け取った。 印象的な新しい認識をいくつか書きます。 👉 関心のあることによって、関連するstateは1つのオブジェクトの形に統合したほうがいいです!ex) const [state, setState] = useState({id : "", password : ""}) 👉 コードを記述するときに、中間コンテキストに基づいて良好なスペースを作成します(貼り付けが多すぎて面白くありません) 👉 3つの演算子を不要に使用しないでください。特に,結果値がtrueまたはfalseに分かれている場合は,条件自体をset関数に入れるだけでよい.ex) const isValid = email.includes('@')&& password.length>4 ; setIsActive(isValid) 👉 Data typeで終わる変数名が悪いex)Array、Object、Data String suffix 👉 すぐに戻る場合は{}ex)constdoSometing=()=>doSomethingを省略してください 👉 ) ▼Propsが受け取ったものはpropsとし、stateに入れない 」は、stateが変化値の場合のみ、state(定数データとして)nav-入力値に設定します。 計算可能であればexではなくstateと呼ぶ ex) const isActive = email.includes(@)&& password.length > 4 👍 (isActiveをstateにするのではなく) 👉 できるだけ関数形式のstateを書きます。より安全な方法(最新の価格を保証する)。 ex) setState(cur => ({comment, ...cur})) 👉 相対パスに対して、絶対パスを使用して書き写す=>変更が発生した場合、絶対パスの方が読みやすい 覚えて覚えておいて、、、、私のコードだけを見るのではなく、チームのメンバーたちのコードを一緒に見て、どのコードがもっと良いコードなのか、どのようにしてもっとよくできるのか、この間勉強するのはとても有益です。 幸いなことにfeat反応を用いて検索ウィンドウ機能を作成する 行った他の実施機能の中で、最も喜ばしいのは、反応を利用してユーザー検索ウィンドウ機能を作成したことだ。 単純な論理は次のとおりです。 Public-dataフォルダ-ユーザーデータ。jsonに検索可能なユーザー情報を記入する fetchを使用してユーザ情報navコンポーネントを受信する 伝達されたusers state内に情報を保存し、検索したusersに情報を保存し、入力値もstate内に保存します。 map関数を使用して、転送された検索ユーザを検索ウィンドウ内でレンダリングします。 コードは以下の通りです。 const Nav = () => { const [state, setState] = useState({ users: [], term: '', }); const { users, term } = state; let isSearchValid = term.length > 0; useEffect(() => { fetch('/data/usersData.json') .then(res => res.json()) .then(data => setState(state => ({ ...state, users: data }))); }, []); const handleState = e => { const { value, name } = e.target; setState(cur => ({ ...cur, [name]：value })); }; // filtered : filtered array - search user's id const filtered = ()=>{ return users.filter(user => user.id.includes(term)); } return ( <div className="Nav"> //関係のないコードをスキップ <form className="nav-form"> <input name="term" value={term} className="nav-input" type="text" プレースホルダ=検索 onChange={handleState} /> <i className={isSearchValid ? 'fas fa-search activate' : 'fas fa-search'} /> <ul className="users search-info"> {filtered().map((user, i) => { const { img, id, name } = user; return ( <li key={i} className="user"> <img className="profile" src={img} alt="profile" /> <div className="user-info"> <strong>{id}</strong> <p>{name}</p> </div> </li> ); })} </ul> </form> //関係のないコードをスキップ </div> ); }; export default Nav; 検索ウィンドウは正常に動作しています。ほほほ。嬉しいですね。 🍯 の最後の部分 小さいと小さいですが、上のコードの中で1つ目なので、意味のあるInstagramクローンコードアイテム!htmlレイアウトからgitコマンドを記録しgitに提出する過程、反応言語を使うなど、開発者の収穫が豊富なプロジェクトです。特に自分で論理を書き,論理順にコードを書き,問題を解決する過程で,「開発者の道を歩んでよかった」という考えが生まれた.問題を解決する過程はとても面白くて、私はもっとよくしたいと思って、私はずっとどのようにもっと良いコードを書くかを考えています。この過程に投入された瞬間は貴重で、次のプロジェクトも楽しみです。私の実力は日に日に上昇していると信じて、これからの毎日は充実して真剣にコードしなければなりません。👊🏻
Reference
この問題について(Instagramクローンエンコーディングプロジェクト後期featwestagram), 我々は、より多くの情報をここで見つけました https://velog.io/@hoje15v/인스타그램-클론-코딩-프로젝트-후기-feat-westagramテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol