fn.js // async 함수를 사용하여 3초 후에 "Mike"를 반환하는 함수 만들기 const fetchName = () => { return new Promise((resolve) => { setTimeout(() => { resolve("Mike"); }, 3000); }); }; exp...

Matcher(매처)란? 테스트 케이스에서 예상 결과와 실제 결과를 비교하고 검증하는 데 사용되는 함수들을 뜻하며 Matchers는 expect() 함수와 함께 사용되며, expect() 함수로 값에 대한 예상 결과와 실제 결과를 검사하는 역할을 합니다. Jest는 다양한 Matcher를 제공하여 다양한 유형의 검증을 수행할 수 있도록...

Jest에 대해 소개 Facebook에서 개발한 JavaScript 테스팅 프레임워크로 Jest는 JavaScript 애플리케이션(React, Vue, Angular)과 라이브러리를 테스트하고, 테스트 실행 및 결과 보고를 단순하고 간편하게 만들어주는 강력한 도구입니다. 장점 간단한 설정: Jest는 초기 설정이 간단하...

문제 스크롤 애니메이션이 적용되어 있는 사이트에 반응형을 적용시키며 화면 넓이가 1080px 이하 일 떄는 스크롤 애니메이션 함수가 필요가 없어졌기에 애니메이션 함수가 렌더링 안되게 해야했다. 해결 💡 수정 전 Code 이 코드가 화면에 넓이가 1080px 이하일때만 적용되게 만들면 된다. useEffect(() => { ...

문제 문자열 변수에 줄바꿈 적용을 위해 2가지 방법을 사용했는데 되지 않았다. // \n 사용 const App = () => { const text = "this is\n apple"; return ( <div> <p>{text}</p> {/*this is apple*...

useControls란? useControls는 leva 라이브러리에서 제공하는 함수로, UI 컴포넌트를 생성하고 웹화면에서 실시간으로 상호작용적으로 값을 변경할 수 있게 해줍니다. 3D 객체의 속성을 조작하기 위해 사용할 수 있으며, 이를 R3F에서 사용하면 편리한 UI를 제공할 수 있습니다. 설치 npm install leva useC...

React에서 three.js 사용(1) 지난 글에 이어서 평평해 보이는 직육면체를 3D로 보이게 만들고 빛이란 것도 추가해볼 것 이다. 3D로 만들기 직육면체를 우리가 원하는 3D처럼 보이게 하는 것은 간단하다 OrbitControls 컴포넌트를 Canvas 컴포넌트 안에 넣어주면 된다. //App.js import { Canvas } fr...

three.js란? 웹 브라우저에서 3D 그래픽을 생성하고 렌더링하기 위한 JavaScript 라이브러리입니다. Three.js를 사용하면 웹 페이지에서 다양한 3D 요소를 만들고 조작할 수 있습니다. 라이브러리 설치 npm install three npm install @react-three/fiber npm install @react...

이진 탐색(Binary Search) 이란? 이진 탐색(Binary Search)은 정렬된 배열에서 특정 값을 효율적으로 찾는 알고리즘입니다. 이 알고리즘은 배열의 중간 값과 찾고자 하는 값을 비교하여 탐색 범위를 반으로 줄여나가며 값을 찾아나갑니다. 이진 탐색은 배열의 크기에 비례하지 않고 큰 데이터에서도 빠르게 원하는 값을 찾을 수 있습니다....

useLayoutEffect란? 정의 useLayoutEffect는 React 컴포넌트에서 사이드 이펙트를 수행하는 데 사용되는 훅입니다. ※ 사이드 이펙트: 함수나 메서드가 실행될 때 해당 함수나 메서드의 외부에 영향을 주는 모든 작업을 말합니다 사용상황 DOM 요소의 측정과 레이아웃 조정: 컴포넌트가 렌더링된 후에 DO...