favicon

Jayden { do: smite }

231005(목) 성장

🚤 성장일지 7.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?<br/> 성장하고 있는 것이 살아 있는 것이다.<br/> 생명의 유일한 증거는 성장이다!

⚛ (7.0)<완전 개편> 파인만 학습법을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다.

Next.js

기존에 React로 진행했던 베스트 라빈스 프로젝트를 Next.js로 마이그레이션 하기로 했다. 사실 처음부터 베스트 라빈스는 Next로 진행하고 싶었다. 왜냐하면 서비스 제공 및 유지 보수에 초점을 맞추고 시작한 프로젝트라서 SEO에 강점을 주고 싶었기 때문이다. 하지만 프로젝트 시작 전에 급하게 Next를 배우면서 진행하기에는 주어진 10일이라는 시간 동안 MVP 조차 완성하지 못할 거 같아서 React로 진행했었다. MVP 개발이 끝나고 마침 시간이 나서 Next로 마이그레이션을 하기로 했다.

PWA 적용과 Open Graph

Next도 React와 마찬가지로 PWA를 지원한다. 그 방법 자체가 크게 어렵지 않은데 간단하게 정리하자면 아래와 같다.

  1. next-pwa 패키지 설치
npm i next-pwa
  1. next.config.js 내용 수정
const withPWA = require('next-pwa')({
  dest: 'public',
  // disable: process.env.NODE_ENV === 'development',
});

module.exports = withPWA({
  // next.js config
});

개인적으로 위의 config에서 disable: process.env.NODE_ENV === 'development'은 설정하는 걸 추천한다. 왜냐하면 npm run dev로 개발 환경을 실행할 때마다 pwa 빌드 파일이 새로 생성되기 때문이다.(commit할 때마다 빌드 파일이 새로 생성돼서 굉장히 불편하다.)

추가로 위의 disable 설정을 하지 않고 일단 npm run build를 통해서 public에 workbox-*.js와 sw.js(service-worker)가 생성되는지 확인하자.

  1. public에 manifest.json 생성

manifest.json을 설정하여 웹 앱을 설치할 때 사용할 아이콘, 이름, 설명 등을 설정할 수 있다.

{
  "name": "Best Robbins",
  "short_name": "Best Robbins",
  "description": "Best Robbins",
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    }
    // ... 중략
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}
  1. head에 meta 태그 추가
  • 일반적인 html 혹은 next 12 버전에서는 next/head를 사용하여 Head 컴포넌트 내부에 <meta /> 형식으로 추가할 수 있다.
  • 하지만 next 13 버전에서는 head 추가 방법이 변경되었기 때문에 가장 최상단의 layout.tsx 혹은 page.tsx에 아래와 같이 추가해주면 된다.
export const metadata: Metadata = {
  metadataBase: new URL('https://best-robbins-fe.vercel.app/'),
  title: {
    default: '베스트라빈스',
    template: '%s | 베스트라빈스',
  },
  description: '최고의 아이스크림 조합을 추천받아보세요!',
  manifest: '/manifest.json',
  openGraph: {
    type: 'website',
    title: '베스트라빈스',
    description: '최고의 아이스크림 조합을 추천받아보세요!',
    images: 'https://kr.object.ncloudstorage.com/best-robbins/logo/logo_string.svg',
    locale: 'ko_KR',
    url: 'https://best-robbins-fe.vercel.app/',
    siteName: '베스트라빈스',
  },
};

여기서 openGraph는 우리가 흔히 og:image로 사용하는 메타 태그를 설정하는 것이다. Open Graph는 페이스북에서 만든 메타 태그로, 웹 페이지가 소셜 미디어에 공유될 때 미리보기로 보여지는 정보를 설정할 수 있다. 이를 통해 소셜 미디어에서 공유될 때 미리보기가 잘 나오도록 할 수 있다.

이제 끝이 났으면 빌드 후, npm run start로 서버를 실행하고 localhost:3000에 접속해보자. 그리고 라이트하우스를 실행하면 PWA가 적용된 것을 확인할 수 있다.

로컬 폰트 적용하기

next에서 제공하는 next/font/google을 사용해서 구글 폰트를 적용할 수 있다. 하지만 로컬 폰트를 적용할 때는 next/font/local을 사용한다.

먼저 원하는 폰트를 다운로드 받는다. 나는 Pretendard를 사용했다. public/fonts에 폰트 파일을 넣는다. 그리고 아래와 같이 설정하면 전역에 폰트가 적용된다.

import './globals.css';
import type { Metadata } from 'next';
import localFont from 'next/font/local';

export const Pretendard = localFont({
  src: '../../public/fonts/PretendardVariable.woff2',
});

// ... 중략

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body className={Pretendard.className}>{children}</body>
    </html>
  );
}

📝 회고

확실히 방향을 정하고 다시 코딩을 하니까 너무 재미있다..ㅠㅠ 개발 자체에서 오는 스트레스도 있지만 개발하지 않을 때 오는 스트레스가 더 크고 힘든 것 같다. 그리고 보통은 새로운 서비스를 개발하기 위한 새로운 코드를 작성하는 게 재미있다고 생각했는데, 오늘 마이그레이션도 그렇고 리팩토링도 그렇고 오히려 유지보수하고 있는 코드를 개선하는 게 더 재미있는 것 같다. 그래서 앞으로는 새로운 서비스를 개발하는 것보다 기존에 개발했던 서비스를 개선하는 것에 더 집중해서 개발할 예정이다.

참고

undefined

Copyright 2023. all rights reserved by Jayden