사이드 프로젝트 - 닷투 (Dotto)

닷투(Dotto) 는 타투이스트와 사용자를 매칭 시켜주는 사이트를 만들어보자 해서 시작된 사이드 프로젝트.

닷투 공간안에서 서로의 타투를 공유할 수도 있고, 원하는 도안, 타투이스트에게 타투를 할 수 있도록 도와주는 웹 사이트 이다.

 

사이트 LINK: https://www.dotto.site/

Github: https://github.com/DaHoon06/Dotto

 

 

 

📜 히스토리

---

초기 기획은 22년도 초에 시작하였는데 벌써 23년이다.

같이 학원을 수료한 분들과 공부도할 겸 뭐 하나 만들어보자 하다가 타투에 관심이 많은 친구가 있어서 프로젝트 주제를 타투로 정하였다.

 

타투이스트와 타투를 하고 싶어 하는 사용자들한테 나름의 설문 조사를 통하여 각자 원하는 바가 무엇이고 기존 서비스에서 불편했던게 무엇인지 확인도 할 수 있었다.

 

타투이스트 대상 설문조사

https://docs.google.com/forms/d/e/1FAIpQLSe4WB_2vsV19eBiVNOKom2XDaTfixc8JQs8ib1lT3j_H9MoMQ/viewform

 

일반 사용자 대상 설문조사

https://forms.gle/qWBwhPD8oh6eBNQ18

 

초기 멤버의 경우는 프론트 1, 백엔드 1, 기획자 1, 디자이너 1 이렇게 시작을 했다.

거기서 나는 프론트를 맡고 있었고 웹 디자이너와의 협업도 처음이고 오로지 프론트에만 집중할 수 있어서 설렜던 마음이 컸다.

 

Vue 2 버전에 TS 로 프론트 개발을 시작하였고, Vue를 선택한 이유는 단순했다.

지금의 회사에서도 Vue를 사용하고 있고 사이드 프로젝트 기획 당시 입사한지 얼마안된 신입이였기 때문에 빨리 적응해보자 하는 마음으로 선택하게 되었다.

 

시간이 지나면서 기획도 점점 커지게 되고 그런만큼 작업양도 많아지고 그러다가 기획자의 이탈...

작업량 만큼 프로젝트 기간도 점점 길어지다보니 이 사이드 프로젝트를 하는데 있어서 뭐랄까.. 질려버렸다고 해야하나.. 하여튼 점점 손이 안가기 시작했다...

그리고 신입이였을 때 회사 프로젝트를 참고하여 구조를 짜다 보니까 왠지 계속 일하고 있는 느낌을 많이 받았다...

 

(한참 이 때 유니서베이 개발을 하면서 하루에 열 몇 시간씩 Vue 만 보고 있으니까 진짜 집에가서까지 Vue를 보고 있기 너무 싫었다...ㅎㅎ)

 

그래서 따로 닷투라는 같은 주제로 Next도 써보고 React도 써보고 하던 와중에 백엔드를 맡고 있는 형한테 연락이 왔다.

이 때가 연말이였나...? 아무튼

 

"React 개발자를 구했는데 너 지금까지 했던거 싹다 React 로 엎을 수 있어??? Vue로 짰던거 아깝지 않아?"

 

그 말을 듣고 나는 바로 좋다고 했다. 지금까지 짰던 코드가 아깝다기 보다는 다른 프론트 개발자는 어떤 식으로 개발을 하는지 궁금했고, 심지어 많이 사용해보지 않은 걸로 개발한다고 하니 설렜던 마음이 컸다.

 

그렇게 해서 Vue를 사용했던 프로젝트는 React로 변경되었고, React 프로젝트를 많이 해보지 않은 나에게 모든게 새롭게 느껴졌다. 

 

현재 프론트 2, 백엔드 2, 디자이너 1 이렇게 5명이 되어 다시 닷투라는 프로젝트를 진행하고 있다. 

 

 

⚙️ 스택

---

프론트엔드

Vue 2 -> React with TypeScript

React-query

CSS Preprocessor : SCSS

Hosting : Netlify

 

백엔드

Java 11

Framework : SpringBoot

DB : MySQL

Infla : AWS, S3, Docker

 

 

 

📝 개발 일지

---

개발일지의 경우는 해결하는데 어렴움을 느낀 위주로 올리려고 한다.

 

 

1️⃣ 프론트 배포 - https://june-17.tistory.com/293

 

* React 프로젝트 AWS EC2에 배포

프론트의 경우 Netlify에 호스팅 중이다. 백엔드와 HTTP 통신을 하기위해 EC2에 잠깐 배포를 했던 적이 있는데 EC2에 배포를 처음해보는 것이어서 정리해봤다.

 

2️⃣ Certbot을 통한 SSL 인증서 발급 - https://june-17.tistory.com/294

 

* Certbot으로 SSL 인증 받기

마찬가지로 백엔드와 HTTP 통신을 하기위해서 Certbot을 사용하여 ssh 키를 발급 받았던 기록이다.

 

3️⃣ 백엔드 연결 -  https://june-17.tistory.com/295

결론적으로 1️⃣, 2️⃣에서 했던 것들은 필요가 없었지만 이번 기회가 아니였으면 언제 해봤을까라는 생각이 들었다.