오늘 한 일
오늘은 일단 그래프와 테이블 그리는 건 다 한 것 같다.
이제 다른 사람들이 보내는 props나 component와 맞춰보면서 충돌을 없애야 하는데, 이 부분이 가장 힘들 것 같다.
강의에서는 나중에 쓰일 수도 있는 storybook 사용법도 볼 수 있었고, 홈페이지가 효율적으로 돌아가는지 퍼포먼스를 확인하는 방법도 알 수 있었다.
공부한 것
강의
toLocaleString: 배열을 문자열로 만드는데 ,로 분리한다. 보통 숫자를 1,000,000 이런식으로 표현할 때 많이 쓴다.
switch문 대신 위 처럼 사용 가능하다.
dictionary를 사용하듯이 사용한다고 생각하면 편할 것이다.
저중에 아무 것도 없으면 배열 뒤에 ?? <default 아이콘 /> 하면 된다.
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>이런 구조일 때 보기 힘들기 때문에 dt, dd 를 div 태그로 감싸서 나눌 수 있다.
Victory chart를 사용할 때 어떤 기준으로 나누어져 있는지 victory legend를 사용해서 데이터 색이랑 이름을 보여준다.
code climate 사이트: 알아서 코드를 분석해주는 사이트
https://codeclimate.com/
classnames 라이브러리의 cx를 이용해서 만듬
<div cx(styles.기본적용, styles[선택 적용] { [styles.선택 적용: boolean] }) />
styles[선택 적용]의 경우 scss에서 위의 사진처럼 사용할 수 있다.
크롬의 개발자 도구(F12)에 performance나 lighthouse에서 새로 고침 버튼을 누르면 성능 조사를 해준다.
button을 쓸 때 이미지만 쓰는 경우에 accessibility 점수가 낮게 나올 수도 있다.
아무 설명 또는 text가 없기 때문인데 aria-label을 사용하면 된다.
얕은 복사, 깊은 복사
javascript에서는 배열을 선언하고 다른 배열에 넣으면 얕은 복사라고 해서 배열의 값을 공유한다.
예시)
const array1 = ['a', 'b', 'c'];
const array2 = array1
array2[1] = 'f'
console.log(array1)
console.log(array2)
// 출력
> Array ["a", "f", "c"]
> Array ["a", "f", "c"]반대로 array1을 이용해 array2값을 초기화해도 값을 공유하지 않는 것이 깊은 복사인데, 흔히 spread(...문법)라는 방법을 많이 사용한다.
예시)
const array1 = ['a', 'b', 'c'];
const array2 = [...array1]
array2[1] = 'f'
console.log(array1)
console.log(array2)이때까지는 이대로 사용하면서 문제가 없었는데, 오늘 과제를 하다가 문제가 생겼다.
코드)
const dataInit = [
{ value: 0, category: '광고비' },
{ value: 0, category: '매출' },
{ value: 0, category: '노출 수' },
]
const data: Record<string, { value: number; category: string }[]> = {
google: [...dataInit],
facebook: [...dataInit],
naver: [...dataInit],
kakao: [...dataInit],
}이런식으로 초기화를 했는데 data의 객체들이 값을 공유하는 것처럼 작동하던 것이다.
예를 들어 google의 매출 카테고리의 value을 변화시키니 다른 것들의 값도 같이 변화했다.
알아보니 깊은 복사 안에서 얕은 복사가 일어나는 듯 했다.
만약에 google의 첫번째 값을 통째로 바꿔주면 다른 미디어의 값들은 안바뀌는 것이다.
이것을 해결하기 위해 본인은 lodash 라이브러리의 cloneDeep 함수를 사용했다.
이렇게 하면 배열 안의 객체들도 다 깊은 복사가 이루어진다!
예시)
const dataInit = [
{ value: 0, category: '광고비' },
{ value: 0, category: '매출' },
{ value: 0, category: '노출 수' },
]
const totalData = cloneDeep(dataInit)