공부 기록장

그라데이션 배경을 설정하기 위해 React Native에서 linear-gradient를 사용하려고 했다.Andorid와 Web 두 가지 OS를 동시에 개발하는 상황에서 linear-gradient 패키지를 설치하니 버전 충돌이 발생했다.그에 따라서 버전 충돌로 인한 현재 설치된 React 및 React DOM을 제거하고, 호환되는 버전을 설치하니 해결되었다.방법은 아래와 같다. 1. 버전 충돌로 인한 현재 설치된 React 및 React DOM 제거npm uninstall react react-dom// 종속성 충돌로 제거가 불가능 할 경우 충돌 무시하고 제거npm uninstall react react-dom --legacy-peer-deps 2. 호환되는 버전 설치npm install react@1..

Android OS에서 녹음 기능 구현하기Expo 라이브러리의 여러 모듈을 활용하여 녹음 및 파일 저장 기능을 구현할 수 있다.우선 공식 문서를 읽어볼 것을 권한다.https://docs.expo.dev/versions/latest/sdk/audio/ AudioA library that provides an API to implement audio playback and recording in apps.docs.expo.dev   1. 권한 요청 및 패키지 설치expo install expo-avexpo install expo-media-library // 미디어 파일 관리expo install expo-file-system // 파일 시스템에 접근하여 파일 생성, 읽기, 쓰기, 이동, 삭제  useE..

CLI 환경에서 linear-gradient 라이브러리를 설치하고, web과 android 두 OS를 모두 빌드하는 과정에서 다음과 같은 에러가 발생했다Module parse failed: Unexpected token (8:36)You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.react-native-linear-gradient는 주로 모바일 환경에서 사용되기에 TypeScript 주석을 Webpack이 처리하지 못해서 발생하는 문제라고 한다.해결방법은 간단하다웹 환경에서 react-native-linear-gradient를 사용하지 않도록 설..

React Native에서 녹음 버튼의 애니메이션을 적용해보도록 하자 React Native1. 상태와 값 설정하기const animatedValue = useState(new Animated.Value(1))[0];animatedValue의 값 1은 애니메이션에서 시작 시의 기본 상태를 나타난다. 이 값은 아래에 나오는 Animated.timing 메소드에서 toValue를 어떻게 설정하느냐에 따라 달라진다.예를 들어서, animatedValue가 0에서 3 사이의 값일 때 해당 범위로 매핑된다. 2. Pulse 애니메이션 시작하기 const startPulseAnimation = () => { console.log('Pulse animation started.'); Animated..