Toyプロジェクト後期)Space And Coin


  • 今回はRidexを使ったToyプロジェクトを行うことにしました.
  • Open APIも使用され、興味深いOpen APIが見つかり、以下のAPIが使用されます.
    🍨 上り相場API、NASA宇宙写真API、KACA(次)検索API
  • Chart.jsでグラフを作成しました.
  • このサイトで使われているフォントは順天市役所の順天体Bです.
  • は前回vercelで配布され、今回はnetlifyで配布されました.
  • サイト機能の概要


  • NASA APOD APIがランダムに受信した写真とその説明を出力する.
  • 暗号化通貨相場upbitから受信され、現在の相場はブックマークに保存されます.
  • ブックマーク画面は、さまざまな機能を実現しています.
  • に格納されている暗号化された通貨相場を最新の順序で確認します.
    (ブックマークを削除する場合は、ロード中は一時的ですが、上部に削除プロンプトが表示されます)
  • に保存されている相場を種類別にグラフに分けて確認します.
  • ブックマークのハンコインに関する投稿が表示されます.
  • 試行錯誤

  • ココア翻訳API機能で、宇宙写真の説明をハングルに翻訳するボタンを作成しましたが、翻訳機能が毎日使う文字数制限で、思ったより機能制限が多かったので削除することにしました.
    △説明が長すぎるので、すぐに回数が切れてしまった.
  • Chart.jsを用いてグラフを作成した.
  • Chart.jsを用いてデータグラフを描くためにuserefectとuserefectを用いたが,この2つの方法の理解度はやや低いようだ.
  • 既存のデータは、
  • グラフに適合するデータフォーマットで処理されるべきである.
  • axiosとuseEffectを使用してAPIをインポートするとメモリ漏洩が発生し、ロードスクリーン実装とuseEffect cleanup機能が使用されます.
  • Reduxを使ったヒントメドレーが作られていますが、未熟なところが多いです.settimeoutで定期的に通知をクリアする方式を使用していますが、多くの通知が発生すると、中間の通知が一度に消えてしまい、少し気まずいです.
  • Font Awesomeを使用してアイコンを作成し、ユーザーが簡単にアクセスできるようにします.
  • モードウィンドウが徐々に消えるように、アニメーションと@キーを使用します.
  • .fadeout-modal {
        animation: fadeout 3s;
        opacity: 0;
        ... 생략
    }
    
    @keyframes fadeout {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }
  • モードウィンドウは表示されないが、コンポーネントはまだ存在するため、通知をステータス管理し、定期的に空にして画面を再レンダリングし、画面を初期状態に維持しようとします.
  • netlifyに配備する際に追加された環境変数は適用されないため、再配置が行われ、良好な応用が得られた.
  • 要素の中央揃え、余白:0 px auto 0 px auto;同じCSSを記述し,有効である.
  • リンク


    🥧 羽状バニラ:https://github.com/citron03/Space_And_Coin
    🥧 配備サイト:https://space-and-coin.netlify.app/