react conf

package.json

@@ -27,7 +27,7 @@
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@webcomponents/template-shadowroot": "^0.2.1",
-    "astro": "4.8.2",
+    "astro": "4.8.3",
     "clsx": "^2.1.1",
     "fs-extra": "^11.1.1",
     "jsdom": "^24.0.0",

src/components/animation/three/Globe.tsx

@@ -1,9 +1,7 @@
-import { Environment, Lightformer } from "@react-three/drei";
 import { Canvas, useFrame } from "@react-three/fiber";
-import { Physics } from "@react-three/rapier";
 import { useRef } from "react";
-import { Euler, Vector3, type Mesh } from "three";
-import * as THREE from "three";
+import { AxesHelper, Matrix4, Mesh, Vector3 } from "three";
+
 const Earth = () => {
   const meshRef = useRef<Mesh>(null);
 
@@ -32,31 +30,58 @@ const Airplane = () => {
     }
 
     const radius = 3.5;
-    const speed = 1;
+    const speed = 1.5;
     const angle = clock.getElapsedTime() * speed;
+
+    // 기울어진 회전 축 설정 (예: X축에 30도 기울이기)
+    const tiltAngle = -Math.PI / 4; // 30도
+    const rotationMatrix = new Matrix4().makeRotationX(tiltAngle);
     const x = Math.cos(angle) * radius;
     const z = Math.sin(angle) * radius;
-    meshRef.current.position.set(x, 0, z);
-    // meshRef.current.rotateOnWorldAxis(new Vector3(0, 1, 0), 0.01);
+
+    const originalPosition = new Vector3(x, 0, z);
+    const tiltedPosition = originalPosition.applyMatrix4(rotationMatrix);
+    meshRef.current.position.set(
+      tiltedPosition.x,
+      tiltedPosition.y,
+      tiltedPosition.z
+    );
+
+    // 비행기의 회전을 기울어진 축에 맞추기
+    const direction = new Vector3(-Math.sin(angle), 0, Math.cos(angle))
+      .applyMatrix4(rotationMatrix)
+      .normalize();
+
+    const lookAt = new Vector3().addVectors(tiltedPosition, direction);
+
+    meshRef.current.lookAt(lookAt);
+    meshRef.current.rotateX(Math.PI / 2);
   });
 
   return (
-    <mesh ref={meshRef} rotation={[0, 0, Math.PI / 2]}>
+    <mesh ref={meshRef}>
       <coneGeometry args={[0.5, 1.5, 6]} />
       <meshStandardMaterial color="red" />
     </mesh>
   );
 };
 
+const Axes = () => {
+  const axesRef = useRef<AxesHelper>(null);
+
+  return <primitive ref={axesRef} object={new AxesHelper(20)} />;
+};
+
 export default function Globe() {
   return (
     <Canvas
       style={{
         height: "500px",
       }}
-      camera={{ position: [0, 0, 5], fov: 120 }}
+      camera={{ position: [5, 5, 7], fov: 60 }}
     >
       <ambientLight intensity={0.5} />
+      <pointLight position={[10, 10, 10]} intensity={1.2} castShadow />
       <directionalLight
         position={[2, 2, -5]}
         intensity={1}
@@ -66,6 +91,7 @@ export default function Globe() {
       />
       <Earth />
       <Airplane />
+      <Axes />
     </Canvas>
   );
 }

src/components/animation/three/PhysicTest.tsx

@@ -0,0 +1,179 @@
+import { Canvas } from "@react-three/fiber";
+import { Suspense, useRef, useEffect, useMemo, useState } from "react";
+import {
+  Physics,
+  RigidBody,
+  InstancedRigidBodies,
+  CuboidCollider,
+  RapierRigidBody,
+} from "@react-three/rapier";
+import { Box } from "@react-three/drei";
+import { Color, InstancedMesh } from "three";
+
+const niceColors = [
+  "#99b898",
+  "#fecea8",
+  "#ff847c",
+  "#e84a5f",
+  "#2a363b",
+] as const;
+
+type InstancedGeometryProps = {
+  colors: Float32Array;
+  number: number;
+  size: number;
+};
+
+const Spheres = ({ colors, number, size }: InstancedGeometryProps) => {
+  const rigidBodies = useRef<RapierRigidBody[]>(null);
+
+  useEffect(() => {
+    if (!rigidBodies.current) {
+      return;
+    }
+
+    // Apply smaller impulses to random instances
+    for (let i = 0; i < 10; i++) {
+      rigidBodies.current[Math.floor(Math.random() * number)].applyImpulse(
+        { x: 0, y: 5, z: 0 },
+        true
+      );
+    }
+  }, []);
+
+  const instances = useMemo(() => {
+    const instances = [];
+    for (let i = 0; i < number; i++) {
+      instances.push({
+        key: "instance_" + Math.random(),
+        position: [Math.random() - 0.5, Math.random() * 2, Math.random() - 0.5],
+      });
+    }
+    return instances;
+  }, [number]);
+
+  return (
+    <InstancedRigidBodies
+      ref={rigidBodies}
+      instances={instances}
+      colliders="ball"
+    >
+      <instancedMesh args={[undefined, undefined, number]}>
+        <sphereGeometry args={[size, 48]}>
+          <instancedBufferAttribute
+            attach="attributes-color"
+            args={[colors, 3]}
+          />
+        </sphereGeometry>
+        <meshLambertMaterial vertexColors />
+      </instancedMesh>
+    </InstancedRigidBodies>
+  );
+};
+
+const Boxes = ({ colors, number, size }: InstancedGeometryProps) => {
+  const rigidBodies = useRef<RapierRigidBody[]>(null);
+
+  useEffect(() => {
+    if (!rigidBodies.current) {
+      return;
+    }
+
+    // Apply smaller impulses to random instances
+    for (let i = 0; i < 10; i++) {
+      rigidBodies.current[Math.floor(Math.random() * number)].applyImpulse(
+        { x: 0, y: 5, z: 0 },
+        true
+      );
+    }
+  }, []);
+
+  const instances = useMemo(() => {
+    const instances = [];
+    for (let i = 0; i < number; i++) {
+      instances.push({
+        key: "instance_" + Math.random(),
+        position: [Math.random() - 0.5, Math.random() * 2, Math.random() - 0.5],
+      });
+    }
+    return instances;
+  }, [number]);
+
+  return (
+    <InstancedRigidBodies
+      ref={rigidBodies}
+      instances={instances}
+      colliders="cuboid"
+    >
+      <instancedMesh args={[undefined, undefined, number]}>
+        <boxGeometry args={[size, size, size]}>
+          <instancedBufferAttribute
+            attach="attributes-color"
+            args={[colors, 3]}
+          />
+        </boxGeometry>
+        <meshLambertMaterial vertexColors />
+      </instancedMesh>
+    </InstancedRigidBodies>
+  );
+};
+
+const instancedGeometry = {
+  box: Boxes,
+  sphere: Spheres,
+};
+
+export default function PhysicTest() {
+  const [geometry, setGeometry] = useState<"box" | "sphere">("box");
+  const [number] = useState(200);
+  const [size] = useState(0.1);
+
+  const colors = useMemo(() => {
+    const array = new Float32Array(number * 3);
+    const color = new Color();
+    for (let i = 0; i < number; i++)
+      color
+        .set(niceColors[Math.floor(Math.random() * 5)])
+        .convertSRGBToLinear()
+        .toArray(array, i * 3);
+    return array;
+  }, [number]);
+
+  const InstancedGeometry = instancedGeometry[geometry];
+
+  return (
+    <Canvas
+      style={{
+        height: "400px",
+      }}
+      camera={{ fov: 50, position: [-1, 1, 2.5], up: [0, 1, 0] }}
+      onCreated={({ scene }) => (scene.background = new Color("lightblue"))}
+      onPointerMissed={() =>
+        setGeometry((geometry) => (geometry === "box" ? "sphere" : "box"))
+      }
+      shadows
+    >
+      <hemisphereLight intensity={0.35 * Math.PI} />
+      <spotLight
+        angle={0.3}
+        castShadow
+        decay={0}
+        intensity={2 * Math.PI}
+        penumbra={1}
+        position={[10, 10, 10]}
+      />
+      <Suspense>
+        <Physics gravity={[0, -5, 0]} colliders="hull">
+          <InstancedGeometry {...{ colors, number, size }} />
+          <RigidBody type="fixed" colliders="cuboid" position={[0, -1, 0]}>
+            <CuboidCollider args={[10, 0.5, 10]} />
+            <mesh receiveShadow>
+              <boxGeometry args={[10, 0.5, 10]} />
+              <meshStandardMaterial color="#999999" />
+            </mesh>
+          </RigidBody>
+        </Physics>
+      </Suspense>
+    </Canvas>
+  );
+}

src/content/blog/React Conf 2024 하루전.mdx

@@ -0,0 +1,82 @@
+---
+title: "React Conf 2024 하루 전"
+description: "샌프란과 산호세에서의 일상을 먼저 적으려다가, 어느새 베가스 까지 오게 되었다. 본래 목적지였던 라스베이거스, React Conf 2024가 열리는 곳이다. 3년만에 열리는 것이라 그런지 참석자들이 많다. 공항에서 리조트 까지는 거리가 꽤 있는지라 컨퍼런스 디스코드에서 같이 탈 사람을 구하기로 했다."
+author: "Yongseok"
+categories: ["life"]
+date: '2024-05-15T03:40:49.949Z'
+series: "미국 여행기"
+---
+
+샌프란과 산호세에서의 일상을 먼저 적으려다가, 어느새 베가스 까지 오게 되었다.
+
+본래 목적지였던 라스베이거스, React Conf 2024가 열리는 곳이다. \
+3년만에 열리는 것이라 그런지 참석자들이 많다.
+
+공항에서 리조트 까지는 거리가 꽤 있는지라 컨퍼런스 디스코드에서 같이 탈 사람을 구하기로 했다.
+<figure>
+<img src="/post/images/react_conf_1/react_conf_1_4.png" />
+<figcaption>Ride Share</figcaption>
+</figure>
+
+2시쯤 도착하는 사람들을 모아봤는데, 스피커 한분과 익숙한 한분이 있었다. 
+
+https://github.com/facebook/react/pull/28491
+
+저번에 react 에 PR을 올렸을때 comment에서 이야기를 나눈 분이었다. \
+온라인에서만 보던 사람들을 실제로 보게 되다니... 
+
+다른 한분을 기다리면서 이런저런 이야기들을 나누고, React 19가 언제 나올지에 대한 이야기도 나누었다.\
+여행 중 처음 회화를 했던 순간인데, 중간에 스몰톡이 끊길때면 진땀이 삐질삐질 났다. 
+
+
+<figure>
+<img src="/post/images/react_conf_1/react_conf_1_1.jpeg" />
+<figcaption>리조트</figcaption>
+</figure>
+
+
+
+<figure>
+<img src="/post/images/react_conf_1/react_conf_1_3.jpeg" />
+<figcaption>React Conf 2024 등록</figcaption>
+</figure>
+
+그렇게 어찌저찌 리조트에 도착했다. \
+정말 각지의 사람들이 모여있었는데, 유럽부터 남미 주로 준 영어권(?)에서 온 분들이 주를 이뤘다. \
+한국인 같은 사람들을 좀 찾아보았는데, 의심만 해보고 말을 걸어보지 못했다.
+
+조금 기다리니 PR이나, 유튜브에서 봤던 사람들이 나타나기 시작했다. 버셀의 리 로빈슨도 보이고.. 유튜버 theo... tanstack 라이브러리 만드신 Tanner ...
+다들 실제로 보니 정말 신기했다. 막상 나서서 같이 사진 찍고 싶었지만, 그런 분위기가 아니었다. 다들 쿨하게 '너가 OOO이지? 반가워' 정도로만 말을 걸고 지나갔다.
+차마 나서서 셀피찔자고 할 수 없었다.
+
+그래도 좀 다른 사람들이랑 얘기를 나누고 싶어서, 디스코드에 말한마디 남기고 두리번 거리고 있었는데, \
+마침 mongoDB에서 일하시는 분이 나서서 말을 걸어주셨다. \
+덴마크에서 온 분이셨는데, 자식들이 태권도와 합기도를 배운다고 하셔서, K-태권도에 대해서 조금 얘기를 나누었다. \
+제일 어려웠던 파트는 '리멤버'가 어떤 회사고 무슨 서비스를 하는지 설명하는 것이었다. \
+비지니스 카드를... 찍어서... 디지타이제이션... 그걸가지고... HR 서비스를... 하는 회사라고... 설명을 했는데, \
+인생에서 제일 힘든 순간이었다.
+
+<figure>
+<img src="/post/images/react_conf_1/react_conf_1_5.png" />
+<figcaption>친절하신 분</figcaption>
+</figure>
+
+그렇게 잠시 이야기 나누고 등록을 마치고, 다들 흩어져서 이야기를 나누고 있었다. \
+나도 맥주한병 들고 끼어들어야겠다 용기를 가지고 맥주를 주문 하러 바에 갔지만... \
+
+여권을 방에 두고 왔다는 것을 깨달았다. \
+그렇게 한번 좌절하고 나니. 오늘의 자신감이 다 바닥나버려서, 그냥 방으로 돌아왔다. \
+그리고 저녁도 마땅치가 않아, 참다가 우버이츠를 손에 들었다. \
+
+여기가 라스베이거스 외각 리조트라 대부분 식당이랑 거리가 먼데, 자동차의 나라라 그런지. 먼거리도 배달이 가능했다. 
+
+
+<figure>
+<img src="/post/images/react_conf_1/react_conf_1_6.png" />
+<figcaption>6마일의 배달</figcaption>
+</figure>
+
+아직도 고민이다. 지금이라도 나가서 기웃기웃 거려볼까? 
+하지만 체력이고 뭐고 지금 다 떨어진 상태다. \
+마음 속에선 여전히 기회와 용기 사이에서 갈등 중이지만, 몸은 무거워서 누워있는 중이다.
+내일 노력해보자.

src/content/blog/비행기안에서.mdx

@@ -1,6 +1,6 @@
 ---
 title: "비행기 안에서"
-description: ""
+description: "고도 33,000피트 태평양 상공 어딘가에서 와이파이를 쓸 수 있을 줄 몰랐다. 잔뜩 오프라인 저장 해온 유튜브 영상들이 무색해졌다. 비행중에 커밋 한줄 남겨보고자 글을 써보고 있다."
 author: "Yongseok"
 categories: ["life"]
 date: "2024-05-10 18:46"

src/content/blog/팔로알토.mdx

@@ -1,6 +1,6 @@
 ---
 title: "팔로알토"
-description: ""
+description: "벌써 3일차가 되어간다. 한국은 일요일이 끝났지만, 여긴 이제 일요일을 시작한 오전 10시쯤 이다. 매일매일 자기전에 기록을 남겨두고자 하였는데, 시차에 시달리며 촬영한것들 정리하고, 긴장이 풀려 씻고 나니 잠들게 되었다."
 author: "Yongseok"
 categories: ["life"]
 date: "2024-05-12T18:19:25.095Z"