목록전체 글 (121)

개발노트

useEffect 재정리

06 리엑트 라이프사이클컴포넌트 생애주기 (class에 해당되는 이벤트지만 알아두기)state, method 및 처음으로 렌더링 실행후 =>componentDidMount -> (state/props change) -> (True일경우)shouldComponentUpdate -> (render) -> componentDidUpdate -> (하위컴포넌트 삭제시) -> componentWillUnmount -> 소멸 컴포넌트가 첫 렌더링 된 후 실행componentDidMount             useEffect( ()=>{     } )비동기 요청여기서  리렌더링 후 실행componentDidUpdate           useEffect ( ()=>{ return()=>{}  } ) 컴포넌트가 제..
React 2025. 4. 8. 15:50
Three.js, R3F animating box 구현 예제 - 2

Threejs, R3F animating box 구현 예제 1. Three.js 사용해서 구현    - scene, renderer, camera 생성하기   - 물체 Object 추가하기   - 큐브 animating   - ui 컨트롤러 추가, 클릭시 fov변경 하기2. R3F 사용해서 구현    - 박스 컴포넌트 생성   - 박스 컴포넌트 animating   - Canvas 만들기 (scene, renderer, camera)   - ui 컨트롤러 추가, 클릭시 fov변경 하기   - 그리드, 좌표계(girdHelper, axesHelper) 추가하기   - 마우스컨트롤(OrbitControls) 추가하기 2. R3F(react three fiber) 사용해서 구현implementing an An..
카테고리 없음 2025. 2. 7. 10:51
Three.js, R3F animating box 구현 예제 - 1

Threejs, R3F animating box 구현 예제 1. Three.js 사용해서 구현    - scene, renderer, camera 생성하기   - 물체 Object 추가하기   - 큐브 animating   - ui 컨트롤러 추가, 클릭시 fov변경 하기2. R3F 사용해서 구현   - 박스 컴포넌트 생성   - 박스 컴포넌트 animating   - Canvas 만들기 (scene, renderer, camera)   - ui 컨트롤러 추가, 클릭시 fov변경 하기   - 그리드, 좌표계(girdHelper, axesHelper) 추가하기   - 마우스컨트롤(OrbitControls) 추가하기 1. Three.js 사용해서 구현implementing an Animating box in ..
카테고리 없음 2025. 2. 6. 17:51
slot machine

React 슬롯머신 게임을 만들어 보았다.기획, 퍼블, react로 구현 제작기간 하루 https://aloha-jh.github.io/slotmachine  Slot Machine 게임 규칙레버 당기기:게임을 시작하려면 레버(핸들)를 클릭하세요.클릭 시 릴(reels)이 회전하기 시작합니다.릴 멈추기:세 개의 릴은 각각의 버튼을 클릭하여 멈출 수 있습니다.첫 번째 릴은 btn b0, 두 번째 릴은 btn b1, 세 번째 릴은 btn b2 버튼으로 멈춥니다.승리 조건:모든 릴이 같은 심볼로 정렬되면 승리(WIN)가 표시됩니다.예: 릴 1, 릴 2, 릴 3이 모두 같은 심볼(예: lemon, lemon, lemon)일 때 승리입니다.
React/webgame 2024. 10. 17. 23:00
이전 Prev 1 2 3 4 ··· 31 Next 다음