Front-end

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에 추가.....