괘종소리 세기

React Testing Library는 보통 리액트를 설치하면 기본적으로 같이 설치되어 있는 라이브러리입니다. TDD로 프로젝트를 하며 프론트엔드 테스트 코드를 작성한 경험이 있어서 정리합니다. 정적, 동적 컴포넌트 두 가지 모두 테스팅을 할 수 있는데, 여기서 정적 테스팅이란 말 그대로 웹 페이지에 정적인 html 요소가 표시되는지 확인하는 테스팅입니다. 먼저 정적인 요소 먼저 테스팅해보도록 하겠습니다. TDD가 늘 그렇듯 빈 Login 컴포넌트를 만들어 놓고 given-when-then 패턴으로 테스트 코드 먼저 작성합니다. 정적 테스트 코드 예시 // Login.test.tsx import { render, screen } from "@testing-library/react"; import Log..

// Timer.tsx const [currentSeconds, setCurrentSeconds] = useState(0); const [isReverse, setIsReverse] = useState(false); useEffect(() => { setInterval(() => { if (!isReverse) { setCurrentSeconds(prevState => prevState + 1); } else { setCurrentSeconds(prevState => prevState - 1); } }, 1 * 1000); }); 위처럼 isReverse가 false일 때는 1초마다 currentSeconds가 1씩 증가하고, true일 때는 1씩 감소하는 코드가 있습니다. isReverse가 false..

※ 경험에 기반한 글입니다. 틀린 부분이 있을 수 있습니다. 생각보다 이미지 파일을 제외하면 로컬에 있는 static 파일을 불러올 상황이 없다 보니, 파일 종류에 따라 코드로 불러오는 방법이 상이하다는 걸 알지 못했었습니다. React는 Node.js를 통해 웹 서버를 돌리고 그걸 기반으로 브라우저를 실행합니다. 보통 웹 서버에서 public 폴더는 정적 자원을 호스팅하는 데 사용됩니다. 그래서 React 프로젝트에서 사용할 static 파일도 public 폴더에다 넣어야 사용자의 접근이 가능합니다. 이 경우 /asset/aa/aa.gltf 라는 경로를 통해 gltf 파일(3D model 파일)을 불러올 수 있습니다. React에서 로컬 파일 중 이미지 파일이 아닌 .txt나 .xlsx, .csv 같은..