[回顧録]個人課題

5796 ワード
回顧録 いちじげんプレハブ テキストリンク

プロジェクトの概要


💡 テーマ:一部のランニングカートTMIサービス機能を実施
🗓 期間:03.21～03.25
🔨技術スタック:React、Type script、Redux、Redux Toolkit、styled-componses
💻 担当:全機能の実施
👤 参加者:1
プロジェクトの詳細
Nexon Cart OpenAPIを使用して一部のテープドライブTMIサービス機能を実現するサービス

主な機能リスト

  • 個人履歴ページを含む1つ以上の追加ページを開発します.
    検索ページ、個人照会ページ
    • 上部メニューバー、
  • ページ参照可能
  • は、2種類以上の図形
    • を含む.
  • には、移動、回転、グラデーション、fadeUp、スケルトンの5種類以上のアニメーションがあります.
    1つ以上のvanila scriptを使用して作成されたモジュール実装

  • ⚙▼実装機能


    本プロジェクトは,個人課題に対して,授業初期にアンケート調査を行い,個人課題で行いたい企業課題に回答する.nexonkoreaの企業課題を選び、課題を検討する際に実施すべき内容がたくさんありましたが、楽しく実施できると思います.(一番重要なのは、バギーやドオのような可愛いイメージをたくさん利用できるので興味があります.🥰)
    プロジェクトの開始前に実装するサイトまたはAPIを調査する必要がある場合があります.そのため、テープカートリッジTMIサービスとAPIを分析し、次の図に示すように、タスクの重要な機能とAPI分析を作成する日があります.APIが提供するデータを用いて,実現可能な機能,あるいは実現したい他の機能をまとめた.

    もちろん、すべての計画を直接実施することはできず、API分析でも簡単な分析ではないため、直接実施し、APIを再マイニングするしかない.主な機能分析では、既存サイトのいくつかの残念な点もまとめましたが、実施時にはまだ解決できない点があり、残念ながらREADMEでも作成されていない点が今でも残念です.
    プロジェクトは5日間行われ、最終日に提出された後、READMEを作成した.今回は1人で行うプロジェクトなので、詳細な実施内容と事項はREADMEで詳細に説明しています.なお、READMEに記入されていない部分については、以下でさらに整理します.

    🎃 Issue


    円環図stroke-linecap:roundでの問題



    ドーナツグラフ実装ではsvg実装を用いてstroke-linecap属性をroundに付与し,線の末端を丸めた.垂直降下よりも柔らかく、見た目も良いように見えるので、このように実現し、データをグラフに適用することで、問題を特定することができます.
    問題は,終了が円滑になるにつれて,開始と終了の位置が変化することである.中程度の値では目立たないが,99%,1%などの値では上記の問題が目立つ.(簡単に言えば、95%くらいから、100%のようにいっぱいに見えます.)そこで、点線の長さと開始位置を調整するために、stroke-dashoffsetの値を既存の計算値と異なるようにするべきだと思いますが、dashOffset%値で計算したgetStrokeDashOffset()関数内で調整を行い、調整値をテストしたところ、ある程度適切な値が得られました.
    しかし、これは完全に解決された問題ではなく、この問題を解決するのに要する時間が少ないため、まず結果がある程度適切になるように値を調整しました.しかし、必ず解決してドーナツグラフを完成させるので、別に実現したいと思います.正確なカバー領域の値を計算してdashOffsetを調整することができます.

    💛 Liked

  • グラフデータの複数のオプションを使用します.
    グラフデータを適用したラベル削除、グリッド表示、データ昇順ソート、y軸ラベルを固定する範囲など、さまざまなオプションがありますが、線グラフにはtensionオプションがあり、線を曲線として表すことができます.特に,線路図上のサスペンション時に表示されるデータとデータ中のデータに差があるため,customが必要であり,検索によりtooltipのcallbacksに関数を作成し,customを可能にすることが分かった.そこで,以下のようにして,サスペンション時に表示されるテキストを修正する.
    しかし、今回顧録を書いているうちに、機能を修正する際にこの部分を一時的に削除し、最終コードが反映されたときに確認したことがわかりました.😱 とても努力した表现...見ることもできない…ほほほ
    • tooltip: {
      callbacks: {
        title(context: any[]) {
          const { dataIndex } = context[0];
          return `이전 ${total - Number(dataIndex)}경기`;
        },
        label(tooltipItem: { label: string }) {
          return `순위: ${tooltipItem.label}`;
        },
      },
    },

    📝 Learned

  • ドーナツチャートを実現するためにsvgを運用し、それによって初めてsvgのスタイル属性、特に破線の長さを指定するstroke-dasharray、開始点を指定するstroke-dashoffsetを理解し、これは本当に見慣れない属性で、運用するのが不思議です.

    • ❗️ Lacked

  • Typescript+eslintで発生したエラーをまとめる
  • グラフ実施期間調整のオプションを整理する
    残念なことに、
  • ドーナツグラフは完全に実現されていません.
    • 残念ながら、
  • ランキングページや他のAPIを使用したページは実現されていません.
  • のネット名に関する情報を持たない被験者のためには,検索時にいくつかの検索語を表示しようとしたが実現しなかった部分が残念であり,全戦績データを受信したAPIを利用して最近活動している3名程度のユーザのネット名を表示した方がよい.
    • [JavaScript] keyup, keydown(feat. keypress)
    [白俊]18500鉱物2(Java)