230911(월)

🚤 성장일지 7.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

⚛ (7.0)<완전 개편> 파인만 학습법을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다.

⚛️ 키워드: 직관적이고 쉽고 간단하게 작성

Recharts

• Recharts는 React를 위한 라이브러리로, SVG 기반의 차트를 쉽게 구현할 수 있도록 도와준다.
• Recharts는 다양한 종류의 차트를 지원한다.
• 또한, ResponsiveContainer, ComposedChart 등의 api를 통해 반응형 및 다양한 형태의 차트를 구현할 수 있다.

d3가 아닌 Recharts를 사용한 이유는 확장성에 있어서는 d3가 더 유연하고 강력하지만, Recharts는 이름처럼 React를 위한 컴포넌트를 제공하기 때문에 React와의 호환성이 더 좋다고 생각했다. 또한, 현재 진행하는 미션 프로젝트에서 내가 더 깊게 배우고 싶은 부분은 차트를 그리는 것보다는 Test code 작성이기에 차트를 그리는 작업에서 힘을 빼고 싶었다. 한편으로 너무 커스텀하지 않으면 어떻게 할까 걱정했는데, 생각보다 많은 props를 제공해주고 있어서 커스텀이 가능했다.

4-way-handshake: 송신측에서의 TIME_WAIT

• 4-way-handshake는 TCP 연결을 종료하기 위한 과정이다.
• 4-way-handshake에서는 서버와 클라이언트가 각각 FIN 패킷을 보내고, 서버와 클라이언트가 각각 ACK 패킷을 보내는 과정이 존재한다.
• 앞의 과정은 생략하고, 송신측은 수신측에게 ACK를 받고 FIN을 받은 뒤에 ACK를 보내고 TIME_WAIT 상태로 들어간다.
• 이는 수신측에서 확실히 ACK를 받고서 소켓 연결 종료를 보장하기 위함이다.

📝 회고

Recharts를 통해서 차트를 그려보았다. 사실 라이브러리를 가져다가 쓰는 건 공식문서 보면서 열심히 따라가면 되는거라… 그렇게 어려울 건 없었다. 내일 각 데이터의 필터링을 상태로 두고 차트에 이벤트 리스너를 달아서 구현하려하는데 어떻게 하면 좀더 깔끔하게 상태관리를 할 수 있을지 고민이 된다. 그리고 본격적으로 테스트 코드를 빡세게 작성해보려 한다. jest, react-testing-library에서 나아가서 cypress까지 다뤄보아도 좋을 것 같다.

참고