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

📒 그룹 리뷰

• 메인 페이지 소켓 연결!(FE공통)
  • 가장 낮은 부분이 종가선보다 현저히 낮으면 이상하게 그려져서, 로직 추가했음

J008_고동우

• 차트 직접 그려봄
  • 가중치 → 0으로 설정하면 차트가 좀 세로로 긴데, 가중치를 0.1 이렇게 늘리면 차트를 좀 찌부시킨다고 해야 하나.. 그렇게 됨
  • 시가, 종가로는 fillRect, 최저가, 최고가로는 라인 그려서 차트 그리는 중! (멋있어요)
• Todo
  • 값이 들어오는데 값이 오늘값부터 시작해서 이전 날짜 순으로 들어와서 렌더링 과정에서 잘못 보이는 경우가 있음. 백엔드에서 reverse해서 보내주셨으면 함!! (확인)
  • x축 표시하는 것도 생각해봐야 함!
  • 차트 그리는거 위아래 영역 구분지어서 할 수 있게! 하는 것이 좋을 듯해용
  • 지금 데이터가 30개만 가지고와져서 (날짜 계산 로직 구현 필요.. ) 차트가 좀 띄엄띄엄 있긴한데 방법 구상 중
  • 매수하기 버튼 누르면 로그인하세요! 떠서 로그인 페이지로
  • 종가 기준으로 가격 위아래로 30퍼센트까지만 입력가능하게 하기

J130_서산

• 검색
  • Debouncing → http 요청 최적화
    • 엔터를 눌러서 검색하는게 아니라 입력을 하면 바로바로 화면이 보이는 느낌으로 구성되어 있음. 즉 매 타이핑마다 http 요청 보내면 비효율적, 입력하고 시간 텀을 준 후에 api 요청하는 느낌으로 최적화!
  • 검색했을 때 검색결과랑 동일한 부분은 파란색으로 표시!
    • css만으로는 안돼서 약간의 문자열 가공을 해서 해봤다!
  • 검색 결과 없는 것도!
• lottie-react 설치해서 움직이는거!
  • 태그에 넣고, 무료 로티 파일 다운받은거 넣어주면 된다. (LottiFiles 라는 웹사이트가 있네요)
• 일별/실시간 시세
  • 움직이는건 메인페이지에 쓴거 활용해서 해봤다.
  • table 태그 써서 속성 값이랑 편하게 만들었다~
• 지금 로컬 스토리지에 검색어 저장하게 했음
  • 검색하고 데이터 있어야지만 저장하게 했다!
  • 검색어 누르면 앞으로 땡겨지게하고,, 일단 10개까지로 제한!
  • 로그인한 유저는 레디스에 저장!

---

J066_김진

• 나중에 할 일
  • 등락률 순위에 주식 종목코드 보내기!
  • 차트 데이터 reverse해서 보내주기
• 소켓 연결되자마자 소켓 구독 취소 되는 아이들이 존재한다.
• requestApi 어디서 관리해야할지?
  • 주입받아서 쓸거면 koreaInvestmentService 여기에 requestApi를 아예 메서드처럼 써보기?!
• 매수/매도 요청 웹소켓 부분 SSE로 해보면서 비교해보기!

J119_박진명

• python으로 스크립트 작성해서(SSH 터널링 코드 포함) DB에 값 넣는 방식 이용
• 데이터베이스에서 리스트 받아오기
  • 전체 리스트 받아오기
  • 이름, 종목코드 등으로 한 개 검색하기
• Redis
  • (로그인한 유저에 대해서) 검색어 히스토리 저장
  • 랭킹 구현 sorted가 있어서 많이 한다고 함.
• 도메인 서비스라는 하위 계층 하나 분리했음
• filter 만들어서 try-catch문 안쓰고도 로그 쓸 수 있게 했음!

J188_이시은

• 주식 매도/매수 api
• 체결 진행
  • 체결이 진행되면 내가 가지고 있는 돈들(주식, 총 자산, 등등등…)이 다 바뀌어야해서 좀 복잡
  • 트랜잭션 처리해서 하나라도 안되면 롤백되게
• 매도/매수 취소 로직 전역으로 써서 좀 문제가 될 수도..

발표 준비

Track3 - 3번 발표 순서.

대본

• 간단한 서비스 소개
  • 서비스 목적
    • 안녕하세요 Web 16조, 팀 주리니스에서 3주차 데모 공유 발표를 맡은 김진입니다. 발표 시작하도록 하겠습니다.
    • 우선 저희 서비스의 목적을 간단히 말씀드리자면, 실시간 주식 데이터를 활용해 모의 투자를 경험하고 친구들과 함께 성장할 수 있는 게임 서비스입니다.
  • 핵심 기능
    • 실제 주식 투자 요소
      • 저희 JuGa 서비스의 핵심 기능은 기본적으로 실제 주식 정보를 실시간으로 / 받아와서 제공하는 기능에 있습니다. 사용자는 실제 주식을 사는 것과 유사하게 매입/매도를 진행할 수 있고 초기 시드 머니의 경우 최초 로그인시 천만원을 제공할 예정입니다.
    • 게임적 요소
      • 저희 서비스가 단순히 모의 투자 시뮬레이션이 아니라 모의 투자 게임인 이유는 주식에 대해 무섭게 생각할 수 있는 주식 초보들에게 게임이라는 가벼운 요소를 함께 넣어서 비교적 쉽게 다가올 수 있게 하기 위해서입니다. 따라서 저희 서비스에는 손절매를 방어하는 아이템, / 수수료를 없애주는 아이템 등을 추가하고 / 친구와 수익률을 대결하는 기능을 추가했습니다.
  • 구현사항 구체화
    • 저희 서비스는 아무래도 주식과 게임을 결합한 서비스이다보니, 주식과 게임 사이에서 어떻게 밸런스를 맞추어야 할지 고민이 있었습니다.
    • 1주차 멘토링 시간에 멘토님께 주식과 게임 중 어떤 것에 집중해야할지 여쭤보았습니다. 멘토님께서는 주식에 관심을 갖고 / 집중해서공부하고구현하면 / 서비스 자체의 완성도도 상승할 것이라고 이야기 해 주셨습니다.
    • 저희 팀원들 또한 주식 기능이 메인이라고 생각했고, 주식에 대해 공부하고 / 구현하면서 얻을 수 있는 것들이 많을 것이라고 생각해 / 주식 관련 기능을 더 집중적으로 구현하기로 결정했습니다.
  • 주식 차트 구현
    • 주식 차트 화면 구현 관련해서 변경사항 말씀드리겠습니다.
    • 일단 기획 단계에서는 chart.js와 같은 API를 사용해 차트 구현을 진행한 후, 시간 여유가 생기면 직접 구현해보기로 결정했었습니다.
    • 그러나 편리한 API를 먼저 사용하게 되면 직접 구현하는 방식으로 넘어가기 쉽지 않다는 멘토님의 피드백을 받고, 처음부터 구현해보되 / 시간이 부족하다면 API를 사용하도록 결정했습니다.
• 개발 진행 상황

  • 다음으로 각 파트별 개발 진행 상황에 대해 말씀드리겠습니다.

  • 프론트

    • 검색 페이지 구현

      • 프론트 부분 개발 진행 상황입니다.
      • 먼저, 검색 페이지의 경우 / 헤더의 검색창을 누르면 모달 화면이 나오게 구현했습니다. 또한 Debounce를 이용해 사용자가 입력할 때마다 검색 API 요청을 보내는 문제를 해결했으며 / reactQuery의 isLoading, Debounce에 flag를 이용해 로딩중인 화면을 표현하였습니다.

    • 주식 상세정보 페이지 구현 (차트, 거래량 등등)

      주식 상세페이지에는 해당 주식 종목의 차트와 거래현황, 거래창을 확인할 수 있습니다.

      상단에 위치한 차트는 canvas API만을 사용해 직접 구현을 진행했고 거래량을 보여주는 막대차트, 시가, 종가, 최고가, 최저가를 확인할 수 있는 캔들차트를 구현했습니다. 또한 일, 주, 월, 년 단위에 따라 차트를 확인할 수 있습니다. 차트 부분은 스크롤, 마우스 hover 이벤트를 적용시키는 등 지속적으로 고도화할 예정입니다.

      하단은 주식 거래현황을 확인할 수 있고 현재는 리액트 쿼리 refetchInterval 옵션을 활용해 1초마다 데이터를 갱신해주고 있습니다. 추후에는 웹소켓이나 SSE를 활용해 개선해볼 예정입니다.

      우측에 위치한 거래창에서 매수와 매도를 진행할 수 있고 현재 API는 연동되지 않은 상태입니다.

  • 백

    • OAuth 로그인 구현

      • 다음으로 백엔드 진행사항을 말씀드리겠습니다.
      • 백엔드에서는 카카오 OAuth 로그인 기능, 종목 검색 API, 차트 정보 API, 거래 현황 API, 매수매도 등록 및 취소 API, 주문 체결 로직 웹소켓 구현이 완료되었습니다.

      이 API가 어떻게 사용되는지는 뒤에서 설명드릴 데모 시나리오 부분에서 일부 확인이 가능합니다.

    • 저희는 지난 주와 동일하게 월요일에 스프린트 백로그를 작성해 업무 분담을 진행했고, 왼쪽 아래 사진에서 보이는 task를 수행했습니다. 그 결과 이와 같은 번다운 차트가 그려졌습니다.

• 데모 시나리오
  • 다음은, 데모 시나리오를 진행해보도록 하겠습니다.
  • 종목 검색 테스트
    • (ppt 간단히 읽기)
    • 종목 검색 테스트는, 검색창에 키워드를 입력했을 때 / 키워드를 포함한 종목 리스트를 정상적으로 반환하는지 확인하는 테스트입니다. 함께 배포 서버로 확인해보시죠.
    • 먼저, 사용자가 존재하지 않는 주식을 입력했을 때에는, 이렇게 검색 결과가 존재하지 않음을 화면에 표시해줍니다.
    • 존재하는 검색 키워드를 입력하면, 해당 키워드가 포함된 주식명들이 리스트로 나오고, 이렇게 스크롤로 전체 내역에 대해 확인할 수 있습니다.
    • 또한 검색을 했을 경우, 다음과 같이 최근에 검색한 항목을 보여주고 있습니다.
  • 상세 페이지 테스트
    • (ppt 간단히 읽기)
    • 상세 페이지 테스트도 진행해보겠습니다.
    • 검색한 후 종목을 클릭하면 차트, 일별/실시간 시세를 포함한 상세 페이지로 넘어갑니다.
    • 이렇게 삼성전자를 검색했을 때, 일/주/월/년 항목에 따른 주식 차트를 확인할 수 있습니다. 현재 년 항목 화면에서는 간격이 촘촘하게 설정되어 있어 시각적으로 겹쳐보이는 부분이 있습니다. 간격을 조정하며 문제를 해결해 더 깔끔하고 보기 좋은 형태로 개선될 예정입니다.
    • 상세 페이지 하단부는 일별/실시간 시세를 확인할 수 있고, 보이는 것처럼 실시간 시세는 거래 내역이 쌓이고, 일별 시세에서는 오늘의 종가와 등락률, 거래량이 실시간으로 변경되는 것을 확인할 수 있습니다.
• 피드백 받고 싶은 부분
  • 마지막으로 피드백 받고 싶은 부분에 대해 말씀드리겠습니다.
  • 저희는 실제 주식 데이터를 가지고 진행하는 게임인 만큼, 외부 API에 요청해야 할 일이 있는데요, 외부 API를 사용하기 위해선 해당 서비스에서 발급해주는 access token이 필요합니다. 이 access Token을 발급받는 로직을 하나의 서비스로 만들어서 사용 중이라, api를 요청하는 서비스 로직에서 해당 서비스를 의존하고 있는 상황에 순환 참조가 발생할 가능성이 있어 좋지 않다고 판단했습니다. 서비스가 서비스를 의존하는 문제가 생긴다면 다들 어떤 식으로 해결하고 있는지 궁금합니다.
  • SSE / WebSocket
    • 현재는 주가를 실시간으로 업데이트하기 위한 방법으로 웹소켓을 선택해 사용하고 있는데, 주식 서비스에서는 서버에서 클라이언트로 보내주는 데이터만 존재하기 때문에 SSE를 사용하는 것이 더 적합하지 않을까 고민이 됩니다. 다들 Socket 또는 SSE 혹은 이외에 다른 기술을 선택한 이유가 있는지 궁금합니다.
  • 저희 질문에 대한 답변, 피드백 노트에 많이 작성해주시길 바랍니다!!
  • 이제 피드백 노트 확인하면서 질문과 피드백 받겠습니다. 발표 들어주셔서 감사합니다!