Matcher란? Jest에서 matcher는 테스트 결과가 기대한 값과 맞는지 검증할 때 사용하는 함수입니다. 보통 expect()와 함께 사용합니다. expect(result).toBe(3); 여기서 toBe가 matcher입니다. toBe toBe는 원시값을 정확히 비교할 때 사용합니다. test("1 + 2는 3입니다", ()...

Jest란? Jest는 JavaScript 테스트 프레임워크입니다. React 프로젝트뿐 아니라 일반 JavaScript, TypeScript 프로젝트에서도 사용할 수 있습니다. 함수의 결과가 기대와 같은지 확인하거나, 컴포넌트 동작을 검증하거나, 비동기 코드가 올바르게 처리되는지 테스트할 때 사용합니다. Jest의 장점 Jest는 설정이...

문제 상황 스크롤 애니메이션이 들어간 페이지를 만들다 보면 데스크톱에서는 잘 보이지만, 모바일에서는 오히려 불편한 경우가 있습니다. 예를 들어 가로로 이동하는 GSAP 애니메이션을 큰 화면에서만 실행하고, 화면 너비가 1080px 이하일 때는 실행하지 않게 만들고 싶을 수 있습니다. 이럴 때는 현재 화면 크기를 확인한 뒤 조건에 맞을 때만 함수를...

문제 상황 React에서 문자열에 \n을 넣었는데 화면에서는 줄바꿈이 적용되지 않을 때가 있습니다. const App = () => { const text = "this is\napple"; return <p>{text}</p>; }; export default App; 기대하는 결과는 아래와 같습니다. ...

useControls란? useControls는 Leva 라이브러리에서 제공하는 훅입니다. 화면에 조작 패널을 만들고, 그 패널에서 값을 변경하면 React 컴포넌트에 실시간으로 반영할 수 있습니다. React Three Fiber로 3D 장면을 만들 때는 위치, 회전, 크기, 색상 같은 값을 테스트하기에 매우 편합니다. 설치하기 npm ...

들어가며 이전 글에서는 React에서 three.js를 시작하고 기본 박스를 렌더링하는 방법을 살펴봤습니다. 이번 글에서는 3D 장면을 더 입체적으로 보이게 만드는 조명과 material을 정리해볼게요. 3D 물체는 모양만 있다고 끝나지 않습니다. 어떤 재질을 쓰는지, 어떤 방향에서 빛을 받는지에 따라 전혀 다르게 보입니다. OrbitCo...

three.js란? three.js는 브라우저에서 3D 그래픽을 만들 수 있게 도와주는 JavaScript 라이브러리입니다. WebGL을 직접 다루지 않아도 카메라, 조명, 물체, 재질 같은 3D 요소를 비교적 쉽게 사용할 수 있습니다. React 프로젝트에서는 @react-three/fiber를 함께 사용하면 React 컴포넌트 방식으로 3D ...

들어가며 코딩 테스트 문제를 풀다 보면 정답은 맞는 것 같은데 시간 초과가 나는 경우가 있습니다. 이럴 때 가장 먼저 의심해볼 수 있는 부분이 탐색 방식입니다. 배열을 처음부터 끝까지 확인하는 선형 탐색은 이해하기 쉽지만, 데이터가 많아지면 느려질 수 있습니다. 이때 정렬된 데이터라면 이진 탐색을 사용할 수 있습니다. 이진 탐색이란? 이...

들어가며 React에서 사이드 이펙트를 처리할 때는 대부분 useEffect를 사용합니다. API 요청, 이벤트 리스너 등록, 타이머 설정, localStorage 접근 같은 작업은 보통 useEffect만으로 충분합니다. 그런데 React에는 이름이 비슷한 useLayoutEffect도 있습니다. 처음 보면 이런 생각이 들 수 있습니다. u...

React lazy란? React.lazy는 컴포넌트를 필요한 시점에 동적으로 불러오게 해주는 기능입니다. 앱이 커지면 처음 로딩할 때 다운로드해야 하는 JavaScript 번들 크기도 커집니다. 모든 페이지 코드를 처음부터 한 번에 불러오기보다, 사용자가 해당 페이지에 접근했을 때 필요한 코드만 불러오면 초기 로딩을 줄일 수 있습니다. 이 방...