どうしてまた一週間経ったの?🙄

📝一週間の悩み

結局TILは書けなかった
やるべきことやミスに巻き込まれ、日曜日の夜10時の魔法のようなこと
しかし、私はWILで毎日悩んでいる内容を記録したいです.
だから長いですね

20210802月曜日

1.Calendarではどのようにスケジュールを組んでいますか。

前述したように,主な特長深化課題としてカレンダーを作成したことがある.
当時は1日単位の日程でしたので、1つの日付値しか必要ありませんでしたが、その日付でフィルタリングすれば、当日の日程を非常にきれいに表示できます.
今回は2021.08.02~2021.08.08というスケジュールを保存します.
それぞれstartDate、endDateとして保存することにしたが、実施するまで何の考えもなかった.
しかし、実現しようとすると、大きな山にぶつかった.
2021.08.05もこの日程が適用されることをどうして知っていますか...?
1番)startDateからendDateは配列形式で格納されますか?
=>こんなクレイジーな考えもありましたが、そうではないようです.
2)
該当する日付がstartDate <= targetDate <= endDateならレンダリングしてみましょうか?
=>まずこの方法で実装します.カレンダーをもっときれいに見せるためには、別の方法を探すべきだと思いますが、まず、帰ることが大切です.🤦🏻‍♀️

2.カンバンとスケジュール(カレンダー)は同じ情報を共有していますが、apiはどのように使えばいいですか?

1)別々に作る
=>したがって、ほとんどの場合必要な情報は重複している
2)重ね合わせを確認し、余分に必要なものだけを作る.
=>このようにするのが正しいかどうかはわかりませんが、必要な情報は同じだと思いますし、apiを作るのが有効かどうかは2番を選びました.
20210808年までに、カレンダーはまだサーバに接続されていません.
WILを书き终えてもうすぐ始まります...

20210803火曜日

1.Inputテキストの構成部品にする必要があります。

(Trelloレコーディング)
最初は押した時に交換すればいいと思ったでしょう.
しかし、実際に作るには、まだ考えなければならないところがあります.

Textの状態でText部分をクリックするとInputに変換されます.

Input状態では、再度Inputを押すことでTextになることはできません.

Input状態でEnterを押すとTextに切り替わります.(修正済み)

Input状態でInput以外をクリックするとTextになります.

これらの点を考慮して、作成されたコードは以下の通りです.

//inputToggle.jsx
...
  const [editMode, setEditMode] = useState(false);
  const [currentValue, setCurrentValue] = useState(value);
  const myRef = useRef();

  const handleSave = () => {
    setEditMode((pre) => !pre);
    // saveFunc(); // props로 saveFunction 받아올 예정(dispatch)
  };

  // Input 외 영역 클릭 시 저장
  useEffect(() => {
    const handleClickOutside = (e) => {
      if (myRef.current && !myRef.current.contains(e.target)) handleSave();
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [myRef]);

  // 엔터 눌렀을 때 저장
  const handleEnterEvent = (e) => {
    if (e.key === "Enter") handleSave();
  };
...

機能部分だけカットしました.
よく知られている内容ですが、応用は別の分野のようです😢

2.Icon(svg)の使用

1)svgファイルのインポートと使用
2)Icon Fontsとして使用する.
この二つの問題で悩んだことがある.
1番svgファイルを直接使用するのは簡単ですが、ロード時にロードされているようです.
pathから不要な部分を削除して最適化できるようですが、より簡便な方法が必要です.
また、CSSをするときにもっと便利な方法を見つけたいと思います.
2つ目はHTML+CSSプロジェクトで使用したことがあります.
fontAwestomeを使うように使いやすく、色も変更できるので2番を選びました.
reactでIcon fontをどのように使うべきか考えてみましたが、幸いreact-icomoonライブラリがあるので使いやすいです.
icomoonで与えられたjsonファイルを入れるだけで簡単に使用できます.

// Icon.jsx
import React from "react";
import IcoMoon from "react-icomoon";

const iconSet = require("../shared/selection.json");

const Icon = ({ ...props }) => {
  return <IcoMoon iconSet={iconSet} {...props} />;
};

export default Icon;

<Icon icon="delete" size="20px" color="var(--grey)" /> //와 같은 형식으로 쓰면 된다.

20210804水曜日

スタイルガイドはどのように使えばいいですか？

デザイナーたちはデザインを更新しています.
共同で使用する部品を整理し、フォントも整理しました.
長い間悩んでいたのに、どうやってこんなに整理すればいいのか.
最も悩んだのは,代表例として最も満足できるText Elementを結果としてもたらしたことである.
以前はText.jsxでelementを作成していましたが、textStyle.jsというファイルが別途作成されていました.

// textStyle.js
import { css } from "styled-components";

export const head_1 = css`
  font-size: 6rem;
  line-height: 7rem;
`;

export const head_2 = css`
  font-size: 4.4rem;
  line-height: 5.2rem;
  letter-spacing: -0.05rem;
`;

export const head_3 = css`
  font-size: 4rem;
  line-height: 5rem;
`;
...

一部しか持ってこなかったのですが、こういう風にアレンジしてどこでも使えるようになりました.
また、既存のText.jsxで分割して使用するために、コードは以下のように修正されている.

// Text.jsx
...
...
const Text = ({ children, ...rest }) => {
  return <Wrapper {...rest}>{children}</Wrapper>;
};

const Wrapper = styled.div`
  ${({ type }) => {
    switch (type) {
      case "head_1":
        return `${head_1}`;
      case "head_2":
        return `${head_2}`;
      case "head_3":
        return `${head_3}`;
        
	...
	...
	...
  }
}`;
      

20210805木曜日

一番忙しい日...
毎週5組の組長たちが代表に会いに行くので、何か聞かせなければならないような気がします.毎週4日です.🤦🏻‍♀️🤦🏻‍♀️

1.間違いは尽きない。

機能が多いので細かいところを見逃したような気がして大変なことになりました.
思わぬ動作をする機能が多く、いつ見つけられるか分からない.
加えて、一つ修正すれば他の機能が機能しない場合も多い.
お互いの依存を最小限に抑え、一人一人が行動できるようにすることが大切です.

2.文書ページ数が多い😇😇

編集で簡単にスキップできると思ったDocument…
実は3ページしかありません.

ドキュメントがない場合

ページ
第

頁

ビューアページ
+)リスト構成部品

機能やスタイルを適用するのは難しくありません.
これらのページでCRUDを繰り返すと、ページは自然に移行する必要がありますが、ギシギシすることがよくあります.
データがreduxを介して少し基準を生成すると、apiの呼び出しが多すぎて点滅するなどの問題が発生します.
一日中つかんで整理しているので、自然です.
詳細😥

20210806金曜日

1. redux-logger... 見られなくなった

プロジェクトの開始時にredux-loggerを適用し、consoleで確認します.
しかし、現在8つのモジュールのデータがあるため、レコーダを見るのは難しいが、見つけるのは難しい.
コンソールにはloggerがいっぱい...console.ロゴ探しも仕事です.
そのためredux-devtoolを使用した.
知らないわけでもないのに、なぜ今になって応用されているのか...
storeの変化をより直感的に見ることができ、stateをより速く見つけることができるので、仕事のスピードが速くなるのではないでしょうか.

2.同時修正防止

組長会議では一つの非難しか受けなかったという.
同時にファイルを変更する場合を考慮します.
初期企画では良い質問をしたのに答えが出せず、時間が過ぎてしまいました.
だからこのような非難を聞いて嬉しいです.
会議の結果、データベースに変更中のブール値がある場合、別の値は変更ページにアクセスできません.
文書を独占する可能性があることを考慮して、「先生は誰が文書を修正しているかを指摘することにしました.
フロントもすべての可能性を考慮して止めるべきですが、urlを入力した部分はまだどうすればいいか分かりません.😢

20210807土曜日

1.「10分前に作成」と同じ時間を表示

Documentページのデザインを見ると、一部は「数分前」を表しています.
実はこれは思いがけない機能ですが、デザインから見ると、やらなければならない義務感があります.
カレンダー作成時にmotorJSも使用していたので、そのままmomentを使用しました.

 // 현재 시간과 마지막 수정시간(없을 경우 최초 작성시간)과의 차이를 text로 return하는 함수
  const getModifiedTime = () => {
    let target;
    if (docId === current.docId) {
      if (current.modifiedAt) {
        target = moment.utc(current.modifiedAt); // 한국시간으로 바꿔줌
      } else if (current.createAt) {
        target = moment.utc(current.modifiedAt);
      }
      const now = moment();
      const diff = {
        day: moment.duration(now.diff(target)).days(),
        hours: moment.duration(now.diff(target)).hours(),
        minute: moment.duration(now.diff(target)).minutes(),
        second: moment.duration(now.diff(target)).seconds(),
      };
      const text = `${diff.day !== 0 ? diff.day + "일" : ""} ${
        diff.hours !== 0 ? diff.hours + "시간" : ""
      } ${diff.minute !== 0 ? diff.minute + "분" : "0분"} 전`.trim();

      return text;
    }
  };

残念なことに、N日前の場合、消去時間と分は自然に見えます.
その点はまず他の修正を完了してから修正します.

総回顧

一週間が一日のように過ぎた.
もっと悩みや会議があるはずなのに、毎日完璧に記録できなかったのはもったいない.
短いメッセージでも自賛します.😅
今週はデザイナーたちが一生懸命働いていて、サービスがきれいに描かれ始めました.
私の手の動きがもっと速ければよかったのに.
努力しない人は一人もいない.
でも毎回「疲れた疲れた」って言って休憩時間以外12時間以上しか乗れないのが面白い
疲れたけど楽しもう
寝ている間に.😇