October 31, 2023

231031(화) 성장

🚤 성장일지 7.0

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

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

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

운영체제

운영체제: 컴퓨터 하드웨어를 다루기 쉽게 해주는 소프트웨어. 단순하게 생각하면 컴퓨터라는 하드웨어를 쉽게 다루기 위한 인터페이스를 제공해준다고 생각해도 된다.(물론 이외에도 정말 많은 것들을 관리하지만!)

운영체제의 목적

주어진 하드웨어를 최대한 효율적으로 사용하기
컴퓨터 시스템을 편리하게 사용할 수 있는 환경 제공

*멀티테스킹: 여러 개의 프로그램을 동시에 실행하는 것 => CPU를 빠르게 전환하면서 동시에 실행하는 것처럼 보이게 하는 것

운영체제의 구성

CPU => CPU 스케쥴링: CPU를 효율적으로 사용하기 위해 CPU가 어떤 프로세스를 먼저 실행할지 결정하는 것
메모리 => 메모리 관리: 메모리를 효율적으로 사용하기 위해 메모리를 어떻게 할당할지 결정하는 것
디스크 => 파일 시스템(관리): 디스크를 효율적으로 사용하기 위해 디스크에 어떻게 파일을 저장할지 결정하는 것
I/O 장치 => 입출력 관리: 입출력 장치를 효율적으로 사용하기 위해 입출력 장치를 어떻게 사용할지 결정하는 것
프로세스 관리: 프로세스를 효율적으로 사용하기 위해 프로세스를 어떻게 관리할지 결정하는 것

Next.js와 contentlayer를 이용한 블로그 만들기

오늘은 작성한 블로그 글들을 보여줄 posts 페이지와 각 글의 상세페이지에 해당하는 posts/xxx/xxx... 페이지를 구현하였다. 기존 블로그에서 작성했던 md 파일들을 어떻게 그대로 가져와서 디렉토리 구조를 domain의 path로 적용해서 정적인 페이지를 보여줄 수 있을까 고민하던 중 여러 구글링 끝에 contentlayer라는 라이브러리를 알게 되어 적용해보았다.

아래의 공식문서뿐 아니라 다른 분들의 블로그에 워낙 잘 정리가 되어있어서 문제없이 posts 페이지와 각 post 페이지를 구현할 수 있었다.(따라서 여기에는 따로 정리하지 않을 예정!)

다만, 아래 레퍼런스와는 조금 다르게 블로그 글들의 디렉토리 path를 그대로 domain path에 적용하기 위해 겪었던 내용만 정리해보고자 한다.

먼저 app/src/posts/[...slug]/page.tsx 파일을 생성하고 아래와 같이 코드를 작성하였다.

import { format, parseISO } from 'date-fns';
import { allPosts } from 'contentlayer/generated';

export const generateStaticParams = async () => {
  // allPosts의 각 post는 'a/b/c/d' 형태로 md 파일의 디렉토리 path를 가지고 있다. 따라서 split('/')을 통해 각 path를 나누어 slug로 사용하였다.
  return allPosts.map(post => ({ slug: post._raw.flattenedPath.split('/') }));
};

export const generateMetadata = ({ params }: { params: { slug: string[] } }) => {
  // 위와 반대로 params.slug를 join('/')을 통해 'a/b/c/d' 형태로 만들어주고 이를 통해 post를 찾아서 title을 반환하였다.
  const post = allPosts.find(post => post._raw.flattenedPath === params.slug.join('/'));
  if (!post) throw new Error(`Post not found for slug: ${params.slug.join('/')}`);
  return { title: post.title };
};

export default function PostPage({ params }: { params: { slug: string[] } }) {
  // 여기도 마찬가지로 params.slug를 join('/')을 통해 'a/b/c/d' 형태로 만들어주고 이를 통해 post를 찾아서 반환하였다.
  const post = allPosts.find(post => post._raw.flattenedPath === params.slug.join('/'));
  if (!post) throw new Error(`Post not found for slug: ${params.slug.join('/')}`);

  return (
    <article className="mx-auto max-w-xl py-8">
      <div className="mb-8 text-center">
        <time dateTime={post.date} className="mb-1 text-xs text-gray-600">
          {format(parseISO(post.date), 'LLLL d, yyyy')}
        </time>
        <h1 className="text-3xl font-bold">{post.title}</h1>
      </div>
      <div
        className="[&>*:last-child]:mb-0 [&>*]:mb-3"
        dangerouslySetInnerHTML={{ __html: post.body.html }}
      />
    </article>
  );
}

아마 아래 참고 글을 따라서 진행하고 위의 코드를 확인하면 어떻게 동작하는지 이해할 수 있을 것이다.

솔직히 예전에 Next.js 공식문서를 읽으면서 Catch-all Segments 파트는 도대체 언제 쓰려나 생각했는데, 얼핏 봤던 내용이 기억난 덕분에 적용할 수 있었다.

📝 회고

확실히 나는 나무 하나하나를 보면서 공부하기보단 먼저 숲을 한 번 보고 나서 나무를 보는 것이 더 효율적인 것 같다. 우선 이런 식으로 CS에 대한 전체적인 시야를 넓히고 좀더 깊게 들어가고 싶은 주제를 선정해서 공부해보는 것도 좋을 것 같다. Next.js로 블로그 만드는 파트의 경우, 사실 posts 부분이 막막했는데... 생각보다 금방 해결이 되었다. 역시 개발은 뭘 만들면서 배우는 게 가장 빠르다는 것을 다시 한 번 느꼈다.

참고

undefined