일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- React Native
- backHandler
- 경우의 수
- 백준 1992
- 찜하기
- apk파일 추출
- 폴더구조
- 완전탐색
- BFS
- react
- 앱 권한
- 해외 대외활동
- web view
- 이영직
- 휴대폰 기기
- 노마드코더
- web in app
- 비트마스킹
- Project Bee
- 원복
- 자료구조
- 관심내역
- bfs dfs
- React Natvive
- Navigation
- 창의충전소
- FlatList
- ReactNative
- 구현
- 버튼 활성화
- Today
- Total
유미의 기록들
navigation.navigate() 함수로 페이지 이동을 할 때 두번째 인자에 Params를 전달할 수 있었다 add_goods.js componentDidUpdate(prevProps,prevState){ if(prevProps.route.params.imageURLs !=this.props.route.params.imageURLs){ this.setState({imageURLs: this.state.imageURLs.concat(this.props.route.params.imageURLs)r}); } } this.props.navigation.push("Gallery", { imageLength: this.state.imageURLs.length }); gallery.js this.props.na..
❗ Stack안에 Tab이 있는 구조여서 Home페이지(Tab)에서 뒤로가기 했을 경우 로그인페이지(Stack)가 보이는 문제가 있었다 따라서 Home페이지에서 뒤로가기를 했을 경우 , Alert이 뜨고 앱을 종료하는 것을 해보겠다 https://reactnative.dev/docs/backhandler BackHandler · React Native The Backhandler API detects hardware button presses for back navigation, lets you register event listeners for the system's back action, and lets you control how your application responds. It is Andro..
상품등록 Page에 추가할 #해시태그 기능을 구현하였다 class HashTag extends Component { constructor(props){ super(props); this.hashTagRef = React.createRef(); this.state={ hashTag:[], tagName:'', } } hasTag : 해시태그 배열 tagName: 각 입력한 변수 {/* 키워드 */} 키워드 {this.state.hashTagError == false ? ( * 1 - 7개 입력 ) : null} { this.hashTagRef = c; }} returnKeyType="next" onSubmitEditing={this.addTag} onChangeText={(value) => this.set..
React Native Directory에 다양한 라디오버튼 라이브러리들이 나와있지만, 라이브러리를 사용하지 않고 직접 구현해보겠다 💡 배송방법 선택하기 ( 자가배송 or 웨얼파츠배송) 1. 버튼 안에 빈 체크박스 아이콘을 추가 2. 클릭 했을 경우 ( focus를 감지해서 아이콘 변경, state값 바꾸기) class RadioButton extends Component { constructor(props){ super(props); this.state={ deliveryMethod:'', s_focused:false, w_focused:false, } } ... * focused가 true이면 체크된 아이콘 표시, false이면 빈 아이콘 자가배송 웨얼파츠 자가 배송 버튼을 클릭했을 때 s_focus..
이전에는 다음 주소 API를 사용하기 위해 라이브러리를 설치하여 쉽게 구현할 수 있었다 하지만, API를 사용하는 법을 제대로 습득하고, 디자인에 대한 자율성을 주고자 행정안전부에서 제공하는 도로명 주소 오픈 API를 사용해서 직접 구현해보기로 하였다 https://business.juso.go.kr/addrlink/openApi/searchApi.do 검색API 본인인증 사용중인 휴대전화번호로 인증 인증하기 아이핀 인증 본인 명의 아이핀 계정으로 인증 인증하기 business.juso.go.kr 1. 승인키 발급받기 승인키는 도로명주소 개발자센터 페이지에서 신청하여 실시간으로 발급 가능하다 2. 승인키 적용방법 행안부 도로명 주소 API는 URL 형태로 제공되며, API요청 URL을 호출하기 위해서는 ..
진행하고 있는 프로젝트에서 상품을 주문을 할 때 주소 검색 API를 사용할 일이 생겼다 1. 행정안전부 도로명 주소 API 2. 다음 주소 API 도로명개발자 센터에서 제공하는 API가 있지만 실제로 다음 주소가 훨씬 많이 쓰이며 key 발급도 필요 없고 사용법도 매우 편리하다 구글링을 하던 중, 대부분의 사람들이 react-daum-postcode 라이브러리를 사용한다는 것을 알게되었다 ✅ 다음 postcode 라이브러리 설치 npm install @actbase/react-daum-postcode ✅ WebView 라이브러리 설치 npm install react-native-webview https://github.com/actbase/react-daum-postcode GitHub - actbase..
Web View: 기존에 있던 웹페이지를 앱으로 옮기는 것 이전에는 자체적으로 지원을 해주었지만 현재는 지원하지 않는 상태이다 따라서 공식 홈페이지에서 추천하는 react-native-webview 라이브러리를 설치하겠다 https://github.com/react-native-webview/react-native-webview GitHub - react-native-webview/react-native-webview: React Native Cross-Platform WebView React Native Cross-Platform WebView. Contribute to react-native-webview/react-native-webview development by creating an accou..
상품등록 Page에서 사진 등록하는 부분을 5개로 제한을 주려고 한다 상품등록 Page 부분 ✔️ 갤러리로 이동하면서 배열크기 전달 🚫 이미지 배열크기가 5이면 경고창 뜨기 and 갤러리로 이동할 수 없음 // 갤러리로 이동 goGallerySreen=()=>{ if(this.state.imageURLs.length==5) { alert('이미지는 최대 5장까지 선택할 수 있어요'); } else { this.props.navigation.navigate('Stack',{screen:"Gallery", params:{imageLength:this.state.imageURLs.length}}); } } 갤러리 Page 부분 ✔️ 상품등록에서 받은 imageLength값을 state값 변수로 넣어주기 thi..
Stack과 Tab을 함께 사용하는 것을 구현해보았다 여기서 Drawer Navigation을 추가할 것이다 Drawer 내비게이션 ✅ Drawer 내비게이션 라이브러리 설치 npm install @react-navigation/drawer ✅ 추가 라이브러리 설치 npm install react-native-gesture-handler react-native-reanimated ❔ React Native 개발을 하다가 reanimated 에러가 발생하는 경우가 있다. 다른 라이브러리와 충돌하면서 생기는 것인데 Reanimated가 왜 필요할까 React Native에서 JS Thread가 처리해야할 작업의 양이 많아서 UI에 비해 JS Thread의 작업이 빈번하게 지연되는 문제가 발생한다 Reanim..
상품등록screen → 갤러리screen → 카메라screen으로 push했을 때는 componentDidMount()가 실행이 되었다 하지만, 카메라screen → 상품등록screen으로 goBack했을 때 카메라screen에서 받아온 데이터를 상품등록screen의 state에 넣어줄 것을 예상했지만 constructor, componentDidMount()가 아예 실행이 되지 않았다 즉, 재렌더링이 이루어지지 않고 있다는 느낌을 받았다 리액트 네이게이션 공식문서를 보면 네이게이션 라이프 사이클이라는 것이 있었다 https://reactnavigation.org/docs/navigation-lifecycle https://reactnavigation.org/docs/navigation-lifecycle..