타닥타닥 개발자의 일상

참고 사이트 https://docs.expo.dev/versions/latest/sdk/camera/ Camera - Expo Documentation Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.dev 시작 프로젝트 생성문 npx react-native init CameraSample --template react-native-template-typescript 설정을 위한 설치문 npm install -g yarn npm yarn --version npm i react-native-camera npm i watc..

https://developerson.tistory.com/117 스프링 부트로 SpringBoot 회원가입, 페이징, 글작성-수정-삭제-답변, 댓글 작성 되는 게시판 페이지 기본적 세팅은 아래글 https://developerson.tistory.com/114 페이징은 아래글을 참고해서 만든 게시판이다. https://developerson.tistory.com/116 별도의 설명 없이 우선 코드만 백업할 예정. 이제 이걸 이해하.. developerson.tistory.com react와 연결시킬 스프링 프로젝트는 해당 링크에 있는 프로젝트다. react와 스프링 부트를 잘 연결시키기 위해서는 sts를 통해서 해당 프로젝트의 서버를 미리 켜준다. 또한 스프링 부트 프로젝트의 BbsDto 부분에 @Js..

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 버튼이 보이는데 이를 클릭...

생성문 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 폴더..

생성문 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 ..

실행구문 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..