단위 테스트를 작성할 때에는 모킹이 필요하다. vitest와 react testing library를 사용하여 단위 테스트를 작성하는 방법을 알아보고, 타이머 예제를 통하여 다양한 상황에서 단위 테스트를 작성하는 방법을 알아봤다. 그리고 또 현재 내가 만들고 있는 프로덕트에서 어떻게 적용할 것인지 생각해보는 계기가 되었다. 하지만 단위 테스트는 의존성이 없고 독립된 컴포넌트에서 유의미하다. 여러 컴포넌트 간에 상호작용이 필요한 것은 앞으로 통합 테스트를 통해 배워볼 것이다.

testing: 단위 테스트 작성하기

테스트란, 올바른 테스트를 위한 규칙, 단위/단위 통합 테스트란, React Testing Library와 컴포넌트 테스트 등 테스트 맛보기 스터디 시작! 리펙토링을 하다 보니 테스트에 대한 필요성이 대두되었다. 좀 더 다양한 상황에서 유의미한 테스트 코드를 짜고 싶다는 생각으로 시작했다. 테스트도 잘 알고 사용하자.

testing: 테스트란, 단위 테스트 맛보기

Next.js 접근 제어 로직을 middleWare로 변환해보기

Next.js middleWare 적용하기

이번 작업에서  유저가 쓴 글들을 모아볼 수 있는 유저 페이지가 추가되어야 했다. 이 경우에 리스트 컴포넌트와 같은 경우에는 이미 이전에 쓰던 컴포넌트가 있었지만 유저 정보가 들어가 있는 컴포넌트는 새로 만들어야 했다. 게다가 이 유저 정보 컴포넌트는 크리에이터인지, 멤버인지, 소유자인지에 따라서 보여줘야 하는 방식에 대한 케이스가 다양했기 때문에 테스트를 도입하면 좋을 것 같다는 생각이 들었다.

Next.js + msw + jest로 TDD 시도하기

개인정보를 입력하는 페이지를 작업하던 도중 문제가 발생했다. 이미지를 올리는 곳이 두 개가 있는 페이지였다.
• 개인정보 프로필 사진
• 개인 홈 배경화면 사진
그리고 이 사진들을 올리기 위해 각각 다른 이벤트 핸들러를 사용하고 있었는데, 나는 분명히 배경화면 사진을 올리기 위한 handler를 동작시켰는데 왜 그 위에 있는 엉뚱한 프로필 사진 미리보기에 값이 들어가는 걸까?

FileForm을 이용한 사진 업로드 오류: DOM의 id 사용에 주의하자

react로 이것저것 시도를 해 보던 중, 이와 같은 오류가 발생하였다.
ReferenceError: process is not defined

ReferenceError process is not defined 해결

echart는 편리하게 되어 있어서 글자가 겹칠 것 같으면 label을 띄워주지 않고 띄엄띄엄 보여주는데, 나는 모든 x축의 라벨 값을 보고 싶었다.

Echart. all show label, setting interval

유동적인 데이터를 저장하기 위해서는 state라는 것을 사용하고, 이것을 업데이트 해주기 위해서 setState 라는 메서드를 사용한다. 이것을 사용해서 값이 바뀔 경우 감지하고 리렌더링이 실행된다.

React rerendering의 조건

d3를 이용해서 버블 차트를 만들었는데, 오픈소스를 참고해서 만들다 보니 내 입맛에 딱 맞는 것이 아니라 열심히 다시 맞추어 개발하는 과정에서, 원래 들어가 있는 애니메이션이 toomuch 라서 애니메이션을 없앨 수 없을까 했다. 

d3를 이용한 컴포넌트에서 animation 효과 제외하기

object 내부에 있는 프로퍼티 값들을 기준으로 sorting을 해야 할 일이 있었다. 그런데 objects Cannot assign to read only property '2' of object '[object Array] 라는 오류가 발생하였다.

Error (sorting Array): objects Cannot assign to read only

bubble chart를 위와 같은 형식으로 만들 일이 있었는데, 아래처럼 컴포넌트 내에서 처리를 해서 줄바꿈을 하려고 해도 먹히지 않는 현상이 발생하였다.

svg text tag 관련 <br/> 먹히지 않는 현상

문제는 렌더링을 강제하는 코드를 테스트 하던 도중에, 이 코드를 어디다가 넣어야 내가 원하는 것처럼 동작을 할 지 그게 문제였다. 그런데, 제대로 동작을 하리라고 생각했던 곳에 넣었는데도 해결은 커녕 Maximum update depth 문제가 생겼다. 

Error Maximum update depth 문제

ts에서 내가 interface를 정의하여 타입을 지정한 배열에서, map을 사용해야 하는 상황이 발생했는데 이때 'Property 'map' does not exist on type' 이라는 문구가 뜨며 문제가 발생하였다. 

Property 'map' does not exist on type 문제