유미의 기록들

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

이번에는 카메라를 구현해보도록하겠습니다 ✅ 비전카메라 라이브러리 설치 npm install react-native-vision-camera": "^2.14.1 ✅ android > app > src > main > AndroidManifest.xml 에 추가 적용하기 import { Camera } from 'react-native-vision-camera'; class VisionCameraView extends Component { constructor(props) { super(props); this.camera = React.createRef(); this.devices = []; this.state = { imageInputValue:[], imageURLs: [], device: null, m..

React Native는 콤보박스 컴포넌트를 제공해주지 않는다 따라서 라이브러리를 따로 설치해야 한다 ❓ 왜 많은 APIs와 Components가 ReactNative에서 제공하지 않는 걸까? ✔️ 초기에 ReactNative팀은 사람들에게 가능한 많은 APIs와 Components를 제공하고 싶었다 하지만, 그렇게 할 수 없다는 것과 정말 많은 버그가 있다는 것을 깨달았으며, 유지관리와 업데이트가 어려워서 모든 Components를 지원하는 게 어렵다고 생각했다 따라서 Components, API를 줄이고 가장 중요한 기능만 남았다고 볼 수 있다 처음에 구글링을 하면서 하다보니 react-native-dropdown , react-native-material-dropdown 등 오만가지 라이브러리를 설..