⌨️ Dechive

데스크 셋업에 관심이 있는 사람들의 정보를 공유하고 다른 인테리어, 몰랐던 장비들을 알게 되는 계기를 만들어 줄 수 있는 커뮤니티를 만드는 프로젝트입니다.
사용자들은 자신의 책상 사진을 소개하고 구성한 장비들을 구입한 곳을 공유하고, 팔로우와 팔로위 기능으로 사용자들을 연결하고 게시물에 좋아요를 남겨 취향에 맞는 셋업에 쉽게 접근할 수 있습니다.


📆 프로젝트 기간

  • 2023.04.10 - 2023.05.04

🧱 아키택처


  • Node.js에서 Express 프레임 워크를 기반으로 만들어진 Nest.js를 통해 IoC와 같은 기능과 기본적으로 제공되는 모듈, 컨트롤러, 서비스 구조를 통해 개발 속도를 향상시키고 typescript를 통해 안정적인 개발이 가능.

  • Graphql 통신을 통해 REST API의 over,under-vetching을 피하고 하나의 엔드 포인트로 다양한 데이터들 중 필요한 정보만 요청 가능.

  • Nest.js와 Graphql과 함꼐 사용할 ORM은 팀원이 모두 사용해보고, 가장 점유율이 높아 다양한 예시코드와 Nest 공식문서에도 자료가 많은 TypeORM으로 선정하여 유지보수와 개발이 용이하게 함.

  • 유저의 회원등록에 편의성을 더하기위해 Google과 kakao 소셜로그인을 추가.

  • 특정 키워드에 대한 YouTube 영상들과 영상들에 대한 정보를 받아오기위해 YouTube Data API v3을 사용.

  • Redis를 통해 로그아웃시 토큰을 저장해 유저의 토큰을 만료시키고, 유튜브 API를 통해 받아온 데스크셋업 정보를 일정 기간에 한번 씩 초기화 할 수 있도록 사용.


🏖 ERD


🛠 기술 스택

Environment

Vscode Git Github
Eslint Prettier Docker

Developement

TypeScript NestJs Graphql
Mysql Redis GoogleCloud



🕹️ 주요 기능

  1. 지금 유튜브에서 유행인 데스크 셋업을 소개
  2. 유저간 팔로워, 팔로위 기능을 통해 본인취향의 셋업에 손쉽게 접근
  3. 유저가 공유한 구입처 링크를 통해 og정보들 받아와 간략한 상품 정보를 제공한다.

📖 라이브러리

이름 설명
typeorm Nest.js와 함께 사용하며 점유율이 가장 높고 데이터 매퍼 패턴을 지원하며 유지보수가 용이한 TypeORM을 사용
axios Fetch API와는 달리 요청및 응답객체를 직접작성하지 않고 매서드와 속성을 제공하여 코드가 간결해지고, Promise 처리과정에서 에러를 catch블록으로 던져주기에 자동으로 에러를 다룰수 있으므로 axios를 사용
redis 클라이언트에서 동일한 요청이 계속 올때 서버에서 직접 데이터를 찾으면 상당히 비효율적이고 데이터의 크기에 따라 응답속도가 느려짐. 이때 요청결과를 미리 저장해 두었다가, 동일한 데이터 요청이 오면 바로 전달할 수 있도록 redis를 사용
bcrypt 해시 함수들은 무결성 검사를 위해 빠른 속도가 필요하지만, 해커가 DB를 탈취 했을때 빠른 속도로 비밀번호를 알아낼 수 있음. 패스워드 저장에서의 해시 함수의 문제점을 보완해서 나온것이 pbkfd2. 8글자 부터는 동일 시스템에서 bcrypt가 pbkfd2보다 4배 이상의 시간을 소모해야 비밀번호를 알아낼 수 있기 때문에 보안성을 위해 사용
passport passport는 express 프레임워크 상에서 사용되는 인증 미들웨어 라이브러리. strategies로 알려져 있는 인증 메커니즘을 각 모듈로 패키지화해서 제공. 즉, 앱은 passport에서 지원하는 전략을 선택해 의존성 없이 독립적으로 이용 가능함
nodemailer 이메일 인증을 위해서 이메일 전송에 필요한 네트워크 프로토콜인 SMTP(우편 전송 프로토콜)을 사용해야 함. Node.js SMTP기반으로 개발된 전용 모듈인 nodemailer는 사용법이 매우 간단하여 사용하게 됨
eslint 코드를 분석해 문법적인 오류를 찾아주거나 프로젝트 내에서 일관된 코드 스타일을 유지하기 위해 사용. 프로젝트에는 Airbnb의 코딩 컨벤션을 적용.

✍ 커밋 메세지 규칙

  • Feat : 새로운 기능 추가
  • Fix : 버그 수정
  • Style : 코드 양식 변경
  • Refactor : 코드 리팩토링
  • Test : 테스트 코드 수정
  • Docs : 문서 수정

🔥 트러블 슈팅


🧑‍💻 팀 구성

Backend
sounwoo KyuwonKwon
Frontend
osdoonhyun applepykim jinShine yrk721