今週も生き延びた.

😇 また日曜日です。

時間が経つのは早いですね.
チーム結成は一昨日のようで、実戦4週目が終わった.
作ったものを見ると4週間も経っているのでこの程度だと思いますが時間が経つのは早すぎます
今週の開発は二つに分けることができます.
技術的な課題とChazal(?)

技術的な課題

1. socket.ioチャットの使用

中間評価でチャットを持って行けると思っていましたが、他の機能にぶつかられて今週実現しました.
フロントもサーバーも初めてsocketを使うので、思ったより時間がかかり、思わぬ問題もありました.
1.各部屋に別々のチャットルームがあるはずです.
私たちが協力する豚の主な概念の一つは「部屋」です.複数のファシリティを作成し、各ファシリティにダッシュボード、ドキュメント、セル、およびタイムライン(カレンダー)を提供できます.
もちろん、チャットも各部屋で個別に提供するべきです.
ラッキーなことに、コンセント.ioにはroomの概念があるため、コラボレーションルームに入るたびにroomId、userIdなどの情報をサーバに送信し、ユーザが参加するようにroomIdを実現することができる.
2.コードはどこに置くべきか
apiは書くところで使えます.
だからsocketコードも最初はコラボレーションルームコードに入れました.
その結果、部屋に入るたびに接続され、出るたびに接続が切断されます.
そうではないと思ったので、connect、disconnectは一番上のコンポーネントApp.jsに移行しました.
そして各部屋のjoinとleaveアクティビティが明確に設けられ、まずsocketがつながった.
次に、部屋の中を歩き回って洪水が発生しました.
下記のように再現します.

を繰り返して勝手に5回部屋に入ります.△部屋を変えるたびに、大丈夫です.

は6回目にどの部屋に入ってもチャットウィンドウを開きます.

「こんにちは」と入力して提出します.

で「こんにちは」が6回現れた.

DBは一度だけ「こんにちは」です.

理解できない.
一体どうして.
なぜなら、彼は入室回数で情報を受信しているからだ.

export const subscribeToChat = (cb) => {
  if (!socket) return;
  socket.on("message", (data) => {
    return cb(null, data);
  });
};

このような関数があります.
サーバはメッセージという名前のキーで私に情報を送信します.これは情報を受信するための関数です.
このキーは実は一つの部屋に属しているのではなく、socketグローバルに約束されたキーです.
しかし、部屋に入るたびに購読メッセージの関数を実行するためのコードを作成したので、誰がメッセージを打ってもn回見ることができます.
これもApp.jsに移行し、一度だけ購読すれば解決します.
3.しかし、なぜいつも情報を再ロードするのか
部屋リストから部屋に入ると、対応するsocketroomに接続し、roomの既存情報を受信します.
しかし、どうしていつもこの値段を2回取っているのですか.
なぜ既存のメールがn回レンダリングされるのか
親コンポーネントで何度もレンダリングされたためかもしれません.
しかし、この複雑なワークスペースでは、このチャットウィンドウのレンダリングを減らすには何をすればいいのか全然思い出せません.
だから回った鳩の首.

  useEffect(() => {
    getMessages((err, data) => {
      if (err) {
        console.log(err);
        return;
      }
      if (prevRoomId !== roomId) {
        dispatch(setPrevRoomId(roomId));
        dispatch(loadMessages(data));
        return;
      }
    });
  }, [prevRoomId, roomId, dispatch]);

roomIdは既存のroomIdと同時に、再ロードしないように設定されています.
また、Ridexモジュールは、ロードされた既存のチャットコンテンツを配列に追加するのではなく、置換されたコードに変更します.

[LOAD_MESSAGES]: (state, action) =>
  produce(state, (draft) => {
    draft.messages = action.payload.messages;
  }),

実際、この点はチャットに無限スクロールを適用すると、改めて変更する必要があるので悩んでいます.
前の情報をスクロールするたびに持ってきますが、並べ方は変えられません...
こう書くと、もっと上の方から情報を得るべきだと思います.
終わったらテストします
[原句]とにかく帰ります.

初めてネットタグでこれを見た時の喜びは忘れられません.
サーバから何を得ているのか、不思議ではありません.socketは別の分野です.
私がリクエストを出さなくても、サーバーは私と話してくれます.
どれだけ成功したか分かりませんが、まず新しいことをしてくれて嬉しいです.
ちょっと幸せ😆

2.サイズ変更メニュー

今回はデザイナーさんたちと一緒に行ったプロジェクトなので、Pigmaを積極的に使っています.
デザイン共有だけでなく、デザイナーと開発者の間の問答もビグマで行われています.
しかし、先週ピグマでこのような問題が発生した.

私は今までやったことがなく、感じたこともありませんが、私のユーザーにもこの機能があることを強く望んでいます.
だから挑戦することにした.
本当に検索してみると、いいセットがたくさんありました.

react-resize-panel

react-resize-observer(react-resize-detector)

反応-サイズ変更可能(Weeklyダウンロード数27万)

react-rnd

などなど.
誰もがテストして、私に最適なパッケージはreact-rndです.
最も必要な部分だけを使用し、残りの部分を無効にするのは簡単です.

// ResizeWidth.jsx

......

// initialSize = {width: "260px", height: "100%"}
// drag : "right" or "left"
// option : min·max Width/Height
// storeSaveFunc : dispatch할 actionCreator
const ResizeWidth = ({
  size,
  handleSize,
  drag,
  option,
  storeSaveFunc,
  children,
}) => {
  const dispatch = useDispatch();

  const onResize = (event, dir, refToElement, delta, position) => {
    handleSize(refToElement.style.width.split("px")[0]);
  };

  const onResizeStop = (event) => {
    dispatch(storeSaveFunc(size.width));
  };

  return (
    <Rnd
      default={{
        x: drag === "right" ? 0 : null, 
        y: 0,
        width: size.width,
        height: size.height,
      }}
      resizeGrid={[1, 1]}
      disableDragging={true}
      bounds="window"
      enableResizing={{
        top: false,
        bottom: false,
        right: drag === "right" ? true : false,
        left: drag === "left",
      }}
      onResize={onResize}
      onResizeStop={onResizeStop}
      style={{ zIndex: 25 }} // var가 안됨
      {...option}
    >
      {children}
    </Rnd>
  );
};

このような要素を作ってもっと使いたいと思っていたが、実はデザイナーが言ったところに使っていた.
CSSを他の場所に変更...😇
結果

私がやったのは不思議で、誰もが自慢しています.
実はおしゃべりは難しいですが、これを自慢したいです.🙄
この経験から得たものは二つある.
1.いろいろなコースがあります.何か機能をするときは検索しておきます.
2.ユーザーのために再考する.形と便利さには二つの自信のある方法があるかもしれない.🙂

どうやって?

フロントチームのメンバーは

作成した機能を一つ一つ細部に入れて話題にしました
新しい機能を作成するとき、コードが長く、数時間後に明らかな変化が発生した場合、
今何時間もかけて本当にたくさんのものを修正しましたが、爪ほど明らかではありません.
しかし、実際には、ユーザーから見れば、最も反感を持っているのは、些細な要素ができていないようだ.
だからフロント開発者は丁寧な言葉を串通に書いた.🥴
今週はこんなバカたちの連続です.
これらは実は1日見ても邪魔ではありません.「私は初めてこのサイトに入りました.「プレイヤーです」暗示的にやる.
まだ進行中でしたが、少し疲れました.
たまに省略したくなります.
しかし、私がプレイヤーだったら不満になるに違いない.運命よ.

🚢 総回顧

あっという間に航行すると突き当たりが見えてきた.
99日は短かったようですが、私の就職準備が3ヶ月以上遅れるので、極度の不安で眠れずキャンセルに悩んでいました.
もちろん航海が始まる前の話です.
航行を始めてからそんな考えはありません.
時間を急ぐように一つの課題をこなし、次の課題が目の前にある.
もう少し考える余地はあったが、不安は感じなかった.
航海に来る前に、強い不安感を与えたのは4種類ほど.
1.チームプロジェクトの経験がない.
2.自分が開発者として働けるとは確信していない.
私が一人で落ちたように知っている開発者はいません.
4.知識は常に失われている.
航海は素直に誰にも勧められないかもしれない.
わが国の授業も一部の人に適しているが、一部の人にとって地獄のように、すべての人に適した授業はない.
でもソウルに住んでいません.一人で勉强した経験があります.知り合いの開発者がいないので開発の話をする人はいません4協力したい予備開発者ならまず大丈夫でしょう.
一般的なオフラインキャンプ場はソウルにあるので、考えていると頭が痛くなります.
航海のサポートを強く感じたことはありませんが.
ただ、この流れは私にぴったりで、幸いなことに私は多くの良い人に出会った.これが私が過去70日以上後悔していない理由だ.
すべては運だ.
1週目のプロジェクトで組長を務めて、今もいい機会だと思います.
残りの日も一日一日のいい機会にして、もっと頑張っていきたいと思います.