• 프로젝트에 새롭게 도입한 기술 스택이 있다면 정리해 주세요! (도입 이유도 함께 적어주시면 더욱 좋습니다!)

    • 프런트엔드
      • aws-sdk (s3 버킷에 파일 업로드 + url 가져오기)
      • framer-motion (애니메이션 라이브러리)
      • react-query (컴포넌트에 필요한 정보만 api 호출)
      • lazy loading (suspense + spinner)
      • Link (useNavigate 는 props를 넘겨줄 수 없다)
    • 백엔드
      • NestJS 적용중입니다! 야옹!! 어흥
  • 이번 주 한 일

    • 아래의 간트 차트 기준으로 일정 관리중입니다.
      • https://docs.google.com/spreadsheets/d/1GxjxlwKnzAmyj4dYApIDNx3WgwH8vFLDxVXs6nWsPIM/edit#gid=1615596900
    • 팀 전체 (리더님께서 필두로 정리해 주세요.)
      • 회원가입/로그인 테스트
      • 유저 프로필 변경 테스트
      • 깃헙 레포지토리 관리 (PR, 이슈)
        • https://github.com/orgs/ddang-ddang/repositories
    • 팀원 개인별로 작성해 주세요.
      • 재혁
        • 회원가입/ 로그인 테스트
        • S3 bucket에 파일 업로드 / url 가져오기
        • 마이페이지 레이아웃
      • 용태
        • 플레이어(유저) 위치 다루기
        • 메인페이지
      • 재철
        • API 요청시간 개선
        • 퀘스트 DB 생성 (완료 여부, 횟수, 일시 추가)
        • 유닛테스트 작성중
      • 세명
        • Refresh 토큰 구현 효율적인 인증 관리 (카카오, 구글, 로컬 인증 관리방법)
        • JWT 토큰으로만 구현 완료 → 현재 refresh토큰으로 구현중
        • 인프라구성 백엔드 ec2, pm2, 무중단 배포 구성 준비
      • 우석
        • 채팅 서버 구현 및 테스트
        • 예외처리 및 로깅
        • DB(feed, comment, like, quest, region) 관계 매핑
  • 이외에도 기술적인 방향을 잡기 위한 질문을 정리해오시면 가장 좋습니다!

    • 프런트엔드

    • 백엔드

      1. 퀘스트 생성 시간 단축
        1. [문제점] 플레이어 접속시 현재 지역(동)의 퀘스트를 만들어서 보내줍니다. 퀘스트를 만드는데 필요한 좌표와 주소를 외부 API(카카오, 공공)로 받아오기 때문에 시간 단축에 어려움이 있습니다.
        2. [현재상황] 역삼동 같은 경우 4,800여개의 주소 중에 48개(1%)의 좌표와 주소를 가져오는데 1초 내외가 걸립니다만, 카카오API의 경우 한번에 너무 많은 요청을 보내면 429 Too Many Requests 응답을 보내기 때문에 요청을 20회씩 나누어 보내고 결국 4~5초 정도 소요됩니다.
        3. [해결방안#1] 퀘스트가 24시를 기준으로 업데이트 되기 때문에, 24시 전에 다음날 퀘스트를 미리 생성해두어 플레이어는 조회만 할 수 있게 하는 방법을 생각 중입니다.
        4. [해결방안#2] 퀘스트 생성 시간을 단축시키기 어려울 경우 로딩 페이지를 활용하는 것도 고려중입니다.
      2. 인프라
        1. 무중단 배포 PM2 → 오버 스펙인지
        2. 현업에서 보통 무중단 배포를 하면 ec2에서 docker로 nginx로 구현하는지? 아니면 aws elastic을 사용하는지 궁금합니다.
      3. 토큰 보안 관련
        1. Local 로그인, 카카오 로그인, 구글 로그인의 각각 효율적인 토큰 관리 방법에 대해 고민하고 있습니다.
        2. [현재상황] local 이메일 로그인만 구현된 상황이고 Refresh토큰 구현할 예정입니다.
        3. [로직] access 토큰의 유효시간을 2시간으로 설정해 놓고 클라이언트에서 토큰의 기간이 만료가 될때 서버에 새로운 토큰을 요청하고, 백에서는 클라이언트에 Refresh 토큰이 있다면 바로 새로운 토큰을 발급하는 방식을 생각하고 있습니다.
        4. 그 이후 카카오톡 인증, 구글인증을 할때 각각 토큰이 발생하게 되는데, 백에서 인증된 사용자만 서비스를 이용하게 하려면 3개의 인증을 모두 거쳐야 하는가에 대한 고민을 하고 있습니다.
      4. 채팅기능 관련(Socket)
        1. 접속할 때마다 socket id가 바뀌게 되는데, 유저가 나갔다가 들어와도 기존에 썼던 메세지가 자신의 메세지인지 확인하는 방법 질문.
        2. 현재 테이블 Users, ChatRooms, Messages
        3. [현재방법] Users 테이블에 유저id와 소켓id를 저장하고 유저가 입장했을 때 전에 사용한 유저인지 유저 테이블에서 조회 후, 유저id가 존재하면 소켓 id만 update하고 없을 경우 유저 정보(소켓id 포함)를 create합니다. 이 소켓 id는 ChatRooms 테이블의 socketId 칼럼(array) 에 insert합니다.
  • 답변

    • 퀘스트 생성 시간 단축
      • AWS Elasticsearch 활용한 캐싱 ⇒ 검토 후 적용
      • DB화
        • 1안) DB에 다음날 퀘스트 생성해두기 (2~3일)
        • 2안) DB에 우리나라 전체 주소, 좌표 데이터 저장해 두기
    • 카카오/구글 JWT
      • 카카오/구글 토큰은 이사람이 로그인 됐나 안됐나만 확인하는 것
      • 나머지는 백에서 로그인 처리 하는 방식
    • 리프레쉬 토큰
      • 두개다 LocalStorage에 저장을 추천,
      • 그러나 Refresh토큰을 쿠키에 저장하면 이점도 있음, 따로 정답은 없음
      • 프런트/백엔드 협의 후 결정
    • 무중단 배포
      • AWS Elastic Beanstalk 사용 권장 (docker) 를 이용해서 하면 더욱 좋음 ⇒ EB 검토 후 적용 (쿠버네티스 사용하기전에 선행학습에 효과적임)
      • CI/CD는 모든 회사에서 대부분 하고 있음
      • PM2, Nginx 사용 안해도 됨 편한게 짱임 (빠른 개발환경구성으로 실 개발에 더 집중 할 수 있을거라 생각됨)
    • 소켓
      • 센드버드와 같은 서비스 활용 고려해볼 것
        • https://sendbird.com/ko/pricing
      • 파이어베이스 (파이어스토어) 도 활용할 수 있음
      • 리액트/소켓 활용해서 구현
    • S3
      • 람다로 이미지 파일을 리사이징하면 성능에 좋다
      • https://aws.amazon.com/ko/blogs/compute/uploading-to-amazon-s3-directly-from-a-web-or-mobile-application/
      • MVP 이후에 적용 검토
    • 라이브러리 사용
      • framer-motion은 에니메이션 사용하기에 좋은 라이브러리이지만, 협업할때는 협의 꼭 필요.
      • 재혁님 framer 사용
      • 필요하면 라이브러리 활용하고, 라이브러리의 장단점 잘 이해하는 것이 중요