일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- generic
- 배열중복요소제거
- 리액트네이티브아이콘
- TS
- 스크롤이벤트
- mainapplication.kt
- reactnative
- 안드로이드빌드에러
- npm에러
- extends
- Spring
- interface
- app:compiledebugkotlin
- err_connection_refused
- async
- javascript
- array
- react
- forwardref type
- reactnative error
- 타입스크립트
- map
- 상속
- materialicons
- set
- 이진탐색
- app.post
- 슬라이딩윈도우
- Filter
- Next.js
- Today
- Total
목록전체 글 (157)
rhanziy
const onSubmit = handleSubmit((data) => { router.push({ pathname: '/경로', query: { ...data }, }); }); const { query, ...router } = useRouter();const methods = useForm({ defaultValues: { productName: (query.productName as string) ?? undefined, storeName: (query.storeName as string) ?? undefined, },});검색버튼을 누르면 라우터 경로에 query를 붙여서 결과 리스트를 보여주는 페이지를 만들고있었다.하지만 새로고침을 하면 ur..
https://swiperjs.com/demos Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 시작해볼까. $ npm install swiper 만들고싶었던 UI형태는 이렇다. 센터가 고정되면서 슬라이드되는 카드 공식문서에서 제공하고있는 React 코드를 보면, (다른 말이지만 코드샌드박스 진짜 안열린다 개빢침) import { Pagination } from "swiper/modules"; import { Swiper, SwiperSlide } from "swiper/react"; import ..
그냥 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 {}-> ..
선택 최대 갯수 제한이 없었는데 2개로 제한하기위한 코드.! FormContext에서 제공하는 watch에 useState도 써보고 onChange={onChange}로 target.value 콘솔도 찍어보았지만 잘 안됐다. 여기서 알게된 mui select컴포넌트의 onChage 속성 특. One Two Three 최대 2개 {capacityOptions.map((text, i) => ( {text} ))} onChange={onChange} 로 코드를 짰는데 select가 정상적으로 안되는 것! onChange는 클릭이벤트에 대한 응답으로 menuItem을 호출하는데, mui select에서 기본으로 제공하는 handleMuiSelectOnChange를 써야 이벤트 버블링이 된다고~ const han..
하하 ~ 한때 잠시 했던 스프링과 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); }..
사용자 인풋이나 form작성 시 키보드에 가려져서 입력폼이 안보일 때가 있다. 그럼 KeyboardAvoidingView를 쓰자! 안드로이드와 ios 플랫폼에 따라 조건처리해줘야댄다~ ios는 padding으로! 확인해보면 autoFocus 속성으로 인해 자동으로 포커스가되며 키보드에 더이상 가리지 않게 될 것. 그 외에도 View 컴포넌트처럼 style을 적용하거나 다른 방식으로 다룰 수 있다. 그래도 가린다면 높이 값을 더 설정하자! 👉 keyboardVerticalOffset {...} 사실 이쪽은 아직 잘 이해가 안됨. KeyboardAvoidingView + 적절한 padding 값 조절로 해결하는 방법인데, 기기별로 statusBar 높이가 다르니 높이를 구해주는 라이브러리를 사용하든가... ..