moomood

https://reactnative.dev/docs/textinput TextInput · React Native A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. reactnative.dev Props - placeholder - keyboardType : 입력모드에 들어갔을 때 키보드 유형을 지정해 준다. 직접 사용해 ..

1.TouchableWithoutFeedback https://reactnative.dev/docs/touchablewithoutfeedback TouchableWithoutFeedback · React Native If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API. reactnative.dev - UI 효과가 없이 터치했을 때 이벤트를 지정해 줄 수 있다. Props onPress : 터치가 시작되어 끝나는 시점에 호출되는 이벤트를 지정해 줄 수 있다. ( === onClick ) onPressIn : 터치가 시작되는 시점에 이벤트를 지정할 수 ..

https://docs.expo.dev/versions/latest/sdk/location Location Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.dev #expo-location 설치 > npx expo install expo-location Method 1. 디바이스 권한요청 (필수) - requestBackgroundPermissionsAsync() : 백그라운드 권한요청 - requestForegroundPermissionsAsync() : 포그라운드 권한요청 - getLastKnownPositionAs..

https://reactnative.dev/docs/scrollview ScrollView · React Native Component that wraps platform ScrollView while providing integration with touch locking "responder" system. reactnative.dev import {View, ScrollView} from 'react-native'; export default function App() { return ( // 이곳의 컴포넌트들은 scroll 처리 된다. ) } Props - horizontal : 수평 스크롤 모드 (기본 false) - [IOS] indicatorStyle : 스크롤바 스타일 지정 - pagingE..

https://reactnative.dev/docs/dimensions Dimensions · React Native useWindowDimensions is the preferred API for React components. Unlike Dimensions, it updates as the window's dimensions update. This works nicely with the React paradigm. reactnative.dev import {Dimensions} from 'react-native'; const windowWidth = Dimensions.get('window').width; const windowHeight = Dimensions.get('window').height..

실제 react native app을 만들기 위해서는 컴파일을 위한 프로그램이 필요하지만 테스트 / 학습에는 expo를 이용하여 컴파일 과정을 대체할 수 있다. https://expo.dev/ Expo Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. expo.dev expo 실행을 위해 로그인이 필요하니 가입하도록 한다. # 1.expo-cli 설치 > npm install -g expo-cli # 2.expo app 생성 > npx create-expo-app my-app # 3.expo app login > npx expo login..

> npm i gh-pages > npm run bulid package.json 맨 마지막에 homepage 추가 https://본인 github id.github.io/레파지토리 명 이후 빌드 -> push 작업 편의성을 위해 scripts에 deploy, predeploy를 작성해 준다. predeploy : deploy 실행 전 먼저 실행할 명령어 deploy 명령어 실행 전, 프로젝트 폴더가 git에 remote 된 상태여야 한다. > git remote add origin {repository url} > git remote -v 정상적으로 remote 된 상태라면 -v 옵션으로 아래와 같이 확인 가능하다. 이제 deploy 명령어를 실행하면 자동으로 git push 및 자동으로 github ..

- useState 표현 const [counter, setCounter] = React.useState(0); 위와 같이 정의된 counter라는 state 값이 있을 때 1. 특정 값으로 바꾸는 경우 setCounter(12345); 2. 기존의 index 값을 기준으로 바꿀 경우 아래와 같이 써주는 것이 안정성 면에서 우수하다. setCounter(curIndex => curIndex + 1); - React Memo React는 state 변경이 일어나면 내부 컴포넌트 전체를 re-render 한다. 그러나 memo를 통해 만들어진 컴포넌트는 본인의 props가 변경되지 않으면 state 변경이 일어나더라도 re-render 하지 않도록 하다. - PropType 컴포넌트에 전달 받는 props ..

1. 개발 환경 : vscode, node js 2. 설치 명령 터미널 > npx create-react-app . 3. 서버 시작 명령 터미널 > npm start (리엑트 기본 포트 : 3000) 5. 초기 실행화면

프로젝트 생성 당시 router를 히스토리 모드로 생성하였으나 해시모드로 사용해야 하는 상황에 수정 방법을 찾아보았으나 vue2 기준의 내용밖에 없어 코드 공유차 포스팅 합니다. 히스토리 모드로 프로젝트 생성 시 아래와 같이 createWebHistory로 생성됩니다. // src/router/index.js import { createRouter, createWebHistory} from 'vue-router' import HomeView from '../views/HomeView.vue' const routes = [ { ... 생략 ... } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes ..