달비의 개발 연구

vue router, interceptor 설정 router 설정 app.vue main home  app.vue css 적용 및 공통 컴포넌트 적용orrequire('@/layout.css')  main.jsimport { createApp } from 'vue';import App from './App.vue';import router from './router';const app = createApp(App);app.use(router);app.mount('#app'); router.js// src/router.jsimport { createRouter, createWebHistory } from 'vue-router';import main from '...

이번에는 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..

다양하게 자주쓰인 JavaScript 공통 유틸리티 함수를 정리하였습니다. (지속적으로 업데이트 합니다 !!) Form to Json$.fn.serializeObject = function(){ var obj = {}; var a = this.serializeArray(); $.each(a, function() { if (obj[this.name]) { if (!obj[this.name].push) { obj[this.name] = [obj[this.name]]; } obj[this.name].push(this.value || ''); } else { obj[this.name] = thi..

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

Spring Boot, JSP 게시판 만들기Spring Boot와 Gradle 및 JSP의 조합으로 간단한 게시판을 만들어 보겠습니다. 1. gradle 설정plugins { id 'java' id 'war' id 'org.springframework.boot' version '3.1.10' id 'io.spring.dependency-management' version '1.1.4'}group = 'com.spring'version = '0.0.1-SNAPSHOT'java { sourceCompatibility = '17'}configurations { compileOnly { extendsFrom annotationProcessor }}repositories { mavenCentral()}depen..

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

HTML 미디어 요소 정리(Audio, Source, Video, Semantic)HTML의 미디어 요소에 대해 포스팅 하도록 하겠습니다.  audio속성src : 파일의 URLautoplay : 자동 재생controls: 제어기 표시loop: 반복 재생muted: 음소거preload: 오디오 로딩 상태  source audio/video 요소의 하위 요소, audio/video의 src 속성을 대체하는 요소속성: src, type, media  video속성:audio의 속성, width, height,poster: 비디오 데이터의 미설정 또는 로딩되는 동안 표시할 이미지  위 언급한 3개의 요소는 미디어 콘텐츠의 재생 구간 지정 설정이 가능합니다.- audio, video, source 요소의 src..

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 등 단위를 사용하지..