들어가며 JavaScript에는 브라우저에서 바로 사용할 수 있는 기본 대화상자 함수가 있습니다. alert, prompt, confirm입니다. 요즘 서비스에서는 커스텀 모달을 더 많이 사용하지만, 간단한 테스트나 학습용으로는 여전히 유용합니다. alert() alert()는 사용자에게 간단한 메시지를 보여줍니다. alert("저장이 ...

들어가며 React Native는 React 문법을 사용하지만, 웹의 HTML 태그를 그대로 사용하지는 않습니다. 웹에서는 div, p, button, input을 사용하지만 React Native에서는 모바일 네이티브 UI에 맞는 컴포넌트를 사용합니다. 이번 글에서는 React Native를 처음 시작할 때 자주 만나는 기본 컴포넌트를 정리해볼...

들어가며 React Native 개발을 시작하려면 프로젝트를 생성한 뒤, 앱을 실행해볼 환경이 필요합니다. 실행 방법은 여러 가지가 있습니다. Expo Go로 실제 기기에서 확인하기 Android Studio 에뮬레이터에서 확인하기 개발 빌드로 실행하기 이번 글에서는 Expo 프로젝트를 만들고 Android Studio 에뮬레이터...

들어가며 React Native는 JavaScript와 React를 기반으로 모바일 앱을 만들 수 있는 프레임워크입니다. React를 공부한 경험이 있다면 컴포넌트, props, state 같은 개념을 이어서 사용할 수 있다는 장점이 있습니다. 이번 글에서는 React Native를 처음 시작할 때 필요한 개발 환경 구축 흐름을 정리해볼게요. ...

비동기 테스트가 필요한 이유 실제 프로젝트에서는 API 요청, 타이머, Promise처럼 바로 결과가 나오지 않는 코드를 자주 다룹니다. 이런 함수는 테스트에서도 결과가 나올 때까지 기다려야 합니다. Jest에서는 async와 await를 사용해 비동기 코드를 자연스럽게 테스트할 수 있습니다. 테스트할 함수 만들기 아래 함수는 3초 뒤 "...

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 ...