일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Kotlin
- SpringBoot
- Linux
- React
- 안드로이드
- scrollview
- 구글맵스
- 자바스크립트
- TypeScript
- Java
- JavaScript
- Android
- 스프링부트
- Javscript
- stylesheet
- 랜덤넘버
- button
- 오버라이딩
- fragment
- JS
- 리액트
- TextView
- 랜덤번호
- Hook
- nodejs
- 코틀린
- RecyclerView
- npm
- GoogleMaps
- array
- Today
- Total
목록코딩 기록 (150)
타닥타닥 개발자의 일상

실행구문 npx react-native init sample22 --template react-native-template-typescript App.tsx import React, { useMemo, useState } from "react"; import { Button, Text, View } from "react-native"; /* useMemo: 연산된 값을 렌더링시에 재사용할때 사용된다 useMeMo(func,검사할 배열 ) */ function square(params:any){ const testData = [Array(10).keys] testData.forEach(()=>{ console.log(`계산중.. 루프처리 ${testData.length}회 실행중..`) }) return ..

실행문 npx react-native init sample21 --template react-native-template-typescript App.tsx import React, { useEffect, useState } from "react"; import { StyleSheet, Text, View } from "react-native"; export default function App(){ return( ) } const Clock =() =>{ const [date, setDate] = useState(()=> new Date()) useEffect(()=>{ const timeId = setInterval(()=>tick(),1000) console.log('setInteval') retur..

실행문 npx react-native init sample20 --template react-native-template-typescript App.tsx import React, { useEffect, useState } from "react"; import { Button, Text, View } from "react-native"; /* useEffect: 컴퍼넌트가 rendering 될때마다 특정 작업을 실행할 수 있도록 하는 hook compoentDidMount + componentDidUpdate + componentWillUnmount */ function Welcome(props:any) { console.log('start') useEffect(()=>{ //==$(document)...

프로젝트 생성문 npx react-native init sample19 --template react-native-template-typescript src 폴더 생성 > components 폴더 생성 > Flexbox.tsx & Marginadding.tsx & WidthHeight.tsx 파일 생성 WidthHeight.tsx import React from "react"; import { StyleSheet, Text, View } from "react-native"; export const WidthHeight= () =>( 200X100 ) const style = StyleSheet.create({ container:{ width:200, height:100, borderWidth:StyleS..

프로젝트 생성문 npx react-native init sample18 --template react-native-template-typescript App.tsx import React from "react"; import { StyleSheet, Text, View } from "react-native"; //flex : 크기 비율로 설정하는 것 export default function App(){ return ( 두번째 화면 ) } const style = StyleSheet.create({ container:{ flex:1, width:300 }, caseOne:{ flex:1, backgroundColor:'yellow' }, caseTwo:{ flex:1, backgroundColor:'bl..

프로젝트 생성문 npx react-native init sample17 --template react-native-template-typescript App.tsx import React from "react"; import { Image, SafeAreaView, StyleSheet, Text, View } from "react-native"; const colorList = [ { color: '#00974A', val: '00974A' }, { color: '#2e6067', val: '2e6067' }, { color: '#a92127', val: 'a92127' }, { color: '#030364', val: '030364' }, { color: '#0d6729', val: '0d6729' }..

프로젝트 생성문 npx react-native init sample17 --template react-native-template-typescript 구현할 이미지는 scr>assets폴더에 저장해둔다. ship.jpg 파일을 저장해두었다. App.tsx import React from "react"; import { Image, SafeAreaView, StyleSheet, Text, View } from "react-native"; export default function App(){ return( ) } 실행화면 글자 배경색, 글자 위치 지정하기 App.tsx import React from "react"; import { Image, SafeAreaView, StyleSheet, Text, Vi..

아이콘 참고 사이트 https://oblador.github.io/react-native-vector-icons/ react-native-vector-icons directory oblador.github.io 프로젝트 생성 npx react-native init sample16 --template react-native-template-typescript 필요한 부분 install npm i react-native-paper checkbox를 만들기 위해서는 android>app>build.gradle 부분을 수정해야한다. (제일 마지막 한줄 코드만 추가됨) build.gradle apply plugin: "com.android.application" import com.android.build.Out..

프로젝트 생성후 아래의 설치문을 입력해서 radiobutton을 import한다. 설치문 npm i react-native-flexi-radio-button --save 설치문을 입력한뒤 생성된 node_modules>react-navtive-flexi-readio-button>lib를 방문하여 radioButton.js와 radioGroup.js를 편집해준다. radioButton.js import React, { Component } from 'react' import PropTypes from 'prop-types' import { StyleSheet, View, Text, TouchableWithoutFeedback } from 'react-native'; export default class R..

프로젝트 생성후 입력해야 하는 설치문 npm install react-native-picker-select npm install @react-native-picker/picker npm install watcher npm install react-native-svg@9 App.tsx import React, { useState } from "react"; import { Button, View } from "react-native"; import RNPickerSelect from 'react-native-picker-select' const values = [ {label:'Football', value:'축구'}, {label:'Baseball', value:'야구'}, {label:'Hockey',..