Nextjs (4) 썸네일형 리스트형 고급 프로젝트 회고 3월부터 시작된 마지막 부트캠프 팀 프로젝트를 최근에 마무리했습니다. 이번 프로젝트는 약 6개월간 이어진 부트캠프의 마지막 과제로, 그동안 배운 기술과 경험을 모두 녹여낼 수 있는 기회였습니다. 단순히 결과물을 만드는 것에 그치지 않고, 팀원들과 함께 기획 단계부터 서비스의 구조, 사용성, 확장 가능성까지 깊이 있게 고민하며 프로젝트를 완성해 나갔습니다. 무엇보다 마지막 프로젝트라는 부담감보다는 책임감으로 임하며, 그동안 부족했던 부분을 채우고자 스스로에게 더 높은 기준을 요구했던 시간이었습니다. 기술적으로는 단순한 구현이 아니라 왜 이렇게 구현해야 하는지, 더 나은 방법은 무엇인지 끊임없이 질문하고 고민하는 습관을 기를 수 있었습니다. 또한 다양한 이슈를 직접 해결해 나가며 특정 기술에 대해 더 깊이 .. NextAuth에서 OAuth 로그인 흐름을 직접 제어하기 OAuth 기반 소셜 로그인을 구현할 때, 대부분은 인증 과정을 간편하게 처리해주는 라이브러리나 공식 Provider를 활용합니다. Next.js에서 인증을 처리하기 위해 널리 사용되는 라이브러리인 NextAuth 역시 다양한 소셜 Provider를 지원하고 있어 빠르게 로그인 기능을 도입할 수 있다는 장점이 있습니다. 하지만 실제 프로젝트에서 카카오와 같은 일부 플랫폼의 특성과, 이미 구축된 백엔드 중심의 인증 구조를 함께 고려해야 할 경우, 공식 Provider의 내부 동작이 오히려 발목을 잡는 상황이 발생했습니다. 특히 인가 코드가 일회용이라는 점이 문제였고, 이는 NextAuth가 인가코드를 즉시 사용하는 구조와 충돌했습니다. 이 글에서는 이러한 문제를 어떻게 해결했는지, 그리고 왜 Credent.. Next.js에서 Open Graph 이미지 생성하기 Next.js에서 Open Graph 이미지를 다이나믹하게 생성하는 방법을 공부하면서 겪었던 시행착오와 해결 과정을 정리한 글입니다. 공식 문서를 따라 구현했지만 예상치 못한 문제가 있었고, 이를 디버깅하면서 알게 된 Edge Runtime의 특성과 동작 방식에 대해 정리해 두었습니다. 목표OG 이미지용 opengraph-image.tsx 하나로 동적 이미지 생성API로부터 받아온 데이터를 이미지로 표시커스텀 폰트와 배경 이미지 사용Edge 환경 대응 (환경변수 미사용) 폴더 구조 및 기본 세팅/public └─ open-bg.png └─ IropkeBatang.woff/app/epigrams/[id]/opengraph-image.tsx ImageResponseOpen Graph 이미지를 생성하는 데.. Nextjs Server Component에서 redirect를 try, catch문 안에서 사용하기 nextjs로 과제를 진행 중에 만나게 된 상황입니다. 예전 개인 프로젝트에서도 server action으로 nextauth의 로그인 처리 후 리다이렉션이 원하는 데로 되지 않아서 다른 방법을 선택했었는데, 이번 기회에 제대로 분석 후에 문제를 해결했습니다. [현재 상황]데이터를 받아오는 서비스 함수를 axios를 통해서 작성해 둠.해당 서비스 함수는 사용하는 곳에서 직접 try, catch로 에러를 핸들링app routing 폴더의 server component에서 해당 서비스 함수를 통해서 데이터를 들고 옴 (ssr을 위해)200번을 넘어가는 상태코드가 있을 때 에러가 발생 시 서비스 함수에서 전파된 error를 try, catch로 막지 않으면 가장 가까운 에러 바운더리를 찾아서 에러를 표시하게 됨.. 이전 1 다음
