node js 버전 오류 대응 문제의 발단. 평소 react-create-app 으로 만들어진 react web 개발 환경에 익숙해져 있는데, 그러지 못한 프로젝트들을 만났을때 프로젝트를 실행하기 위한 npm 명령어 들이나 패키지 명령어 구성들이 조금씩 달라진다. 이번엔 npm build 후 serve를 해야 하는 상황이었는데, npm run build 를 입력하니 아래와 같이 에러가 난 후 노드 버전을 뱉어내더라. 뭔지 모르지만 구글링해보고 예전에 노드 버전 때문에 고생했던게 생각나서 찾아보니 현재 설치 된 노드 버전이 프로젝트가 요구하는 노드 버전과 달라서 발생하는 문제가 맞는거 같더라. 이참에 여러가지 노드 버전을 자유롭게 변경할수있는 시스템을 구축해두려고한다. 설치 1-1.아래 경로 들어가서 설치 파일 받는다 https://g.. 모든 웹에서 사용 가능한 가장 작은 사이즈의 비 손실 이미지 포맷 WEBP 변환 "모든 웹에서 사용 가능한 가장 작은 사이즈의 비 손실 이미지 포맷 WEBP 변환" 을 해보려 한다. 무료 컨버팅 사이트를 사용 해도 되지만, 이미지를 외부 사이트에 올리는게 찜찜 할 때 아래 방법으로도 변환 가능하다. 1.png를 webp 포맷으로 변경 해 줄 도구를 다운 https://www.gyan.dev/ffmpeg/builds/ffmpeg-release-essentials.7z 2.다운 받은 파일 압축 해제 후 ffmpeg.exe 잘 있는지 확인 3.변환 명령프롬프트 창 열고 "ffmpeg.exe 파일의 전체 경로" -i "png 파일의 전체 경로" 변환 될 webp 파일의 이름과 확장자 순서로 입력 한다 ex) "C:\Users\user\Downloads\ffmpeg-6.1.1-essentia.. 리액트 JS 배포시 캐싱 무효 cra ( create-react-app )을 통해 만들어진 리액트웹 프론트를 빌드해서 배포 할 때 기존에 이미 존재 했던 js 파일들이 캐싱 되어 유저자리에서 업데이트가 되지 않는 이슈. cra를 통해 배포하면 main.xx.js 라는 통합 js 로 배포 되고, 해당 파일은 새로 빌드할때마다 이름이 바뀌어서 캐싱이 무효화 되지만 index.js landingpage.js 등등 사용자가 만든 기본 js파일들은 이름을 그대로 사용해서 내용이 변경되더라도 빌드시 이름이 변경되지 않고, 빌드를 새로 배포 하더라도 유저 자리에서 업데이트 된 내용을 확인 하려면 브라우저의 캐시무효화를 체크 해 줘야 하는 번거로움이 있었다. 기존에 craco를 쓰고 있었으니, 아래에 plugin: "craco-cache-busti.. unity webgl 보통, 프로토타입을 빠르게 보여주기 위해 개발중에 구글 검색을 하거나 가끔 공식 홈페이지를 참조 하는 경우가 많다. 그러나 대부분은 공식 홈페이지 메뉴얼에 자세하고 명확하게 나와있다. 프로토타입 전에 시간을 들여 보면 좋을것이고, 프로토타입을 만들면서 실무적인 개념이 생긴 후에 본격적으로 프로젝트를 시작하기 전에 메뉴얼을 정독 한다면 말도 안되게 많은 도움이 될 것이다. https://docs.unity3d.com/2023.1/Documentation/Manual/webgl.html Needle Engine 유니티 프론트 시작하기. 권장 유니티 버전 및 프로젝트 내보내기 까지 메뉴얼 대로 진행 하면 빠르게 결과 확인 가능 https://engine.needle.tools/docs/getting-started.html Needle Engine Documentation Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally. Needle Exporter for Unity bridges the Unity Editor and the we.. 특정 포트의 웹 서버 종료 1. pid 찾기 netstat -ano | findstr : 3000 netstat -ano | findstr 3000 2. 찾은 pid를 사용해서 종료 ( xx 대신 PID ) taskkill /PID xx /F react three fiber 1. fbx binary format 로드 기능은 제공 하지 않는다. 2.fbx 로드 import {useFBX} from '@react-three/drei' var fbxModel = useFBX('/A1_2.fbx'); // public이 루트 경로이다. 3.여러개의 다중 모델 출력 캔버스 안에서는 등으로 묶을 수 없고, 으로 묶어준다 ex) 4.canvas size 리액트에서 string dictionary 사용 > 선언 let parts={'body':1, 'leg':2}; > 사용 var bodyIndex = parts['body']; var legIndex = parts['leg']; 이전 1 2 3 4 ··· 10 다음