2022_01_26

18214 ワード

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

Reference

この問題について(2022_01_26), 我々は、より多くの情報をここで見つけました https://velog.io/@binheart/20220126

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

PHPのimplode関数をJavaで実装

[Leet Code] 49. Group Anagrams