rhanziy

1. [패키지명]/android/app/src/main/assets 폴더가 있는지 확인하고 없으면 생성 2. [패키지명]/android 폴더에서 ./gradlew clean 실행 3. [패키지명] 폴더에서 아래 명령어 실행react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle 4. yarn android

2024.05.20 업데이트 🥹계속 빌드가 안돼서 찾아보다 해결한 방법.... intel 돌리다가 m3칩으로 맥북을 업그레이드하고 안됐던 개발셋팅 과정이다.iterm2 터미널을 설치하는 이유가 Intel과 Apple Silicon간에 소통을 도와주는 로제타(Rosetta)를 사용하기 위해서라고 한다. (일반 Terminal과 Iterm2(로제타 용)로 두개를 사용한다.) 먼저 로제타를 설치해주고 agree를 입력해 license동의를 한다.softwareupdate --intall-rosetta  그 후 파인더(Finder) > 응용프로그램(Application) > iterm 우클릭 및 정보가져오기 클릭 > Rosetta를 사용하여 열기 체크  그리고 프로젝트 경로로 들어가서 yarn ios를 했더니..

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..

https://www.npmjs.com/package/react-paginate react-paginate A ReactJS component that creates a pagination.. Latest version: 8.2.0, last published: a year ago. Start using react-paginate in your project by running `npm i react-paginate`. There are 577 other projects in the npm registry using react-paginate. www.npmjs.com 반응형 작업 하던 중, mui로 만든 전형적인 데스크탑 페이지네이션과 다른 ui가 필요해서 react-paginate 라이브러리를 통해 ..

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 {}-> ..