목록TypeScript (10)

타닥타닥 개발자의 일상

react / builderX 로 레이아웃 간편하게 만들고 화면에 적용하기

builderX를 이용하면 별다른 코드를 작성하지 않고 쉽게 화면의 레이아웃을 만들수 있다. https://builderx.io/ BuilderX BuilderX is a browser based screen design tool that codes React Native & React for you builderx.io 구글 아이디만 있으면 편하게 사용 가능하다. new project를 클릭하면 새로운 레이아웃을 만들수 있다. Device로 OS를 설정하고 화면의 크기를 설정하는 기초 설정을 먼저해준다. 그다음 본인이 원하는 소스를 추가해 화면을 구성하면 된다. 코드를 보기 위해서는 우측 상단의 CODE를 클릭하면 된다. CODE를 클릭하면 Download Component 버튼이 보이는데 이를 클릭...
코딩 기록/react 2022. 3. 13. 22:57
react 메인 화면 구성하고 Navigator로 화면 이동하게 만들기

생성문 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 폴더..
코딩 기록/react 2022. 3. 9. 00:39
react / TextProvider, useContext 통해서 다른 파일에 있는 값 화면에 구현하기

생성문 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 ..
코딩 기록/react 2022. 3. 9. 00:22
react UseMemo 사용하여 특정 함수만 호출되는 예제 보기 / typescript / useCallback함수 이용하여 버튼 클릭시 숫자 증가시키기

실행구문 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 ..
코딩 기록/react 2022. 3. 8. 23:59
react 현재시간 화면에 나타나고 초마다 갱신되게하기 / typescript 시계 만들기

실행문 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..
코딩 기록/react 2022. 3. 8. 23:49
react / useEffect 써서 버튼 누를때 특정 텍스트 화면에 보이게 하기 / typescript

실행문 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)...
코딩 기록/react 2022. 3. 8. 23:38
react / flex 이용하여 원하는 비율로 화면에 아이템 구현하기 / typescript

프로젝트 생성문 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..
코딩 기록/react 2022. 3. 7. 18:40
react / flex 속성 이용하여 화면 비율 조정하기 (typescript)

프로젝트 생성문 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..
코딩 기록/react 2022. 3. 7. 18:27
react 텍스트 입력하고 button 누르면 console창에 출력되게 하는 화면 만들기 (typescript/TextUnput/Button)

App.tsx import React, { useState } from "react"; import { Button, Text, TextInput, View } from "react-native"; let glTag:String //사용되지 않는 함수 function MyFunc(props:any){ console.log(props.name) props.setText('Money') return {props.name} } export default function App(){ const [ inputTextValue, setInputTextValue ] =useState("") const [text,setText] = useState("") //setInputTextValue에 text값을 입력하는 함수..
코딩 기록/react 2022. 3. 7. 16:51
vscode로 react 이용하여 안드로이드 화면에 코드 구현하는 기본문법 (typescript / nodejs / javascript)

npx react-native init (프로젝트명) --template react-native-template-typescript 위의 명령어로 구현된 프로젝트가 생성되면 좌측 콘솔에 cd 프로젝트명 npm start 우측 콘솔에 cd 프로젝트명 npm run android 입력하여 설정 완료하기 위에 명시된대로 순서대로 입력하면 콘솔창이 아래와 같아진다. 생성된 프로젝트 폴더에 있는 App.tsx 파일 열고 아래와 같이 입력한다음 저장해보자. import React from "react" import {SafeAreaView, Text} from "react-native" /* export default function App(){ //상수 const str:String = 'Hello World' ..
코딩 기록/react 2022. 3. 3. 20:27
Prev 1 Next