4주차 그룹 리뷰 & 발표 준비

📒 그룹 리뷰

FE 공통

J008_고동우

• 마이페이지
  • 전체 레이아웃 개발. 자산 현황과 투자 현황을 볼 수 있음.
  • 주문 요청 현황을 통해 미채결 주문을 확인할 수 있도록 만듬.
• 쿠키(로그인 관련) 문제 해결.
  • 카카오 oAuth를 활용하는데 쿠키의 도메인과 로컬 테스트 환경에서는 주소가 달라서 쿠키가 담기지 않았다.
  • 따라서 vite proxy server를 중간에 만들어서 로컬-vite proxy server 는 둘 다 로컬이기 때문에 통신 가능 vite proxy server - 백엔드 서버 는 서버간 통신이기 때문에 가능하다. 따라서 문제 해결.
  • 추가로 Dev 환경에서 테스트용 토큰을 위한 로직을 작성하여 개발 환경에서 진행.
• 매수 관련 기능.
  • 상한가 하한가 입력 시 UI 를 만들어서 표시. (blur를 이용)
  • 매도의 경우 다음주에 진행할 예정.
• Error Boundary를 이용해 에러 처리.

J130_서산

• 차트 tradingview 참고해서 다 분리를 해봤음
  • 캔들차트, 라인, 격자, 막대 다 파일을 나눠둠 / 라벨 만드는거까지도!
    • 높이 조절했을 때 라벨 나오는 것도 다 계산해서 하는 중
• 마우스 이동할 때 점선 생기는거
  • useState 써서 상태로 관리 중.
  • 움직일 때 마다 매번 갱신시켜주는 형태 / 마우스 이동함에 따라서 계속 렌더링이 되는거임
  • 마우스 위치에 따라서 x값(날짜), y값 표시해줄 예정.
• 랭킹
  • 로그인한 상태면 내 랭킹 보여주고, 안한 상태면 내 랭킹은 안보여주게 해놨음
    • 로그인 상태를 전역으로 관리

---

BE 공통

J066_김진

• SSE
  • Observable이 RxJS 라이브러리 객체인데, SSE는 이거로 이벤트를 처리함
  • SseEvent 얘가 SSE에서 클라이언트로 전송되는 데이터의 형태.
    • 얘가 근데 이렇게 인터페이스 정의해서 옵셔널로 안하면 에러가 뜨더라구요?? 저기 해당하는 값을 제대로 입력했음에도 뭔가 문제가 생겼어서 저렇게 했습니다.
  • 이제 Sse 연결하려고 하면, 백엔드 서버가 한투에 구독 요청하고, 그거에 해당하는 값을 리턴
    • subscriber 객체를 통해 이제 프론트가 구독
    • 어떤 이유로든 연결이 끊기면 구독 취소되게 했음

J119_박진명

• 랭킹
  • redis로만 사용, 기존 기획인 mysql 사용Xx
  • 원하는 날짜의 랭킹이 없으면 이제 랭킹 계산해서 함
    • 랭킹 계산은 asset 테이블에서 가져와가지고 sort해서 …
• SSL
  • 도커할 때 인증서 넣어서 보내줌
  • 80 으로 들어오는 요청 모두 443(https)로 할 수 있게
  • BE 개발일지에 자세한 내용을 작성해둠!

J188_이시은

• 웹소켓 연결이 중단되는 문제
  • 로그 찍어봄, 프론트-백은 잘 되어있는데 백-한투 사이 소켓이 장 마감되고 몇분 지나면 끊김
  • ping-pong해서 정상적인 상황에서는 계속 연결이 되도록함
  • 금요일날 연결 끊기는 문제 발생해서 보니까 매주 금요일마다 한투에서 프로그램 재기동. 그래서 연결된 모든 세션 끊김
    • 그래서 종료되면 1분 간격 두고 소켓 연결할 수 있도록 계속 요청 보내는 방식으로 변경
• 마이페이지
  • 마이페이지 들어간 시점에서 자산을 봐야하니까 그 타이밍에 db 업데이트 하고 보여주는 방식
  • 마이페이지 안들어가도 10분마다 스케줄러 돌려서 현재가 반영되게 업데이트해줌

👩🏻‍🏫 발표 준비

Track 3 - 2번 발표

목차

• 서비스 소개.
• 이번주 작업 내용.
  • 프론트.
  • 백.
• 데모 시나리오 소개.
• 시연.
• 동료 캠퍼들에게 궁금한 점. (피드백 받고 싶은 내용)
• Q/A.

대본

• 서비스 소개.

  • 안녕하세요 Web 16조, 팀 주리니스에서 4주차 데모 공유 발표를 맡은 서산입니다. 발표 시작하도록 하겠습니다.
  • 우선 저희 서비스의 목적은, 실시간 주식 데이터를 활용해 모의 투자를 경험하고 친구들과 함께 성장할 수 있는 게임 서비스입니다.

• 구현사항 구체화

  • 저희 서비스는 아무래도 주식과 게임을 결합한 서비스이다보니, 주식과 게임 사이에서 어떻게 밸런스를 맞추어야 할지 고민이 있었습니다.
  • 저희는 주식 기능이 메인이라고 생각해 게임을 위한 부가 기능보다는 주식 관련 기능을 더 집중적으로 구현하기로 결정했습니다.

• 주식 차트 구현

  • 기획 단계에서는 chart.js와 같은 API를 사용해 차트 구현을 진행한 후, 시간 여유가 생기면 직접 구현해보기로 결정했었습니다.
  • 그러나 편리한 API를 먼저 사용하게 되면 직접 구현하는 방식으로 넘어가기 쉽지 않다는 멘토님의 피드백을 받고, 처음부터 구현하고 / 시간이 부족하다면 API를 사용하도록 결정했습니다.

• 이번주 작업 내용

  이번 주 작업 내용을 프론트엔드와 백엔드로 나누어 설명 드리겠습니다.

  • 프론트.

    • 매수 관련 기능

      주식 거래창을 개선하고 매수 요청 API를 연동했습니다.

      가격 입력란에 상한가보다 초과되거나 하한가보다 미만인 가격을 입력할 경우 자동으로 상한가, 하한가가 입력되도록 구현했습니다.

      매도 기능은 다음주에 작업할 예정입니다.

    • 마이페이지

      마이페이지에는 보유 자산 현황, 주문 요청 현황, 내 정보를 확인할 수 있습니다.

      보유 자산 현황에서는 총 자산, 가용 자산 정보를 확인할 수 있었고 자신이 매수한 주식을 표 형태로 확인할 수 있습니다.

      주문 요청 현황에는 아직 주문이 완료되지 않은 요청들을 확인할 수 있고 요청 취소도 이 페이지에서 가능합니다.

      내 정보에는 이메일, 닉네임을 확인할 수 있고 닉네임 변경 할 수 있도록 구현 예정입니다.

    • 차트 고도화.

      • 차트 부분은 기존의 경우 하나의 켄버스에서 전체 차트를 그리는 방식에서 현재는 5개의 캔버스로 나눠서 그리도록 수정했습니다. 또한 최대한 주식 차트의 기능들을 구현하기 위해 현재 차트 높이 조절 기능, 마우스 위치에 따라 격자를 보여주는 기능, 차트를 (일,주,월,년)으로 보여주는 기능을 완료했습니다.

  • 백엔드

    다음으로 백엔드 부분입니다.

    • 랭킹

      랭킹 조회를 위한 기능을 구현 중에 현재는 상관 없지만 사용자가 많아 진다면 사용자들이 요청을 보낼 때마다 DB에서 테이블을 조회하고 정렬하는 부하가 발생함을 알게 되었습니다. 이에 따라 Redis의 Sorted Set을 이용해 효율적으로 랭킹을 관리하고 인메모리 데이터 처리로 빠른 응답이 가능한 Redis를 랭킹 조회에 사용해 보았습니다.

    • 마이페이지

      • 다음으로 마이페이지 API에 대해서 말씀드리겠습니다. 사용자의 자산 데이터는 10분마다 업데이트하되, 마이페이지에서는 현재 시점의 정확한 자산을 확인하도록 하기 위해서 마이페이지 조회 시 자산을 업데이트하고, 업데이트된 자산을 반환하도록 구현했습니다.

    • api로 하던거 웹소켓으로…

      • 이번 주차에서는 실시간 시세 탭을 API에서 소켓 방식으로 변경하려고 시도했습니다. 기존에는 socket.io를 사용하고 있었지만, 단방향 통신만으로도 충분히 구현이 가능하다는 판단 아래, SSE(Server-Sent Events)를 적용해 보았습니다.
      • 동작은 잘 되었지만, HTTP/2를 사용하지 않으면 기본적으로 브라우저에서 6개의 탭에 제한이 걸린다는 문제를 발견했습니다. HTTP/2를 사용하더라도 기본적으로 한 서버에서 100개의 연결까지만 지원한다고 하여, 결국 소켓 방식으로도 다시 코드를 추가했고 SSE와 추가적인 비교를 통해 한가지 방식을 선택할 예정입니다. .

• 데모 시나리오 소개.

  • 이번주에 저희가 작성한 시나리오를 우선 소개 드리고 시연 과정을 통해 직접 진행해 보겠습니다.

  • 이번주 데모 시나리오의 경우 크게 차트 조작, 매수 테스트로 이루어졌습니다.

  • 차트 조작의 경우 일/주/월/년 버튼에 따라 해당하는 차트를 보기.

  • 차트 높이를 조절하기.

  • 차트 영역 안에서 마우스를 움직이기가 있습니다.

  • 그리고 매수 테스트는 상한가 하한가를 넘는 가격을 입력하면 자동으로 값이 변경되는 부분 확인.

  • 현재가로 매수하기.

  • 하한가로 매수하기.

  • 마이페이지를 통해 매수 현황과 채결되지 않은 매수 요청 취소하기가 있습니다.

  • 이제 시연을 통해 현재까지 저희가 구현한 기능을 보여드리겠습니다.

  • 먼저 메인 페이지에서 실시간으로 주가지수가 변경이 되는 것을 보실 수 있습니다. 그리고 그 밑에는 Top5 주식을 각각의 항목에 맞게 확인할 수 있습니다.

  • 로그인 버튼을 눌러 로그인 이 가능합니다. 카카오 이메일과 비밀번호를 이용해 로그인이 가능합니다.

  • 그리고 상단의 검색 버튼을 통해 검색을 할 수 있고 사용자가 검색한 기록을 확인할 수 있습니다.

  • 이제 검색을 통해 주식 상세 페이지로 가보겠습니다.

  • 주식 상세 페이지에서 보이는 차트는 일/주/월/년 에 따라 확인할 수 있고 주식 차트 가운데에 있는 사이즈 조절 버튼을 통해 원하는 주식 차트를 더 크게 확인할 수 있습니다.

  • 또한 마우스 위치에 따라 격자를 보여주고 있고 추후에 격자에 맞는 X축 값과 Y축 값을 보여줄 예정입니다.

  • 이제 하단을 보시면 실시간 거래 채결 정보를 확인하실 수 있고 채결 내역의 경우 실시간 내역과 일별 내역을 볼 수 있습니다.

  • 이제 거래 매수 부분을 보겠습니다.

  • 거래 매수 부분에서 사용자가 실수로 최저가보다 낮은 금액을 입력하거나 혹은 최고가보다 높은 금액을 입력하면 경고 문구와 함께 알아서 입력 값을 수정하고 있습니다.

  • 사용자는 최저가와 최고가 사이의 금액이라면 매수 요청을 보낼 수 있고 해당 매수 결과와 자금 현황은 마이페이지를 통해 확인할 수 있습니다.

  • 마이페이지에서는 자산 현황과 투자 현황을 상세히 볼 수 있고 주문 요청 현황에서 채결이 완료되지 않은 주문의 경우 사용자가 취소 요청을 할 수 있습니다.

• 이것으로 저희 서비스 시연은 마치겠습니다.

• 동료 캠퍼들에게 궁금한 점. (피드백 받고 싶은 내용)

  다음으로 저희가 피드백을 받고 싶은 부분을 말씀드리겠습니다.

  • 한국투자 api에서 제공해주는 웹소켓 사용에 있어서 여러분들의 의견이 궁금합니다.
  • 한국투자 api는 한 계좌당 1세션으로 연결이 되고, 총 41건의 이벤트 구독이 가능합니다.
  • 테스트 결과 42건 째 이벤트 구독 부터는**MAX SUBSCRIBE OVER** 로그가 뜨면서 새로운 이벤트 구독이 되지 않습니다.
  • 따라서 가장 실시간이 필요한 매수/매도 부분만 웹소켓을 이용하고, 조금 실시간성이 떨어져도 되는 부분을 api 요청을 통해서 받아오는 방식을 이용해야 할 것 같습니다. 혹시 다른 팀에서도 저희와 비슷한 문제를 겪고 계신분들이 계시면 피드백 노트에 조언 부탁드립니다.

• Q/A.