타닥타닥 개발자의 일상

참고 사이트 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 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 ..

따로 생성해야될 폴더나 파일은 없다. App.tsx import React, { useState } from "react"; import { Alert, FlatList, Image, ScrollView, SectionList, StyleSheet, Text, TextInput, View } from "react-native"; //scrollView,Image,TextInput export default function App(){ return( Hello World ) } App.tsx 구현시 안드로이드 화면 App.tsx import React, { useState } from "react"; import { Alert, FlatList, Image, ScrollView, SectionList, S..

특별히 생성하는 파일이나 폴더는 없다. App.tsx import React, { useState } from "react"; import { Button, Text, View } from "react-native"; /* class App extends React.Component{ constructor(props:any){ super(props) this.state = { count:0 } } render() { return( You clicked{ this.state.count } times this.setState({count: this.state.count+1})}/> ) } } export default App */ const App =() =>{ const[count,setCount] = u..

Export / Import로 모듈 구현하기 src 폴더 생성 > src 폴더 안에 screens 폴더 생성 > screens 폴더 안에 NamedExportModuel.tsx/NamedImportModuel.tsx 생성 NamedExportModule.tsx import React from "react" import { Text, View } from "react-native" //변수 const sampleVar = "sample variable" //함수 const sampleFunc = () => "sampleFunc() 호출함" //number=소수+정수 const sampleNumFunc = (num1:number,num2:number) => (num1*num2) //Object == json..

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' ..