SG의 개발 공부로그

SSR 옛날 전통 웹 방식은 MPA 였다. MPA라는 용어도 사실 SPA가 유행하면서 비교를 위해 나왔듯이 SPA 나오기 전에는 모두 MPA 형태였다. MPA는 새로운 페이지를 요청을 보내면, 모든 탬플릿을 서버연산을 통해 렌더링하고 완성된 페이지형태로 응답한다. SPA 와 MPA의 차이점 참고링크 https://sg-coding.tistory.com/entry/SPA-Single-Page-Application-%EC%99%80-MPA-Multi-Page-Application-%EC%B0%A8%EC%9D%B4%EC%A0%90 SSR 의 장점는 SEO (검색엔진최적화) 이다. 전통적인 MPA 는 javascript 가 동작하기 전에도 HTML 에 데이터가 삽입된 상태 , 즉 완성된 형태의 탬플릿를 서버로부..

React 를 접하면서 듣게 된 SPA 와 MPA 에 대해서 간략하게 알아볼거다. 격투기 UFC 와 MMA 도 아니고 개발쪽은 줄여쓰는거 겁나 좋아한다. 아무튼 MPA (Multi Page Application) MPA 는 흔히 쓰였던 웹 애플리케이션 개발방식이다. (JSP, PHP 등) 웹 브라우저에서 특정 페이지에 대한 요청을 서버에 보내면 서버는 데이터를 HTML 문서로 웹 브라우저에 응답해준다. 그 과정속에서 화면이 깜빡거린다. 댓글하나써도 깜빡, 좋아요 누르면 깜빡, 뭐 누르면 깜빡 불러오는 데이터가 적어서 빠르게 페이지가 나오면 좋겠지만, 데이터가 많을 경우 사용자는 깜빡하고 로딩이되는 시간동안 기다려야한다. 요즘 인터넷이 워낙빨라져서 체감이 로딩속도가 많이 줄었다고해도 사람의 욕심은 끝이 없..

일단 먼저 Three.js 에서 추가하는 방법을 보자 Three.js 에서의 Mesh 추가 const geometry = new BoxGeometry(2, 2, 2); const material = new MeshStandardMaterial() const cube = new Mesh(geometry, material) scene.add(cube) BoxGeometry , MeshStandardMaterial 도 변수에 담아서 Mesh( geometry(기하학), material(재질) ) 을 넣으면서 인스턴스화한다. 그리고 scene 에 추가한다. React Three Fiber 에서의 Mesh 추가 import { Canvas } from "@react-three/fiber"; export defau..

React에서 three.js 사용하는 방법 최근 3D 웹을 구현하고 싶어서 Three.js를 접하고 배우면서 궁금점이 생겼다. Three.js를 react에서 사용하고 싶은데 방법이 어떻게 될까? React Three Fiber 활용하는 것이다. 하지만 three.js 와 사용방법이 완전히 다르다 또 다르지만, React Three fiber는 Threejs를 기반으로 하기 때문에 하기 위에서는 Three.js 를 먼저 알아야 된다. React Three Fiber를 이해하기 가장 좋은 방법은 Three.js 라이브러리와 비교하면서 어떤 일이 일어나는지 보는 것이라고 생각이 들었다. three.js 프로젝트와 React Three Fiber를 둘을 함께 작업하면서 간단하게 사용법을 비교해보기로 했다. ..