eunoia

구조분해 const renderItem = ({ item: image, index }) => { const { id, uri } = image; //구조분해 : image를 쓸 수도 있고, id, uri도 단독으로 쓸 수 있다. ... }

240111 Style - justifyContent : (좌-우) 컨테이너의 flex direction 방향에 따라 배치되는 flex 적용 대상들의 사이 간격과 주변의 여백을 지정. 부모컨테이너 내의 자식 엘리먼트들의 위치 지정. 컴포넌트들을 진행 방향에 따라서 어떻게 배치할지 지정 - alignItems : (위-아래) 부모 view 컴포넌트에 선언. flex가 적용 가능한 자식 요소들에 영향을 미친다. 컴포넌트들을 보조축을 따라 어떻게 배치할지를 지정 - alignSelf : 자식요소에 직접 지정 부모 컨테이너에 지정된 alignItems 속성값을 오버라이드 할 때 사용 내비게이션 탭 내비게이션 스택 내비게이션 드로어 내비게이션 # 탭 내비게이션 : 화면의 위나 아래에 탭이 있고, 탭을 누르면 탭과..

현재 내 상황 컴퓨터 : 맥북 프로 16 -버전 : macOS 14.2.1 xcode : 15 ———————cli 문제 해결 ——————— 프로젝트 설치 전 : npm uninstall -g react-native-cli @react-native-community/cli //cli 삭제 프로젝트 설치 : npx react-native@latest init efenpx //후 최신 버전으로 재설치 react-native doctor // 문제상황 보고서 ———————Pod dependency 문제 해결——————— After upgrading to latest version of gems and cocoa pods. can run any pod commands * sudo gem uninstall acti..

작은 단위 컴포넌트부터 만들기 Atomic design pattern : 작은단위부터 큰 단위까지 컴포넌트를 조합해 만들어가는 것 (Lego 조립과 비슷) React-natived에서 자주 사용하는 hook -useWindowDimensions // 디바이스별로 화면 크기를 조절할 수 있다. export const ComponentA = (props) => { const {window, height}=useWindowDimensions(); {…etc code} } -useBackHandler npm install @react-native-community/hooks -useAppState npm install @react-native-community/hooks -useNavigation, useRou..

커뮤니티 기능 구현 중 글쓰기 버튼을 두 번 누르니, 글쓰기 함수가 두 번 실행되어 글이 중복 작성되는 오류를 발견하였다. 구글링 결과 해결방법은 1. state를 만들어 버튼 disabled 속성에 적용한다. 2. 버튼을 눌렀을 때 state값이 true로 변하게 하여 버튼이 눌리지 않게 한다. 3. 혹시나 눌렀을 경우를 대비해 버튼을 눌렀을 때 실행되는 함수에서도 실행되었을 때 state값이 true로 변하게 하여 버튼이 눌리지 않게 한다. //그러면 2번에서 혹시나 중복으로 누르게 되었어도 첫 번째 함수가 실행되었을 때 state값이 true 가 되므로 함수가 두 번 실행되지 않는다. 함수가 끝났을 때는 다시 state가 false로 바뀐다.(state의 기본값) 예) 1. state 값 설정 #..

- 빈배열인 경우 확인 -->> [삼항 연산자 ] 리스트. length > 0 ? True : false - textInput 에서 placeholder 정렬 -->> padding이용 - 날짜 포맷 변경 -->> .format 사용 {moment(item.regDate). format('YYYY 년 MM월 DD일')} - 맨위로 기능 구현을 위해 useRef를 적용할 때 scrollView는 scrollTo , flatList는 scrollToOffset 이용! (flatList에 scrollTo 하면 undefined!)

swiper가 적용이 안되어서, swipeable을 써보기도 하고, 별의별 방법을 며칠 동안 다 시도해 보았다. 결국 버튼을 이용해 개발 업데이트를 진행했는데, 역시나 계속 시도해 보고, 알아보니 해결되었다. 생각보다 간단해 허무하기도 했다. 해결 : swiper를 presseble이 감싸고 있었기 때문에 적용이 안되었던 것. 예) ... TouchableOpacity로 감싸도 마찬가지였다. 페이지에 컴포넌트가 두 개인 상황이었고, 아래 컴포넌트를 이용 중 위 컴포넌트를 눌렀을 때 아래 컴포넌트의 내용이 reset 될 수 있게 하려고 swiper가 있는 위 컴포넌트를 presseble로 감싸 onPress속성으로 setState를 적용하고 있었다. 예) setState(! state)}> ... *st..

@ map - array에 object 넣기 문제 : const [images, setImages] = useState([]); const images = res.assets.map( item => { const image= { name:item.fileName, type:item.type, uri:item.uri } return image }) setImages([image]) // images가 빈 배열이라 바로 setImages에 담았고, 하나의 array가 되었다. 다만, 기존에 있는 배열에 image를 추가하고 싶은 경우라면 const images = res.assets.map( item => { const image= { name:item.fileName, type:item.type, uri:..

장점 : -하나의 코드로 관리, 러닝커브 높은 React사용 -코드푸시로 빠른 업데이트 -> 비용절감 -FastRefresh -오픈소스 플랫폼 단점 : -일부기능 Native접근 필요 -오픈소스, 라이브러리 의존도 -성능 -잦은 업데이트 Event를 전달하기 위한 함수를 제공 -onCreate:애플리케이션 실행될 때 최초 호출 -onTerminate:애플리케이션 종료될 때 호출 Manifest : android 앱의 메타정보를 요약해서 선언해둔것

npm install 이후에 스크립트를 사용하여 버전을 비교 한 뒤 지정한 패치내용이 적용되는 것 설치방법 : 1) npm install --save patch-package 2)package.json 의 script 부분에서 postInstall 선언 3) npm i 4) npx patch-package react-native-kakao-share-link 5) rm -rf node_modules // 노드모듈 제거 후 npm i // 하게 되면