1101(수) ~ 1103(금) FE 회의록

이야기할 것

• 기술스택 확정
  • React + typescript 확정
  • 상태관리 라이브러리 등 정해야 함
• 사용할 기술스택에 관한 이해
  • 다른 기술들과의 차이점
  • 이 기술을 쓰는 이유
  • 위의 내용들을 기록해두기
• 코딩컨벤션
• 앞으로의 일정
• 역할 분담
• 폴더 구조

기술스택

• React
• Typescript
• R3F
• three.js
• zustand
• emotion
• vite
• yarn berry
• gitmoji

https://jasonkang14.github.io/react/styled-component-vs-tailwind-css

• 상태관리라이브러리

  상태관리 라이브러리 비교: Redux vs Recoil vs Zustand vs Jotai

  

  https://hwani.dev/girok-why-zustand/

  https://ui.toast.com/posts/ko_20210812

  https://programming119.tistory.com/263

https://github.com/depromeet/ggogeet-client

https://toss.tech/article/node-modules-and-yarn-berry

[당신의 PM 선택에 도움이 되는 글](https://velog.io/@adultlee/당신의-PM-선택에-도움이-되는-글)

[https://velog.io/@gene028/커비샵-개발일지-1-프로젝트-세팅하기-Vite-React-Typescript](https://velog.io/@gene028/%EC%BB%A4%EB%B9%84%EC%83%B5-%EA%B0%9C%EB%B0%9C%EC%9D%BC%EC%A7%80-1-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0-Vite-React-Typescript)

에어비엔비

[GitHub - tipjs/javascript-style-guide: Airbnb JavaScript 스타일 가이드 한국어](https://github.com/tipjs/javascript-style-guide)

https://medium.com/@kthamodaran/react-8-best-practices-folder-structure-5dbda48a69e

• import Box from "./Box";
  import Star from "./Star";
  import { Canvas } from "@react-three/fiber";
  import { OrbitControls } from "@react-three/drei";
  
  export default function Screen() {
    return (
      <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <div style={{ width: "100vw", height: "100vh" }}>
          <Canvas
            camera={{
              position: [0, 1, 50],
            }}
          >
            <ambientLight />
            <Star position={[0, 0, 10]}>
              <Box position={[0, 10, 0]} />
              <Box position={[20, 20, 0]} />
            </Star>
  
            <gridHelper args={[100, 100]} />
            <axesHelper args={[80]} />
  
            <OrbitControls />
          </Canvas>
        </div>
      </main>
    );
  }
  
  import * as THREE from "three";
  import { useFrame, ThreeElements } from "@react-three/fiber";
  import { useState, useRef } from "react";
  
  export default function Box(props) {
    const meshRef = useRef();
    const [hovered, setHover] = useState(false);
    const [active, setActive] = useState(false);
  
    useFrame((state, delta) => {
      meshRef.current.rotation.x += delta;
      meshRef.current.rotation.y += delta;
    });
  
    return (
      <mesh
        ref={meshRef}
        scale={active ? 1.5 : 1}
        onClick={(event) => setActive(!active)}
        onPointerOver={(e) => setHover(true)}
        onPointerOut={(e) => setHover(false)}
        {...props}
      >
        <boxGeometry args={[5, 5, 5]} />
        <meshStandardMaterial color={hovered ? "hotpink" : "orange"} />
      </mesh>
    );
  }
  
  import * as THREE from "three";
  import { useFrame, ThreeElements } from "@react-three/fiber";
  import { useState, useRef } from "react";
  
  export default function Star(props) {
    const meshRef = useRef();
    const [hovered, setHover] = useState(false);
    const [active, setActive] = useState(false);
  
    useFrame((state, delta) => {
      meshRef.current.rotation.x += delta;
      meshRef.current.rotation.y += delta;
    });
  
    return (
      <mesh ref={meshRef} position={props.position}>
        <mesh
          scale={active ? 1.5 : 1}
          onClick={(event) => setActive(!active)}
          onPointerOver={(e) => setHover(true)}
          onPointerOut={(e) => setHover(false)}
        >
          <sphereGeometry args={[5, 64, 32]} />
          <meshStandardMaterial color={hovered ? "hotpink" : "orange"} />
        </mesh>
        {props.children}
      </mesh>
    );
  }

[GitHub - pachoclo/vite-r3f-ts-template: React Three Fiber (R3F) + Vite + TypeScript Template](https://github.com/pachoclo/vite-r3f-ts-template)

[https://velog.io/@beforesol/Yarn-berry-Vite-React-Typescript-recoil-환경-설정](https://velog.io/@beforesol/Yarn-berry-Vite-React-Typescript-recoil-%ED%99%98%EA%B2%BD-%EC%84%A4%EC%A0%95)