일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- centos
- VirtualBox
- IOS
- 맥
- Android
- 네트워크
- TensorFlow
- MachineLearning
- androidstudio
- MAC
- xcode
- react
- ReactNative
- avds
- PYTHON
- 리눅스
- 센토스
- Chrome
- vsCode
- node
- jest
- webpack
- build
- linux
- picker
- 개발
- qunit
- unittest
- localserver
- Today
- Total
목록Frontend (184)
로메오의 블로그
React 목록 react-native-make 설치 $ npm install --save-dev @bam.tech/react-native-make App 아이콘 1024 * 1024 사이즈의 png 이미지로 아이콘을 준비합니다. $ npx react-native set-icon --path ./src/assets/res/icon-1024.png --background "#191919" Android와 ios에 아이콘이 사이즈 별로 생성되었습니다. Splash 이미지 $ npx react-native set-splash --path ./src/assets/res/launchImage.png --resize center --background "#191919" android와 ios에 사이즈별 splash..
React 목록 async-storage 설치 $ npm install @react-native-async-storage/async-storage App.tsx import React, {useEffect, useState} from 'react'; import { View, SafeAreaView, StatusBar, Text, TouchableOpacity, StyleSheet, } from 'react-native'; import AsyncStorage from '@react-native-async-storage/async-storage'; type Nation = { nation: string; company: string; }; const App = () => { const [list, setL..
React 목록 Chrome DevTools 설정 react-native ios에서 command + d를 누르고 Open React DevTools를 선택하면 아래의 오류가 발생합니다. error Browser exited with error:, Error: invalid url, missing http/https protocol React Native가 사용하는 Hermes 엔진을 크롬에서 직접 설정해 줘야합니다. 크롬에서 DevTools 디버깅하기 크롬에서 chrome://inspect/ 에 접속합니다. Configure를 누르고 localhost:8081을 추가합니다. 여러개의 Hermes가 표시되는 이 중 하나입니다. ㅋ inspect를 누릅니다. DevTools에서 console을 확인 할 수..
React 목록 App.tsx import React from 'react'; import {SafeAreaView, StatusBar} from 'react-native'; import {Provider} from 'react-redux'; import {store} from './src/redux/store'; import TodoHeader from './src/components/TodoHeader'; import TodoList from './src/components/TodoList'; const App = () => { const RootApp = () => { return ( ); }; return ( ); }; export default App; store.ts import {config..
React 목록 https://randomuser.me/documentation#pagination Api 더미 데이터는 위 사이트에서 가져옵니다. App.tsx import React from 'react'; import {SafeAreaView, StatusBar} from 'react-native'; import {Provider as ReduxProvider} from 'react-redux'; import UserList from './UserList'; import store from './store'; const App = () => { return ( ); }; export default App; store.ts import {combineReducers, configureStore} fr..
React 목록 설치 $ npm install @reduxjs/toolkit counter.ts $ mkdir src/redux $ touch src/redux/counter.ts import {createSlice} from '@reduxjs/toolkit'; import type {PayloadAction} from '@reduxjs/toolkit'; export interface CounterState { count: number; } const initialState: CounterState = { count: 0, }; export const counterSlice = createSlice({ name: 'counter', initialState, reducers: { increment: sta..
React 목록 프로젝트 생성 $ npx react-native init dragableList --template react-native-template-typescript React Native Reanimated 설치 $ npm install --save react-native-reanimated babel.config.js module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'], }; plugins에 react-native-reaminated/plugin을 추가합니다. react-native-gesture-handler 설치 $ npm instal..
React 목록 App.tsx import React from 'react'; import {View, StyleSheet} from 'react-native'; import ChildScreen from './src/screens/ChildScreen'; const App = () => { const company = [ { country: 'Korea', company: 'Samsung', }, { country: 'USA', company: 'Apple', }, { country: 'Japan', company: 'Sony', }, ]; // 자식으로부터 호출됨 const onCalled = (param: string) => { console.log(param); }; return ( ); }; e..