Next.js 블로그 첫 번째 회고

next.js 블로그

next.js로 블로그를 구현 했고 README에 보면 내가 구현한 기능들과 앞으로 구현할 것들을 리스트로 만들었습니다.

처음 시작은 next.js 학습을 하려고 vercel 페이지에 공식문서와 예제를 보면서 구현을 했고, 이왕 만든거 나의 블로그로 사용하고자 최소한의 모습으로 구현하였습니다.

블로그를 시작한 이유

단순 next.js에 시작했지만, 개발을 학습하는 방식의 변화를 주기 위해 블로그를 활용하기로 했고, 여러 페이지를 만들어 그 페이지 별로 어떻게 활용할 건지 정하게 되었습니다.

지금 까지 개발 관련 책을 읽고, 프로젝트도 하고, 강의도 듣고 했지만, 정리를 따로 안하다 보니, 배웠던 것을 복습하는 것도 다시 구글링하고 GitHub 뒤지고, 조금 번거롭기도 했습니다.

그래서 개발을 공부하고 정리하는 공간과 책이나 강의를 듣고 필기 할곳, 내가 만든 프로젝트를 소개할 곳, 나라는 개발자를 소개할 곳 등 이러한 것들의 필요성을 느끼고 조금씩 블로그를 구현하였습니다.

Home Page

https://waterhumanb-blog.vercel.app

첫 번째로 홈페이지 현재는 간단하게 나의 사진과 간단한 소개글을 적어 두었습니다.

목표는 애플의 아이폰 소개 페이지 처럼 인터렉션한 디자인을 생각하고 있습니다.

디자인 적인 것은 나의 욕심 같은 거라 급하게 생각하지 않고, 천천히 진행중입니다.

Blog Page

https://waterhumanb-blog.vercel.app/blog

블로그 페이지, 개발 관련된 것들의 대한 생각이나 배운 것들을 정리하려고 만든 공간입니다.

확실히 블로그로 정리하고 다시 찾아보고 하면서, 복습도 되고, 새로운 것도 알게되면서 학습과 복습이 같이 할 수 있어 좋은것 같습니다.

정리하는데 시간이 생각보다 많이 걸리지만 그만큼 공부를 한다는 생각이 들어 시간낭비라고 생각하지 않고 오히려 주위 개발자 분들에게 추천을 합니다.

간단하게 기능을 설명하면, Next.js 파일 기반으로 SSG을 구현할 수 있어, 프로젝트 안에 mark-up 문서들을 html로 페이지를 만들어 웹에서 볼 수 있습니다.

Note Page

https://waterhumanb-blog.vercel.app/note

블로그 페이지는 배운 것들을 종합적으로 나의 생각과 느낀 것들을 정리하는 공간이라면, 노트 페이지는 공부한 것을 필기하듯 정리하는 곳입니다.

사이드바에 보면 책으로 배운 것과 강의로 배운 것 두개로 분리를 했습니다.

현재는 바로 바로 정리하기 보단, 일단 책을 한번 편안하게 읽고 시작하는게 좋을 것 같아, 기능만 구현했고, 계속 차근 차근 쌓아갈 예정입니다.

블로그 페이지와 같은 기술로 구현을 했습니다.

Project Page

https://waterhumanb-blog.vercel.app/project

프로젝트 페이지는 앞으로 이력서나 내가 구현한 프로젝트들을 정리한 곳 입니다. 보이는 사진은 GIF로 만들었고, 데이터는 단순 TS파일로 만들어서 데이터를 보여주고 있습니다.

블로그 처럼 글을 보여줄게 아니고 단순하게 다른 링크들을 연결시켜 놓을거라 굳이 SSG나 SSR로 정보를 받을 필요가 없다고 판단해 이렇게 구현했습니다.

next.js 구현 기능

기술 스택

기술 스택 : Next.js TypeScript SASS SWR

기본적으로 위와 같은 기술을 사용했고 그 이외 mark-up관련 라이브러리 등 사용했고,

스타일은 주로 styled-component와 sass를 사용하는데 이것도 한번 블로그에 정리를 하려고 합니다.

SWR은 빠르고, 가볍게, 재사용 가능한 데이터를 가져오기 위해 사용했다. React-query도 있지만 Vercel에서 만든 SWR이 좀더 잘 맞을거라 생각을 했기 때문에 사용했습니다.

추가로 다른 css in js도 공부할 계획입니다.

폴더 구조

이번 프로젝트의 폴더 구조와 간단한 설명입니다.

• posts : 마크업 파일
• public : 이미지
• src
  • components : UI 컴포넌트
    • domain : blog, note 같은 특정한 곳에 사용할 UI 컴포넌트
    • Layout : 전체 UI 컴포넌트
  • constants : 상수 값들을 정리
  • contexts : context api 모음
  • data : project 데이터 등 다른 데이터들
  • hooks : 커스텀 hook 모음
  • lib : blog, note 파일 읽는 등의 로직
  • pages : 사용자가 보는 페이지
  • styles : 글로벌 스타일과 재사용 할 스타일
  • utils : 재사용할 로직

CSR vs SSR vs SSG

• CSR(Client-Side Rendering)

  • 클라이언트(브라우저)인 웹페이지에서 렌더링을 하는 것을 의미한다. 우리가 사용하는 프론트엔드 라이브러리, 프레임워크 삼대장인 React Vue Angular 등이 이러한 방식으로 화면을 보여줍니다.
  • 동작 방식으로 사용자가 웹 페이지에 들어가면 그 때 HTML CSS JavaScript 파일들을 다운로드 한 뒤에 이용할 수 있는 뷰가 생겨난다. API로 받는 데이터가 있다면 받은 다음 뷰를 구성하기 때문에 처음 로딩 속도가 느리다.
  • 단점으로 JavaScript파일이 커질 수록 어플리케이션 속도가 느려지고, 모든 파일을 다운 받아야 화면을 구성하기 때문에 SEO측면에서도 취약한 문제가 있습니다.
  • 장점으로 처음 페이지가 렌더링 했을 때 모든 파일을 다운로드 했기 떄문에, 페이지이동, 인터렉션 같은 동작이 생겨도 필요한 부분만 추가 다운로드 해서 속도가 굉장히 빠른 것 입니다.
  • 그래서 사용자와 인터렉션이 많은 애플리케이션은 CSR 방식을 사용합니다.

• SSR(Server-Side Rendering)

  • 서버에서 미리 페이지를 구성하고 요청을 받으면 즉시 생성해서 반환해 주는 방식입니다. 이러한 방식은 CSR 과 다르게 사용자가 웹페이지에 들어가면 미리 만들어둔 화면을 보여주기 때문에 초기 로딩 속도가 빠르다는 장점이 있습니다.
  • 단점으로 페이지 전환시 깜빡이는 현상이 발생하는데 이는 페이지를 이동할 때 마다 서버에서 새로운 파일을 렌더링해서 발생하는 현상입니다. 그리고 계속 새로운 파일을 로드하기 때문에 클라이언트에서 데이터를 유지할 수 없습니다. SSG도 똑같습니다.
  • 장점으로 최초 로딩속도가 빠르고, CSR 과 다르게 서버에서 페이지를 생성해 주기 때문에, 검색엔진은 완성된 HTML문서를 수집할 수 있어 SEO에 최적화에 용이합니다.

• SSG(Static Site Generation)

  • SSR과 비슷하지만 조금 다른 점은 프로젝트를 빌드 할 때 페이지를 미리 만들어 렌더링 하는 방식입니다. SSR과 비슷한 것은 페이지를 미리 만들어서 요청이 있을 때 제공하는 방식이 비슷하지만, SSR은 API 요청을 했을 때 페이지를 만들어 보내주지만, SSG는 빌드할 때 만들어 놓는 다는 점입니다.
  • 그리고 빌드 시 페이지가 만들어져 있어, 요청시에 바로바로 클라이언트에게 페이지를 제공하기 때문에 렌더링 속도가 빠르고, 완성된 페이지는 SEO 최적화에 용이합니다.
  • 이러한 특성이 블로그 같은 정보성 페이지 등 정적인 데이터를 보여주는 사이트에 적합한 것이죠.

CSR SSR SSG를 표로 한번 비교해서 보겠습니다.

Next.js

Next.js는 위에 3가지 방법을 모두 사용할 수 있습니다.

일단 Next.js는 React를 기반으로한 프레임워크이기 때문에 CSR 동작을 할 수 있고,

SSG는 기본적으로 빌드할 때 자동으로 생성이 되고 추가로 생성도 할 수 있습니다.

SSR도 마찬가지로 서버에서 데이터를 받고 싶을 때 사용할 수 있습니다.

CSR은 React의 Hook을 활용해서 사용하면 되고, SSG와 SSR은 Next.js의 내장함수를 사용해서 구현해야한다.

export const getStaticPaths: GetStaticPaths = () => {
  // slug에 대한 가능한 값의 목록을 반환합니다.
  const paths = getAllPostSlugs()
  return {
    paths,
    fallback: false,
  }
}

export const getStaticProps: GetStaticProps = async ({ params }: any) => {
  // params.slug를 사용하여 블로그 게시물에 필요한 데이터를 가져옵니다.
  const postData = await getPostData(params.slug)
  return {
    props: {
      slug: postData.slug,
      fallback: {
        [unstableSerialize(["Props", postData.slug])]: postData,
      },
    },
  }
}

• SSG
  • 위에 코드는 현재 블로그 페이지에서 게시글을 SSG로 받아오는 방법입니다.
  • getStaticProps를 통해 정적 페이지를 생성해서 해당 컴포넌트에서 Props로 받아 UI를 만들 수 있습니다.
  • 또한 getStaticPaths를 통해 정적으로 생성할 경로 목록을 지정해서 해당 경로를 정적으로 사전 렌더링을 해서, 보다 빠르게 페이지를 받아서 볼 수 있습니다.

import type { InferGetServerSidePropsType, GetServerSideProps } from "next"

type Repo = {
  name: string
  stargazers_count: number
}

export const getServerSideProps: GetServerSideProps<{
  repo: Repo
}> = async () => {
  const res = await fetch("https://api.github.com/repos/vercel/next.js")
  const repo = await res.json()
  return { props: { repo } }
}

export default function Page({
  repo,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return repo.stargazers_count
}

• SSR
  • getServerSideProps를 사용하여 서버로 부터 데이터를 받아 Props로 컴포넌트에서 사용할 수 있습니다.
  • SSG는 배포시 미리 정적 페이지를 만들지만 SSR은 요청할 때 데이터를 반환하기 때문에 속도 측면에서 차이가 생깁니다.
  • 이번 블로그에서는 모두 SSG로 구현했기 때문에 코드는 공식문서에서 가져왔습니다.

Next.js 에서 데이터를 가져오는 방법

SEO (Search Engine Optimization)

검색엔진 최적화라는 의미로 구글이나 네이버 같은 포털사이트에서 나의 블로그, 사이트 등 내가 만든 웹 페이지가 검색시 최상단에서 노출하는 것을 말합니다.

SEO 최적화 방법은 여러개가 있습니다. 프론트엔드 개발자가 알아야할 최적화 방법만 소개하겠습니다.

• 시멘틱 태그 (Semantic Tag)
  • 무분별한 div의 사용으로 웹문서에서 원하는 정보를 찾기 힘들어져 HTML 구조를 설계하는데 있어 각 위치별로 태그에 의미를 부여해서 사이트의 구조를 파악하기 용이하게 만들어진 태그들 입니다.
  • 사이트를 만들 때 그 목적에 맞게 tag들로 구조를 잡으면 검색 엔진이 사이트를 보다 빨리 파악할 수 있어 검색 결과 노출에 유리합니다.

const META_DATA = {
  title: "Blog",
  description:
    "개발하면서 느낀점, 생각 등을 공유하거나 복습하고 싶은 기술들을정리하는 곳입니다.",
  openGraph: {
    type: "website",
    locale: "ko_KR",
    url: "waterhumanb-blog.vercel.app/blog",
    title:
      "개발하면서 느낀점, 생각 등을 공유하거나 복습하고 싶은 기술들을정리하는 곳입니다.",
    site_name: "waterhumanb.dev",
    images: [
      {
        url: "../../public/thumbnail.png",
        width: 285,
        height: 167,
        alt: "이미지",
      },
    ],
  },
}

• Meta Tag 활용
  • 시멘틱 태그로 웹문서의 구조를 파악할 수 있게 했다면, 이제 웹문서의 정보를 제공해야 한다. 우리는 meta tag를 활용해서 사이트의 다양한 정보들을 제공할 수 있습니다.
  • 위 코드는 블로그의 메인 페이지에서 사용하고 있는 meta tag에 활용할 데이터 입니다.
  • next.js에서 제공하는 next-seo를 활용하면 이 웹사이트 전체 기본으로 meta tag를 설정하고 페이지 별로 다른 meta tag를 설정해서, 페이지 마다 다른 정보를 제공해주고 있습니다.
• 빠른 렌더링
  • 렌더링 되는 속도가 빨라야합니다. 한군인은 빨리빨리라는 말처럼, 웹페이지가 로딩되는 속도에 따라 방문자들이 조금만 느려도 바로 나가버리기 때문에, SEO측면에서 페이지 로딩 속도가 느리면 좋은 사이트로 판단하지 않습니다.
  • 렌더링 속도를 빠르게 하려면 CSR같은 방식보다는 SSG방식이 속도가 더 빠르기에 유리하고, CSR은 앞에 말했던, 빈 HTML문서만 있기 때문에 검색봇이 사이트를 판단하지 못하기 때문에 SEO측면에서 어떻게 보면 최악이죠. 그렇기 때문에, 미리 웹문서를 만들어 화면에 보여주는 방식이 속도 측면과 SEO 측면에서 효과적입니다.
  • 그리고 사이트의 크기를 줄여야 합니다. 아무래도 메모리를 많이 잡아 먹으면 그만큼 속도가 느려지고, 그만큼 페이지를 늦게 로딩하겠죠? 큰 영상과 이미지등의 크기를 줄이는 방법이 제일 효과적이고 LightHouse 등 도구를 활용하면 페이지의 로딩 속도가 느린 이유들을 알 수 있어 활용하면 좋습니다.
• 그 밖의 참고할 것
  • 페이지가 선정적이거나 불법적인 내용이면 당연히 안좋겠죠.
  • 사이트 목적에 따른 도메인주소도 도움이 된다고 합니다.
  • sitemap 같은 파일도 미리 만들어 내 사이트를 검색 봇이 빨리 파악 할 수 있게 도와줍니다.
  • next.js에서는 next/img 같은 내장함수로 이미지를 최적화 하는 방법도 있습니다.

앞으로 구현 할 기능

TOC라는 기능도 만들고 README에 있는 기능들도 구현할 예정들이다.

사이트가 단순하게 구현했는데, 좀더 인터렉티브한 웹으로 구성하고 싶고,

다른 블로그들을 봤을 떄 이러한 기능들이 재미있는 것들을 구현하고 계획입니다.

추가 페이지는 저를 소개하는 페이지와 저의 이력서 관련 페이지도 만들어

블로그 겸 저의 포토폴리오, 이력서를 구현하는게 제 최종 목표입니다.

회고

아직 next.js의 다양한 기능들도 많이 사용하지 않았다. next.js를 활용한 다른 프로젝트도 하지 않았고,

시도해 볼만한게 많을 것 같다. 몇몇 강의를 보면 next.js를 활용한 풀스텍 개발이라는 강의들도 보이고

다양한 프로젝트에 시도할 수 있을 것 같다.

SEO는 내가 디지털 마케팅을 독학 했을 때 공부했던 것들이 이렇게 도움될줄 몰랐다.

SSR, CSR, SSG는 완전히 이해를 했다고 못하지만, 어느정도 이해가 되었고, 조금 자리를 잡은 것 같다.

블로그에 기록하는 이유는 언제든지 내가 정리한 것들을 보기 위해서 정리를 하고 있으니 기억이 안나고 헷갈리면

다시 보면 된다.

앞으로 계획 한것들 열심히 하자 블로그도 열심히 해보자!

참고 자료

• https://swr.vercel.app/ko
• https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props