42inshin / exam_mini_dashboard Goto Github PK

할 일

• Vue 프로젝트 디렉토리 생성

npm init vue@latest

• Readme 수정
• 미니 대시보드를 위한 src 정리
• 이슈 및 PR 템플릿 추가

버그 설명

시간 범위 selector의 선택 가능한 옵션은 10분, 30분, 1시간이며, 10초 간격으로 데이터를 받아오기 때문에

api 데이터를 올바르게 받아올 경우 61, 181, 361개의 데이터들이 들어와야 할것으로 보입니다.

하지만, 수정을 거치지 않은 기존 상태에서 해당 api를 사용하게 될 때 1개 또는 0개의 데이터만 들어오는 상황이라 resolvers내 pie, timeseries, value 내 코드를 확인하여 수정이 필요해 보입니다.

재현 방법

아래의 코드를 통해서 api 호출 함수를 구현했습니다.
unixtime 단위 시간을 초 단위로 넣었을 때 데이터가 0개 또는 1개가 들어오는 상황입니다.

// 현재 시간을 Unix 시간으로 변환
const currentUnixTime = Math.floor(Date.now() / 1000)
const selectorOption = {
  tenMin: 600,
  thirtyMin: 1800,
  oneHour: 3600
}

const defaultSelector = selectorOption.tenMin

const getTimesHandler = async () => {
  const requestData = {
    from: currentUnixTime - defaultSelector,
    to: currentUnixTime
  }
  const timeseriesData = await getTimeseries(requestData.from, requestData.to)
  console.log(timeseriesData)
}

시스템 환경 (선택 사항)

No response

작업 설명

• UI 정리
• readme 정리
• 코드 리팩토링
• 버그 확인 및 수정
• 선택사항 구현
  • 사용자가 대시보드에 3종의 차트 중 원하는 것 하나를 추가할 수 있는 기능을 구현 해주세요.
  • 값 차트가 특정 기준 값 이상일 때, 값의 색상이 변하는 기능을 개발해주세요.
  • 값 차트의 값을 항상 소수 점 위 3자리, 소수 점 아래 2자리까지만 보이도록 해주세요.
  • 대시보드 페이지의 차트들의 위치와 크기를 원하는 대로 조작할 수 있도록 만들어주세요.

접근 방법 (선택 사항)

No response

대체 방안 (선택 사항)

No response

작업 설명

1. 3종의 차트를 구현하기 위해 라이브러리를 사용합니다.

2. 차트를 구현 합니다.

• 라인 차트 : GET /timeseries API
• 파이 차트: GET /pie API
• 값 차트: GET /value API

3종의 차트는 10초 주기로 데이터를 갱신합니다.

3. 시간 범위인 selector를 구현 합니다.

• 10분
• 30분
• 1시간

접근 방법 (선택 사항)

chart.js 와 vue-chart-3 라이브러리를 설치할 예정입니다.

라인 차트와 파이 차트는 라이브러리를 통해 구현하며, 값 차트는 라이브러리 사용 없이 할 계획입니다.

예시

대체 방안 (선택 사항)

chart.js 라이브러리가 미흡할 시 echarts.js로 변경할 예정입니다.

설명

• MSW를 사용한 mockingServer 를 구성합니다.
  • MSW 설치
  • 브라우저에 서비스 워커 등록
  • 워커 설정
  • 워커 실행

MSW(Mock Service Worker)란?

MSW(Mock Service Worker)는 Service Worker를 이용해 서버를 향한 실제 네트워크 요청을 가로채서(intercept) 모의 응답 (Mocked response)를 보내주는 API Mocking 라이브러리이다. MSW를 사용하면 직접 Mock 서버를 구현하지 않아도, 네트워크 수준에서 API를 Mocking 할 수 있다. Mocking 테스트를 위한 노드(node.js)환경, 개발 및 디버깅을 위한 브라우저 환경에서 모두 사용할 수 있다는 장점이 있다. 또한, 소스 코드 수정 없이 모킹이 필요한 환경에서만 MSW 인스턴스를 실행해 API Mocking을 적용할 수 있다.

MSW가 이런 기능을 제공할 수 있는 이유는 바로 Service Worker를 이용해 HTTP 요청을 가로채기 때문이다.

설치 방법

MSW 라이브러리 설치

npm install msw --save-dev

브라우저에 서비스 워커 등록

브라우저에서 사용하기 위해서는 MSW를 서비스 워커에 등록하는 과정이 필요합니다.
아래의 명령어를 실행하면 서비스 워커 등록을 위한 파일이 public 폴더에 추가할 수 있습니다.

npx msw init public/ --save

Worker 설정

src/mocks/browser.js 파일을 생성해서 worker 설정을 합니다.

import { setupWorker, type SetupWorker } from 'msw'
import { handlers } from './handlers'

const worker: SetupWorker = setupWorker(...handlers)

export default worker

Worker 실행

src/main.ts 에 Worker 실행 코드를 추가합니다.

import worker from './mocks/browser'

// MockServiceWorker
if (process.env.NODE_ENV === 'development') {
  worker.start({ onUnhandledRequest: 'bypass' })
}