새 블로그 개발일지 - 3

레이아웃을 만들어보자

웹폰트 적용

헤더에 로고를 넣어야 하는데 디자인 하기는 귀찮았다. 깔끔한 폰트로 그냥 타이포그라피를 이용한 로고를 만들면 좋을것 같다. 마침 벨로그를 살펴보니 구글폰트에서 제공하는 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 파일에 기본 레이아웃을 포함시켜주었다.
 
이렇게 레이아웃이 완성이 되었다. 헤더의 내용이나 스타일은 직접 채워 넣어주면 된다.
 

마무리

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