2주차 그룹 회고 & 발표 준비

📒 그룹 리뷰

J008_고동우

• 로그인

  • isOpen Zustand 상태관리 라이브러리 이용해서 관리 중

  • 로그인하면 로그아웃 버튼 보이게 바꿈

    • isLogin
    • 로그아웃 누르면 resetToken 할 수 있게 ⇒ FE가 갖고 있던 accessToken null로
      • refresh token 쿠키로 관리해서 로그인 상태 유지하려고 함
      • 새로고침하면 accessToken 값이 사라지는 이유?

        • ranking 이나 마이페이지 같은 라우팅은 상관이 없는데 페이지가 완전 바뀌는 새로고침에서는 메모리가 리셋되어서 사라짐. 로컬 스토리지에 저장하면 새로고침해도 토큰을 갖고 있어서 괜찮지만~ 보안 측면에서 취약해질 수 있어서 현재 안 담고 있음.

          ⇒ refresh 라는 api 하나 만들어서 새로고침할 때마다 api 요청해서 해보기

  • 이메일 패스워드 정보로 상태관리

  • 로그인 할 때 엔터나 버튼 누르면 api 연동된거로 로그인하기

  • 상태관리 라이브러리 이용해서 setAccessToken 통해서 토큰 저장

J130_서산

• searchParmas 써서 구성! api 연동
• 슬라이딩바 애니메이션
  • 버튼 안에 있는 테두리로 넣어놨었음, 그러니까 애니메이션이 안됨. (버튼마다 영역이 나눠져있으니까)
  • 따로 element 설정해서 애니메이션 구현 (예뻐요)
  • 어떤 버튼을 눌렀는지 정보를 갖고 있음.
    • 이 정보를 바탕으로 슬라이딩바가 따라가는 느낌. 넓이도 그 과정에서 바꾸고!
• fetch문은 리액트 쿼리 이용
  • 맨처음에 로딩하니까 페이지가 깜빡거리는 이슈가 있었음
  • 깜빡거리는거 없애려고 keepPreviousData 옵션 추가. searchParams으로 바뀔 때마다 fetch보내서 데이터 값 갱신하는거라서~ 이전 데이터 기억하게 해두면 이전 데이터 바탕으로 그려놓고, 값 변경하고 이런 식이라 화면 안깜빡거림
• 차트 구현
  • canvas API 사용
  • canvas element 써서 왼쪽 상단 좌표 (0, 0)으로 해서 선 그리기..
  • 데이터 읽어서 좌표 대로 점찍고 점찍고 선 잇고 이런 식으로 구현 (대단해요)
  • 패딩 하나하나 계산해서 값 설정 ㅠㅠ..
  • 지금은 lineTo 써서 선 그래프로 그렸는데 막대그래프 그리는 그런 친구도 있음!
  • 색상 변경 기준?
    • 임시로 변수를 넣어놨는데~ 그 전날의 종가선으로 추측하는데 토스 증권에 차트에 점선 라인이 있는데 이거 위에 있으면 빨강, 아니면 파랑 이렇게 해서 색 변하게 해보았음. 우리는 기준선을 지금 절반으로 잡아서 그 절반 기준으로 올라가면 빨강, 내리면 파랑으로 할 수 있게 했음(진짜 신기해요)
    • 전날 대비 플러스인지 마이너스인지 추측할 수 있게 했음!
  • x축
    • 장 시작 ~ 장 끝. 5분 단위로 하면 x 좌표 몇 개 나오는지 계산해봄 (79개)
      • 토스는 일단 5초마다 갱신! 우리도 그런 식으로 그리지 않을까 싶다!
    • 미리 안적어두면 그래프를 가득 채우려고 해서 최댓값을 지정해놔서 안그렇게 하도록했음!
  • y축
    • y좌표를 실시간으로 계산해주는 느낌
    • 이게 자기 그래프 칸 벗어나면서까지 그리면 안되니까~ y축 계산해서 그래프 칸 안에서 그릴 수 있게 했다!
  • 소켓 연동하고, 조금 더 작게 해서 4개 정도로 늘릴 예정!
• 주식 차트 이야기
  • 토스에서는 단순이동평균(SMA) 이거 서버에서 오는 거로 확인했음
  • P 오늘 종가 기준, n은 사용자가 선택한거, 그래서 오늘 종가부터 n개까지 더해서 n으로 나눈거. 그렇게 해서 찍히는게 토스증권에서 보라색선! (FE 회의록 11.06 참고)

---

J066_김진

• API 연동 개발!

J119_박진명

• CI는 백, 프론트 되게 추가
• deploy는 pull request 들어오면 시작하게 했음
  • dev에 deploy 되면 안되는데 되어서 찾아보니까 오류였던 것 같음.. 어느 순간 해결됨
  • .env 파일 만들어서 할 수 있게 했다
• 배포
  • 도커로 하기로 해서 도커 만든다!
    • 도커 push는 했는데, SSH를 특정 IP에서만 접속할 수 있게 ACG 관리를 하고 있어서.. 깃허브 액션이 접근을 못하는 문제가 발생!
      • 처음에는 깃허브 액션이 가질 수 있는 모든 IP 집합에 대해서 하려고 했으나 잘 안됐음
      • 그래서 바꾼 방식이 현재 깃허브 액션 IP 조회하고, 그 IP를 NCloud 우리 서버에 ACG에 깃허브 액션 IP 넣어서 SSH 접속할 수 있게 했음
    • 어쨌든 접속해서 이미 있으면 지우고 그렇게 해서 도커 실행할 수 있게 했음
    • 다 끝나면 아까 추가한 IP 지울 수 있게 구현
    • 도커의 이점?
      • 서비스 개발할 때 환경이 달라져도 똑같이 복제할 수 있음(이미지)
        • 서버 코드, 라이브러리를 비롯한 환경 설정 등 얘네를 포함한 이미지 생성
      • 환경 독립성
• types
  • express 모듈에 req에는 kkaoId, userId 이런거 없어서 오류가 발생. 이거 해결하려고 재정의해봄
  • tsconfig에 typeRoots에 추가해야 함!
• ValidationPipe 써서 Dto에 맞는건지 판별해서 아니면 에러 응답을 발생하게 구성
• strategy
• middleware
• token
  • kakao랑 email 유저 구분한 이유
    • sign에 .email .kakao 이거를 따로따로 넣어야해서 분리를 했던 것 같음
  • refreshtoken 1차 검증하고, 진짜 우리가 제공해준 그 token이면 email/kakao Id로 유저 판별
  • 유저 dto 가져와서 accesstoken 만들어서 보내주는 중

J188_이시은

• Socket, API 모두 구현

• Socket Service

  • BE 서버랑 한국투자증권 서버 연결하는거 관리

• Socket Gateway

  • FE 서버랑 BE랑 연결하는거 관리

  • 차트 5분마다 갱신 - 이벤트 이름은 index

    • time, value

  • 실시간 값이랑 변경율 갱신 - 이벤트 이름 indexValue

    • 값, 부호 등등

    ⇒ API랑 socket에서 가지고 오는 값은 일단 동일! 이후에 수정할게요

• axios 모킹해서 get 요청 들어오면 미리 만들어둔 목데이터에서 할 수 있게 함

  • access token 없이도 정상 동작하도록 구현!

• lint 규칙 수정

발표 준비

데모발표?

뭘 발표하는걸까요

1. 데모 시나리오 - 직접 보여주면서 발표하기
   • 메인 화면 상위/하위 Top5 리스트 보여주기.
     • 네비게이션 버튼 클릭 (애니메이션, params)
   • 로그인 시연.
     • 로그인 성공.
     • 로그인 실패.
   • 차트 구현 간단히 설명.
   • swagger도 보여드리면 주가지수 API 설명드리기
   • 웹소켓 구현 → 클라이언트-서버, 서버-한투서버 각각 세션 하나로 관리
2. 멘토님 피드백 반영해서 게임 기능보다 주식 쪽에 좀 더 힘쓰기로 함
   • 백로그 수정.
     • 주식 관련 기능 우선 순위 수정.
     • 게임 관련 기능 or 부가 기능 우선 순위 수정.
3. CI/CD 연결하던거 이야기
4. 개발 일지 → 같이 이야기 나누면서 결정했던 거 쓰기
5. 백로그 관리 현황.
   • 백로그 2주차 이터레이션 이미지

http://223.130.151.42:5173/

대본

1. 피드백 및 변경점

   1. 요구사항 구체화
      • 저희 서비스는 아무래도 주식과 게임을 결합한 서비스이다보니, 주식과 게임 사이에서 어떻게 밸런스를 맞추어야 할지 고민이 있었습니다.
      • 1주차 멘토링 시간에 멘토님께 주식과 게임 중 어떤 것에 집중을 해야할지 여쭤보았습니다. 멘토님께서는 주식에 관심을 갖고 집중해서 공부하고 구현하면 서비스 자체의 완성도도 상승할 것이라고 이야기 해 주셨습니다.
      • 저희 팀원들 또한 주식 기능이 메인이라고 생각했고, 주식에 대해 공부하고 구현하면서 얻을 수 있는 것들이 많을 것이라고 생각해 주식 관련 기능을 더 집중적으로 구현하기로 결정했습니다.
   2. 주식 차트 구현
      • 주식 차트 화면 구현 관련해서 변경사항 말씀드리겠습니다.
      • 일단 기획 단계에서는 chart.js와 같은 API를 사용해 차트 구현을 진행한 후, 시간 여유가 생기면 직접 구현해보기로 결정했었습니다.
      • 그러나 편리한 API를 먼저 사용하게 되면 직접 구현하는 방식으로 넘어가기 쉽지 않다는 멘토님의 피드백을 받고, 처음부터 구현해보되 시간이 부족하다면 API를 사용하도록 결정했습니다.

2. 개발 진행 상황

   1. 프론트엔드 진행 상황

      • 이번주 프론트엔드 단에 계획은 크게 로그인 레이아웃 구현 및 연동, 주식 상/하위 Top5 종목 확인 레이아웃 구현 및 연동, 간단한 주식 차트 그려보기 였습니다.
      • 왼쪽 메인화면에서 확인할 수 있듯이 상단에 주식 차트를 확인할 수 있고 하단에 주식 상/하위 Top5 종목을 확인할 수 있습니다.
      • 오른쪽 화면을 보시면, 헤더에 로그인 버튼을 클릭하면 모달로 로그인 컴포넌트가 나오도록 구현했고 알맞은 아이디, 비밀번호를 입력하면 일반 로그인이 가능하도록 구현된 상태입니다.

   2. 백엔드 진행 상황

      1. 이번주 백엔드 단에 계획은 로그인, 회원가입 API, 주가 지수 실시간 조회에 이용할 소켓 및 API, 주가 변동률 상/하위 TOP5 조회 API 구현이었습니다. 이 API가 어떻게 사용되는지에 대한 자세한 내용은 뒤에서 설명드릴 데모 시나리오 부분에서 확인하실 수 있습니다.
      2. 또한, 프론트엔드 팀이 원활하게 진행할 수 있도록 swagger를 활용해 API 문서를 제공했습니다.

   3. 2주차 계획 및 전체 상황

      • 저희는 이번 주 월요일에 스프린트 백로그를 작성하면서 서로 업부를 분담하였고 매일 데일리 스크럼 시간에 이를 업데이트 하며 진행하였습니다. 일주일동안 다음과 같은 task를 수행 할 수 있었으며 그 결과 다음과 같은 번 다운 차트가 그려졌습니다.

3. 데모 시나리오

   1. 주가 지수 확인.

      • (ppt에 나와있는 글을 간단히 읽는다.)
      • 우선 메인 페이지를 보시면 상단에 주가 지수를 확인하는 레이아웃을 보실 수 있습니다.
      • 현재는 아직 소켓 연결이 완료되지 않은 상태이고 그래프의 경우 프론트엔드에서 mock 데이터와 setInterval 을 이용해 그래프를 그리고 있습니다. 그래프의 경우 Canvas API를 이용해 그렸으며 색상의 경우 전날 종가를 기준으로 올랐으면 붉은색, 내렸으면 파란색으로 표현할 예정입니다.

      ⇒ 그래프 목데이터 가지고 한거라 f5눌러서 실시간으로 그려지는거 보여주셔도 괜찮을 것 같네요. 소켓 연동되면 이런 식으로 그려질거다 설명하면서

   2. 상/하위 Top5 종목 확인.

      • (ppt에 나와있는 글을 간단히 읽는다.)
      • 상/하위 Top5도 메인 페이지 하단에 확인하실 수 있습니다.
      • API가 연결된 상태이고 네비게이션 바의 각 항목을 이동하면 자연스러운 애니메이션과 함께 그에 맞는 데이터를 갖고오는 것을 확인할 수 있습니다.
      • 또한, searchParams로 상태를 관리하여 새로고침이 되어도 해당 데이터 정보를 잃지 않고 유지하도록 구현했습니다.

   3. 로그인 테스트.

      • (ppt에 나와있는 글을 간단히 읽는다.)
      • 현재는 OAuth 로그인은 현재 구현 중에 있고, 이메일과 비밀번호로 로그인하는 API만 구현 및 연동된 상태입니다.
      • 로그인 실패
        • 잘못된 ID 또는 비밀번호를 입력하면 이렇게 401 에러가 발생합니다.
      • 로그인
        • jindding/1234 입력해서 제대로 되는거 보여주기
      • 로그아웃
        • 로그인이 되면 로그아웃 버튼이 생기고, 버튼을 클릭하면 프론트엔드 메모리에 존재하는 accessToken을 null로 변경해서 로그아웃 처리를 하였습니다.

4. 기술적/협업 경험 공유

   1. 슬랙 깃허브 연동
      • 멘토님과의 시간에서 슬랙-깃허브 연동이라는 키워드에 대해 알게 되었습니다. 따라서 저희는 2주차 개발을 시작하기에 앞서 슬랙-깃허브 연동을 진행하였고 이를 통해 PR이 발생하면 팀원들이 빠르게 확인할 수 있었습니다.
   2. 코드 리뷰
      • 저희 팀은 1일 1PR을 실천 중이고 각 프론트/백 분야마다 reviewer를 할당하여 코드리뷰를 진행하고 있습니다.
      • 뱅크 샐러드 코드 리뷰 방식을 참고해서 중요도에 따라 빨강/노랑/초록 이모티콘으로 구분하여 진행하고 있습니다.
   3. API 서버
      • github action을 통해 main, alpha 브랜치에 pull request 혹은 push 가 발생 했을 때 naver cloud platform과 docker를 통해 외부 서버를 구성하도록 하였습니다.