![]()
Router 설정 [React] React생성부터 Node.js 연동까지 - 3) Router 설정React 앱 생성 [React] React생성부터 Node.js 연동까지 - 2) 프로젝트 Import 경로 설정 React 앱 생성 [React] React생성부터 Node.js 연동까지 - 1) React 프로젝트 생성 Node.js 설치된 상태에서 진행(없는 사람들은d0u0b.tistory.com# Node.js 연동기존에는 npm start로 3000 포트의 리액트 실행화면이 출력되면 필요한 데이터를 DB에서 조회해서 가져오고 싶은 경우 Node.js로 연동해서 사용서버 설정하면 리액트는 3000, 노드는 8008 혹은 자신이 설정한 포트로 시작리액트 시작 : npm start서버 시작 : se..
![]()
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할 파일 위치를 ../../ 를 이용하여 잡아줌 -> 불편함설정을 통해 impor..
![]()
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() { ..
![]()
#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// 크기가 변경될 경우의 이벤트..
