React-Native를 학습하기 위해 노마드 코더의 왕초보를 위한 React Native 101 무료 강의를 들으며 새롭게 알게 된 React-Native의 지식을 써 내려가며 다시 한번 학습해야겠다. React-Native 컴포넌트란? React와 비슷한 구문 및 컨셉을 사용하지만 React-Native는 HTML태그가 아닌 react-n...

지난 시간 React-Native 개발환경 구축 후 프로젝트 생성과 안드로이드 앱 테스트를 위해 가상 기기를 화면에 만들어야한다. 앱을 개발하며 테스트하는 방법은 여러가지가 있지만 고등학교 시절 Android Studio를 사용해봤기에 Android Studio 에뮬레이터를 채택했다. 테스트 방법 Android Studi...

React-Native 시작하게된 계기 기존 react를 다뤘다면 크게 어렵지 않을 것이라는 지인의 추천으로 react-native에 흥미를 가지게 되어 도전하게 되었다. 그래서 제일 먼저 react-native가 무엇이며 개발 환경을 세팅하려면 어떻게 해야 하는지 알아보았다. React-Native란? 리액트 네이티브(React Na...

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