목록React (19)

타닥타닥 개발자의 일상

react / 리액트로 화면에 카메라 구현하고 촬영한 사진 저장하기

참고 사이트 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..
코딩 기록/react 2022. 3. 20. 22:55
react / Axios 이용해서 스프링부트로 만든 웹페이지 안드로이드 화면과 연결시키기 (회원가입/게시판/글작성)

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