Layout / Global-Styles / WOFF2 (복습 13일차)

자유게시판 실습

value는 defaultValue를 이겨서 둘을 같이 쓰면 value가 이긴다. value에 원하는 값을 넣어주고 없을 때는 defaultValue로 보여줄 값을 || 연산자를 사용하여 해결할 수 있다.

function onClickOpenDeleteModal(event: MouseEvent<HTMLImageElement>) {
	setIsOpen(true)
    if (event.target instanceof Element) setSelectedId(event.target.id)
}

타입스크립트에서 event.target.id에서 id에 타입스크립트 에러가 나타날 수 있는데 instanceof를 활용하면 된다.

Layout, UI 전체적인 구조

function MyApp({ Component, pageProps }){
	return (
          <Layout>
            <Component {...pageProps} />
          </Layout>
	)
}

Layout의 props.children이 <Component {...pageProps} />이다.

const HIDDEN_HEADERS = [
  "헤더를 보여주지 않을 페이지",
  // ...
  // ...
  // ...
];

HIDDEN_HEADERS에 헤더를 보여주지 않을 페이지를 배열로 만들고,

  const router = useRouter();
  const isHiddenHeader = HIDDEN_HEADERS.includes(router.asPath);
  
   {!isHiddenHeader && <LayoutHeader />}

HIDDEN_HEADERS에 router.asPath의 포함여부를 체크하여 불린값을 isHiddenHeader로 둔다. 그 다음에 false이면 헤더를 보여주고, true이면 헤더를 안보여주게 부정연산자와 &&연산자를 활용해주면 된다.

Global-Styles, 모든 페이지에 동일한 CSS

	<ApolloProvider client={client}>
          <Global styles={globalStyles} />
          <Layout>
            <Component {...pageProps} />
          </Layout>
        </ApolloProvider>

Emotion에서 Global를 import해서 Layout을 감싼다.

import { css } from "@emotion/react";

export const globalStyles = css`
  * {
    margin: 0px;
    box-sizing: border-box;
    font-size: 10px;
    font-family: "myFont";
  }

  @font-face {
    font-family: "myFont";
    src: url("/fonts/scifibit.ttf");
  }
`;

그리고 globalStyles를 emotion의 css를 임포트하고 *에 속성들을 지정해주면 전역적으로 스타일이 먹히게 된다.

WOFF2, 폰트

웹 브라우저에서는 html, css, javascript를 먼저 보여줄 수 있는 걸 보여준 뒤에 이미지랑 폰트가 나타나게 된다. 폰트의 용량이 크게 되면 다운로드의 시간에 따라 그려지는 때가 달라지는데 이에 따라 문제가 생길 수 있다. 크롬, 사파리, 파이어폭스 등은 FOIT으로 폰트가 다운로드되어야 보여주는 방식이다. 인터넷 익스플로어는 FOUT로 폰트가 다운받는 동안 기본 폰트로 보여주는 방식이다.

WOFF2는 압출률이 높아 용량이 아주 적어서 FOIT 방식에 적합한 확장자이다.

Subset 폰트라는 내용이 있는데, 경량화 폰트라고 불리며 우리가 잘 사용하지 않는 '갾'이런 내용들을 뺌으로써 용량을 줄이는 것이다.

복습 회고

일회성으로 설정해두면 잘 안 보게 되는 레이아웃과 글로벌 스타일을 다시 한 번 복습하니까 새로운 내용들이 보였다. props에는 props.children이 있다는 부분을 지나쳤다는 걸 처음 알았고 Component의 스프레드 연산자로 되어 있는 ...pageProps도 그냥 지나쳤는데 page폴더에 넣어둔 파일들이 pageProps였음을 이번에 확실히 알게 됐다.

저작자표시

제이엠_개발일지