🐜 Mineアプリケーションプロジェクト-カレンダーページ(1)

🐜 Mineアプリケーションプロジェクト-カレンダーページ

今日はカレンダーページを作成します.
上から切り取った図のように、私が欲しいカレンダーが出るまで、多くのエラーが発生しました.私にとって一番難しい部分です.
カレンダーが最大の難関だと思っていましたが...追加の機能を作成し続けるのは、現在直面している問題と同じように難しいです.
あとちょっと見たら完璧に見えますがまだ解決していない問題がありますその部分は後で解決します
まずカレンダーを作る過程を詳しく書きます

カレンダーの描画
▼データアーキテクチャに問題が発見され、カレンダーを再描画
土曜日、日曜日は色を区別します
今日は日付を表示
表示されるカレンダーに先月と来月の日付を表示します.

次の未解決の問題と問題が見つかりました。今後の解決過程も詳しく書きます。

🔲 不変性を破ることなく、並べ替えて変更する必要があります!
🔲 今日は週末の色が変わらない問題に気づいた
🔲 今月の開始日が日曜日の場合、前月分のデータは不要です

📓 カレンダー作成前の準備フェーズ

1)カレンダーの描き方についての悩み

カレンダーを描くのが難しいのでとりあえずgooglingしました
「JavaScriptを使用したカレンダーの作成」
注意:2つのブログを見つけて参考にしました.
注意:ブログ1:https://bigtop.tistory.com/66
注意:ブログ2:https://velog.io/@mygomi/React-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EC%97%86%EC%9D%B4-%EC%BA%98%EB%A6%B0%EB%8D%94-%EA%B5%AC%ED%98%84
カレンダーの描画方法を考えてみました.
悩み
その月の日付だけを描きます.

悩み2
その月の日付と先月、来月の日付を描きます.

2）カレンダー作成の悩み

CSSを使用してBoxテーブルを作成する方法を検討した.
手で絵を描くと、7つの格子にそれぞれ曜日と日付を描くのは簡単ですが、コードでどう解くかは難しいです.
だから私はそれを小さく割った.
小さなブロックを作って完全なブロックに組めばいいと思います
(カレンダー=7 x(1+4または5)
#(曜日=7 x 1)+(日付表=7 x 4または5)
#(曜日=7 x 1)+{(メインテーブル=7 x 1)x 4または5}
したがって、次のように構成部品と日付構成部品を作成して組み立てたいと思います.

<Calendar>
  <CalendarDays />
  <CalendarMonth />
</Calendar>

そして最初の苦悩の決定は「2‐当月の日付と先月,来月の日付を描く」ことであった.選択しました.

3)必要なデータに悩む

描画日にはDateオブジェクトが必要です.
エンコーディング入門時にJavaScript Dateオブジェクトレッスンを受講しましたが、うまく使ったことがなく、今になってDateオブジェクトを学ぶ時間がありました.
Dateオブジェクトを使用して必要なデータを作成する必要があります.
私が選択したカレンダーから必要なデータを表示しましょう.

1️⃣ previousDates
2️⃣ thisDates
3️⃣ nextDates
先月の日付、現在の月の日付、来月の日付を盛り付けるボウルを作ります.これらを組み合わせて、現在表示されているカレンダーから必要な日付を取得できます.

const previousDates = [];
const thisDates = [];
const nextDates = [];

また、各コンテナに入れる日付を求めるために、いくつかのデータを基準として必要とします.
したがって、次の4つの変数を作成して、必要なデータを取得します.
1朕lastDateOfPreviousMonth(先月の最終日)
2▼最終日OfPreviousMonth(先月最終日)
3朕lastDateOfThisMonth(今月末日)
4▼最終日OfThisMonth(今月最終日)

📓 カレンダーを描きましょう!!

ちなみに、本プロジェクトではredsキットを使用しています.
下一篇:🐜 Mineアプリケーションプロジェクト-予算ページ
前回の記事では、「リアクターとリアクターを使用して入力値を変更するプロセス」を紹介し、リアクターはステータスをusStateに保存し、リアクターはステータス管理をリアクターに保存し、アクションを作成します.
この記事では、プロジェクトでリードツールパッケージを使用する手順について説明します.

📌 createSlice reduckツールパッケージを使用して、保存するデータとアクションを定義します。

Reduxでの状態管理はReducerjsとactions.jsファイルで管理したことがあります.アプリケーションが複雑であればあるほど、動作やReducerの管理が複雑になりますよね?
slice.機能スイートを使用して、jsファイルでReduserとActionを同時に管理できます.

[1] slice.jsファイルの作成

以下のようにsliceします.jsファイルが作成されました.
必要なデータとアクションを定義します.

import { createSlice } from '@reduxjs/toolkit';

const { actions, reducer } = createSlice({
  name: '',
  initialState: {},
  reducers: {},
});

export {
  actions,
  reducer,  
};

[2]必要なデータの定義

カレンダーを描くにはyearとmonthが必要です.あと月移動の時も
次のように定義します.

import { createSlice } from '@reduxjs/toolkit';

const { actions, reducer } = createSlice({
  name: 'application',
  initialState: {
    year: 2021,
    month: 7,
  },
  reducers: {},
});

export const {} = actions;

export default reducer;

📌 カレンダーページを作成します。

[1]CalendarPage構成部品の作成

私はできるだけ興味のある部分を分離します.

import CalendarContainer from './CalendarContainer';

export default function CalendarPage() {
  return (
    <>
      <CalendarContainer />
    </>
  );
}

[2]CalendarContainerコンポーネントの作成

コンテナ構成部品を作成しました.
冗長(中央リポジトリ)からstateを取り出します.
次に、CalendarMonth素子に渡します.

import { useSelector } from 'react-redux';

import CalendarDays from './CalendarDays';
import CalendarDates from './CalendarDates';

export default function Calendar() {
  const { year, month } = useSelector((state) => ({
    year: state.year,
    month: state.month,
  }));
 
  return (
    <>
      <CalendarDays />
      <CalendarMonth
        year={year}
        month={month}  
      />
    </>
  );
}

[3]CalendarDaysコンポーネントの作成

下図のように.

ここでdaysはreduceに保存して使う必要はないと思うのでusStateを使いました.同様に、useStateではなく次のように使用することもできます.

 const days = ['일', '월', '화', '수', '목', '금', '토'];

次にmap関数を使用して週表を作成します.

import React, { useState } from 'react';

export default function CalendarDays() {
  const [days] = useState(['일', '월', '화', '수', '목', '금', '토']);

  return (
    <>
      <div>
        {
          days.map((day) => (
            <Day
              key={day}
            >
              {day}
            </Day>
          ))
        }
      </div>
    </>
  );
}

[4]CalendarMonth構成部品の作成

export default function CalendarMonth({ year, month  }) {
  // Date객체를 활용해서 "이전 달 마지막 날짜"와 "이전 달 마지막 요일" 구하기
  const lastDateOfPreviousMonth = new Date(year, month - 1, 0).getDate();
  const lastDayOfPreviousMonth = new Date(year, month - 1, 0).getDay();
  
  // Date객체를 활용해서 "이번 달 마지막 날짜"와 "이번 달 마지막 요일" 구하기
  const lastDateOfThisMonth = new Date(year, month, 0).getDate();
  const lastDayOfThisMonth = new Date(year, month, 0).getDay();

  // 이전 달 날짜, 다음 달 날짜를 구해서 담을 그릇을 정의해준다.
  // 이번 달 날짜를 만들어 줍니다.
  const previousDates = [];
  const thisDates = [...Array(lastDateOfThisMonth + 1).keys()].slice(1);
  const nextDates = [];

  // previousDates를 채워줍니다.
  if (lastDayOfPreviousMonth !== 6) {
    for (let i = 0; i < lastDayOfPreviousMonth + 1; i++) { 
   previousDates.unshift(lastDateOfPreviousMonth - i);
    }
  }
  
  // nextDates를 채워줍니다.
  for (let i = 1; i < 7 - lastDayOfThisMonth; i++) {
    nextDates.push(i);
  }

  // 그리고 이전 달, 이번 달, 다음 달을 합쳐줍니다.
  const dates = previousDates.concat(thisDates, nextDates);

  // 그리고 weeks 테이블로 각각 date를 나누어 담습니다.
  const weeks = [];

  for (let i = 0; i <= 35; i += 7) {
    weeks.push([...dates].slice(i, i + 7));
  }

  // 마지막으로 map 함수를 사용해서 필요한 데이터들을 출력해냅니다.
  return weeks.map((week) => (
    <div
      key={week}
    >
      {
        week.map((date) => (
          <div
            key={date}
          >
            {date}
          </div>
        ))
      }
    </div>
  ));
}

cssでカレンダーテーブルを作成する場合
下図のように2021年7月が描かれています.

追加する機能1.土曜日と日曜日を区別する
追加する必要がある機能2.今日の日付を表示
追加する必要がある機能3.表示されるカレンダーで、先月と来月の日付を暗く表示します.
このように追加すると、きれいなカレンダーが描かれます:)

次の記事では、月次移動の機能と、データ・モードの問題が発見されたときにカレンダーを再描画するプロセス、および静的に定義されたデータを動的に変更する方法について説明します.