이전 팀 과제 복기
공용 컴포넌트 제작
맨 처음 만들었던 드롭다운 컴포넌트를 곳곳에서 잘 사용했다. 하지만 아쉬운 부분이 있었는데 사용하기에 불편했다는것이다. 처음 만들 때는 드롭다운 메뉴에 들어갈 string값 하나만 있으면 된다고 생각했다. 하지만 실제 사용한 모습을 보니 화면에 보여지는 값과 실제 사용하는 값이 다를 때가 많았다. 화면에는 '가나다' 라고 보이지만 실제 사용하고 싶은 값은 'abc'라고 쓸 수도 있는것이다.
하지만 발견했을때는 이미 많은곳에서 사용중이고 마감이 얼마 남지 않은시점이라 손쓰기가 어려웠다. 역시 처음 만들때 제대로 만들어야하는가보다.
지금와서 생각해보자면 value, name을 따로 props로 받았더라면 좋았을 것 같다.
[{ name: ... , value: ...}]인 배열을 items로 받고, onChange 함수를 실행할 때는 value를 사용하고 화면에 출력할 부분은 name을 사용했으면 다른 팀원들이 쓰기 편했을 것 같다.
큰 숫자 처리 -> bignumber.js
이전에 배운대로 bignumber.js를 사용해 큰 숫자의 계산을 해보려고 했다. 하지만 실제 사용하려고 하니 생각보다 익숙해지기 어려웠다.
우선 간단한 사용법을 찾아보려했지만 많이 사용되지 않는지 한글자료가 별로 없었다. 그래서 공식 홈페이지에 찾아봤더니 심플한 예시들이 반겨주었다.
bignumber.js
이 중 내가 사용한 것은 더하기, 나누기와 숫자로 다시 변환하는 기능, 특정 포맷의 string으로 변환해주는 기능이다.
- 숫자를 bignumber로 만들기
BigNumber 생성자를 import해서 원하는 넘버를 인수로 넘겨주어 만들어준다
import BigNumber from 'bignumber.js'
const x = new BigNumber(1)
const y = new BigNumber(2)
// 더하기
c = x.plus(y) // 3
// c는 3이 되지만 x,y값은 바뀌지 않는다
d = y.minus(x) // 1
// 나누기
const z = new BigNumber(100).div(10) // 10
// 숫자, 문자로 변환
x.toNumber() // 1
y.toString() // '2'그리고 BigNumber를 number로 만들고싶다면 간단하게 toNumber를 사용하면 된다.
toFormat은 config를 설정할 수 있다.
BigNumber 클래스 자체에 config를 설정할 수 있지만 전역으로 설정하는건 별로인 것 같아 함수의 인자로 넘겨줬다.
const config = {
groupSize: 3, // 묶을 자리수 단위
groupSeparator: ',', // 그룹마다 나타낼 문자
decimalSeparator: '.',
suffix: '원' // 접미어
}
const x = new BigNumber(123456.123)
x.toFormat(1, config) // 123,456.1원
// 첫번째 인자는 소수점 아래 자리수이렇게 사용했는데 좀 불편한 느낌이었다.
그리고 number로 다시 바꾸면 큰 숫자는 결국 다시 문제가 될텐데 그부분은 크게 고려하지 못해서 아쉽다.
