NextAuth로 로그인 구현하기
여러 로그인 방식을 지원해주는 NextAuth를 이용하여 카카오, 페이스북 소셜로그인과 일반 로그인을 구현해보았다.
NextAuth가 지원하는 로그인 방식을 Provider 라고 한다. 카카오 로그인 방식은 KakaoProvider 이런식으로 작명돼 있고 일반 로그인은 Credential Provider라는 이름으로 기능이 제공되고 있다.
CredentialsProvider({
name: "Credentials",
credentials: { // 이 부분이 로그인 폼에 들어갈 내용.
username: {
label: "이메일",
type: "text",
placeholder: "이메일 주소를 입력해주세요",
},
password: { label: "비밀번호", type: "password" },
},
async authorize(credentials, req) { // 이메일 패스워드 유효성 검사 로직
const res = await fetch(`${process.env.NEXTAUTH_URL}/api/login`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
username: credentials?.username,
password: credentials?.password,
}),
});
const user = await res.json();
if (user) {
return user;
} else {
return null;
}
},
}),
원래는 로그인 페이지를 따로 만드려고 했는데 기본으로 NextAuth에서 제공해주는 기본 로그인 페이지를 일단 써보려고 한다. 일단 주는데로 써보고 안정화 되면 그때 내 페이지로 기능을 이식해보거나 아니면 그대로 쓰거나 할 것 같다.
카카오 로그인도 별로 어렵지 않게 구현했다. 헷갈렸던건 카카오 로그인 키인 KAKAO_CLIENT_ID, KAKAO_CLIENT_SECRET 가 정확히 어떤 걸 원하는건지 모르겠어서 헤맸는데 다행히 잘 정리돼있는 글이 있어 참고하여 적용했다. 참고 했던 글
앱 키 라고하면 당연히 시크릿 관련일 줄 알았는데 앱 키가 id 자리였고 secret은 그냥 랜덤한 문자열 아무렇게나 쳐도 된다고 하여서 좀 놀랐다. 보일러 플레이트를 좀 가독성 있게 변경해줘야 하는게 아닌가 싶다.
Prisma
저번 프로젝트에선 Mongo DB 라는 nosql을 사용해서 별도의 SQL 구문 없이 자바스크립트 만으로 db를 핸들링 했어서 이번 프로젝트도 빠른 진행을 하고자 nosql 쪽을 사용할까 고민했는데 Prisma라는 ORM을 알게됐다. 사용법을 살펴보니 Mongo DB 에서 사용했던 MongoClient 와 비슷해서 별도로 큰 학습이 필요 없을 것 같아 활용해보려 한다. 이 Prisma와 함께 이번엔 PostgreSQL을 사용해 볼 것 같다.
Zustand
저번 프로젝트에서 Redux를 쓰면서 느꼈던 점은 관리하는 파일이 너무 많이 분할돼있어 복잡도가 굉장히 높다는 점이었다. 그래서 이번 프로젝트에서는 전역 상태 관리 라이브러리를 좀 다른 것을 써보고 싶어 recoil, zustand를 찾아봤는데 파일도 단일 파일로 관리가 되고 보일러 플레이트가 굉장히 짧더라. 만약 첫 전역 상태 관리 라이브러리를 zustand나 recoil로 경험했었다면 Redux는 쓰지 않았을 것 같다는 생각까지 들 정도였다. 반대로 생각하면 Redux를 경험해봤으니 좋은일 인가 ? 그래서 선택지가 recoil 혹은 zustand가 남았는데 채용 공고를 분석해보니 recoil 보다는 zustand가 더 선호되는 듯 하여 zustand를 사용하기로 결정했다. 현업에서 많이 쓰는 이유가 있겠지.
PUBG API 와의 사투
PUBG API를 이용하려고 공식 홈페이지에 계정과 내 앱을 등록해서 API KEY를 받았다. 근데 2-3시간동안 계속 수정하면서 해봐도 계속 { title: 'Unauthorized' } 이라는 허가가 안됐다는 내용만 왔다. 만든지 얼마 안되서는 아니었던게 이 프로젝트를 기획한 날 미리 api key를 받아놓았던 것이라 받은지 3일 이상 된 key 였다.
삽질 내역:
- 복사 붙여넣기가 잘못된 것 같아 스크린샷을 찍어서 문자 추출해봄.
- 아이디 2번 새로 만들고 API KEY 새로 받아봄
- next는 .env 파일을 .env.local 등 환경에 따라 env 파일을 다르게 할 수 있다길래 .env .env.local등 모든 파일에 다 한 번씩 넣어봄
- 진짜 마지막엔 복사 붙여넣기도 믿을 수가 없어서 api key 하나하나 타이핑 해서 powershell 에서 Invoke-WebRequest 보냄.
고난과 고통의 console.log 흔적들..
해결:
이렇게 앱 이름을 묻는 란이 있는데 여기에 . 넣지 말아라. 내 서비스 이름이 YOUR.PUBG 여서 YOUR.PUBG 라고 입력을 해뒀는데 혹시 얘네 .을 처리를 못하나 ? 라는 생각에 myapp으로 바꿨더니 바로 정상 작동 되더라. 내 4시간의 노력이 이렇게 허무하게 해결됐다. 아무튼 되면 된거다.
Jest
Jest를 말 그대로 찍먹을 했다. 사실 저번 프로젝트에도 적용하고 싶었는데 kakao sdk의 window 전역객체 모킹에서 막혀서 적용에 실패했던 경험이 때문에 벽 처럼 느껴지던 기술이었는데 이번에 기초부터 강의를 좀 보니까 그렇게 어렵지 않다는 생각이 들었다. 이번 프로젝트에도 바로 도입시키고 TDD 개발론을 적용해서 포켓몬 오박사의 오늘의 포켓몬 처럼 오늘의 테스트 코드 항목을 개발 일지에 추가해봐야겠다는 생각을 했다.
오늘 할 일
- 소셜 로그인 구현하기(o)
- Jest 찍먹(o)
- PUBG api 실습(o)
내일 할 일
- api로 받아온 데이터로 전적 검색 페이지 완성해보기
- Jest 프로젝트에 적용해보기
- postgreSQL 환경 설정 + Prisma 테스트까지
일일 회고
- 문득 뭔가 더 꼼꼼해지고 싶다는 생각이 들었다. 무엇보다 글을 쓸 때 특히 더 산만해지는 것 같다. 글로 무언가를 표현하는 것은 좋아하는데 재고하는 것을 좀 꺼려하는 것 같다.
- 날씨가 말이 안되는 것 같다. 2010년에 필리핀을 갔던게 첫 해외여행이자 첫 동남아시아 방문이었는데 그때 비행기에서 내리자마자 느껴졌던 습도와 열기가 떠오를 정도다.
- 위메프 티몬이 터졌다는데 굉장히 큰 악재같다. 이커머스 기반 기업들이라 웹 개발자들이 대부분 이었을텐데 그 사람들이 다 인력 시장에 나왔다는 의미라 나같은 신입의 자리가 더 없을 듯 하다. 공부를 더 깊게 한다는 생각으로 천천히 준비해야겠다.
- 7월 회고를 슬슬 작성 할 때가 된 것 같아 6월 회고글을 쭉 읽어봤는데 기대감에 차 있는 내 자신이 보여서 뭔가 웃펐다. 자세한 이야기는 7월 회고에서.
Ghost