📒 오늘 공부한 내용

🔍수업목차

[13-1] 레이아웃 구조
[13-2] 레이아웃 Hidden 영역 설정
[13-3] 글로벌 스타일 적용
[13-4] 폰트

✅ 레이아웃 구조

---

• 레이아웃이란 프로젝트 전체의 UI 구조를 의미한다.

• Header, Navigation, Menu, Footer, Main 등으로 화면을 쪼개는 일을 의미한다.

• 레이아웃만 잘 잡아도 프로젝트 전체의 유지보수가 쉬워진다.

레이아웃 컴포넌트의 폴더 구조

각각의 컴포넌트를 하나로 조립하는 index.tsx 파일

최종 결과

✅ 레이아웃 Hidden 영역 설정

---

• 프로젝트를 진행하다보면 특정 페이지에서는 특정 레이아웃이 보이지 않았으면 할 때가 있다.

• 이럴 때는 특정 페이지에서는 레이아웃을 나타내주지 않게 하는 조건을 걸어주면 된다.

import LayoutHeader from "./header";
import LayoutBanner from "./banner";
import LayoutNavigation from "./navigation";
import LayoutFooter from "./footer";
import { useRouter } from "next/router";

const HIDDEN_HEADERS = [
  "/section13/13-01-library-icon",
  "/section13/13-02-library-star",
  "/section13/13-03-modal-custom",
];

interface IProps {
  children: JSX.Element;
}

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

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

  return (
    <>
      {!isHiddenHeader && <LayoutHeader />}
      <LayoutBanner />
      <LayoutNavigation />
      <div style={{ display: "flex" }}>
        <div style={{ width: "30%", backgroundColor: "orange" }}>사이드바</div>
        <div style={{ width: "70%" }}>{props.children}</div>
      </div>
      <LayoutFooter />
    </>
  );
}

• includes() 를 사용해 배열내 값과 현재 페이지의 asPath의 값을 비교하여 동일하지 않을 경우에만 레이아웃 화면을 출력해주면 페이지에 따라 화면을 달리 구성할 수 있다.

✅ 글로벌 스타일 적용

---

• 글로벌스타일이란 우리가 만들고있는 모든 컴포넌트에 기본적으로 적용시켜주는 스타일을 의미한다.

• 글로벌스타일을 _app.tsx 에 적용해 주어야 한다.

✅ 폰트

---

• 폰트는 직접 다운받은 파일을 사용할수도, 웹폰트를 사용할 수도 있다.

• @font-face 를 사용하여 폰트를 호출할 이름(font-family), 폰트의 경로(src) 를 선언하고,
  폰트를 사용하려는 페이지의 style부분에서 적용시켜준다.

font-family: "폰트명" 

💡 FOIT/ FOUT

• FOIT(Flash of Invisible Text) : 브라우저가 웹 폰트를 다운로드하기 전에 텍스트가 보이지 않는 방식
• FOUT(Flash of Unstyled Text) : 브라우저가 웹 폰트를 다운로드하기 전에 텍스트가 대체 글꼴로 렌더링되는 방식
• 폰트 로딩 타입은 font-display 속성으로 변경 가능