달비의 개발 연구

이번에는 React 웹사이트에서 Unity 게임을 WebGL로 빌드하여 웹 게임을 React 프로젝트에 빌드하고 실행하는 방법을 포스팅 하도록 하겠습니다.  먼저 빌드할 웹 게임을 만들어 줍니다. Unity WebGL Build간단하게 테스트 씬을 만들어 줍니다.간단하게 버튼과 오브젝트 무빙 스크립트를 넣어 테스트 게임을 만들어 보았습니다. 무빙 스크립트는 다음과 같습니다.using System.Collections;using System.Collections.Generic;using UnityEngine;public class ObjectMoving : MonoBehaviour{ public float speed = 1.0f; public float startPos; public flo..

React, Spring Boot 이미지 base64 변환, 이미지 수정, 파일 압축, 파일 다운로드 구현방법 (ResponseEntity, Axios, API Request, React)이번에는 React + Spring Boot를 조합하여 Spring의 API 통신 처리 및 react 화면 기능 구현으로 이미지를 수정하고, 압축하고 다운로드 하는 방법에 대해 포스팅 하겠습니다. 사용된 프로젝트 버전은 다음과 같습니다. ※ 프로젝트 버전 ※Java : 17Spring boot : 3.2.5React : 18.3.1React Router : v6axios : 1.7.2 화면 구성먼저 화면 구성에 대해 말씀드리겠습니다. image파일을 업로드하면 image data base64로 변환합니다. 해당 이미지를..

React Router 설정과 API Server Json 통신하는 방법(Router, Promise, Axios, Node.js, Ajax, React 페이지 이동, Spring, Spring Boot)이번에는 React 웹사이트의 Router 설정과 axios를 활용하여 API server에 JSON data 통신하는 방법에 대해 포스팅 해보도록 하겠습니다.  먼저 필자의 Router 버전은 6v 입니다.※참고사항으로 v6 이하의 버전인 경우 해당 코드 및 커맨드의 쓰임이 다를 수 있다는 점 말씀드립니다. Router 설치 방법npm install react-router-domORnpm install react-router-dom localforage match-sorter sort-bylocalfo..

React Native를 이용하여 간단한 리셋, 더하기, 결과 계산기를 만들어 보겠습니다. 계산기 컴포넌트 자리 잡기(CSS)const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'column', backgroundColor: '#fff', alignItems: 'stretch', justifyContent: 'center', }, text:{ fontSize: 60, fontWeight: '700', color: 'white', paddingBottom: 30, paddingRight: 30, }, resultContainer: { flex: 1, back..

React Native rendering(리렌더링) state(상태)와 Hook 함수 이번에는 React Native를 이용하여, 간단한 계산기를 만들어 보려고 합니다.간단한 계산기를 만들어 보기 전에  미리 알아둬야 할 내용에 대해 언급 해 보겠습니다. 리렌더링동적으로 변하는 값은 state를 이용하여 처리 컴포넌트에서 관리하는 변경 가능한 값을 의미 합니다.props와 성격이 비슷하지만, props는 부모 컴포넌트로부터 전달받은 데이터로 관리의 주체가 부모 입니다. 하지만 state는 컴포넌트 내에서 생성 및 관리하는 데이터로 관리의 주체가 컴포넌트 자신이 됩니다. [컴포넌트가 리렌더링 되는 조건]- 컴포넌트가 변경되었을 때- 컴포넌트로 전달된 props가 변경되었을 때- 부모 컴포넌트가 리렌더링 됬..

React Native Style, Component 적용하기(Button, Button Event, 버튼, 버튼 이벤트)리액트 네이티브를 이용하여 스타일CSS 및 컴포넌트를 적용하는 방법에 대해 포스팅 해보겠습니다. Style 적용리액트 네이티브 에서 스타일을 적용할 때 여러가지 방법이 있는데,그 중에 인라인 스타일 코드 형식과 StyleSheet.create() 함수 호출하는 방식이 있다. 인라인 스타일 코드란? 컴포넌트의 style에 직접 스타일 코드를 작성하는 것을 인라인 스타일이라고 한다. Calc App ※ style 코드를 확인 해 보면 Json방식인 것을 확인 할 수 있다.속성의 경우 camel case로 작성 해야 하고, px, em 등 단위를 사용하지..

React Native - JSX프로젝트 만들기( node.js version 16.20.2 lts ) CMD 명령어 입력 (App.js 프로젝트 만들기)프로젝트 생성 한 경로로 가서 커맨드 입력expo init rn-calc  다운로드 완료 후 npx eslint --init위 커맨드를 입력하면 선택 하라고 나오는데아래 처럼 선택하면 된다. to check syntax and find problems 선택JavaScript modules 선택React 선택No 선택Node 선택JSON 선택yes / npm 선택 참고 사항 : ESLint는 자바스크립트 코드에서 발견되는 문제시되는 패턴들을 식별하기 위한 정적 코드 분석 도구이다다운로드를 완료 했다면 .eslintrc.json 파일 수정"extends":..