rhanziy

선택 최대 갯수 제한이 없었는데 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 높이가 다르니 높이를 구해주는 라이브러리를 사용하든가... ..

why ? 가게 전체 상품에 대한 리뷰를 가져올때 reviews/{ storeId } 로 데이터를 요청하잖아요?? 근데 useInfiniteQuery 공식문서에는 암만 찾아봐도 fetchApi 함수에 파라미터 여러개 넘기는 방법이 없어서 찾아봄. 🔽 이게 공식문서 const { fetchNextPage, fetchPreviousPage, hasNextPage, hasPreviousPage, isFetchingNextPage, isFetchingPreviousPage, ...result } = useInfiniteQuery({ queryKey, queryFn: ({ pageParam = 1 }) => fetchPage(pageParam), ...options, getNextPageParam: (lastPa..

기존에 구현되어있는 상품리뷰에 점주들이 댓글을 작성할 수 있는 기능을 추가해야했다. 그러면서 storeId 에 딸린 리뷰 목록을 불러오는 페이지를 새로 만들면서 겪은 시행착오~ 리액트 네이티브에서는 보통 무한스크롤 + 페이징으로 처리하는 것 같아 정리를 해놓고자 한다. 1. useInfiniteQuery 파라미터 값만 변경하여 동일한 useQuery를 무한정 호출할 때 사용하는 react query의 hook이다. useQuery와의 차이점은 ✅ 반환 객체에서 반환된 데이터 프로퍼티의 형태 useQuery에서의 데이터는 단순히 쿼리함수에서 반환된 데이터이고, useInfiniteQuery에서는 두개의 프로퍼티를 가지고온다. 하나는 데이터 페이지 객체의 Array 이고, 페이지 하나하나에 있는 요소가 us..

기존 next.js 프로젝트를 로컬에 셋팅하는법! 1. 일단 터미널에서 작업폴더 경로로 들어간 후 프로젝트 클론받기.git clone 원격저장소 주소 2. git ignore에 의해 node modules폴더가 텅 비어있을테니 모듈 다운로드yarn install / npm install 3. 이 프로젝트는 관리자/사용자/점주 3가지 프로젝트가 한곳에 저장된 모노레포 구조로 되어있어서 nx를 전역에 설치해줘야한다.yarn global add nx@latest 4. .env파일 생성 및 api url 주소 설정 5. 서버 실행nx serve 어플리케이션이름   2024 //nx serve 프로젝트명zsh: command not found: nx 이 에러가 떠서 찾아봤더니npx 를 앞에 붙이라했다. 그리고 실..