유미의 기록들

상품을 찜했을 때 내가 찜한 상품들이 관심목록에 보이도록 구현해보기로 했다 찜하기 Home의 상품디테일 모달페이지에 하트 버튼을 추가하였다 {/*찜하기 버튼*/} state변수인 dipsbuttonclicked가 true이면 빨간색으로, false이면 회색(기본)으로 아이콘 색을 변경되게 하였다 버튼을 클릭했을 경우 dipsButtonClicked=()=>{ if (this.state.dipsbuttonclicked == false) { this.callAddWishAPI().then((response)=>{ console.log(response); }) console.log("색칠하트"); this.setState({ dipsbuttonclicked: true }); } else { this.callR..

지금 진행하고 있는 프로젝트 앱은 카메라/앨범/위치추적 관련 서비스를 이용하기 때문에 이를 접근하기 위한 권한 허용 메시지를 띄우려고 한다 앱 권한을 구현하기 위한 방법에는 2가지가 있다. 1️⃣ React Native에서 제공하는 PermissionsAndroid를 사용하는 방법 (안드로이드만 가능) 2️⃣ React Native permissions 라이브러리를 이용하는 방법 나는 PermissionsAndroid를 사용하여 구현해보겠다 https://reactnative.dev/docs/permissionsandroid PermissionsAndroid · React Native Project with Native Code Required reactnative.dev 구현하기 전에 몇가지 생각해야 ..

상품이미지를 등록할 때 사진을 카메라에서 촬영할 지 아니면 갤러리에서 선택할 지 사용자가 선택하도록 모달을 띄어보려고 한다. React Native에서는 Modal이라는 컴포넌트를 제공한다 따라서 import해서 사용할 수 있다 https://reactnative.dev/docs/modal Modal · React Native The Modal component is a basic way to present content above an enclosing view. reactnative.dev import {Modal} from 'react-native'; class AddGoods extends Component { constructor(props) { super(props); this.state = ..

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