일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- React
- 코틀린
- scrollview
- Hook
- 랜덤넘버
- Linux
- GoogleMaps
- nodejs
- Java
- Android
- 구글맵스
- button
- Javscript
- 랜덤번호
- 리액트
- stylesheet
- array
- fragment
- 안드로이드
- npm
- TextView
- TypeScript
- RecyclerView
- JS
- JavaScript
- 스프링부트
- 오버라이딩
- 자바스크립트
- SpringBoot
- Kotlin
- Today
- Total
목록전체 글 (169)
타닥타닥 개발자의 일상
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cjNeLf/btrvrf8Y0Li/lCKOlmy2F5IkrzEpMwGq61/img.jpg)
생성문 npx react-native init sample26 --template react-native-template-typescript 설치문 npm install react-native-gesture-handler npm install @react-navigation/native npm install @react-navigation/native-stack npm install react-native-safe-area-context npm install react-native-screens npm install watcher 파일구조 src 폴더 생성 > 그안에 screens 생성 > DetailScreen, HomeScreen 생성 HomeScreen.tsx import { useNavigatio..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/xjehw/btrvuQf1fyu/NYQYDxbmtz2H7AjP0bfFI0/img.jpg)
생성문 npx react-native init sample25 --template react-native-template-typescript 설치문 npm install react-native-gesture-handler npm install @react-navigation/native npm install @react-navigation/bottom-tabs npm install react-native-safe-area-context npm install react-native-screens npm install react-native-vector-icons npm install watcher npm i --save-dev @types/react-native-vector-icons 생성파일 src 폴더..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/HlinO/btrvvEe67vh/1LJykYgO9MulKgN4lahjkK/img.jpg)
생성문 npx react-native init sample24 --template react-native-template-typescript 생성파일 src 폴더 생성 > 그 안에 component 폴더 생성 > component폴더안에 CountProvider, First, Second, Third, TextProvider 타입 스크립트 파일 생성 TextProvider.tsx import React, { createContext } from "react"; import { Text } from "react-native"; export const TextContext = createContext({}) interface Props{ children: JSX.Element } export default ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ypb4A/btrvrBb7Nj1/x2I9O51zm1UbBdVx3FkTH1/img.jpg)
실행구문 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 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dw2L8J/btrvvuiXlll/Vx82e4gM0ftHYuk9uwVsNK/img.jpg)
실행문 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cD625H/btrvyibgKqP/qSSog4lEwwKEi6ArCGSzTk/img.jpg)
실행문 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)...
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/zbCXy/btrvqkgbbYw/kaMq3rcdXN1QYziuWraOkK/img.jpg)
프로젝트 생성문 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/IL5fG/btrvhnLMcMI/PV0Ka4mAZfdvCkNi9cSJK1/img.jpg)
프로젝트 생성문 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bMrveC/btrvatMPPls/ikJEBU6zAsDVhgMfuslEf0/img.jpg)
프로젝트 생성문 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' }..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cs1EVA/btrvnVuCmaW/bOIIms7TftWAy5E50DRxI0/img.jpg)
프로젝트 생성문 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..