[원티드 프리온보딩] TIL - (16)

5월 22일

휴먼스케이프 팀 과제 리뷰

<span> 태그

<mark> 태그도 넣으면 안된다. 어지간해선 span 태그 안에 다른 태그를 넣는 일은 없도록 하는게 좋다.

Toolkit의 useAppSelector 사용할 때

const item = useAppSelector((state) => {
  state.item;
});

보다는 getItem을 store에서 선언을 해주고 나서

const item = useAppSelector(getItem);

로 사용해야 코드도 깔끔하고 캐싱도 매끄럽게 이루어진다.

CSS all 속성

CSS 애트리뷰트 중 all은 unset을 줌으로써 모든 기본 스타일링을 제거하는 기능을 담고 있다.

Session

🔗Victory

Victory는 Chart.js나 D3.js처럼 차트를 구현할 때 사용하는 라이브러리이다. 차트 라이브러리계의 구심점이라고 볼 수 있는 D3.js 보다 가벼운 것은 물론이고 다른 동종 라이브러리들에 비해 문서화가 잘 되어 있어 사용하기 편리하다.

🔗bignumber.js

자바스크립트는 소수점은 물론 큰 자릿수에 따른 정밀도가 굉장히 떨어지는 언어이다. 이를 보완해주는 라이브러리이다.

🔗Swagger

RESTful API를 사용하는 서버에 대해 엔드포인트에 대한 정보들을 자동으로 문서화해준다. 또한 각 엔드포인트에 대한 테스트도 해볼 수 있으며, 이를 참고하여 프론트엔드와 백엔드 간의 원활한 통신이 가능하게끔 한다.

Jest를 활용한 테스트 코드 작성

Jest는 Create React App에 기본적으로 내장되어 있는 테스팅 라이브러리이다.

Jest로 테스트를 해보고 싶다면 테스트 할 파일의 폴더에 테스트용 파일을 하나 생성하고 그 안에서 테스트하고 싶은 코드를 작성하고 실행하면 된다.

import sum from "./sum";
it("sums numbers", () => {
  expect(sum(1, 2)).toEqual(3);
  expect(sum(2, 2)).toEqual(4);
});

it()혹은 test() 메서드에 테스트 이름과 코드를 작성하면 된다. expect는 결과에 대한 기대값이라고 생각하면 된다.

참고로, Jest에서 인식할 수 있는 파일 형식들 중 가장 자주 쓰이는 형식은

• __tests__ 폴더 내에 있는 .js 파일
• .test.js 파일
• .spec.js 파일 이며, 테스트 폴더나 테스트 파일은 테스트를 돌릴 대상과 같은 공간에 두는 것이 import 면에서 편리하다.

휴먼스케이프 팀 과제 종료

밤을 새워가며 공식 문서를 읽고, 코드를 직접 쳐보며 구현을 하다 보니 어느새 과제 마감일이 되었다. 몇 번이고 보고 또 봤던 코드들임에도 들여다 볼 때마다 항상 더 개선하고 싶은 부분들이 눈에 들어오는 바람에 컴퓨터 앞을 떠날 수가 없었다. 심지어 마감 직전까지 리팩토링을 진행하고 리드미 작성까지 했음에도 100% 만족스러운 마무리라고 느껴지진 않았다. 특히, 제출 기한이 마감되어 리팩토링 진행이 불가능한 상태에서 ‘이 점을 좀 더 수정하고 개선하면 참 좋을텐데..’라는 아쉬움이 남는 부분을 준혁님이 콕 집어 지적하신 순간에는 그 아쉬움이 더 크게 느껴졌었다. 오늘 받은 매드업 과제는 반드시 끝에 아쉬움이 없을 수 있도록 더 열심히 해야겠다.