# 작업일지 9 / Chart.js 적용, 경매가 유효성 검사

1. 경매시에 입찰가 추이를 확인할 수 있도록 그래프를 도입했다. 라이브러리는 Chart.js 를 사용했다. 

Chart.js 자체를 도입하는 것은 일단 어렵지 않았다. 여러개의 그래프 관련 라이브러리가 있었는데, 그 중 가장 많이 사용하는 것을 보여지고 공식문서도 굉장히 친절하게 잘 나와있다보니 위와 같은 간단한 수준의 그래프는 쉽게 적용이 가능했다. 

 

리액트에서 적용하기 위해 추가한 라이브러리는 chart.js, react-chartjs-2 그리고 실제 데이터를 넣기 전 간단한 더미 데이터를 생성할 수 있는 faker-js 정도.

 

Chart 컴포넌트에서 차트 생성에 필요한 요소를 아래와 같이 import 해주었다. 위 사진과 같이 line으로 된 그래프를 그릴 것이기 때문에 해당하는 컴포넌트를 가져왔다. 

아래 코드는 공식 문서에 나와있는 예제 코드를 바탕으로 작성되었다. 여기서 Line 컴포넌트는 options와 data를 props로 받는데, options 같은 경우 해당 차트에 대한 configuration, legend나 title, tooltip에 대한 설정을 할 수 있다.

data는 차트에 그려질 데이터를 의미하며, 배열형태로 전달해주었다.

나중에 웹소켓으로 실시간 데이터를 업데이트 해주어야 하기 때문에, 먼저 화면에 그려줄 inital 데이터를 props로 받아오고, 웹소켓을 통해서 받아오고 있는 history 데이터를 차트 데이터로 전달하여 리렌더링 하는 방식으로 구현하였다. 그런데 사실 아직 웹소켓을 사용해 통신 테스트를 하기 이전이라 의도에 맞게 실시간으로 데이터가 변경되는지 잘 모르겠다.

 

그리고 차트의 경우 반응형으로 화면 크기가 달라질 때 이전 너비가 그대로 적용되어서, 반응형이 적용 안되는 현상이 있고, 데이터가 제대로 적용이 안되는 현상이 있어서 마운트, 언마운트시에 의도대로 동작하지 않는지 확인할 필요가 있어보인다.

 

2. 입찰가에 대한 유효성 검사 로직을 작성했다.

분명 좌측 캡쳐와 같이 input 컴포넌트의 type을 number로 설정해두었는데, e 키만 눌리는 현상이 발생하고 있다. 구글링을 해보니 이 스택오버플로우 답변에서 스펙 상으로 그렇게 되어있다는 답변이 있었다. 부동소수점을 표현하기 위한 역할인 것 같은데 우리 프로젝트에서는 필요하지 않은 기능이기 때문에 이를 방지하는 함수를 만들어서 onKeyDown 에 전달해주었다. 

그 함수는 이렇게 생겼다. 알파벳과 한글을 포함해 +, - 까지 입력이 되면 바로 이벤트를 방지하도록 로직을 작성했다. 하지만 FIXME에 써져있는 것처럼 한글 문자를 아예 입력 자체를 방지하는 것이 잘 되지 않는다. 값에 영향을 주지 않아서 일단 다른 부분을 먼저 본 뒤에 수정하려고 한다. 

3. 유효성 검사 로직

확인해줄 것은 내가 입력한 입찰가가 내가 가진 것보다 많냐 적냐, 현재가보다 높은 입찰가를 부르고 있느냐 여부라서 크게 복잡하지 않았다. 대신 훅에서 인자로 전달받고 있는 여러 숫자들이 숫자인 경우도 있고 문자인 경우도 있어서 그 부분을 체크하느라 시간이 꽤 걸렸다. 다행히 타입스크립트를 사용하기 때문에 ide에서 이런 부분을 바로 확인해서 수정할 수 있었다. 입찰 요청 로직의 경우 웹소켓을 이용한 send 를 메서드를 사용해야하기 때문에 추후 보완할 예정