Next.js 블로그 제작기 (11)

서론

간만에 블로그 업데이트 내역을 적는 것 같습니다. 기능개발은 공부하기 싫을 때마다 하고있는데 막상 포스팅으로 안적었더라구요 ㅎㅎ.. 공부하기 싫을 때마다 블로그 기능개발 하면 재밌습니다 :)

저번 블로그 업데이트 이후 깃허브 로그를 봤는데 생각보다 많이 쌓여있어서 놀랐습니다. 큼직큼직한건 많이 없는 것 같긴 하지만요!

사실 이번에는 기능적인 측면에서보다는 블로그의 시인성과 같은 작업들을 더 많이 손본 것 같습니다. 기능적인 측면에서 아예 없냐고 하면 그건 또 아니지만요 ㅋㅋ..

그럼 업데이트 된 항목들을 적어내려가보도록 하겠습니다.

변경점

패키지 매니저를 pnpm으로 교체

우선 간단하게 pnpm에 대해서 소개를 해보도록 하겠습니다. pnpm은 빠르고 효율적인 JS 패키지 매니저입니다.
왜 빠르고 효율적인가에 대해서 이유를 적어보자면, 우선 기존 yarn classic과 npm에서의 문제점을 알아야 합니다.

패키지들은 각각의 의존성을 가지고 이러한 정보들은 yarn.lock이나 package_lock.json을 보면 확인할 수 있습니다.

npm이나 yarn classic을 사용하면 이러한 패키지들의 의존성을 중복해서 설치하게 됩니다. 이렇게되면 번들 사이즈가 커지고 빌드 타임이 늘어나게됩니다.
pnpm에서는 이러한 의존성들을 중복 사용될 경우 심볼릭 링크를 사용하여 중복 설치를 방지합니다. 이로 인해 위에 적었던 문제점들을 해소할 수 있게 됩니다.`

또한 node_modules를 관리하는 방법이 다른데, npm이나 yarn-classic을 사용할 경우 패키지의 중복을 최대한 막기 위해서 node_modules를 평탄화하게 됩니다.
평탄화라는 말이 이해하기 어려우실 수 있는데, 중복을 줄이기 위해서 node_modules 폴더의 최상단에 패키지를 배치한다는 것입니다. 이렇게 되면 중복은 줄일 수 있겠지만 패키지간의 의존성 관계를 명확하게 파악하기 힘듭니다.
한마디로 패키지의 의존성 관계를 효과적으로 나타내기보단 최상단에 배치하여 중복 설치를 최대한 막은거라고 이해하시면 될 것 같습니다.

하지만 pnpm의 경우 애초에 중복된 패키지들을 심볼릭 링크로 관리하기때문에 node_modules를 평탄하게 관리할 필요가 없습니다. 패키지는 단 한번만 설치하고 중복되는 패키지들은 심볼릭 링크로 관리하기 때문입니다.
그렇기에 pnpm으로 패키지를 관리하게되면 node_modules가 비평탄화된 구조를 갖게 됩니다. 이는 실제로 패키지간의 의존성 관계를 효과적으로 나타냅니다.

그럼 이전에 yarn classic -> yarn berry로 패키지 매니저를 바꾼다고 말했는데 왜 pnpm으로 갔냐? 라고 물어보신다면, next 자체에서도 의존성을 pnpm으로 관리하고 있기도 하고,
자료를 찾아보았을 때 요즘 몇몇 테크기업에서 yarn-berry에서 pnpm으로 마이그레이션하는 사례도 있었기 때문에 겸사겸사 pnpm으로 마이그레이션을 진행하게 되었습니다.
(무엇보다 저번에 yarn-berry로 전환하려다가 프로젝트가 개박살나서 날아갈뻔했기에 pnpm으로 기수를 돌리게 된 것도 있습니다.)

확실히 pnpm으로 관리하니 빽빽하던 node_modules의 내용들이 확연히 줄어들었습니다. 비포 애프터사진은 없는게 아쉽네요.. 사진을 찍어둘 걸 그랬습니다.
속도적인 측면에서는 제 블로그의 규모가 큰것도 아니다 보니 솔직히 아직까지는 잘 모르겠습니다. vercel 배포 시 빌드속도를 비교해봐야 알 것 같기한데 아직까지는 데이터가 별로 없어 비교가 힘들기도 하구요.

저처럼 yarn-classic에서 pnpm으로 마이그레이션을 하려는 분들께 과정을 몇 자 적어드리자면

pnpm 설치

bash

npm install -g pnpm

// 권한이 필요한 경우
sudo npm install -g pnpm

기존 node_modules 삭제하기

bash

// Mac의 경우
rm -rf node_modules

// Windows의 경우
rm node_modules

package.json 설정하기

json

"scripts": {
  "preinstall": "npx only-allow pnpm",
  ...
}

pnpm import

명령어를 통해 yarn-lock.json이나 package-lock.json 등을 통해 pnpm-lock.yaml을 생성해줍니다.

bash

pnpm import

불필요한 파일 제거

yarn-lock.json이나 package-lock.json처럼 불필요한 파일들을 지워줍니다.

pnpm install

의존성을 설치해줍니다.

bash

pnpm install

이렇게하면 yarn classic / npm에서 pnpm으로 쉽게 마이그레이션 할 수 있습니다 :)

모바일 뷰 시인성 수정

원래는 모바일 뷰로 보면 이런식으로 제목이 truncate되었습니다. 물론 사이즈 줄어들면 보여줄 수 있는 제목이 줄어드는 건 어쩔 수 없긴한데, 그렇게 해서 보여줘야 하는 항목이 업로드 일자라면 그냥 제목을 다 보여줘야 하는게 아닌가 싶었습니다.

또, 시리즈의 경우 제가 사용하는 폰인 아이폰 15에서는 저런식으로 한줄 배치가 되었는데, 이런식으로 한줄 배치를 하니 사이즈도 어정쩡한 부분도 별로 맘에 안들었고, 무엇보다도 글 목록 페이지에 왔는데 포스팅 목록이 보이기보단 시리즈가 페이지를 가득 채워 시인성이 떨어졌습니다.

그렇기에 디자인을 변경하여 사이즈를 줄였을 때도 최대한 포스팅의 제목이 보이도록 수정했습니다. 또 시리즈의 경우에는 모바일에서 기본적으로 접기 처리를 해놓아서 포스팅 목록 페이지 최초 접근 시 포스팅 목록을 바로 볼 수 있도록 했습니다.
겸사겸사 아이콘도 바꿨는데 괜찮지 않나요? 원래는 heroicon을 사용했었는데, 이번 팀 프젝중에 lucide 라는 아이콘 라이브러리들이 상당히 괜찮아서 사용해봤습니다.

생각보다 괜찮으니 아이콘 한번 둘러보세요!

lucide icons

계획중인 사안들

사이트맵 자동 업데이트하기

아직까지 손을 못대고 있긴 한데, 매번 사이트맵 제네레이터 돌리는 것도 너무 귀찮아서, 최우선적으로 자료를 찾아 구현해 볼 생각입니다. 시간이 난다면요 ㅠㅠ

테마 색상 변경시켜보기

이건 지금 계획중인데, 지금은 메인 테마 색을 황토색(ochre) 계열로 해 놓았는데, 너무 한 테마만 보면 질리지 않을까 싶어서 테마 선택을 할 수 있도록 할까 생각중입니다.
이렇게 하려면 작업량이 생각보다는 있어서 아마 나중에 천천히 작업을 하지 않을까 싶습니다

기록

공방

배움