🍱 기술 스택 선정 아티클 작성
✨ 취소선 컴포넌트 구현
🚨 unchecked index reference가 undefined가 되는 케이스 대응
🎨 prettier
⬆️ `@types/react`, `@types/react-dom` patch 업그레이드
⬆️ `@types/node` patch 업그레이드
⬆️ `@types/mdx` patch 업그레이드
⬆️ Minor upgrade ESLint related packages
⬆️ Patch upgrade tailwindcss
⬆️ Major upgrade of mdx-js packages
⬆️ `@vercel/analytics` minor 업그레이드
⬆️ Major upgrage next.js monorepo packages
⬆️ next-auth minor upgrade
🔧 Typescript "noUncheckedIndexedAcess" 옵션 활성화
어레이, 객체에 접근할 때 더 안전하게 타입을 활용할 수 있게 설정합니다.
💄 커밋 메시지 내용 좌측 여백 제거
🍱 Next.js의 캐시 정책 관련한 문제 트러블슈팅 기록 포스트 추가
🐛 블로그 포스트 mdx 파일을 수정했을 때 HMR 되도록 수정
`<root_dir>/posts`는 HMR 관측 대상이 아닌 걸로 추측됩니다.
아마 HMR 관측 대상으로 추가하는 방법이 있을 것 같지만, app 디렉토리 하위로 옮기는 방법으로 수정합니다.
이 방법을 통해 블로그 포스트 관련 코드를 좀 더 한 곳으로 모을 수 있습니다.
🎨 api/log 모듈의 index에서 인터페이스를 노출하도록 수정
route.ts는 Next.js가 처리하는 파일이라 정해진 인터페이스만 노출해야 합니다.
이를 우회하여 api/log 관련 인터페이스를 캡슐화하도록 index에서 인터페이스를 노출합니다.
🔧 Node.js 제한을 major 버전으로 완화
Vercel에선 major 버전만 설정할 수 있고, minor 버전은 즉시 업데이트가 이뤄지지 않습니다.
그래서 major 버전만 제한하고,
개발 환경과 배포 환경의 버전 불일치를 받아들입니다.
✨ 블로그의 커밋 로그를 확인할 수 있는 페이지 구현
커밋 로그에 많은 내용을 담고 있기 때문에 이를 잘 보여줄 수 있게 커밋 로그를 볼 수 있는 페이지를 만듭니다.
/log로 접근하면 배포 브랜치(`main`)의 커밋 목록을 보여줍니다.
"더 불러오기" 버튼을 눌러서 이전 커밋을 더 불러올 수 있습니다.
가장 첫 30개의 커밋 목록은 페이지 컴포넌트의 본문에서 조회합니다.
그리고 "더 불러오기" 버튼을 누르면 클라이언트에서 직접 다음 페이지의 커밋 로그를 불러옵니다.
클라이언트에서 커밋 로그를 조회할 수 있으면서
GitHub Personal Access Token을 클라이언트에 노출하지 않아야 하기 때문에
`/api/log` 경로에 핸들러를 정의하여 사용합니다.
페이지 컴포넌트와 API 핸들러 양쪽에서 깃헙 API를 사용하기 때문에 똑같은 코드를 두번 작성하고,
API 인스턴스를 두 번 생성하는 구조가 되었습니다.
이는 services/github 모듈을 작성하여 해결했습니다.
🔒️ audit fix
`npm audit fix` 실행 결과물
⬆️ prettier patch version 업그레이드
🔧 npm install이 항상 exact version을 설치하도록 설정
`-E` 옵션을 일일히 추가할 필요 없습니다.
⬆️ `@typescript-eslint/eslint-plugin` minor version 업그레이드
⬆️ eslint minor version 업그레이드
⬆️ Minor upgrade Next.js monorepo packages
⬆️ `next-auth` patch version 업그레이드
⬆️ `autoprefixer`, `postcss` patch version 업그레이드
⬆️ `@types/react`, `@types/react-dom` patch version 업그레이드
⬆️ `@types/mdx` patch version 업그레이드