2022_01_26

18214 ワード
TIL: Today I Learned テキストリンク
TypeScript ver. エラーメッセージまたはイベント.targetで値が見つからない場合があります.(赤い線)
この場合、以下のコードで解決できます.
if(event.target instanceof Element) setSeletecId(event.target.id```

Layout

  • _app.tsx:
    • 設定ページは、すべてのページを実行する前に実行します.
  • コンポーネントのLayoutパッケージ形式
  • props.children


  • props.childrenのタイプはreactChildです.
    import { ReactChild } from "react";

interface IProps {
  children: ReactChild;
}

export default function Layout(props: IProps) {
  return (
    <div>
      <div>헤더영역</div>
      <div>배너영역</div>
      <div>네비게이션영역</div>
      <div>{props.children}</div>
      <div>풋터영역</div>
    </div>
  );
}

  • 特定のページでレイアウトを非表示にする
    :アルゴリズムを使用して条件付きレンダリングを行います.
    • import { ReactChild } from "react";
import LayoutBanner from "./banner";
import LayoutFooter from "./footer";
import LayoutHeader from "./header";
import LayoutNavigation from "./navigation";
import styled from "@emotion/styled";
import { useRouter } from "next/router";

interface IProps {
  children: ReactChild;
}

const LayoutSidebar = styled.div`
  min-width: 20vw;
  height: 100vh;
  background-color: indigo;
`;

const BodyWrapper = styled.div`
  display: flex;
`;

const HIDDEN_HEADERS = ["/12-06-modal-address-refactoring"];

const LayoutBody = styled.div``;

export default function Layout(props: IProps) {
  const router = useRouter();
  console.log(router);

  const isHiddenHeader = HIDDEN_HEADERS.includes(router.asPath);

  return (
    <div>
      {!isHiddenHeader && <LayoutHeader />}
      <LayoutBanner />
      <LayoutNavigation />
      <BodyWrapper>
        <LayoutSidebar />
        <LayoutBody>{props.children}</LayoutBody>
      </BodyWrapper>
      <LayoutFooter />
    </div>
  );
}

    GlobalStyles

  • _app.tsxから
    • をインポート
  • グローバルスタイルファイル、{css}import
    • を作成
  • _app.tsx上にtagを作成し、style={}属性
    • を適用する
    import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";
import { AppProps } from "next/dist/shared/lib/router/router";
import "antd/dist/antd.css";
import Layout from "../src/components/commons/layout";
import { Global } from "@emotion/react";
import { globalStyles } from "../src/commons/styles/globalStyles";

function MyApp({ Component, pageProps }: AppProps) {
  const client = new ApolloClient({
    uri: "http://example.codebootcamp.co.kr/graphql",
    cache: new InMemoryCache(),
  });

  return (
    <ApolloProvider client={client}>
      <Global styles={globalStyles} />
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </ApolloProvider>
  );
}

export default MyApp;

    font / image

  • 画像またはフォントは、まずHTML、JSをレンダリングしてから二次受信を行うため、フォントが適用された文字のみが遅延する現象が発生する.(FOIT、FOUT)
    • そのため、圧縮率の高いフォントが必要です.eotsubset font(軽量化フォント):一般的でないフォントの軽量化ファイルを削除します.長所もありますが、上の文字を使う必要があると文字が破られる可能性があります.
  • Fallback Font:最初のアプリケーションのフォントに問題が発生し、適用されない場合は、後のフォントが適用されます.ex) 
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;

    • react-slick


    :carousel関連libraryは、ユーザーが多く、docが単独で存在します.
    Neostack
    PHPのimplode関数をJavaで実装
    [Leet Code] 49. Group Anagrams