Job

[React , HTML] 겹쳐진 항목클릭시 자식요소 클릭 이벤트 발생시키기

1. 문제발생 답변 2번입니다. 를 자세히보면 위에 그라데이션이 들어간 element가 해당 항목을 덮고있다. 겹치는 요소가 있어서, 저 항목에서만 클릭이벤트가 발생하지 않았다. 2. 문제해결 css 속성중에 'pointerEvents' 라는 항목이 존재한다. 요소에 포인터속성을 관리해주는 속성인데, pointerEvent를 none을 주게되면 포인터 이벤트자체가 사라지게된다. 정상적으로 잘 작동한다.

[React] 도넛 프로그레스 animation 적용 (style-component, transition)

1. 구현목적 구현을 하게된 계기는 도넛 progress를 만들어야하는데, 라이브러리는 사용하고싶지 않았고, 내가 직접 한번 만들어보고 싶었다. 그것도 컴포넌트로 말이다! 사용한 라이브러리는 style-component밖에 없다. 혹시나 스타일 컴포넌트에서 props를 사용못하는 사람들은 document 한번 읽고오길 권장한다... 2. 구현 코드 import { styled } from "styled-components"; import { CustomFlex } from "../theme/style"; interface DonutBackType { width : number, height : number, frontColor : string, backColor : string, donutper : nu..

[React Native, React] React 상태관리 라이브러리 Zustand

Zustand 독일어로 '상태' 라는 뜻을 가진 단어이다. React의 상태 관리를 위한 라이브러리로써, 간단하고 직관적인 API를 제공해준다. 그리고 기존 상태관리라이브러리에서 발생하던 불필요한 리렌더링을 쉽게 방지할 수 있고, provider hell 문제를 해결할 수 있다. React 혹은 React Native에서 Redux, Redux toolkit 만 사용하던 나에게는 정말 혁신적인 상태관리 라이브러리였다. Zustand의 특징 간단하고 직관적인 API 제공 기존 상태 관리 라이브러리에서 발생하던 불필요한 리렌더링을 쉽게 방지 가능 Provider Hell 문제 해결 가능 - 따로 Provider를 선언할 필요가 없다. Zustand는 타 상태 관리 라이브러리에 비해 번들 크기가 약 크게(Re..

[React Native] FlashList(RecyclerView)에 대해

Flash List https://github.com/Shopify/flash-list npm install or yarn add @shopify/flash-list 비교적 최근에 출시된듯한 라이브러리다. 2022년 1월 알파버전으로 첫 등장하였고, 0.1버전이 2022년 3월 릴리즈 된 라이브러리이다. (Chat GPT도 모르는 라이브러리다... GPT는 21년 9월정보까지 모른다 ㅜ) 마지막 커밋도 2023.4월에 적용되었다. 일단 FlashList는 RecyclerListView를 기반으로 제작이되었다. 여기서 RecyclerListView란? ReactNative에서 ListView를 구현하기위한 컴포넌트인데, FlatList와 비교가 되는 리스트이다. 데이터를 가변크기 항목으로 처리하기때문에, ..

[React Native] Release Build 후 발생하는 Axios Network Error

1. 에러 발생 Debug 모드에서 테스트를 진행하다가, 테스트를 모두 마친 후 Release 모드 테스트를 하기 위해 Apk파일을 추출하였다. 그런데 난데없이 Axios 오류가 발생하지 뭐야... PostMan에서 api를 굴렸을땐 분명히 정상적으로 작동했다. 역시나 이유를 알수가 없으니까 구글링... 2. 원인 파악 결론부터 말하자면 API 호출 주소가 HTTPS가 아닌 HTTP여서 발생하였다. 안드로이드에서는 Debug가 아닌 Release모드에서 HTTP를 사용하면 문제가 발생한다. ClearText Network Traffic ClearText는 암호화 되지 않는 데이터를 뜻한다고 한다. 고로 ClearText Network Traffic은 ClearText를 이용한 네트워크 흐름을 말하는데, ..

[PHP,JS,HTML] form onsubmit에서 ajax사용할때 return 주의

1. 문제발생 //HTML ... function loginCheck(){ $.ajax({ url:'../ajax/ajax_login_check.php', type:'POST', data:{ mt_id : inputId, mt_pwd : inputPw, }, dataType : 'json', async : false, success: function (data) { if(!data.isSuccess){ $("#login_fail").show(); return false; } else{ return true; } } }) } 내가 의도 했던 것은 form에서 ajax를 실행시켜준뒤 false을땐 form action을 실행시키지 않고, true일때만 form action을 실행시키고자 했다. 그런데...뭔..

[React Native] 네트워크 상태 확인 (@react-native-community/netinfo)

1. 설치 //yarn yarn add @react-native-community/netinfo //npm npm install @react-native-community/netinfo 2. 사용법 import NetInfo from "@react-native-community/netinfo"; //상태확인 시작 const unsubscribe = NetInfo.addEventListener(state => { console.log("Connection type", state.type); console.log("Is connected?", state.isConnected); }); //상태확인 종료 unsubscribe(); 1. type은 현재 어떻게 네트워크에 연결되어있는지 출력해준다. (WIFI, ..

[주절...] 슬라이더 정리 블로그 발견

React native 슬라이더를 찾던 도중에 찾은 블로그다. https://wsss.tistory.com/category/Slider/Image%20Slider?page=4 'Slider/Image Slider' 카테고리의 글 목록 (4 Page) 코드펜 레퍼런스 사이트입니다. wsss.tistory.com 진짜 개발하면서 참고하기 딱좋은 블로그... scss는 쓸줄 모르는데 큰일이구마

[ReactNative] yyyy-mm-dd hh:mm:ss Date포맷 getTime()시 NaN출력

1. 문제발생 React Native에서 시간차이를 구해야 했었는데, yyyy-mm-dd hh:mm:ss 형식을 Date 포맷으로 변환후 getTime을 했더니 Nan이 출력됬다. console.log('lastSave ? ' , lastTime.lastSave); //yyyy-mm-dd hh:mm:ss const tempSaveTime = new Date(lastTime.lastSave); console.log('getTime ? ' , tempSaveTime.getTime()); 대체 이유가 뭐길래...대체 왜... 이유가 뭔지 알 수가 없었다. 2.문제분석 https://3-stack.tistory.com/17 [rn] 왜 Date { NaN } 이 나왔지?🤔 new Date('2021-09-30 ..

[ReactNative] 물리 BackButton을 이용한 앱종료

1. 문제발생 앱종료를 시킬건데, 어떻게 해야 물리키로 종료할 수 있을지 생각해보고 있었다. 또한 한번 눌렀을때 토스트 메세지로 한번더 뒤로갈시 종료한다는 메세지를 띄우고자 했다. 2.문제해결과정 https://kinghell.tistory.com/225 로직은 해당 사이트에서 참조했다. //toast 출력 (cusToast.js) export const cusToast = (message, duration, position, offset) => { // Toast.show({ text: message, textStyle: styles.toastTxt, style: styles.toastWr, }); // native-base const str = `{ "message" :"`+message+`" }`;..