서비스 부터 소개하겠습니다.
목표를 공유하고 응원하는 간단한 Todo App입니다~
신년 목표를 작성하고 서로 응원하는 시간을 가져봐요!
To Do List를 갑자기 개발한 이유
완전 J인 사람이라 신년 목표를 계획하고 있었는데 뭘 해야할지 고민이 됐어요.
'다른 사람의 신년 목표는 무엇일까?' 생각이 들어서 목표를 공유하는 서비스를 개발하게 됐습니다.
요즘 MVP 개발을 최대한 빠르게 하는걸 목표로 여러가지 알아보고 있는데,
Next + Prisma + planetScale을 이용하면 풀스택 어플리케이션을 개발할 수 있을 것 같아서 기술 공부 목적으로 개발했습니다.
Next를 애용하는 사람 중 한 명인데, api 기능은 써본적이 없어서 언젠간 써봐야지 생각만 하다가 새해 기념으로 써봤습니다.
새로운 기술을 배울 때는 To Do List를 만드는게 관례죠~
익숙치 않은 기술을 간단한 서비스에 적용해서 쓰는게 좋은 학습 방법이라고 생각해서 만들었습니다.
기술 스택
- TS
- Next.js
- tailwindcss
- @tanstack/react-query
- next-auth
- prisma
- vercel
- planetScale
어떻게 개발했는가?
개발 기간 : 4일 (1월 1일 ~ 4일)
익숙한 기능이라 순수 코드를 짜는데는 1월 1일에 시작해서 7시간 정도 걸린 것 같아요.
Vercel을 이용해 배포했는데 필요한 설정을 하고, 삽질을 하느라 이틀이나 잡아먹었습니다.
아무리 간단한 서비스라도 체계적으로 할려고 노력했어요.
백로그 부터 작성하자
저는 백로그를 먼저 작성하는게 생산성에 도움이 된다고 생각해서 간략하게나마 작성했습니다.
백로그를 작성하면 '이제 뭘하지?'라는 생각을 안하게 되서 좋은 것 같아요.
디자인을 하자
백로그를 작성한 이후에는 Figma를 이용해서 와이어프레임을 간략하게 만들었습니다.
설날 느낌을 내고 싶었는데, 디자인 감각이 없어서 지금보니 조잡하네요,,,
개발하기
백로그 우선순위대로 개발을 했습니다.
저는 폴더 구조에 대한 고민을 많이 했었는데요. Atomic도 써보고 이것 저것 써봤는데 지금 처럼 Component에 로직을 작성하다가 재사용이 필요하면 hook으로 분리해서 다시 작성하는게 제일 좋아 보이더라구요.
도움이 될진 모르겠지만 레포를 공유하겠습니다!
잘한 점
1. 우선 순위 낮은 기능 개발 안한것
항상 개발을 하다가 '이걸 누가 쓰긴 할까?'라는 생각 때문에 마무리를 안하고 중단하는 경우가 많았는데요.
이번 프로젝트는 하루만에 개발하는게 목표라서 우선 순위가 낮은 기능은 그냥 개발을 안하고 바로 마무리 했습니다.
이 결정 덕분에 완주를 한 것 같아요. 만약에 개발이 루즈해진다고 느껴진다면 기능을 처내는 걸 추천드립니다!
2. 디테일에 신경쓰지 않은 것
loading 분기 처리랑 Error 처리를 안했는데 이런 것들을 위해서는 스켈레톤도 만들고 Toast도 작성해야 하는 등 시간이 몇 배나 더 걸렸을 것 같습니다.
일단 만들고 나중에 업데이트 하자는 마인드로 개발했어요.
알게 된점
1. favicon 설정하기
Next를 이용해서 favicon을 설정하는 방법이 공식문서에 안보이더라구요.
이것때문에 삽질을 많이해서 시간을 잡아 먹었습니다.
나중에 따로 포스팅 하겠습니다.
2. 네이버 로그인은 검수가 필요하다. => 카카오 로그인을 쓰자
처음에는 네이버 소셜 로그인을 만들었는데, 네이버 측에 검수가 완료되어야만 사용할 수 있더라구요.
검수를 위해서는 서비스 소개, 로그인 사용 과정 등 여러가지 준비물이 필요한데 제가 삽질을 하느라 준비를 못했습니다.
그래서 그냥 검수가 필요없는 카카오 로그인으로 재개발 했습니다.
3. planetScale은 정말 편하다.
사실 planetScale을 사용이 이번 프로젝트의 주된 목적이였습니다.
prisma랑 같이 쓰면 너무 편하고, 무료로 5GB 사용할 수 있어서 사이드 프로젝트에 정말 좋은 것 같습니다.
4. next-auth는 좀 더 고려해보자.
next-auth를 사용하면 소셜로그인을 쉽게 구현할 수 있어서 사용했습니다.
하지만 클라이언트에서 로그인을 관리한다는 게 불편한 점이 꽤 있더라구요.
프론트 혼자 개발하시는 분에게는 추천합니다.
5. 마무리가 생각보다 오래 걸린다.
코드 작성한 시간보다, 마무리하고 배포하는데 훨씬 많은 시간을 썼습니다.
물론 배포를 몇 번 안해봤기에 그럴 수 있지만, 다음부턴 일정을 산출할 때 코드 작성 시간만 고려하는 것이 아니라 마무리하고 배포하는 시간도 충분히 고려해야할 것 같아요
아쉬운 점
1. 차별화 포인트가 없다.
결국엔 To Do List입니다. 이미 누군가가 만들어 봤을 서비스라 좀 더 아이데이션을 통해 차별화를 했으면 좋았겠네요.
2. 좋아요 기능 처리를 어렵게 했다.
react-query를 쓰고 있는데, 지금은 좋아요를 누르면 모든 todo list를 invalidateQueries를 해서 다시 받아옵니다.
optimistic update를 써보려고 했는데 생각처럼 잘 안되더라구요.
나중에 좀더 찾아보고 리팩토링 해야할 것 같아요.
3. 재사용을 안했다.
좀 더 생각하고 짰다면 재사용을 많이 할 수 있었을텐데 아쉽네요.
리팩토링을 한다면 디자인 수정도 하고, 로직을 분리하는 작업을 하고 싶어요.
추가로 뭘 할 수 있을까?
- 에러 페이지 만들기
- SEO 하기
- 리팩토링하기
- 우선순위 낮은 기능 개발해서 업데이트 하기
다음 프로젝트는 무엇을 할까?
- GraphQL을 써보고 싶다.
- 디자인을 좀 더 신경쓰고 싶다.
- Next13을 더 활용하고 싶다. - Server Component를 어떻게 쓸지 모르겠어, 기존의 방식대로 개발했는데 다음에는 13을 제대로 활용해보고 싶어요.
읽어주셔서 감사합니다.
피드백이나 의견은 댓글 달아주시면 감사하겠습니다.
스타트업과 개발에 관심이 많은 사람입니다.
아래 블로그에서 포스팅을 꾸준히 할 예정이니 많이 놀러와주세요!
읽어주셔서 감사합니다~
