[プロジェクトレビュー]-TwoSpoon

これは3月7日から4月1日までの1ヶ月間のプロジェクトの回顧記事です.

🎬 プロジェクトの開始

前回の内カラクーペ第2期の反応項目は、企業面接の準備ができていなかったため、クローン項目(Slack)が行われた.そして今回は4人のチームメンバーと1ヶ月間のプロジェクトを行う機会がありました.
プロジェクトとして選択したトピックは、移行とエラー修正、および既存の機能の追加です.最初から新しいプロジェクトを作成するのは面白いですが、既存のプロジェクトを新しいテクノロジースタックに移行するのは初めてなので、楽しみにしています.

💣 既存のプロジェクトの問題

hanspoonは、既存のウェブサイトhanspoonを改編するプロジェクトです.これは、既存サイトのAPIを使用してUI全体を新規作成するプロジェクトで、次のような問題があります.

クロスブラウズ問題

Retrollボタンクリック問題

ハングルキーワード検索

ボタンポインタ領域

インシデントスクロール

垂直折りたたみビューポート

履歴管理

詳細については、プロジェクトのwikiで確認できます.
spoonacular
我々の目標は、これらの問題を解決し、既存の技術スタックJS、ScssからNext、TSおよびStorybookに移行することである.

💭 このプロジェクトをするとき、注意しなければならないのは

これまで、プロジェクトから学んだ理論スキルの使用に重点を置いてきました.しかし、今回は、チームメンバーがどのように協力してプロジェクトを行うかに重点を置き、以下の点に気づきました.

ドキュメント

コードコメント

scrumとsprintレビュー

ドキュメント化

ドキュメント化の面では、現在の進捗状況と発生した問題、および後で見た状況をより簡単に理解できます.

特に、ラベルからホットスポット管理、テクノロジーホットスポットからwikiのクリーンアップまで、すべてのチームメンバーが注目しています.

https://github.com/TeamCooks/TwoSpoon/wiki

テクノロジーホットスポットwiki

コードコメント

コードコメントは既存のプロジェクトとは異なり、完全なリクエストがある場合は、待機時間までに詳細なコードコメントを行います.これで、私が仕事をしているところに漏れがあれば、チェックすることができます.
また、他の人のコードから学習する必要がある場所を見つけ、Emotionのようなコメントを通じてコードの品質を高めることもできます.

プロジェクトの問題

scrumとsprintの回顧

scrumは毎日指定された時間にビデオ形式で集まり、簡単な昨日と今日やるべきこと、話題、一言で行います.scrumで毎日他の人が何をしているかを共有できます
毎週1回の印刷が終了すると、3 Lレビューが行われます.自分の長所と勉強したところを振り返り、自分が何をしたかを思い出し、自分の足りないところを見て、来週注意しなければならないことをまとめます.
最后の一周间は振り返ることができませんでした...🥲

scrumおよびsprintレビューは、プロジェクトpull requestの右側ナビゲーションによってアクセスすることができる.

💡 プロジェクトで学んだ技術知識

Next.jsの最初の学習では、担当するコンポーネントを移行すると、多くのエラーが表示される可能性があります.それらを解決する過程で、私は多くの技術問題を理解しました.

Next.js画像Wrapperモデリング

既存のCard素子部分には특정 코드를 ~식으로 리팩토링하면 좋을것 같다Nextが使用されている.jsに移行する場合は、スタイルを変更し、次の独自のimgタグに置き換える必要があります.
この場合、既存の造形はimgラベル自体で行われるが、nextのimageラベルはラベル上で直接造形することはできず、ラベル上で造形するための包装器を作成する必要がある.
また、Nextは、従来のimgと比較して、再調整、最適化、ブラウザ互換性などの多くの機能を提供していることがわかりましたので、このタグを使用することをお勧めします.

Next.js userouterストーリーブックを適用

構成部品の主導的な開発では、メモ帳を使用して構成部品の視覚効果をテストしています.コンポーネントにはimageが使用されており、手帳でも認識できるように、手帳の手帳にnext routerを設定する必要がある.
また、imageに追加項目を追加し、imgにnextRouterのみのルータコンテキストプロバイダを提供することで、問題を解決することもできます.

StoryBookでnextjs静的イメージの読み込み

次のjsの静的画像を認識できない場所があることを発見しました.そのため、次のコードが必要です.

import * as NextImage from 'next/image';

const OriginalNextImage = NextImage.default;

Object.defineProperty(NextImage, 'default', {
  configurable: true,
  value: (props) => (
    <OriginalNextImage
      {...props}
      unoptimized
      // this is new!
      // blurDataURL="/images/no-image.jpg"
    />
  ),
});

Next.移行時にjsの特性を十分に利用する

既存のreactを使用して作成したHanspoonプロジェクトでカードコンポーネントをクリックすると、useRouterコンポーネントで詳細ページが開き、次のステップに進みます.jsという名前のSSRを使用することで、チームメンバーはSEOの観点から作成して使用するほうが良いと考えているので、これを反映する構造を設計しました.main.jsという名前のコンポーネントではなくpreview.jsを作成してこの部分にルーティングすることで、既存のプロジェクトを変更しながらSSRをさらに理解し、その利点を十分に活用することができます.

状態をより明確に理解する

プロジェクトでDialogを使用することを試み、データのインポートプロセスを簡素化しました.しかし、これは問題であり、ロールバックボタンを押すたびに新しいリクエストを送信する必要がある部分では、RTK Queryのようなツールは適用されません.
プロジェクトの進行中、RTK Query、SWR、React Queryなどのデータ・パッチおよびサーバ・ステータス管理ツールの主な目的は、要求されたデータだけでなく、サーバ・ステータスとローカル・ステータスを同期させることであることがわかりました.
上記の問題は、簡単なfetch、axiosなどのapiリクエストによって十分に解決され、ステータス管理ツールを導入する前に、どのようなニーズを理解し、設計するかが非常に重要であり、ツールはツールにすぎず、必要な場所に使用しなければならない.

😢 残念なことに。

残念なことに、プロジェクトの進行中、就職準備で以前のようにプロジェクトに集中できなかったのが一番残念です.
最後に、時間が限られているため、タイプスクリプトに移行する過程で、タイプをうまく作成できないか、拡張可能な構造にコンポーネントをうまく組織できない可能性があります.
最近、ハン・ジェヨプの記事を見て、企業課題のコードを見て、Dialogについて反省した.

Twospoon wiki

良いコードは何ですか?

私はこれらの面でまだ多くの不足点があることを発見しました.私はいくつかの良いコードを見て再構築して、これらの不足を補うことを望んでいます.

🌈 に感銘を与える

今回のプロジェクトをするときに初めて使う次のjsフレームワークとSSRを学ぶ.これは、協力の中でプロジェクトがどのように行われているのか、なぜドキュメント化が重要なのかを認識しているため、非常に注意し、学ぶ価値のあるプロジェクトです.
学院に約10ヶ月滞在した最後のプロジェクトが終わり、微妙な気持ちでしたが、無事にプロジェクトが完成できたことを嬉しく思います.