Next.js5 Next.js 13에서 Kakao 로그인 처리하기 with Firebase (2) 들어가며 지난 글에서는 카카오 API를 이용하기 위해 프로젝트에 환경 설정을 하고, 카카오 서버와 통신까지 진행해보았습니다. 이번 포스팅에서는 받아온 데이터를 토대로 Firebase와 연동하여 저장하는 과정을 알아보겠습니다. Firebase 연동 Firebase를 이용하기 위해서는 먼저 프로젝트를 등록하는 절차가 필요합니다. Firebase Console에 접속합니다. 최근 프로젝트의 "프로젝트 추가" 버튼을 눌러 새 프로젝트를 만듭니다. 구글 애널리틱스는 반드시 설정할 필요는 없습니다. 그냥 넘어가셔도 구현에 문제는 없으니 구성하지 않으셔도 좋습니다. 프로젝트가 생성되면 위와 같은 화면으로 들어올 수 있습니다. 바로 우리 서비스에 Firebase를 추가해봅시다. 우리는 웹 서비스이므로, 버튼을 눌러 다.. 2023. 11. 2. Next.js 13에서 Kakao 로그인 처리하기 with Firebase (1) 들어가며 오늘은 Next.js 13에서 Firebase와의 연동을 이용해 Kakao 로그인을 구현하는 방법을 알아보겠습니다. 비교적 공식 문서가 자세히 설명되어있고, 각종 정보가 많은 편이라 어렵지 않게 구현할 수 있습니다. 먼저 로그인을 적용하는 과정을 크게 한 번 살펴보겠습니다. 크게 보면 카카오 로그인, 회원 확인 및 가입, 서비스 로그인의 세 단계로 나뉘어집니다. 이 포스트에서 알아볼 것은 step1의 카카오 로그인 부분입니다. 서비스 등록 카카오 API를 사용하기 위해서는 먼저 사용할 서비스를 등록해야 합니다. Kakao Developers에서 "애플리케이션 추가하기" 를 통해 서비스를 등록해줍니다. 환경 설정 서비스가 등록되었다면, [요약 정보] 메뉴의 [앱 키] 에서 서비스 인증에 사용될 키.. 2023. 10. 16. Next.js Page Router와 App Router Next.js 13 버전에서 새롭게 공개된 App Router 방식은 몇 번의 업데이트를 거쳐 현재(포스팅 작성 시점 기준 13.5) 는 꽤 높은 수준의 안정성을 가지게 되었습니다. 저도 작은 프로젝트들에서 App Router 방식의 Next.js 프로젝트를 새로 시작하거나 마이그레이션 해보며 직접 사용해 보았는데, Emotion 호환 정도를 제외하곤 안정성 면에서 큰 문제를 느끼지 못했습니다. (MSW에 대한 문제도 있다고는 들었지만 직접 확인해보지는 못했습니다.) 위처럼 몇 가지 단점들이 존재하더라도 App Router는 그것을 감수하고 사용할만큼 충분히 매력적인 선택지입니다. 이번 포스팅에서는 App Router가 등장하게 된 배경과 이유, Page Router와는 어떤 부분들이 달라졌는지에 대해 .. 2023. 10. 8. Next.js로 metadata 구성하기 얼마 전 작은 규모의 신규 프로젝트에 프론트엔드로 참여할 기회가 생겼습니다. 프로젝트 특성상 외부에 노출되는 빈도 수가 매출에 큰 영향을 끼치기때문에 SEO(Search Engine Optimization, 검색 엔진 최적화)가 굉장히 중요한 요소가 되었습니다. 그 중에서도 페이지가 갖고 있는 메타데이터(Metadata)는 SEO에 있어 가장 중요한, 빼놓을 수 없는 요소입니다. 그러나 우리가 주로 사용하던 React.js의 일반적인 CSR 방식으로는 이러한 수요를 만족하는데 한계가 있었습니다. 그러한 이유로 SEO에 유리한 Next.js를 선택하게 되었는데, 오늘 포스팅에서는 Metadata에 대해 알아보고 이를 통하여 어떻게 SEO를 향상시킬 수 있는지 알아보겠습니다. SEO SEO 수준을 결정하는 .. 2023. 9. 24. 좌충우돌 블로그 Next.js로 마이그레이션하기 저는 지금 이 글이 올라온 티스토리 블로그 외에도, 바닥부터 만드는 블로그 개발기에서 만들었던 블로그를 함께 사용하고 있습니다. 개인적인 이야기들을 많이 적는 용도로 사용해서 크게 신경쓰고 있지는 않았지만, 블로그에게는 치명적인 문제점이 하나 있었습니다. 바로 SEO가 제대로 적용되지 않는다는 점이었는데요. 실제로 블로그 글을 트위터나 카카오톡과 같은 메신저에 공유하게되면 기본적으로 설정된 메타 데이터만 표시될뿐, 포스트의 정확한 정보나 설명이 전혀 보이지 않았습니다. SSR을 적용하면 쉽게 해결할 수 있는 문제이지만 아직까지 사용해본적이 없어서 미루고만 있었던 문제였습니다. 그러던중 이번에 Next.js의 13 버전이 어느정도 안정화가 되었다는 소식을 듣고, 내친김에 블로그에 SSR 방식을 적용해보기로.. 2023. 7. 28. 이전 1 다음
