야니와 충스의 햄볶기

react native android run 중에 발생한 에러 정리 합니다. error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details. Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081 react native 첫 프로젝트에서 에러가 난다면 아래 가이드에 따라 6가지 스텝을..

react-native-vector-icons 을 ios 에 적용하는 방법 공유합니다. 아래 내용대로 따라하면 별 내용 아니긴 한데, expo 로 구현한 코드를 react-native cli 로 옮겨타면서 해맨 부분 정리 하고 넘어갑니다. (expo 는 아래 작업이 불필요함) github.com/oblador/react-native-vector-icons/blob/master/README.md oblador/react-native-vector-icons Customizable Icons for React Native with support for NavBar/TabBar, image source and full styling. - oblador/react-native-vector-icons github...

xcode 에서 iphone app run 에 오류 입니다. 지난 주까지 잘 빌드 되다가 오늘 갑자기 안돼서 찾아보니 아니무슨 이런 어이없는..... 버전이 원인입니다. xCode 와 IOS 의 버전 차이가 2.0 초과되면 오동작함. mac 에서 app store 에 들어가보니 12.1 ver. update가 가능하네요. 업데이트 하고 나면 해결. ver. xCode IOS 정상 12.0 14.0 오동작 12.0 14.1

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

교재 내용을 따라 기본 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 : 변수 재선언 불가, 변수 재할당..

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