1. 와이어프레임 (피그마 링크 참고 부탁드립니다!)

https://www.figma.com/file/uENzY14lgl25nOQzEgijxQ/1조-와이어프레임?node-id=0%3A1

2. 배포 주소 (현재 배포 준비 중입니다)

React App

3. 서비스 아키텍처 (피그마 링크 참고 부탁드립니다!)

https://www.figma.com/file/NvbR4HmvQQiIyl09vCEyGj/Untitled?node-id=0%3A1

• 프론트엔드
  1. AWS: S3 bucket (이미지 저장 및 URL 생성), AWS Amplify (CI/CD)
  2. 상태관리: Redux Toolkit
  3. OAuth: Kakao + Google
  4. JWT: Interceptor 로 무중단 토큰 발행 (AccessToken + RefreshToken)
  5. Socket io (동네 채팅방)
• 백엔드
  1. AWS: EC2 Elastic beanstalk, Codepipeline, MariaDB(외부 인스턴스)
  2. NestJs(Main server), NestJs(Chatting server)
  3. Docker
  4. Nginx ReversProxy
  5. Github CI/CD

4. 트러블 슈팅

• socket: socket id가 접속할 때마다 바뀌게 되는데 이를 같은 사용자라고 인식하여 유지할 수 있는 방법 고민
  • 해결 방법: 접속한 사용자의 userId와 socketId를 비교하여 socketId만 update
• 퀘스트 생성시 외부 API 호출에 따른 시간 지연
  • 외부 API 요청을 최대한 병렬적으로 요청
  • 새벽시간 대에 퀘스트를 미리 생성
• 프론트와 백엔드 연결시 CORS에러 예상
  • https - http시 cors 에러 발생
  • 백엔드도 https로 변경 후 시도 예정
• Nginx reverse proxy 서버 구성시 두개 서버 설정 + https/ssl 설정
• 토큰 재발행시 axios interceptor 안에서 무한 요청이 발생

5. 추후 개발 및 기술적인 도전 계획

• 테스트 진행
  • 테스트 코드(유닛, 통합)
  • 부하 테스트(REST API, Socket 두가지 테스트 진행)