K-POP積水試験項目回顧

7991 ワード

  • Webサービスアドレス
  • https://kpop-meme-test.vercel.app
  • 背景
    n/a.ターゲット
  • Webテクノロジーを使用して興味深いテスト
  • を作成
  • 一般的なWebアプリケーションにないコンテンツを理解する
  • n/a.環境
  • 2022/02/03 ~ 2022/02/28
  • 時勤務
  • フロント1名+企画/設計1名
  • プロセス
    Tailwind CSSの弱点
  • は、一般的なWebアプリケーションではなく、静的なWebサイトUIを記述し、多くのテール風cssの弱点を理解しています.
  • クラス、スタイルプロパティでダイナミック値を使用するのは難しい
    例えば、
  • のようにJavaScript変数を使用することはできません!
  • セグメントcss変数が使用可能
  • ref
  • https://tailwindcss.com/docs/adding-custom-styles#resolving-ambiguities
  • アニメーションを使用するにはconfigファイルで設定する必要があります
  • ref
  • https://tailwindcss.com/docs/animation#using-custom-values
  • 条件スタイルを使用するたびに、コード(クラス名)の可読性は
  • に急激に低下する.
    The Open GraphプロトコルとSSR/SGの使用
  • リンク共有テストを使用する場合、画像と簡単なテキストをプレビューした感じで表示したい
  • ref
  • https://www.freecodecamp.org/news/what-is-open-graph-and-how-can-i-use-it-for-my-website/
  • ですが、className="w-[${value}px]"で動的にテストurl(動的ルーティング)を作成してogに関連するラベル(testIdの値に依存)を動的にレンダリングしたので、最初のプレビュー(og画像)は正しく表示されませんでした.
  • ソリューション
  • params値のみを使用してlogに関連するタグレンダリングを決定すると、
  • getStaticPropsおよびgetStaticPathsプリレンダリング配置
  • を使用
  • /[testId]
  • /food,/knowledge
  • code
    export const getStaticPaths: GetStaticPaths = () => {
      return {
        paths: [{params: {testId: "food"}}, {params: {testId: "knowledge"}}],
        fallback: true,
      };
    }
    
    export const getStaticProps: GetStaticProps = (context) => {
      const testId = context?.params?.testId || ""
    
      return {
        props: {
          testId: testId === "food" ? "food" : "knowledge"
        },
      }
    }
  • query値もOGに関連するタグレンダリングを決定する.
    残念ながらクエリ値はgetStaticPropsでは解決できません
  • getServerSidePropsを使用してサーバにリクエストを送信すると、
  • がレンダリングされ送信されます.
  • /[testId]?s=[クエリ値]
  • /food?s=dfdfdfd,/knowledge?s=fdfefefe
  • code
    export const getServerSideProps: GetServerSideProps = async (context) => {
      const testId = context?.params?.testId || ""
      const scoreParam = context?.query?.s || ""
      const encryptedScore = typeof scoreParam === "string" ? scoreParam : ""
      const decryptedScore = // descrypt encryptedScore
    
      return {
        props: {
          testId: testId === "food" ? "food" : "knowledge",
          defaultScore: decryptedScore
        },
      }
    }
  • 結果と考察
  • code
  • https://github.com/ghtea/kpop-meme-test
  • は、通常のWebアプリケーションでなくても、静的なWebサイトが私の技術で作成できることを再認識しました.
  • このように技術スタックよりもWebサービスの面白さやコンセプトを強調したシンプルなウェブサイトも作られることが多く、私の技術を高めるよりも人々が好むもの.