[Project] NextJS13으로 만든 다이어리 SNS 서비스 PUDA

https://nextjs-chobkyu.vercel.app/

PUDA

 

이번에 NextJS 13을 이용해서 간단한 서비스를 만들었다. 시작하게 된 계기는 프론트엔드 배포 자동화를 해주는 vercel이라는 것을 알게 되었고 난 돈이 없기 때문에!! aws로 배포하기가 꺼려졌던 나는 그럼 NextJS는 백엔드 부분까지 코딩이 되니까 만들어서 호스팅까지 해보자! 라는 생각으로 진행했다.

 

vercel로 프론트 배포하는 법은 아래 링크로..

 

https://bk0625.tistory.com/89

[NextJS] NextJS 프로젝트 Vercel로 배포하기

 

 

물론 NextJS를 공부하고 싶은 생각도 있었고해서 시작했지만 간단한 서비스를 만들려고 했었고 기간도 2주 정도로 생각할 정도로 가볍게 생각했다.

 

그리고 2달 걸렸다. 커밋도 200개 넘게 함... 만들다보니 기능도 추가되고 생각치도 못한 에러도 많이 났다.

 

내가 구상한 서비스는 개인 다이어리 앱이다. 그래서 이름이 PUDA다 Private yoUr Diary App. 따라서 접근성이 좋게 모바일 웹으로 개발했고 안드로이드는 리액트 네이티브 웹 뷰로도 빌드해 서비스할 예정이다.

 

제일 기본이 되는 서비스는 당연히 다이어리. 그냥 일기장처럼 글을 작성할 수도 있고, 사진을 첨부해서 내 삶의 기록을 남길 수 있다. 순간순간 드는 감정이나 기분 좋은 순간 등 자유롭게 나의 모든 것을 작성할 수 있는 공간. 따라서 다른 사람은 포스팅을 볼 수가 없다.

마이페이지 사진

글 작성 페이지

이미지도 4장까지 첨부가 가능하다.

 

 

만약 정말 친한 친구나 가족과는 포스팅을 공유를 하고 싶다고 한다면 친구를 만들면 된다. 친구는 Friends 탭으로 이동하면 친구목록을 확인할 수 있다. 친구신청은 + 버튼을 누르면 페이지로 이동하는데 아무나 친구를 신청하면 안되기 때문에 꼭 아이디로만 친구를 검색해 찾을 수 있게 했다.

 

친구 페이지

 

 

저기 + 버튼을 누르면 친구를 찾는 페이지로 이동하게 된다. 만약 내게 온 친구요청이 없으면 요청이 없다고 알람이 뜨지만 만약 요청이 뜨지 않는다면 누군가 내게 친구 요청을 한 것이다. 

만약 친구요청이 없다는 알람이 뜨지 않는다면 누군가 친구 요청을 한 것이다.

 

그러면 FRIENED SOMEONE 버튼을 누르면 팝업창이 뜨게 되는데

 

 

 

이런 식으로 내게 요청을 보낸 사람을 알 수 있다. 여기서 ADD 버튼을 누르면 요청을 수락하고 친구관계가 되서 서로의 포스팅을 공유할 수 있다.

 

그리고 아이디를 검색해서 내가 친구 요청을 보낼 수도 있다.

 

이 친구 추가 부분 여기서 참 골머리를 썩였는데 일단 당연히 트랜잭션 적용을 해야했고 검색할 때 이미 친구가 된 아이디는 뜨지 않아야 되며 친구 요청을 보낸 사람도 뜨지 않아야 했다. 이 부분 설계하고 트랜젝션 적용하고 쿼리 짜는게 생각보다는 오래 걸렸다. (invite 테이블을 따로 만들어 관리하는 것으로 해결)

 

 

마지막으로는 그룹인데 만약 내가 친하게 지내는 친구들이나 가족 전체끼리 포스팅을 공유하고 싶다면 그룹을 만들면 된다. 당연히 Group 탭으로 이동하면 내 Group 목록을 볼 수 있다.

 

그룹 페이지로 이동!

 

여기서도 펜슬 버튼으로 글을 작성할 수 있고 ADD MEMBER 버튼으로 멤버를 추가할 수 있다. 

 

 

아이디로 검색해서 ADD 버튼으로 초대를 할 수 있다. 초대를 받은 유저는 그룹탭에서 + 버튼을 누르면 초대내역을 확인할 수 있다.

 

 

ADD 버튼을 누르면 그룹의 일원이 되서 해당 그룹의 포스팅을 할 수가 있게 된다.

 

그리고 마이페이지에서 프로필 사진과 소개를 클릭하면 사진과 소개를 수정할 수 있다.

 

쭉 보시면 알다시피 개인 다이어리이지만 SNS의 성향도 살짝 공유하고 있는 서비스라고 볼 수 있겠다. 즉 폐쇄적인 SNS? 기존 SNS에 지친 사람 중 개인 다이어리 공간이나 애인이나 친한 친구, 가족들 같이 소중한 사람들하고만 포스팅을 공유하고 싶은 사람들을 위해 만들었다.(그게 사실 나다. 내가 쓰려고 만들었다.)

 

만들면서 헤멨던 부분은 상술했던 친구 초대 부분도 있고 제일 시간을 많이 쏟았던게 쿼리 공부를 하겠다고 mysql2 라이브러리를 사용해서 connection을 직접 연결했었다. 그랬더니 어느 순간부터 Too many Connection 에러가 떴다. 작업이 끝났으면 release가 되어야 되는데 계속 연결이 되어 있었던 것이다. 구글링하고 별 난리를 쳐도 안되서 결국 prisma로 싹 갈아 엎었다. 여기서 시간이 많이 소요가 되었다. 그냥 처음부터 prisma 쓸 걸...그리고 Next13에 대한 자료도 생각보다는 부족해서 어려움을 겪은 부분도 있었다.(정확히 말하면 부족하다기 보다는 이전 버전의 자료가 더 많았다.)

 

기존에 진행하던 팀 프로젝트도 있었고 회사랑 부업도 병행하다보니 생각보다는 오래 걸렸다. 이제 지인들한테 뿌리고 버그를 잡아달라해야지..ㅋㅋㅋ

 

PUDA 서비스는 아래 링크를 통해서 이용할 수 있다. 모바일로 접속해야 제대로 볼 수 있다.

 

https://nextjs-chobkyu.vercel.app/

PUDA

 

 

나중엔 도메인도 연결해야지...근데 곧 있으면 next14 나온다더라....

 

정말 만에 하나 저 서비스를 이용하신다면 정말 감사하고...혹여 버그가 나신다면 댓글 달아주시면 감사하겠습니다:)