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

npx react-native@latest init 프로젝트명 프로젝트 생성 후 시뮬레이터 실행이 안돼서 노드를 깔았따 지웠다 모듈을 날렸다 생성했다 하면서 에라이 다시 프로젝트 생성하자~ 하고 터미널에 입력했는데 npm 오류가 떴다.  npm error code ENOENTnpm error syscall statnpm error path /Users/raniMac/.npm/_cacache/content-v2/sha512/b5/37/cf317838766ab773d9617270de8511dd367bf7467f2b2288457a4bda388fdd00f3b1dc6a77e57848299423f08c9195f61ce16ae9d89f77798b9bc8cc57ddnpm error errno ENOENTnpm erro..

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

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 라이브러리를 통해 ..