이번 글은 내가 가진 기술 set과 새로운 기술들을 공부하면서 여러가지 서비스를 개발하고 출시해볼 하찮은코딩(trivialcoding.com)의 첫 서비스인 회원가입/로그인 개발에 관한 회고 글이다.
안녕하세요 하찮은 개발자입니다 ✋
우선 이름에 대해서 간단히 소개하면 한창 박명수님이 찮은이형이라고 불릴 때 마침 내 이름도 초성이 ㅎㅊ 이다보니 친구들이 하찮이형 하찮아 라고 종종 불렀고 별명이 됐다. 😇
따지고 보면 좋은 뜻은 아니지만 싫진 않은 별명이었고 개발자가 되고 나선 나의 브랜드 네임으로 지으면 재밌겠다라는 생각을 했었다. 친근하기도 하면서 늘 겸손한 자세로 배우자라는 의미도 담아..? ㅎㅎ
하찮은 개발자 하찮 = 개발자 나름 언어유희까지..! 하핫 🤣
그래서 늘 맘 속으로만 생각하고 있었는데 퇴사 후 이직 기간이 길어지면서 무엇이라도 결과물을 만들어야겠다고 생각했고 지금까지 공부한 것들 토대로 평소 관심있었던 여러 서비스를 개발해보고 실제 배포까지 해보기로 했다.
그렇게 첫번쨰로 만든 서비스가 회원가입/로그인 서비스이다. 앞으로 admin 페이지, 쇼핑몰 페이지, 생성형 ai 서비스 등등 여러 서비스를 만들어 볼건데 각각 서비스 마다 로그인 페이지를 만드는 거 보다 회원가입/로그인만 담당하는 페이지를 만들어 SSO 을 구축하는 게 좋다고 생각하여 가장 먼저 만들게 되었다.
서비스 소개
회원가입/로그인 페이지는 이메일/카카오/구글 3가지 타입을 지원하는 간단한 페이지이다.
링크
- https://github.com/channy107/account
- https://www.trivialcoding.com/login
기능
이름/이메일/패스워드를 통한 회원가입 구현
- 각 필드에 맞는 유효성 검사 구현
- 폼 작성 완료 후 이메일 확인을 통한 회원가입 기능 구현
- 회원가입한 이메일로 로그인 구현
- 구글, 카카오를 이용한 OAuth 로그인 구현
기술 set
Core/Framework
- typescript
- React
Next JS (App Router)
선정 이유
- typescript 와 React 는 회사를 다녔을 때부터 계속 썼던 기술들이었다. NextJS는 회사에서 사용해보지 않아서 퇴사 후 공부를 했고 react 프레임워크 중 가장 유명하고 많이 쓰이며 SSR 을 지원하고 비교적 최근에 나온 App Router 방식은 최근 정리했던 RSC 도 지원하기 때문에 사용을 했다.
Styling
- Tailwind CSS
- Shadcn-UI
선정 이유
- Server Component 기반인 App Router를 사용하면서 CSS In JS 방식의 styling 도구들이 잘 호환이 안되는 느낌을 받았고, tailwind css도 사용해보지 않았어서 사용을 했다.
- 디자인 없이 혼자 개발하다보니 처음 부터 마크업을 전부하지 않고 Shadcn-ui를 활용해 깔끔하고 일관된 디자인을 가져가면서도 필요한 컴포넌트만 import 해 사용했다.
Form
- react-hook-form
선정 이유
- Shadcn-ui 의 form을 쓰면 react-hook-form 쓰는 것을 추천하기도 했고 회사를 다닐떄도 사용했던 도구라서 그대로 사용했다
Auth
- Auth.js
선정 이유
- NextJS에서 인증을 구현할 때 많이 사용하는 도구로 nextjs 의 app router를 우선적으로 지원하는 아직 베타이긴 하지만 5버전으로 세팅하여 사용했다.
ORM
- drizzle orm
선정 이유
- 원래 orm으로 prisma를 공부하고 있었는데 drizzle 을 우연히 알게 되었고 아래 홈페이지의 performance 차이를 보고 공부해보고 싶어 사용했다.
배포
- AWS Amplify
선정 이유
- 이 전 회사에선 사내 클라우드 환경에 배포해서 다른 클라우드 서비스 환경도 경험해보고 싶었고, AWS 사이트나 AWS 유투브에서 Next JS 배포 예시로 Amplify를 가장 많이 들어서 사용했다.
회고
production 환경은 생각보다 쉽지 않았다
Amplify는 github repository 만 연결해주면 돼서 배포 자체는 어려움 없이 했다. 하지만 production 환경에만 필요한 환경 변수가 있기도 했고 이메일을 보내려면 인증된 도메인이 있어야 해서 도메인을 구매하고 그 도메인을 또 route 53에 설정을 해주고 이런 작업들이 추가로 필요했다. 예시로만 보면 딸깍 한번에 마법처럼 배포가 되어 잘 동작할 거 같았는데 나름 삽질을 했던 거 같다.
새로운만큼 버그도 많지만..!
NextJS 14 버전, auth.js 5 버전, drizzle orm 모두 나온지 오래되지 않은 새로운 기술들이어서 버그들이 많고 아직 지원되지 않는 것도 많아 보였다. 아직 서비스가 복잡하지 않다보니 내가 직접 겪은 것은 많진 않지만 몇개 기억나는 것은 우선 auth에서 session 이나 token의 user 타입이 고정되어 있어 내가 원하는 정보를 넣으려면 타입을 재지정하거나 타입 assertion 을 해줘야 했던 것이 불편하게 느껴졌고, drizzle adapter를 사용할 때 auth 최신버전과 호환이 안돼 버전을 좀 낮춘 경우도 있었다. 새로운 기술인 만큼 검색을 해도 많이 나오지 않아 거의 github issue 부분과 공식문서를 많이 확인했던 거 같다.
그래도 앞으로 하찮은 코딩 서비스를 만들 땐 새로운 거로 많이 해보고 싶다. 우선 복잡한 기능이 아니었기 때문에 다른 서비스를 만들면서 다른 이슈들이나 버그들도 알아가고 싶다. 그래야 나중에 실무를 할 때 도입을 할 수 있을 지 판단이 되는 기준이 생길 거 같고, 그렇게 만난 이슈들을 해결해나가는 과정도 개발자로서 좋은 경험이 될 거 같다.
그래도 재밌고 뿌듯했다. 그리고 다음은..!
NextJS 의 server action 으로 NextJS 프레임 워크 하나로 풀스택 개발을 할 수 있었다. 이렇게 1부터 100까지 한땀한땀 혼자 개발해보니 처음 개발할 때 처럼 계속 배우는 느낌이고 기능 하나하나 완성될 때마다 뿌듯함을 느낀 거 같아서 개발을 시작하면 시간 가는줄 모르고 했던 거 같다.
이제 로그인/회원가입을 만들었으니 앞으로 만들 쇼핑몰 페이지에 대한 관리자 페이지를 먼저 만들어 보자!! 👊