act가 필요한 경우1. 컴포넌트 내부에 비동기 작업이 있을 때useEffect 내 비동기 작업API 호출 (axios, fetch 등)// 예시await act(async () => {render();});2. 상태 업데이트가 있는 경우useState 사용setState 호출act(() => {fireEvent.click(button); // 상태 변경 발생});3. 타이머 사용시setTimeout, setIntervalact(() => {jest.runAllTimers(); // 타이머 실행});act가 필요없는 경우1. 단순 렌더링 체크render();expect(screen.getByText("hello")).toBeInTheDocument();2. 이미 act를 포함하는 메서드 사용시fire..

Material-UI(MUI)란?Material-UI(MUI)는 React 기반의 UI 컴포넌트 라이브러리.Google의 Material Design을 기반으로 만들어졌으며, 미리 만들어진 다양한 컴포넌트들을 제공한다. 버튼, 입력창, 테이블 등 기본적인 UI 요소들을 바로 사용할 수 있다. 특히 테마 시스템을 통해 색상, 폰트, 간격 등을 일괄적으로 관리할 수 있어서 일관된 디자인 시스템을 구축하기 좋다.스타일링은 sx prop을 통한 인라인 방식, styled()를 사용한 CSS-in-JS 방식, makeStyles()를 활용한 클래스 기반 방식 등 다양한 방법을 제공한다.레이아웃 구성을 위한 12칸 그리드 시스템이 있어 반응형 디자인을 쉽게 만들 수 있고, Box나 Stack 같은 유틸리티 컴포넌트..

그렇다면 이제 본격적으로 3,6,9 게임을 하는 컴포넌트를 만들어 보려고 한다.그렇다면 규칙을 명확하게 세워야한다.숫자에 3, 6, 9가 들어가는 경우 박수를 친다.3, 6, 9 가 여러번 들어가면 그 n개 만큼 박수를 친다.결과적으로 말하자면 3, 6, 9가 들어갔나 판별하기3, 6, 9의 개수 만큼 박수치기를 해야한다.1. 3, 6, 9가 들어갈 경우 true 반환하게 하기 const shouldShowClap = (num: number): boolean => { return num.toString().includes('3')|| num.toString().includes('6')|| num.toString().includes('9'); };3이나 6이..

TDDTDD(Test Driven Development)는 테스트 주도 개발을 의미한다.일종의 개발 방법론인데 정식 코드를 먼저 만들지 않고 테스트 코드를 만든다음에 테스트를 통과한 이후에 정식 코드를 개선하는 방식으로 개발을 하는 방법이다. 테스트를 먼저 작성하고, 그 후에 실제 코드를 개발 : Red(실패) → Green(성공) → Refactor(개선) 단계를 반복한다.실패하는 테스트 작성 → 테스트를 통과하는 최소한의 코드 작성 → 코드 리팩토링 순서로 진행된다. 테스트가 성공한다는 것은 1차적으로 코드가 작동한다는 것을 의미하기 때문에 아래와 같은 장점이 있다.코드의 품질과 신뢰성 향상버그 발생 가능성 감소유지보수가 용이과도한 설계를 방지또한 이런 테스트를 위한 도구로는 Jest나 React T..