야니와 충스의 햄볶기

이번에는 map based chat app, example 입니다. 개발 환경: react native, iphone, expo install : firebase, react-native-maps, mement 등등 android user 는 google map, iphone user 는 apple map app으로 동작하며 user message 입력 시 본인 위치와 message, 그리고 timestamp 이렇게 세가지정보가 다른 user에게 보이는 app 입니다. tinder app이 지도기반으로 이런식의 동작이 있었던 것 같네요. 완성 화면은 아래와 같습니다. expo project 생성하고 install 합니다. 그리고 필요한 pkg 들을 미리 install 해놓습니다. - moment: tim..

아이패드 미니5 ​ 남치니가 선물로 준 아이패드 미니5. (왜 선물을 줬는지는 기억이 안난다ㅎㅎㅎ 그래도 고맙뜹니다) ​ 받아서 사용한지는 이미 6개월이 지났지만 너무나 뒤늦게 쓰는 사용기.. ​ 미니를 살까 그냥 아이패드를 살까 고민하다가 주로 책읽기 용도로 쓰고, 작은 가방에 들어갈 것 두가지 조건에 부합하는 것은 미니라서 미니로 질렀다! 로즈골드 색상이 넘나 이쁘다 역시 애플은 로즈골드! ​ ​ 아이폰의 큰 버전 같은 미니. ​ 2020. 1.에 제조한 것이라고 한다. ​ 스페이스 그레이와도 고민했는데 역시 로즈골드로 하길 잘했다. ​ ​ 사이즈를 비교하기 위해 책과 비교샷을 찍어보았는데 일반 책하고 비교하면 미니가 조금 작은 수준이다. ​ ​ 나의 데일리백이 미니 사이즈임에도 맞춘 듯이 아주 잘 ..

지난 번 React Native 네이버지도 연동에 이어 React Native 네이버지도 연동 리액트 네이티브 네이버지도 연동 방법 입니다. 개발환경 : Android, react-native cli (expo 아님) 구글링을 열심히 해본 결과 크게 2군데 react-naver map 브릿지를 제공하고 있었습니다. - zeakd.github.io/rea.. yannichoongs.tistory.com 오늘은 지도화면 클릭 시 marker 표시를 해보겠습니다. 변경 된 코드 적용 시 대략 이런 동작을 하게 됩니다. MapViewScreen function component 를 아래와 같이 변경합니다. 총 4곳 수정. - 동적 marker 이동을위해 useState 로 location 위도,경도 정의. 초기..

리액트 네이티브 네이버지도 연동 방법 입니다. 개발환경 : Android, react-native cli (expo 아님) 구글링을 열심히 해본 결과 크게 2군데 react-naver map 브릿지를 제공하고 있었습니다. - zeakd.github.io/react-naver-maps/#/React%20Naver%20Maps?id=introduction 장점, Guide Doc 제공. 단점, 지금 app run 안됨... err 발생. React Naver Maps Style Guide zeakd.github.io - github.com/QuadFlask/react-native-naver-map 장점, 아주 잘 동작함 단점, doc 이 없음 QuadFlask/react-native-naver-map 🗺️n..

거진 프로젝트가 완성 되어, 안드로이드 와 IOS device 동작 화면을 비교해봤습니다. Platform 한정 component 를 사용하지 않았기 때문에 거의 비슷하게 동작하고 있네요. 물론 쿠퍼티노 디자인이 훨신 낫습니다. 프로젝트 file은 다음번에 GitHub 에 올릴 예정입니다.

초간단 Android apk decompile 후 source 보는 방법 공유 합니다. 필요한 program 2개 - dex2jar - jd-gui 순서 3단계 - apk 준비 (apkpure.com 에서 아무거나 해도 무방, 안되는 apk 도 있을 수 있음) - dex2jar 압축 풀기 - apk 폴더내 이동시킨 후 해당 위치에서 cmd 창 열어 아래 command. (혹시 안되면 관리자 cmd 명령프롬프트에서 다시 실행) d2j-dex2jar.bat appName.apk 실행 시 C:\Users\xxxx\ProgramDown\Decompile\dex2jar-2.0>d2j-dex2jar.bat Diary3.66.0.apk dex2jar Diary3.66.0.apk -> .\Diary3.66.0-dex2..

stacknavigation 으로 연결된 stack function 끼리 전환하는 case에서 인자에 props 전달하는 방법 입니다. navigate() 호출 시 props 값에 넣어준 url 대로 webview screen을 띄우려고 search 하다가 삽질도 좀 하고 알게 되었네요 참고한 부분은 react-navigation 입니다 https://reactnavigation.org/docs/navigation-prop/ React Navigation Each `screen` component in your app is provided with the `navigation` prop automatically. The prop contains various convenience functions tha..

'스무디 한 잔 마시며 끝내는 React Native' Counter app을 expo 에서 동일하게 구현해봅니다. react-native cli 구현 코드는 여기 https://yannichoongs.tistory.com/153 다른 곳에서도 useState Component 를 배우기 위한 가장 기본적인 예제로 활용되는 코드입니다. $ expo init CounterExample $ cd CounterExample $ expo start [App.js] - count 값을 setCount() 시 dynamic 하게 변경되도록 useState Component 사용 const [count, setCount] = useState(10); - image 를 touchableOpacity component ..

교재 6장 TodoList App 입니다. 코딩을 다 하고나면 다음과 같은 Todo List App이 만들어집니다. 여기서는 Context 와 Async Storage 개념이 메인입니다. 간략히 해서 Context 는 각 Component 사이 공통으로 사용가능한 전역변수이고 AsyncStorage 는 app 종료- 실행 해도 data가 유지되는 기능을 합니다. - Context API : 장점은 component 마다 props 로 인자를 전달하지않아도 되는 것. React 의 Component. Context API는 크게 전역 상태가 저장되는 context, 전역 상태를 제공하는 Provider, 그리고 전역 상태를 받아 사용하는 Consumer로 나뉘어져 있습니다. context는 컴포넌트가 Pr..

기존에 서울 5개 구와 몇몇 광역시 에서 사용가능했었는데 이제 서울시 전역에서 사용 가능합니다.알뜰교통카드 제도를 시행하고 있는 지자체는 2020년 7월 기준 서울·부산·대구·인천·광주·대전·울산·세종특별자치시·경기도 전역과 충청북도 중에서는 청주, 옥천 충청남도에선 천안, 아산, 전라북도는 전주, 완주, 익산, 남원, 군산 경상북도는 포항, 경주, 영주, 경상남도는 창원, 거제, 김해, 밀양, 산청, 진주, 창녕, 양산, 통영, 고성 지역의 거주민들만 해당 제도를 이용할 수 있다 교통비도 많이 나오고, 자가로 더이상 출퇴근 하지 않는 저같은 사람에겐가뭄에 단비같은 꿀팁이기 때문에 무조건 가입했습니다. 나름 내용들을 정리해서광역알뜰교통카드의 사용 대상, (뻔한) 기본 정보 와 꼭기억해야할 정보,그리고 사..

교재 내용을 따라 기본 Project 생성 및 설정 진행. Count 프로젝트 생성, TypeScript 설치, styped-component 설치 그리고 babel-plugin 을 설치합니다. babel-plugin 은 react-native의 상대 경로를, 절대 경로로 변경해주는 plugin 로 예로 import ../../../Button 이라면 import ~/Button 식의 경로를 사용 할 수 있습니다. $ react-native init Count $ cd Count $ npm install --save styled-components $ npm install --save-dev typescript @types/react @types/react-native $ npm install --sav..

React Native 책을 대출 했습니다. 프로젝트 1일차 때 공부하려고 했던 서적이었는데 (https://yannichoongs.tistory.com/129?category=772021) 구입할 만큼 구미가 당기는 내용은 아닌 지라 대출 예약 후 빌렸더니, 어느새 11일차 진행 중이네요~ 저자 코딩 및 개발 환경 - React-native cli 사용 : 그동안 expo cli 로 window 환경에서도 아이폰/안드로이드 모두 올려볼 수 있었는데 책 따라할 겸 react-native cli 사용해 볼 계획입니다. android device 다시 꺼내야겠네요. - TypeScript 사용 : 똑같이 javascript 가 아닌 typescript 를 사용할 계획입니다. 어차피 거의 비슷 - Styled..

React ? JSX? - React 는 javascript 문법이 아닌, JSX (JavaScript Extreme) 를 사용하여 UI를 템플릿화 - JSX는 자바스크립트의 공식적인 문법이라고 할 수는 없음 - Type-Safe 하며 compile 과정에서 Err 감지가능. (어떠한 연산도 정의되지 않은 결과를 내놓지 않는 것) - HTML 에 익숙한 경우 더 쉽고 빠르게 작성 가능. - 그리고, React Native 를 쓰기위해 사용 필수이므로 꼭 숙지해야 하는 문법. (이것 때문에 공부) React 기본 문법이 익숙하지 않다보니 '셀프 등기' 앱 계산식 함수를 구성하는데 있어 삽질을 하게되었고 이참에 정리해 봤습니다. 1. Variable : ES6 부터 let : 변수 재선언 불가, 변수 재할당..

Android 기준, mobile app에 에 전면 및 배너 광고 넣는 법 입니다. 먼저 admob https://admob.google.com/ - 앱 - 광고 단위에 들어갑니다. 광고가 없으면 '광고 단위 추가' 로 추가합니다. 배너, 전면 등 중복 광고 단위도 허용 가능합니다. 여기서 중요한게, 광고 종류별로 id가 다르니 꼭 기록해놓습니다. string.xml 에 기록해놓으면 정리가 잘 되기 때문에, 아래와 같이 정의하는 것도 좋은 방법인 것 같습니다. 3개의 id 중 - admob_app_id 는 AndroidManifest.xml 에 - banner 는 xml 에 view layout을 정의하고 onCreate() 안에 코드도 넣습니다. - interstitial 전면 광고는 onCreate(..

9일차는 'The Net Ninja' React Native 강좌에 있던 내용 중 Custom Font, Global Styles 를 현 project에 적용 해보겠습니다 Expo URL 을 참고 해서 google font download 진행. https://docs.expo.io/versions/latest/sdk/font/ Font - Expo Documentation Font expo-font allows loading fonts from the web and using them in React Native components. See more detailed usage information in the Using Custom Fonts guide. Platform Compatibility And..

7일자 to do app 에 적용해본 useState Component 를 등기계산기 project 에 적용해보겠습니다. 오늘 coding Output 은 Calculator 에서 '거래금액' 과 '공시지가', 그리고 '채권매도할인율' 을 입력하고 '계산하기' Button Component 를 클릭하면 채권, 수입인지, 취득세, 등기총비용에 값이 적용되도록 하는 것. 먼저 각 금액 별 useState Component instance 를 만들고 calculateHandler() 로 input 값을 output 창에 write. 우선 값을 대충 쓰지만, 추 후에 제대로 된 값이 입력 되도록 수정 진행. const 상수인 bondPrice 는 위에서 useState(초기화깂) 으로 0이 되었기 때문에 처음 ..

React Native 유투브 강좌 괜찮은 것을 찾아서 요즘 출퇴근 길에 열심히 보고 있습니다. 'The Net Ninja' 라는 영국 유투버로 본업이 강사 인 지 강의 도중에 버벅거리지도 않고 코딩 실수로 debugging 하는 시간도 거의 없어 쓸데없이 시간 보내는 구간이 없다는게 장점입니다. 미리 리허설을 하는 것으로 보임. 유일한 단점은, 자막없는 영어 라는거 .. 여기서 React Natiive Tutoral for Beginners 를 열강하고 있습니다. 강좌 통해 실습한대로 'To do List' 를 만들어보겠습니다. coding 주요 목적은 state 와 props 활용 및 익숙해지기 가장 기본적인 Simple To Do List App 이며 기능 및 Component 를 추가 확장해서 완..

리액트 네이티브 프로젝트를 시작한 지 한달이 넘었지만 평일에는 퇴근후 휴식하고, 주말에는 코로나 블루를 타파하기 위해 서울 근교로 돌아다니다보니 프로젝트 진행이 한동안 멈춰버렸습니다. 그리고, 적재적소에 useState React component 를 사용하는 것이 아직 익숙치 않아서 Hook 쪽은 새로 공부해야 될 것 같네요. 스터디 관련 내용은 다음에 적고, 본론으로 돌아와서.. 프로젝트를 시작 하기 위해, 다른 Engineer 코드를 좀 찾아보니 티스토리 코드 블럭을 GitHub 나 AndroidStudio 스타일로 바꿀수 있었습니다. 테마 및 스타일 먼저 적용하고 '리액트 네이티브' 프로젝트를 재개해야겠네요. 방법은 어렵지 않으니 아래 순서대로 따라하면 될 것 같습니다. 스타일 고르기 https:..

부동산 등기 두번째 탭 Check List UI 구성 진행 - FlatList 매도인 / 매수인 의 등기 Check List 를 List로 보여주려면 ScrollView 와 FlatList 정도 쓰면 될 것 같은데 아래 내용을 보면, ScrollView는 all rendering 인데 반해 flatlist 는 default 10개씩 mount 하기 때문에 memory 및 processing time 을 줄일수 있다고 합니다. (사실 수백개 list 가 넘어가야지 flatList 가 유용 하다고 함) Flat List 예제 코드는 아래 활용. https://reactnative.dev/docs/flatlist React Native · A framework for building native apps us..

오늘은 Calculator Tab 내 Layout 구성 Core Component 의 View, TextInput 등 사용해보기 text-style-props CustomPicker Function 활용 참고 https://reactnative.dev/docs/text-style-props React Native · A framework for building native apps using React A framework for building native apps using React reactnative.dev Style 다양하게 변경 해보고, Layout 구성하기 flexDirection : 'column' - vertical, 'row' - horizontal alignItems : flex-s..