괴발개발 성장기

배경실무에서 적용할 때에는 클릭을 하면 무언가가 나오게 해야 효과적이라고 생각이 들었다.그래서 이벤트를 적용시켜봤다. 상황구를 클릭하면 육면체로 변경하고육면체를 클릭하면 구로 변경된다. const Sphere = ({onClick}) => { return ( );};  - Sphere 컴포넌트에 onClick이라는 props를 받아들입니다.- Sphere 컴포넌트는 핑크색 육면체이다. const Circle = ({ onClick }) => { const circleRef = useRef(); ..

배경 지구는 도니까 3D 물체도 움직이게 만들고 싶었다. 고양이가 아니라 구형을 자동으로 돌려보자! 저번에 만들어 놓은 Circle 함수에 움직일 수 있게 코드를 넣어보자 2024.03.10 - [Study/React] - [Three.js] 캔버스안에 구형(공모양)을 3D로 만들어보자 [Three.js] 캔버스안에 구형(공모양)을 3D로 만들어보자 # 이전글 2024.02.21 - [Study/자바스크립트] - [Three.js] 캔버스안에 구형(공모양)을 넣어 보자 [Three.js] 캔버스안에 구형(공모양)을 넣어 보자 # 배경 회사 스터디로 진행을 하게 되었다. 동료가 Three.js를 pink1016.tistory.com 전체 코드 const Circle = () => { const circle..

# 배경 Three.js 를 공부하다가 느낀 건데 디자인을 많이 생각해야한다는 것을 느꼈다. 백엔드 개발자인 내가 3D 모델을 만드는게 의미가 있나라는 생각이 들었다. 만약 내가 Three.js 사용한다면 디자이너가 만들어 준 3D 모델에 이벤트를 넣어주는 것이 내가 해야할 역할이라고 생각했다. # 3D 모델 가져오는 방법 1) 아래 사이트를 가서 회원가입 후에 로그인 한다. https://sketchfab.com/ Sketchfab - The best 3D viewer on the web With a community of over one million creators, we are the world’s largest platform to publish, share, and discover 3D con..

3D 물체를 마우스로 움직이게 할 수 있다. 그걸 하기 위해서 코드를 작성해봤다. 이 코드를 넣으면 마우스나 터치 입력을 사용하여 3D를 자유롭게 회전하고 이동할 수 있습니다. # 코드 const Sphere = () => { return ( ); }; 코드를 작성하면 아래 동영상처럼 3D 물체가 자유롭게 움직인다. # 참조 이슈 https://github.com/YooGenie/react-study/issues/47 3D 물체를 마우스로 움직이게 한다 · Issue #47 · YooGenie/react-study github.com

# 배경 지난 번에는 구형을 만들어봤다. 조금 아쉬워서 정육면체 만들어 봤다. # 정육면체 만들기 const Sphere = () => { return ( ); }; 위에 코드를 캔버스에 넣으면 const Model = () => { return ( ); }; 아래 그림처럼 나타난다. 정육면체를 만들었습니다. 그럼 직육면체도 만들수 있습니다. # 직육면체를 만든 방법 x, y, z 축이다. 숫자만 다르게 해주면 직육면체가 된다. 다음에는 마우스으로 3D 물체를 움직이게 만드는 방법을 해보겠습니다.

# 이전글 2024.02.21 - [Study/자바스크립트] - [Three.js] 캔버스안에 구형(공모양)을 넣어 보자 [Three.js] 캔버스안에 구형(공모양)을 넣어 보자 # 배경 회사 스터디로 진행을 하게 되었다. 동료가 Three.js를 제안했다. 이때 Three.js 기술을 처음 알았다. 이건 리액트에 Three.js를 작용시켜보겠습니다. # 설치 방법 yarn add three or npm install three # 캔 pink1016.tistory.com 이전 글에서는 그냥 원으로만 보였다. 입체적으로 보이게 하기 위해서 빛을 줘야한다. # 3D 구형 만들기 const Circle = () => { return ( ); }; ambientLight : 주변 광 추가 directional..

# 배경 회사 스터디로 진행을 하게 되었다. 동료가 Three.js를 제안했다. 이때 Three.js 기술을 처음 알았다. 이건 리액트에 Three.js를 작용시켜보겠습니다. # 설치 방법 yarn add three or npm install three # 캔버스를 만들어보자 페이지 하나를 만들어서 거기 캔버스를 만들었다. 도화지라고 생각하면 된다. import {Canvas} from "@react-three/fiber"; const Model = () => { return ( ); } export default Model; 빨강색이 캔버스이다. # 캔버스안에 구형(공모양)을 띄어보자 npm install three @react-three/fiber @react-three/drei or yarn add..

# 배경 회사서비스에 redux를 적용했다. 그런데 새로고침을 누르면 페이지가 하얀페이지로 바뀐다. 로그를 확인하니까 state값이 사라져서 하얀페이지로 변하는 거였다. # 예시 상태값이 새로고침을 하면 초기값에 저장된 데이터로 변경이 된다. # 해결방법 redux-persist 라이브러리를 이용해서 해결해보자 # 설치 npm install redux-persist or yarn add redux-persist # 1) index.js 추가해준다. - PersistGate를 사용하여 지속성을 관리한다. import {Provider} from "react-redux"; import { store } from "./page/study/redux/store"; import {PersistGate} from ..

redux JavaScript 애플리케이션의 상태를 효율적으로 관리하기 위한 상태 관리 라이브러리 하나의 상태를 갖는다. => 어플리케이션의 복잡성을 낮춘다. # store - 정보(객체)가 저장되어 있는 곳 - 안에는 state가 있다. 직접 접근 불가능 # action - 상태를 변경하는 작업을 나타내는 객체 - type 속성 일반적으로 가지고 있다. # reducer - state값을 가공해서 리턴해주면 state에 새로운 값이 된다. - 현재 상태와 액션을 받아 새로운 상태를 반환하는 함수 # state - state는 객체이다. - state를 다이렉트로 수정할 수 없다. # dispatch - reducer 호출 해서 state 값을 변경해준다. - subscribe를 이용해서 render 함..

설치 방법 yarn add redux yarn add react-redux # index.js import {Provider} from "react-redux"; ReactDOM.render( , , document.getElementById('root') ); : Redux 스토어를 React 애플리케이션에 제공하는 역할을 하는 Provider 컴포넌트이다. store는 Redux 스토어 객체로, 이를 통해 애플리케이션의 상태를 관리한다. # actions.js - 액션을 만든다. export const updatePageState = (state) => { return { type: "UPDATE_PAGE_STATE", payload: state, }; }; - type : 액션의 유형을 나타내는 문..