jangjiyu/mimic

항해 99 8기 3조 실전 프로젝트 - MIMIC!

🗂️ 목차

1. 프로젝트 소개
2. 프로젝트 기간
3. 시연영상
4. 백엔드 팀원 소개
5. 서비스 아키텍쳐
6. 기술 스택
7. 기술 스택 사용이유
8. 라이브러리
9. 파일 구조
10. DB ERD
11. 트러블 슈팅
12. Git Strategy
13. Commit Rule

📖 프로젝트 소개

미믹(MIMIC)이란, ‘흉내쟁이’ 또는 ‘따라쟁이’라는 의미를 가진 단어입니다.

요즘 뜨는 MBTI에서 영감을 얻어서 나와 다른 성향을 가진 사람들의 일상을 살아보면 어떨까? 또, 나의 일상이 다른 사람들의 일상이 된다면 어떨까? 라는 취지로 제작된, 타인과 나의 일상을 체험해보도록 하는 조금 특이한 SNS입니다.

🗓 프로젝트 기간

• 개발 기간: 2022년 8월 26일 ~ 2022년 10월 7일
• 운영 기간: 2022년 9월 27일 ~ 2022년 10월 7일
• 런칭: 2022년 9월 27일 (Ver.1.0.0)
• 추가 업데이트: 2022년 10월 3일 (Ver.1.1.0)

🔗시연영상

MIMIC 시연영상

👥 백엔드 팀원 소개

👨🏻‍💻 [부리더 - ISTJ] 장지유: https://github.com/jangjiyu

👨🏻‍💻 [테크리더 -ESTJ] 서우혁: https://github.com/WHS95

⛑️ 서비스 아키텍쳐

💿기술 스택

기술스택	설명
	자바스크립트 런타임
	웹 프레임워크
	RDBMS 클라우드 인스턴스
	인메모리 저장소
	ORM
	CI/CD 툴
	Proxy 서버
	통합테스트 - CI 연계
	AWS S3 - 이미지 파일 저장
	AWS Lambda - 이미지 리사이징

❓기술 스택 사용이유

기술 스택 사용이유 - 노션 보러가기

📖라이브러리

라이브러리	설명
	MySQL ORM 콘솔
	MySQL 연동
	리소스 공유 CORS 정책 설정
	환경변수 사용
	http 로그 기록
	로그 파일 생성
	로그 파일 관리
	토큰 암호화
	node.js authentication
	카카오 소셜 로그인
	유저 비밀번호 암호화
	이메일 인증번호 전송
	입력 데이터 유효성검사
	Test Runner + Assertion을 한번에 진행할수 있는 JS 테스트 프레임워크
	에러 관리
	HTTP 헤더 설정을 자동으로 바꾸어주어 잘 알려진 앱의 취약성으로부터 앱 보호
	HTTP 파라미터 오염 공격 방어
	스케쥴 업무 자동화
	multipart/form-data 파일 업로드
	AWS S3 파일 업로드
	방문자IP 카운터

📂파일 구조

📦src
 ┣ 📂__test__
 ┃ ┣ 📂data
 ┃ ┃  ┗ 📜userData.json
 ┃ ┣ 📂unit
 ┃ ┃  ┣ 📜comment.service.test.js
 ┃ ┃  ┣ mytodo.service.test.js
 ┃ ┃  ┣ todolist.service.test.js
 ┃ ┃  ┗ user.service.test.js
 ┣ 📂config
 ┃ ┣ 📜config.js
 ┃ ┗ 📜redisConnect.js
 ┣ 📂controllers
 ┃ ┣ 📜comment.controller.js
 ┃ ┣ 📜follow.controller.js
 ┃ ┣ 📜mytodo.controller.js
 ┃ ┣ 📜socialLogin.controller.js
 ┃ ┣ 📜todolist.controller.js
 ┃ ┗ 📜user.controller.js
 ┣ 📂errors
 ┃ ┣ 📜customError.js
 ┃ ┗ 📜errorCodes.js
 ┣ 📂middlewares
 ┃ ┣ 📜authMiddlewares.js
 ┃ ┣ 📜errorHandler.js
 ┃ ┣ 📜multer.js
 ┃ ┣ 📜nonUserMiddlewares.js
 ┃ ┗ 📜vistorCountMiddleware.js
 ┣ 📂migrations
 ┃ ┗ 📜20220926144114-level.js
 ┣ 📂models
 ┃ ┣ 📜challengedTodo.js
 ┃ ┣ 📜comment.js
 ┃ ┣ 📜count.js
 ┃ ┣ 📜emailAuth.js
 ┃ ┣ 📜follow.js
 ┃ ┣ 📜index.js
 ┃ ┣ 📜mbti.js
 ┃ ┣ 📜mbti.sql
 ┃ ┣ 📜todo.js
 ┃ ┗ 📜user.js
 ┣ 📂passport
 ┃ ┗ 📜index.js
 ┣ 📂routes
 ┃ ┣ 📜comment.js
 ┃ ┣ 📜follow.js
 ┃ ┣ 📜index.js
 ┃ ┣ 📜mytodo.js
 ┃ ┣ 📜social.js
 ┃ ┣ 📜todolist.js
 ┃ ┗ 📜user.js
 ┣ 📂script
 ┃ ┗ 📜deploy
 ┣ 📂services
 ┃ ┣ 📜comment.service.js
 ┃ ┣ 📜follow.service.js
 ┃ ┣ 📜mytodo.service.js
 ┃ ┣ 📜todolist.service.js
 ┃ ┗ 📜user.service.js
 ┣ 📂utils
 ┃ ┣ 📜createToken.js
 ┃ ┣ 📜date.js
 ┃ ┣ 📜joi.js
 ┃ ┣ 📜logger.js
 ┃ ┣ 📜nodeMailer.js
 ┃ ┣ 📜query.js
 ┃ ┣ 📜redisconnect.js
 ┃ ┗ 📜setSchedule.js
 ┣ 📜.env
 ┣ 📜.gitignore
 ┣ 📜README.md
 ┣ 📜api_test.http
 ┣ 📜app.js
 ┣ 📜docker-compose.yml
 ┣ 📜package-lock.json
 ┗ 📜package.json

📂DB ERD

❗트러블 슈팅

1️⃣ 비동기 처리(Promise-All)

도입이유

각종 조회 API 요청 시 처리를 위해 요청되는 비동기 함수들이 많아 비효율적이라 판단

문제

연속적인 비동기 처리 시, async-await 함수의 경우 결과를 하나하나 기다리다보니 소요 시간 길어짐.

해결방안

promise.All을 사용하여 처리 순서의 영향을 받지 않는 비동기 함수를 병렬처리.

결과

• async-await 평균응답속도: 50.6ms

• promise.All 평균응답속도: 23.6ms

  

2️⃣  서버 부하 개선 (Nginx)

문제

하나의 EC2 안에서 로드밸런싱 처리 결과: 서버부하 테스트 에러 발생하였고 확인 결과 서버가 받는 요청의 총량이 줄어드는 것은 아니었다는 것을 알게 됨.

해결

물리적으로 서버를 나눈 후, nginx 서버를 프록시 서버로 활용하여 로드 밸런싱 구현 node.js 서버에 분산 처리하도록 설계

결과

부하 테스트 시 에러 발생 해결

추가 개선사항

실제 DB와 연결된 웹 어플리케이션 서버의 존재를 숨김으로써 보안적 측면 개선

Ngnix Rate Limiting 설정하여 무차별 요청 공격 방지

결과

적용 전 : 서버연결 요청에러 발생

적용 후 : 서버연결 요청에러 발생 없어짐

3️⃣ 이미지 리사이징(AWS S3 + Lambda)

도입과정

사진 용량이 커짐에 따라 네트워크 통신에 부하를 줄 수 있다고 판단

1)해결과정

업로드 할 수있는 사진 용량 제한 (사이즈 1024*1024 & 5MB)

문제

대부분의 핸드폰 사진이 크기 제한을 넘어 버려 업로드❌

용량 제한 완화 시 브라우저 로딩속도 ⬇️

2)해결과정

이미지 용량 제한 완화 + 리사이징 + 리사이징 작업시 CPU 메모리 차지 문제해결

적용사항: AWS S3 + AWS Lambda(서버리스) + sharp 라이브러리

결과

전/후 비교

• 리사이징 전 (총 크기: 15.7MB)

• 리사이징 후 (총 크기: 323.4KB)

4️⃣ 방문자 수 카운팅 (Redis)

배경

메인페이지 접속 시 별도의 API를 만들어 API 요청 수를 방문자 수로 집계하기로 결정

문제

• 방문자 수 정보 정확성: 특정 유저가 지속적으로 요청을 보낼 시 방문자 수의 정확성이 떨어진다고 판단
• 비효율적인 DB 요청: 단순 방문 수 카운팅을 위해 방문 시마다 DB 요청이 생기는 것은 비효율적이라 판단

의사결정 과정

ip를 기준으로 할 경우, 동일한 사용자라도 다른 공간에서 접속할 경우 ip 주소가 변동될 수 있으며,
다른 사용자라도 같은 내부 ip를 사용할 수 있는 등의 예외 사항이 존재해 정확한 방문자 수를 집계할수 없다는 단점이 있음

그러나, api 요청 횟수를 기준으로 집계를 하는 것보단 낫다고 판단하여 집계 기준을 ip로 채택

과정

Redis를 서브 DB로 사용해 방문자 수 저장 후, 하루가 끝나면 스케쥴 함수를 통해 방문자 수를 mysql DB에 백업

메인 페이지에 존재하던 API에 방문자 수 카운트 과정을 미들웨어로 추가하여 불필요한 API 추가 없이 진행

추가해결사항

중복 데이터 카운터 방지

Redis의 PFADD 명령어를 이용하여 중복되지 않는 경우에만 집계

📈Git Strategy

- Main: 최종 배포를 담당하는 브랜치
- Develop: 개발된 내용들을 통합하는, 개발 중심점인 브랜치
- Features_기능: 각자 담당한 기능들을 구현하고 관리하기 위한 브랜치

Commit Rule

• 사용 키워드
  • Initial: 초기 설정 내용
  • Add: 파일 생성 내용 작성
  • Fix: 파일 수정 내용 작성
  • Delete: 파일 삭제 내용 작성
  • Use: 라이브러리 설치 시, 라이브러리 설명과 함께 적용한 파일 하나 기록
  • Refactor: 파일의 코드를 전부 정리
  • Move: 파일 내 코드를 다른 파일에 옮길 시 작성
  • Rename: 파일의 이름을 변경 시 작성
  • Test: 파일의 테스트 코드 작성

💻 프론트엔드 깃헙 레포지토리

MIMIC 프론트엔드 깃헙 바로가기