들어가며 최근 본인의 일상을 업로드하는 블로그를 취미로 운영하는 사람이 많아진 것 같다. 개발 블로그는 티스토리나 벨로그를 많이 사용하는 반면 일상은 네이버 블로그를 사용하는 사람이 많다. 개인 일상만 네이버 블로그에 업로드 하는 것은 굉장히 귀찮기 때문에 내가 깃허브에서 팔로우하고 있는 사람만 열람이 가능한 게시글을 따로 만들기로 결정하였다. 이를 위해서 로그인 기능이 필요해졌다. 일반 개발 관련 게시글에 접속할 때는 로그인이 필요하지 않지만, 개인 일상과 관련된 게시글은 로그인하지 않으면 열람할 수 없도록 개발할 것이다. 이전에 로그인 기능 개발 시 Spring Security로 JWT 토큰을 발행하고 관리 했었지만 이번에는 Auth.js라는 간단하게 인증 처리를 할 수 있는 라이브러리가 있어서 사용해보기로 하였다. 초기 설정 Auth.js 설치 환경 설정 auth.ts 파일 생성 route.ts 파일 생성 GitHub APP 설정 (OAuth 설정) 새로운 GitHub App 등록 !GitHub App 등록 > 하단 Webhook은 해제하고 등록 하여준다 등록한 GitHub App 설정 !GitHub App 설정 Client ID와 Secret Key를 복사해서 .env.local 파일에 넣어준다. 예시는 다음과 같다 로그인 테스트 로그인 테스트를 위한 간단한 컴포넌트 !정상적으로 기능하는 것을 볼 수 있다. 세션 관리 Auth.js를 사용하면 아주 간단하게 세션을 관리할 수 있다. 세션 설정 로그인 확인도 매우 쉽게 가능하다 로그인 확인 > 이렇게하면 로그인 여부를 확인할 수 있을 것이다.

해결 방법 바로 궁금하신 분들은 여기를 클릭해주세요. 들어가며 운영중인 정적 블로그는 커스터 마이징에 제약이 있어 블로그를 새로 만들기로 하였다. 요즘 공부하고 있는 Next.js 프레임워크를 활용하여 개발을 시작하였는데 빌드 시에 기존 코드의 매개변수 문법에서 오류가 발생하여 해결 방법을 공유하고자 한다. 에러 메시지 > 오류 메시지를 통해 에러가 발생한 부분을 보아도 이상한 점을 찾지 못했다. 해결방법 !PageProps Type Errors in Next.js #142577 공식 래퍼런스가 궁금하신 분들은 여기를 클릭해주세요. > Next.js 15 업데이트에서 Promise 매개변수를 사용하는 방법이 달라진 것이 문제였다. 해결 방법은 총 두 가지이다. Next.js 버전 다운 그레이드 아래와 같은 방법으로 수정하기 > 다음과 같이 수정하면 정상적으로 빌드가 가능하다

들어가며 3학년 2학기가 끝나고 나니, 그동안 진행했던 프로젝트들을 정리하고 싶다는 생각이 들었다. 우연히 다른 사람들의 GitHub Readme를 보게 되었는데, 내 Readme와 비교되어 초라하게 느껴졌다. 특히, Medium, Velog 등 블로그의 최신 글을 표시하는 이미지를 활용한 Readme가 눈에 띄었다. 나도 비슷한 기능을 구현하고 싶어졌다. 나의 미적 감각은 처참하기에 다음의 디자인을 적극 참고하였다. > Velog-포스트로-Github를-꾸며보자 제작 과정 디렉터리 구조 및 역할 각 파일의 역할은 다음과 같다. route.ts : endpoint (컨트롤러의 역할) Badge.tsx : 블로그 최신글의 정보가 담긴 이미지(svg) 파일 반환 코드 구조 route.ts > Content-Type 을 설정하지 않으면 이미지가 출력되지 않으니 주의 Badge.tsx > 디자인은 자세히 다루지 않겠지만 여기에서 전체 코드를 볼 수 있다. 배포 및 확인 \/api/badge?width=360&height=130으로 접속하면 이미지가 잘 반환되는 것을 볼 수 있다. > 이로써 게시글 업로드 시 Github Readme에 최신글이 표시될 것이다. 🤩