![]()
React 앱 생성 [React] React생성부터 Node.js 연동까지 - 2) 프로젝트 Import 경로 설정React 앱 생성 [React] React생성부터 Node.js 연동까지 - 1) React 프로젝트 생성 Node.js 설치된 상태에서 진행(없는 사람들은 설치하고 시작) 리액트 앱 생성 npx create-react-app {프로젝트 명} 실행 생성한 프d0u0b.tistory.com# 프로젝트 구조components에 Router.js 생성Pages에 test폴더 생성 후 Test.js , TestNew.js 생성# react-router-dom 설치npm install react-router-dom# 코드# Test.jsexport default function Test(){ ..
![]()
React 앱 생성 [React] React생성부터 Node.js 연동까지 - 1) React 프로젝트 생성Node.js 설치된 상태에서 진행(없는 사람들은 설치하고 시작) 리액트 앱 생성 npx create-react-app {프로젝트 명} 실행 생성한 프로젝트 폴더로 이동 후 명령어 실행 cd chalkak #생성한 프로젝트 폴더로 이d0u0b.tistory.com# 프로젝트 구조아래처럼 src안에 components, db, pages 폴더 생성# 프로젝트 import 경로 설정import Test from ‘../pages/test/new’ 이렇게 현재 파일 위치로부터 import 할 파일 위치를 ../../ 를 이용하는데 불편해서 import Test from ‘pages/test/new’ 이..
![]()
Node.js 설치된 상태에서 진행(없는 사람들은 설치하고 시작)# 리액트 앱 생성npx create-react-app {프로젝트 명}#실행생성한 프로젝트 폴더로 이동 후 명령어 실행cd chalkak #생성한 프로젝트 폴더로 이동npm start# 필요없는 파일 제거# 파일 내용도 필요없는거 수정index.jsimport React from 'react';import ReactDOM from 'react-dom/client';import './index.css';import App from './App';const root = ReactDOM.createRoot(document.getElementById('root'));root.render( );App.jsfunction App() { ..
![]()
# 테이블 속성값 출력 : PropertyNamePropertyName 사용테이블 내 color속성의 값을 라벨 같은 거에 출력하고 싶을 때color # 두 값이 같은지 확인 : PropertyIsEqualTo두개의 값을 비교함color값이 1인지 비교 color 1 # 속성값에 따라 다른 심볼 이미지GeoServer 레이어 스타일 만들 때 테이블 내 속성값에 따라 이미지를 다르게 해야 하는 경우 Relu, Filter 이용Ex) 테이블 속성 colour의 값이 1, 2, 3 각 값에 따라 심볼 이미지가 달라져야 함 layer_style layer_style co..
![]()
#StandardMeterial빛이 무조건 존재해야 Mesh 오브젝트가 보임// 빛 생성하면 renderer에 추가 설정 필요const renderer = new THREE.WebGLRenderer({antialias: true}); // antialias : 박스 표면 부드럽게renderer. shadowMap.enabled = true; // Mesh에 그림자 생성 가능하도록 함renderer.setSize(window.innerWidth, window.innerHeight); // renderer 사이즈 설정document.body.appendChild(renderer.domElement) // 완성된 결과물을 html에 추가.....
![]()
# Three.js 시작하기 (1) [Three.js] Three.js 시작하기 (1)# Three.js란? - Three.js는 웹페이지에 3D 객체를 쉽게 랜더링할 수 있도록 도와주는 Javascript 3D 라이브러리 - WebGL을 쉽게 사용할 수 있도록 해주는 JS 기반 라이브러리 - WebGL 기술을 기반으로 랜더링과d0u0b.tistory.com# renderer,camera 설정* 기존 코드의 문제점- 영상에서 보이듯 창을 줄이면 오브젝트가 사라짐- 개발자 도구를 열고 새로고침 후 개발자 도구 닫으면 renderer 크기가 제대로 안잡힘* 해결 방법- 크기가 변경될 경우 이벤트 리스너를 걸어서 Camera, renderer 설정을 다시 잡아줌# main.js// 크기가 변경될 경우의 이벤트..
