Build Location-Based NextJs13 App -1
Nov 11, 2023 | Jun 25, 2024
| Ryoon.With.Wisdomtrees
Build Location-Based NextJs13 App : Google Place Api, Google Map, React, Tailwind Css, NextAuth
0.IntroDuction
영상소개글을 인용하여 이앱을 제작하며 배우고 터득하게될 것들에 대하여 서술하자면, 아래와 같다.
이 비디오에서는 Next.js 13, Google Maps, Google Places API, React, Tailwind CSS 및 NextAuth.js를 사용하여 풀 스택 위치 기반 앱을 구축하는 방법을 보여 드리겠습니다.
- 새로운 Next.js 앱을 만들고 필요한 종속성을 설치하는 것부터 시작하겠습니다.
- 그런 다음 NextAuth.js를 사용하여 사용자가 로그인 및 로그아웃할 수 있도록 앱에 인증을 추가하겠습니다.
- 그런 다음 Google Maps API를 사용하여 지도를 만들고 지도에 마커를 추가하겠습니다.
- 또한 Google Places API를 사용하여 사용자의 현재 위치 근처의 장소를 검색합니다.
- 마지막으로 NextAuth.js를 사용하여 사용자가 로그인 및 로그아웃할 수 있도록 앱에 인증을 추가하겠습니다.
이 동영상이 끝나면 Next.js 13, Google Maps, Google Places API, React, Tailwind CSS 및 NextAuth.js를 사용하여 풀 스택 위치 기반 앱을 구축하는 방법을 배우게 됩니다.
음 그러하다. 요즘 웹앱 프로젝트 제작시 로그인/회원가입/인증관련한거는 죄다 Clerk만 사용중이었는데 이전에 가장 많이 쓰이던 라이브러리가 NextAuth.js였기도 하니, 이참에 배울 수 있게 돼서 즐겁당.
1. 초기셋팅
영상에서는 Typesript를 사용하지 않았으나, 직접 작성하며 타입스크립트 문법을 더 깨우칠 겸( 물론 그러면 클론코딩시 영상플레시간*3의 시간을 소요하면서 기술을 배우고 연마하는 나로서는 시간이 조금 더 +@되게 되버리지만… 제대로 기술을 직접 스스로 쳐보며 연습하고 익숙해지는 것이 왕도이자 오히려 지름길이라는 것을 알기에..!) JS말고 TS로 작성하기로 했다.
2. NextAuth.js GetStarted!
2-1. 초기셋팅
next-auth의 GetStarted에 나와있는 그 로직플로우 그대로 적용할거다
NextAuth문서페이지에 들어가서, 이 프로젝트는 App router방식을 사용하니까 이 페이지에 나와있는대로 route.ts를 작성한다.
그리고 저 …으로만 돼 있는 곳에 Provider를 작성해야한다. 이프로젝트에서는 구글로그인&인증 방식을 사용할 것이기 때문에, Doc에 서술된 해당 내용을 위에 작성한 route.ts에 아래와 같이 추가한다.
2-2.구글클라우드 프로젝트 생성
저왼쪽의 Oauth동의화면구성을 설정해야하는데 자세한 사항은 이 링크에도 잘 나와있다.
그런다음 사용자 인증 정보로 넘어가서 OAuth 클라이언트 ID를 발급받아야 하는데, 이 역시 위의 링크에 잘 나와 있고 어떻게 uri를 셋팅해야하는지에 대한 정보는 next-auth의 google provider부분에 잘 나와있음으로 해당 문서를 참조하면 된다. 클론코딩을 하면서 되새기면 좋은 것 들에는 프로젝트의 구조, 접근법, 컴포넌트를 작성하고 사용하는 방식들도 있지만 이렇게 어떤 신기술을 접목할 때 기술문서를 어떻게 읽고 어느부분을 어떻게 적용해야 되는지에 대한 접근법도 있다. 스스로 공부하고 터득해가는 방법을 알려주는 느낌이랄까? 물론 그것조차 그 알려는 시야로 바라보는 이 만이 취득할 수 있는 방법이겠지만 말이다.
아무튼! 발급받은 클라이언트ID와 비밀번호는 아래와 같이 .env파일에 적어두자.
2-4. SessionProvider작성
독문서에 그대로 나온대로 적용하기엔 app routert사용시에 아래와 같은 제약이 있기 때문에, 따로 provider폴더를 만든후 별도의 컴포넌트로 작성& 상단에”use client”를 명시해줬다.
TIP
Check out the client documentation to see how you can improve the user experience and page performance by using the NextAuth.js client. If you are using the Next.js App Router, please note that
<SessionProvider /> requires a client component and therefore cannot be put inside the root layout. For more details, check out the Next.js documentation.3. Integrate GoogleMap
뒤로