야니와 충스의 햄볶기

하이브리드 앱 프레임워크 중 2021년에도 인기가 있을 것 같은 프레임 워크가 무엇인지 알아보겠습니다. 앱 개발에 관심이 있는 사람이며, 관련 직종에서 일을 하고 있다면 트렌드를 캐치할 필요가 있습니다. 하이브리드 앱과 네이티브 앱의 차이 네이티브 앱은 안드로이드 또는 IOS 용 앱 개발에 각각 플랫폼에서 제공하는 언어로 만들어진 앱을 이야기합니다. 안드로이드의 경우 코틀린, 자바가 해당되며, IOS는 스위프트가 대표적입니다. 그런데 이렇게 네이티브 앱으로 개발을 하면, 같은 서비스지만 플랫폼마다 따로 개발을 해야하고 시간도 많이 들어가지만 사람도 따로 써야하니 비용도 많이 들어가게 됩니다. 네이티브 앱이 속도에 있어서 가장 빠르다는 점은 부인할 수 없지만, 약간의 사용자 경험 차이만 존재한다면 두가지를..

이번에는 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..

지난 번 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..

'스무디 한 잔 마시며 끝내는 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 ..

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

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

3일차에 이어 4일차 진행 - tab 별로 file 분리 file 구성은 tab 별로 4개 js 파일 새로 추가, 그리고 모두 stackNavigator 적용 Calculator tab만 stack 이동이 필요하므로, 사실 첫번째 탭만 stackNavigator 가 필요한데 다른 탭도 상단 ActionBar 통일성 유지하기 위해 모두 적용. (나중에 ActionBar control 가능해지면 빼자) - bottom navigation style 및 icon 변경 Material Design Icons 에서 가져다 쓸 수 있습니다. 지난주에 Nomad Coder 유투버가 날씨앱 속성으로 만들 때도 여기를 활용했던 것 같네요~ https://cdn.materialdesignicons.com/5.0.45/ M..

지난 번에 스타벅스에서 Expo app run이 되다 안되다 했던 것 같아서 이상했는데 오늘 다시 해보니, 스타벅스 wifi 로는 LAN 연결이 안되고있고 Tunnel로 잡으니 app 이 정상적으로 run 되는것을 확인. 잠시 되었다가 다시 연결이 끊어졌는데, 결론부터 얘기하면 스타벅스 같은 public wifi는 expo 활용이 어렵습니다. 이후부터는 모바일 핫스팟으로 엑스포 사용. $ expo init projectName $ cd projectName $ npm install @react-navigation/native $ expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native..