프로그래머처럼 생각하기

저번 시간에 @react-navigation-native를 이용해서 페이지 이동까지 구현했습니당. 오늘 해야 할 것은 태그에 적힌 메세지를 읽고 해당하는 페이지로 이동해야합니다. nfc-manager 사용법 GitHub - revtel/react-native-nfc-manager: React Native NFC module for Android & iOS React Native NFC module for Android & iOS. Contribute to revtel/react-native-nfc-manager development by creating an account on GitHub. github.com 설치하고 아래에 있는 예제 코드를 사용하면 tag가 읽혀지고 값을 얻을 수 있습니다. comp..

react-navigation 사용법 Navigating Between Screens · React Native Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator. reactnative.dev App.js import {NavigationContainer} from '@react-navigation/native'; import React from 'react'; import {StyleSheet} from 'react-native'; import..

ScrollView는 많은 props을 가지고 있어서 따로 봐야 할 정도임 pagingEnabled 는 한 페이지를 스크롤을 끈끈하게 만든다 해야하나 자유로운 스크롤이 아닌 해당하는 width만큼 화면이 변함.. 말로 설명이 안됨.. style적용시 반드시 contentContainerStyle을 사용

의 경우 기본적으로 display: flex; 가 적용됐다고 생각하면된다. |브라우저의 경우 flex-direction: row; 인 반면 RN에서는 flexDirection: column임 import { View } from "react-native"; export default function App() { return ( ); } 크기조정을 width: 100px; height: 200px;식으로 조정하지 않고 flex: 숫자 같이 정의해서 사용

React Native에서 많은 Component와 APIs를 지원했고 RN 개발팀이 직접 개발하기에 버그픽스가 빨랐다고 함. 그러나 너무 많은 기능을 만들고 하는데는 그 만큼 많은 리소스가 들어가기 때문에 RN에서는 필요한 것들만 추려낸 Component와 APIs를 제공하고 나머지는 third party library로 사용함. expo에서 제공하거나 사용자들이 만들어낸 것을 사용함 예) Statusbar, Navigator

React Native는 웹 브라우저로 동작 하는 것이 아닌 모바일 OS와 통신하며 모바일 어플리케이션을 동작시킴. 브라우저로 동작하는 것이 아니기때문에 div, span, p 등의 태그는 사용할 수 없음. , 등의 특정 태그를 사용해야 함. style의 경우 css와 비슷하지만 사용할 수 없는 속성들도 있음. 따로 정의해서 써도 되고 요소마다 각각 적용도 가능. StyleSheet.create()를 사용 시 자동완성 사용가능 (굳이 사용치 않아도 됨)

async function getData() { let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts"); let jsonResponse = await rawResponse.json(); console.log(rawResponse); console.log(jsonResponse); } getData(); jsonplaceholder라는 사이트를 이용해 통신으로 데이터를 받아옴. 이처럼 누구나 데이터를 가져다 쓸 수 있게 열어놓은 것들을 open API라고 함. api 호출시도 전에 배운것과 같이 동기처리를 해야함

function delay(ms) { return new Promise((resolve) => { setTimeout(resolve, ms); }); } async function helloAsync() { await delay(3000); return "hello async"; } async function main() { const res = await helloAsync(); // 여기 console.log(res); } main(); 여기라 표시한 부분에 await를 쓰지 않고 실행하면 Promise{} 이라고 콘솔에 찍히게 된다 그 이유는 비동기의 코드가 끝나지않고 콘솔에 출력했기 때문. 동기적으로 3초 후에 출력하기 위해 await를 걸어야 함

function taskA(a, b, callback) { setTimeout(() => { const result = a + b; callback(result); }, 2000); } function taskB(a, callback) { setTimeout(() => { const result = a * 2; callback(result); }, 3000); } taskA(3, 4, (a_res) => { console.log("taskA : " + a_res); taskB(a_res, (b_res) => { console.log("taskB : " + b_res); }); }); 이러한 콜백지옥의 코드를 해결하기위해 Promise 객체를 사용함. Promise객체는 resolve(성공)시와, reje..

동기와 비동기를 이해하기 위해선 쓰레드를 알아야함. 자바스크립트라는 카페에는 직원이 하나라서 여러 한 테이블의 주문씩 밖에 처리를 못함..ㅠ A테이블에 아아 2 개 B테이블에 아아 3 개 일 경우 2 개 만들고 서빙하고 3 개 만들고 서빙하는 형태인데 그럼 B테이블에 늦게 서빙되므로 컴플레인이 많이 접수됨.. 그래서 직원에게 5개를 동시에 만들고 갯수가 채워지는데로 서빙하라고 시켜야함. 왜냐하면 자바스크립트 카페는 직원이 하나(싱글쓰레드)이기 때문임... function sleep(sec) { return new Promise((resolve) => setTimeout(resolve, sec * 1000)); } const makeCoffee = async (table, ea) => { await sle..