Library

🕹️ TransformControls해당 컴포넌트는 mode의 속성을 통해 오브젝트의 편집 모드를 변경할 수 있다. ∙ translate: 오브젝트의 위치 좌표값을 변경∙ rotate: 오브젝트의 회전값을 변경∙ scale: 오브젝트의 규모 변경 따라서 버튼을 생성하고, 해당 버튼을 누를 때 버튼에 적용된 값으로 상태값을 변경하여 컨트롤러의 편집 모드를 설정해보겠다. 이전 게시글에서 mode라는 useState()를 생성하여 "translate" 값을 넣었다. 해당 상태를 만들기 위해 버튼을 만들어보자 📁 Editor / 📄 TransformControlButtons.tsximport { FontAwesomeIcon } from "@fortawesome/react-fontawesome";import..

이전 게시글에서 3D 공간인 Scene을 만들었다. 이제 해당 공간에 박스를 생성해보자. 우선 3D 객체의 구성을 알아보자.3D 객체는 다음과 같이 이루어져있다. 이하, 3D 객체를 모델로 표현하겠다. 🍕 Model∙ 📦 MeshMesh란, 객체를 생성하기 위해서 여러 폴리곤(다각형)의 집합을 이루고 있다.점들이 무수히 모여 선이 되고, 그 선이 모여 폴리곤을 이루고, 해당 폴리곤들이 모여 Mesh라는 객체를 이룬다. ∙ 🌏 Geometry공간의 속성과 관련한 수학 값들이다. ∙ 👕 Material해당 물질을 이루는 재료를 나타낸다.   이 세 가지가 있으면 모델을 표현할 수 있다.  그럼 이제 모델을 만들어보자. 📦 Box박스를 불러오기 위해 📄 BoxLoader.tsx를 생성해주었다. 나는..

작성자가 자바스크립트를 써와서 타입스크립트에 대해 미숙하여 타입스크립트에 미흡한 부분이 포함되어 있습니다. 📄 fiber / drei리액트에서 three.js를 좀 더 편하게 사용하기 위해 사용하는 라이브러리 입니다. 작성자는 이 두개를 사용하여 게시글을 작성해보겠습니다. 🙂 https://docs.pmnd.rs/react-three-fiber/getting-started/introduction React Three Fiber DocumentationReact-three-fiber is a React renderer for three.jsdocs.pmnd.rs https://github.com/pmndrs/drei GitHub - pmndrs/drei: 🥉 useful helpers for reac..

참고 사이트∙ seongminn님의 벨로그  현재 작성자는 그래픽 기반의 솔루션 회사에 재직중입니다.threejs에 대해 공부중이라 완벽한 내용은 아니게 될지는 모르겠으나, 잘못된 내용이 기재되어 있을 경우 따끔한 피드백 주시면 겸허히 받아들이고 수정하겠습니다. 📦 three.jsthree.js란, 웹페이지에 3D 객체를 쉽게 렌더링 할 수 있도록 도와주는 3D 라이브러리이다.WebGL 기술을 기반으로 렌더링과 카메라, 조명 등의 3D 프로그래밍 기술을 간단하게 사용할 수 있도록 한다. https://threejs.org/ Three.js – JavaScript 3D Library threejs.org 🖋️ WebGL인터넷 브라우저 환경에서 OpenGL을 플러그인 도움 없이 공식적으로 사용할 수 있도..

토큰을 발급하고 인증받고, 검증하려는데 구조와 프로세싱을 이해하는데 5일이 걸린 거 같다... 개발될수록 티스토리의 내용 및 코드가 변경될 수 있습니다. 참고사이트 - 구글 검색으로 "jwt", "token" 인증 관련 검색으로 나온 내용 전부 🧠 사전 지식const jwt = require('jsonwebtoken'); // // 토큰 발급 코드 // // Data - 토큰에 담을 내용을 담습니다. // SecretKey - 임의적으로 개발자가 정해줍니다. // options - 토큰의 유효기간 및 서명 옵션을 지정했습니다. const token = jwt.sign(Data, SecretKey, signOptions ) // // 토큰 검증 코드 // // token - 발급 받은 토큰을 담습니다. /..

참고 사이트 • https://puleugo.tistory.com/138 🎫AccessToken과 🪪RefreshToken • AccessToken: 서버 API를 직접 요청할 때 사용한다. • RefreshToken: 액세스 토큰이 만료되었을 때 액세스 토큰을 재발급할 목적으로 사용한다. 🧑🏻‍❤️‍👩🏻분리 목적 클라이언트와 서버 간의 API 통신 중, 토큰이 해커에게 유출될 수 있기 때문이다. 따라서, 직접 API를 호출하는 액세스 토큰의 주기는 짧게 설정하고 (약 1시간) 액세스 토큰을 재발급하는 리프레시 토큰의 주기는 비교적 길게 설정한다. (약 2주) 이렇게 된다면 액세스 토큰이 유출되더라도 만료 주기가 짧아 피해를 조금이나마 줄일 수 있다. 💻 개발 액세스/리프레시 토큰 방식은 중간에 탈취 당..

참고 사이트 • https://velopert.com/2389 🗼 구조 jwt는 ' . ' 을 구분자로 3가지 문자열로 구성되어 있다. 구조는 다음과 같다. 👷🏻‍♂️ Header Header는 두가지의 정보를 지니고 있다. • typ: 토큰의 타입을 지정한다. 즉, jwt • alg: 해싱 알고리즘을 지정한다. 해싱 알고리즘은 보통 HMAC SHA256 혹은 RSA가 사용되며, 이 알고리즘은 토큰을 검증할 때 사용되는 signature부분에서 사용된다. { "typ": "JWT", "alg": "HS256" } 다음을 base64로 인코딩 하면 다음과 같다. const header = { typ: 'JWT', alg: 'HS256', }; const encodedHeader = new Buffer(JS..

참고사이트 hxyxneee.log님의 벨로그 우리는 본인을 인증할 때, 중요한 정보들을 담아보낸다. 아이디, 비밀번호, 개인정보(이름, 주민등록번호, 핸드폰 번호) 등... 데이터를 보낼 때 유출이 되더라도 해당 데이터를 비밀스럽게 바꾸어 해커가 해당 데이터를 쉽게 파악하지 못하도록해야 조금이나마 더 안전할 수 있기에 암호화가 필요하다. 🔑 암호화 암호화란, 특정 지식을 소유하고 있는 사람들을 제외하고는 누구든지 읽어볼 수 없도록 정보를 전달하는 과정이다. 반대로 암호문을 평문으로 바꾸는 것을 복호화라고한다. ⚠️ 암호화의 필요성 유저의 비밀번호는 그대로 DATABASE에 저장하지 않는다. ❓ DB가 해킹 당하면 유저의 비밀번호가 그대로 노출된다. ❓ 외부 해킹이 아니더라도 내부 개발자가 DB에 접근해 ..