새 블로그 개발일지 - 3

레이아웃을 만들어보자

byseop · 2022년 11월 4일

웹폰트 적용

헤더에 로고를 넣어야 하는데 디자인 하기는 귀찮았다. 깔끔한 폰트로 그냥 타이포그라피를 이용한 로고를 만들면 좋을것 같다. 마침 벨로그를 살펴보니 구글폰트에서 제공하는 Fira Mono 를 사용하고 있네?
Next.js 에서 웹폰트를 적용하는법을 찾아보니 아예 자체 패키지로 구글폰트를 제공한다.
yarn add @next/font
 
프로젝트 전체에 이 폰트를 적용하고 싶다면
// _app.tsx
import { Roboto } from '@next/font/google'

const roboto = Roboto({
  weight: '400',
})

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={roboto.className}>
      <Component {...pageProps} />
    </main>
  )
}
이런식으로 _app.tsx 파일에 추가해주면 된다. 하지만 나는 헤더의 로고에만 추가할 생각이다.
// pages/index.ts
import { Inter } from '@next/font/google'

const inter = Inter()

export default function Home() {
  return (
    <div className={inter.className}>
      <p>Hello World</p>
    </div>
  )
}
일부분만 적용하고 싶다면 이런식으로 페이지나 컴포넌트에 직접 import 하여도 된다.
 

레이아웃 만들기

페이지가 몇개 안되더라도 공통 레이아웃은 있어야지 생각했다.
 

Styled-Components 사용

Steyld-Components 를 사용한 이유는 단순히 익숙해서…? 그리고 next.js 에서 제공하는 스타일 작성법인 module 패턴이랑 styled jsx 가 그리 편하게 느껴지지 않았다.
 
yarn add styled-components
yarn add -D @types/styled-components babel-plugin-styled-components
관련 패키지들을 설치해준다.
 
// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  swcMinify: true
};

module.exports = {
  ...nextConfig,
  compiler: {
    styledComponents: {
      displayName: true,
      ssr: true
    }
  }
};
현 시점에서 next.js 13버전이 출시했다. 그 전까지는 styled-components 를 적용하기 위해 여러가지 세팅과 파일을 수정해야 하는것으로 알았는데, 13버전부터는 이렇게 next.config.js 파일에 compiler 옵션을 추가하는것으로 서버사이드 환경에서 문제없이 사용 가능하다.
 
먼저 크로스브라우징의 가장 기초인 스타일 리셋을 설정해주어야 한다. 쉽게 리셋을 할 수 있도록 패키지를 받아준다.
yarn add styled-reset
 
// styles/global.ts

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyle = createGlobalStyle`
  ${reset}
`;

export default GlobalStyle;
createGlobalStyle 을 이용하여 글로벌 스타일 컴포넌트를 만들어준 뒤에 추후에 _app.tsx 파일에 추가 할 계획이다.
 

헤더 만들기

// components/Header/Header.tsx

import { Fira_Mono } from '@next/font/google';

interface IProps {
  className?: string;
}

const firaMono = Fira_Mono({
  weight: ['400', '500', '700'],
  subsets: ['latin'],
  fallback: [
    '-apple-system',
    'BlinkMacSystemFont',
    'Helvetica Neue',
    'Apple SD Gothic Neo',
    'Malgun Gothic',
    '맑은 고딕',
    '나눔고딕',
    'Nanum Gothic',
    'Noto Sans KR',
    'Noto Sans CJK KR',
    'arial',
    '돋움',
    'Dotum',
    'Tahoma',
    'Geneva',
    'sans-serif'
  ]
});

const Header: React.FC<IProps> = ({ className }) => {
  return (
    <header id="header" className={`${className}`}>
      <div className="header-inner">
        <div className="logo-wrap">
          <span className={`logo ${firaMono.className}`}>byseop</span>
        </div>
      </div>
    </header>
  );
};

export default Header;
헤더를 먼저 작성해주었다. 참고로 firaMono 를 작성하는 부분에서 subsets 를 입력하지 않으면 제대로 폰트가 적용되지 않았다. 관련 내용은 next.js 공식 깃헙 이슈 에서 발견했다.
 
// components/Header/Header.Styled.tsx

import styled from 'styled-components';
import Header from './Header';

const S = styled(Header)`
  .logo {
    font-size: 100px;
  }
`;

export default S;
나는 이런식으로 styled-components 를 작성한다. 스타일 코드를 다른 파일에서 관리하는게 조금 더 깔끔하게 보이는 것 같다.
이런식으로 작성된 헤더를 레이아웃으로 만들어보자.
 
// components/Layouts/DefaultLayout/DefaultLayout.tsx

import Header from '../../Header';
import GlobalStyle from '../../../styles/global';

const DefaultLayout = ({ children }: React.PropsWithChildren<{}>) => {
  return (
    <>
      <Header />
      <div className="layout layout-default">{children}</div>
      <GlobalStyle />
    </>
  );
};

export default DefaultLayout;
헤더를 포함하는 기본 레이아웃이다. 이 레이아웃을 이용하면 헤더를 항상 포함해서 표시하게 된다.
 
// pages/_app.tsx

import { DefaultLayout } from '../components/Layouts';

import '../styles/globals.scss';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <DefaultLayout>
      <Component {...pageProps} />
    </DefaultLayout>
  );
}
이렇게 app.tsx 파일에 기본 레이아웃을 포함시켜주었다.
 
이렇게 레이아웃이 완성이 되었다. 헤더의 내용이나 스타일은 직접 채워 넣어주면 된다.
 

마무리

설마 스타일링까지 베껴가려는 사람은 없겠지 ㅋㅋㅋ??