NaverLogin API를 React에 적용하여 굳이 회원가입을 별도로 하지 않더라도 Naver에서 제공해주는 데이터만으로 회원가입을 진행하고 간편로그인이 가능하도록 구현하는 방법에 대해 알아보겠습니다. (1) React - Login.js import React from "react"; function Login() { const script = document.createElement("script"); script.src = "https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.2-nopolyfill.js"; script.type = "text/javascript"; document.head.appendChild(script); var naverLo..

웹서비스는 기본적으로 커뮤니티 기능을 제공하기 때문에 전체 게시글을 보여주거나 게시글 정렬, 페이징처리, 검색기능 등을 제공해야할 필요성이 존재합니다. 이 때 React를 사용하면서 게시글 정렬이나 페이징처리를 react-table 라이브러리의 도움을 받아 손쉽게 구현하는 방법에 대해 알아보겠습니다. (1) React import React, { useState, useEffect } from 'react'; import { useTable, useSortBy, usePagination } from 'react-table'; const BoardList = () => { //보여줄 데이터 저장 const [dataList, setDataList] = useState([]); //저장할 데이터 let bo..

이전 프로젝트 후기에서 앞으로 쓰면 좋겠다는 기술 중 Redux를 이번 게시글에서 사용해보고자 합니다. 환경은 React에서 사용하고 이에 따라 일반적인 Redux가 아니라 React-Redux를 사용하고자 합니다. (1) index.js import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { createStore } from 'redux'; import { Provider, u..

앞선 게시글에서 알아보았던 유리재질 만드는 법과 광원의 위치이동을 이용해 실제 미로를 만들어보겠습니다. (1) test.js import * as THREE from 'https://cdn.skypack.dev/three@0.129/build/three.module.js'; import {FBXLoader} from 'https://cdn.skypack.dev/three@0.129/examples/jsm/loaders/FBXLoader.js'; import {GLTFLoader} from 'https://cdn.skypack.dev/three@0.129/examples/jsm/loaders/GLTFLoader.js'; import {OrbitControls} from 'https://cdn.skypack..

미로에서 모든 빛을 제거하고 캐릭터의 주변에서만 빛을 생성하여 미로탈출 느낌을 부여하는 방법에 대해 알아보겠습니다. (1) test.js let light; let LightHelper; //라이트 설정 light = new THREE.SpotLight(0xFFFFFF, 2); light.position.set(0, 100, 0); light.target.position.set(0,0,0); light.angle = THREE.Math.degToRad(50); light.penumbra = 1; scene.add(light.target); scene.add(light); LightHelper = new THREE.PointLightHelper(light); scene.add(LightHelper); Up..

3D맵으로 미로를 만들기 위해 우선 빛이 반사되는 유리재질 벽을 구현하는 방법에 대해 알아보겠습니다. (1) test.js const glass_material = new THREE.MeshPhysicalMaterial({ color : 0xffffff, metalness : .1, roughness : 0.05, ior : 2.5, thickness : 0.2, transmission : 1, transparent: true, opacity: .5, reflectivity: 0.2, refractionRatio: 0.985, }); let glass_geometry = new THREE.BoxGeometry(75,20,1,256,256,256); const glass_1 = new THREE.Mesh(..