Debook 서비스 만들기 #1

ddalkigum·2022년 7월 6일
1

Debook

목록 보기
1/3
post-thumbnail

총 걸린 시간 1달 하고 조금...

5월 말에 시작했지만 일주일 개발하다가.. 잠시 쉬었다
그래서 6월 중순부터 제대로 시작하게 된 프로젝트

첫 시작은 사람과 사람을 이어주는 사이트를 만들고 싶다는 이유였다

그 이후엔 어떤걸 할까 생각하던 중

이전 회사에서 책을 보면서 스터디 그룹을 찾고 싶은데 어디서 해야하지?
하는 생각에서 시작했다

결과적으로 https://debook.me 라는 사이트를 만들어봤고,

이제 막 기초공사가 끝난 느낌이다

사용한 것들

Front

  • React v.18

Back

  • Express
  • MariaDB

AWS

  • EC2, S3, CodeDeploy, SES, CloudFront

고민했던 부분

디자인

이건 정말 말도안되게 어렵다...
디자인툴은 figma를 이용해서 스케치만 진행했다

무엇보다 디자인 자체가 처음이었고, 여러 아티클을 보면서 어떤방식을 사용해야 할지 정해야 했다

디자인 없이 프론트로 만들면서 맞추면 되지 않나??

완전 멍청한 생각이었고

이 생각으로 시작했다가 일주일 코드짜다가 포기했다
이후 프론트랑 디자인도 설계가 중요하구나를 깨닫고

기초부터 제대로 설계해야겠다 싶어서 figma를 선택했다

초기 디자인 - 업데이트 포기함

색상표 - 업데이트 포기함

프론트엔드

첫 도전

이것도 사실상 문제였다, 리액트를 잠깐 본적은 있지만 노마드코더에서 영화 사이트 만들어본게 다였다

이 상태로는 안되겠다 싶어 github/velog-client를 바로 클론해서
무작정 따라 치기 시작했다

도움이 되었던건 이전에 Kotlin으로 게임하나를 출시한 기억덕분에
리액트 생명주기는 이해가 됬고, hook을 공부하기가 그나마 수월했다는 점

디자인의 구도가 어느정도 잡힌 이후에는 프론트 코드를 먼저 짜기 시작했다
이전 커밋내역을 보면 알겠지만, 굉장히 지저분한 구조에서 지금은 그나마 나아진 상태이다

주소, 지도 문제

API자체는 사용하기 쉬우나 내가 생각했던건

  • 시/도

이 3가지를 수집하는 것이었는데, 이유는 나중에 검색에 활용하기 위해서이다

시도 했던 것들

  • openAPI 찾기
  • DB 다운로드

openAPI아무리 찾아도 정보를 제공해주는게 없었고,
DB는 있었으나 아니 무슨 한국이 이렇게 많은 도시가 있고, 동네가 있는지 처음알았다

row 수가 6만이 넘어가더라, 코드를 찾아보면 mock디렉토리 밑에 내가 하려고했던
주소들이 좀 있긴하다
그냥 남겨놨다 얼마나 멍청했는지를 확인하기 위해

아 ... 이걸 어떡하지 생각하던중에, kakao map API를 사용해야겠다 싶었고
잘 이용한 것 같다

그냥 처음부터 사용할 걸 그랬다

* 게시판 기능

와 이게 정말 가장 어려운 부분이 아니었다 싶다

후보군

  1. Draft.js
    URL: https://draftjs.org/
  2. Toast-ui
    URL: https://www.npmjs.com/package/@toast-ui/react-editor
  3. CodeMirror
    URL: https://codemirror.net/
  4. Quill
    URL: https://github.com/zenoamaro/react-quill

이렇게 4개를 설치하고 직접 사용해봤다

결론은 Quill을 사용했다

Quill을 사용한 이유

  • 나머지 에디터들에 비해 사용하기 쉽다
  • 레퍼런스도 적당히 있다
  • Github release를 보니 꾸준히 업데이트를 하고 있다는 것

release 자체는 굉장히 오래됬지만, README.md에 나와있듯이 beta버전이 출시가 되어있다

그래서 선택했다
앞으로는 업데이트가 꾸준히 되겠다 싶었다

승인이 나지 않는 SES Production

샌드박스 환경을 벗어나기 이전까지는 자신이 검증한 이메일만 사용이 가능하다

그래서 배포한 뒤에 Production으로 업그레이드 해야겠다 생각했지만

생각보다 까다로운 절차에 한 2번정도 거절당했다가 승인이 됬다는 메일이 왔다

2000개로 한도를 신청했는데, 50000개 까지 늘려줬다
통이 크네 AWS...

대충 축하한다 50000사용 가능!
초당 14개 메일 발송가능!
API이용해서 진행상황 추적가능!

이런 내용이다

배포

프론트를 배포한다는 것 자체가 감이 잘 안왔다.
일반 서버처럼 EC2에 올려서 배포하고, ALB를 달아주면 되나?
이건 기능좀 만들고 시도해볼 생각이다

Amplify라는 서비스자체는 훌륭하지만, 사용하는데 있어 좀 까다로운 부분이 있어
내가 자유롭게 사용할 수 있는 공간으로 옮기고 싶다

결국 AWS Amplify서비스를 이용했고, 도메인 설정만 잘 해주니 괜찮은 듯 했다

백엔드

아무래도 백엔드 개발자이다 보니 이 부분이 제일 할 말이 많다

AWS 설계

지금

지금 설계는 Github repository에 올려놨지만

이런식으로 구성이 되어있다

VPC생성하고, IGW, Subnet생성하고 EC2에 올라가있다
물론 private subnet에 올라가있다

혹시 몰라서 subnet을 하나 더 만들어져 있는데 비상용으로 사용할 예정이다

어려웠던 부분은 딱히 없엇던 것 같다

추가할 것들

  1. ElasticSearch
    검색기능을 위해서도 그렇고 대시보드를 위해서도 필요하다
    추가한다면 subnet에 EC2 2개 더 띄우고 하나는 ElasticSearch
    다른 하나는 Kibana로 사용할 것 같다
    Logstash는 Spec up을 한 이후에 서버마다 붙일까 생각중이다

추가할 것들이라 했는데 뭘 해야할지 아직 모르겠다

백엔드 설계

DB

우선 DB 설계를 위해서는 DBdiagram이라는 툴을 사용했다

주소: https://dbdiagram.io/

이것도 물론 초기 기획단계의 DB이다 지금은 더 많은 테이블을 사용하고 있다
자세한 테이블이 궁금하다면 깃헙 레포지토리는 보는게 나을 것 같다

가장 중요하게 생각한 부분은 이메일 로그인 방식인데
velog의 이메일 로그인 부분을 참고했는데, 필요하지 않은 부분은 빼고
나에게 필요한 부분은 덧붙여서 만들었다

구조

DDD를 따라해보려했지만, 날 것의 DDD가 되어버렸다

요런식으로 되어있다

inversify를 사용했고, container에서 가져와서 의존성을 주입시킨다

간단하게 설명하자면

  • common
    디렉토리는 일반적으로 사용하는 클래스
    Error, Response가 대표적이다

  • config
    각자 필요한 config를 따로 놓고 보는게 더 눈에 잘보여서 나누었다

  • domain
    크게는 user, auth, party 이 3가지로 나누었고 추가된다면 search, notification정도?
    추가 하고, 나누는 작업을 진행할 예정이다
    router - 일반적으로 알고 있는 controller 역할을 한다
    service - 비지니스 로직을 담당
    repository - DAO라고 생각하면 된다

  • infrastructure
    Transaction이 발생되는 모든 것들이 여기에 있다고 생각하면 될 것같다

MariaDB, AWS Service, Express 등등 이곳에 모여있다

repository는 domain, infrastructure 둘 중 어디에 놓을까 고민했는데
한눈에 보이는 곳에 두고싶어 Domain에 넣기로 결정했다

완성!

은 아니지만, 초기 공사가 이제 막 끝났다
앞으로는 bugfix, feature를 따면서 수정할 부분은 수정하고, 추가할 부분은 할 예정이다

느낀게 있다면...

프로젝트를 시작하기 전에 굉장히 무력감에 빠져있었다
내가 개발자를 한게 잘한 선택일까? 하는 고민이 있었고,

무작정 해보자라는 생각으로 시작했다

처음 시작하기는 쉽다고 생각한다
초기 시작할 때의 파이팅 넘치는 텐션이 아니더라도 꾸준히 하니까 만들어지더라
아무튼 포기하지 말고 꾸준히 해보셨으면 좋겠다

이렇게 무언가를 완성시키고 나니까 너무 뿌듯했고,
이를 발판으로 더욱더 성장할 수 있을 것 같다

현재 레포지토리는 오픈되어있다 질 좋은 코드는 아니더라도
누군가에게는 필요할 수도 있다라는 생각으로 public으로 만들었다

back-end: https://github.com/ddalkigum/debook_back
front-end: https://github.com/ddalkigum/debook_front/tree/release/0.8.1

이 글을 보실지는 모르겠지만
정말 좋은 자료를 올려주신 velopert님에게 너무나도 감사하다
덕분에 무력감에 빠져있던 나에게 큰 힘이 되었다

profile
딸기검 -본캐🐒 , 김준형 - 현실 본캐 🐒

0개의 댓글