rhanziy

아이콘을 따로 저장하지않고 쉽게 불러와서 사용하기위해 라이브러리를 설치했다.yarn add react-native-vector-icons yarn add --dev @types/react-native-vector-icons ios그리고 생성된 node_modules/react-native-vector-icons 폴더에서 Fonts 파일은 xcode 프로젝트안에 드래그&드롭 info.plist 안에 아래 코드 추가 UIAppFonts AntDesign.ttf Entypo.ttf EvilIcons.ttf Feather.ttf FontAwesome.ttf FontAwesome5_Brands.ttf FontAwesome5_Regular.tt..

( 만 14세 이상 입니다. (필수) } /> )} /> 부모컴포넌트에서 controller로 자식 checkbox의 value를 제어했었는데, 기능은 잘 되지만 콘솔에 Ref Error가 떴다.React에서 Ref를 사용하는 경우VanillaJS와 달리 React에서는 특정 DOM을 직접적으로 수정해야하는 경우, Ref를 사용!특정 element에 포커스, 속성값을 관리할 때.특정 element에 애니메이션을 직접적으로 실행시킬 때.서드 파티 DOM 라이브러리를 React와 같이 사용할 때.출처: https://sambalim.tistory.c..

1. 웹뷰 이벤트 페이지로 넘어가야함.2. 개발서버에서 iOS에서는 접속이 정상적으로되고, 안드로이드에서는 자꾸 ERR_CONNECTION_REFUSED 가 떴다.3. 실서버는 정상 작동함.4. 접속할 url 은 http://localhost:4200~~~~ 시도 1.  localhost 부분을 10.0.2.2로 바꾸면 된다해서 replace시도해봤지만 여전히 접속안댐.시도 3. localhost 부분을 내 ip로 바꿔서 접속 시도해봤지만 안댐.시도 2. AndroidManifest에 useCleartextTraffic = true 를 추가해보라했지만 안댐.// AndroidManifest.xml // 어쩌구 해결책해당 포트가 아직 ADB에 전달되지 않았기 때문에 로컬 개발 서버에 액세스할 수 없는..

검색 서치바에 키워드를 입력하면 등록된 상품 중, 해당 키워드가 include되어있으면 리스트에 노출하는 기능을 구현했었다.보통 이런 경우에 사용자가 input에 입력하거나 지울때마다 키워드가 있는지 없는지 비교를 하는데, 과도한 요청 및 처리를 수행하게 될 경우 발생할 수 있는 성능 저하를 막기 위해 연속적으로 호출되는 함수 중 마지막 함수만 호출하는 debounce 기법을 사용하여 제어한다. 기존 구현했던 방식은 setTimeout을 이용해서 키워드 입력 후 일정 지연시간 후에 리스트를 노출해주었었다. const [inputKeyword, setInputKeyword] = useState(keyword ?? ''); useEffect(() => { const debounce = setTime..

그냥 flatList ref는 보통 이렇게 사용했을거다.ref = useRef(null);ref.current?.scrollToOffset({offset: 0, animated: true}) 그런데 useAnimatedRef를 쓰면 ref.current에 scrollToOffset이 없다고 타입에러가 뜰것임. const ref = useAnimatedRef>(); ref.current?.scrollToOffset({offset: 0, animated: true}); 원래 쓰던대로 쓰는방법은 바로~ react-native-reanimated.d.ts 파일에 가서 수정해주면댐.export interface FlatList extends ReactNativeView {}-> ..

하하 ~ 한때 잠시 했던 스프링과 jsp로 프로젝트를 진행하다가 리액트 네이티브를 하게되니,,, 사용자 인풋값을 처리하는 방식이 달라서 헷갈렸다!! 리뷰 댓글 기능을 만들다가 마주치게 된 에로사항인데, 일단 리뷰의 데이터타입은 이렇다. interface IReview { id: number; rating: number; content: string; images: string[]; createdAt: string; reviewer: { id: number; nickname: string; profileImage: string; }; store: { name: string; region: { name: string; }; }; product: { name: string; image: string; }; c..

화면 플로우 1. 가게에 들어가 주문할 상품을 선택한다. 2. 선택한 상품 페이지에서 주문 정보 작성하기 버튼 클릭! 3. 관련 정보를 입력한다. 4. 주문 정보 확인 페이지에서 확인 후 결제로 이동 각 페이지가 1개씩 구현되어있고, 3번에서 입력한 정보를 4번 페이지에서 확인할 수 있어야 하기때문에 3번 페이지 입력form 값들을 onsubmit 요청을 하면 navigation에 태워 4번 페이지에 넘겨줘야하는 상황 3번 페이지 OrderInfoScreen (기능 외 나머지 코드는 생략했습니다.) const OrderInfoScreen: React.FC = () => { const {pageMove, canSubmit, ...methods} = useOrderInfoForm(productId); ret..

RefreshControl 스크롤뷰(scrollView)나 리스트뷰(FlatList)에서 상단에서 하단으로 끌어내려서 새로고침할 수 있는 기능이다. 🔽 공식문서 코드 import React from 'react'; import { RefreshControl, SafeAreaView, ScrollView, StyleSheet, Text, } from 'react-native'; const App = () => { const [refreshing, setRefreshing] = React.useState(false); const onRefresh = React.useCallback(() => { setRefreshing(true); setTimeout(() => { setRefreshing(false); }..