react 16

[React] Warning: A component is changing an uncontrolled input to be controlled.

React MUI와 React-hook-form 을 함께 이용하기 위해서 useController 를 사용하던 중, 다음과 같은 에러를 만나게 되었다.⚠️Warrning: A component is changing an uncontrolled input to be controlled. uncontrolled…? 라고 해서 react hook form 관련 문제인가 싶었는데 아니었다.더 자세히 에러 메시지를 읽어보니 이렇게 나와있었다. this is likely caused by the value changing from undefined to a defined value, 처음에 빈값이어서 undefined 상태였던 값에 string이든 number을 주려고 해서 발생한 문제였다.대부분의 블로그들은 ||..

React 2023.04.18

[gsap] react gsap 스크롤 내리면 사라짐, 새로고침하면 스크롤 사라짐 (Gsap when Scroll down)

오늘의 배움 및 삽질부드러운 스크롤 이벤트를 위해서 gsap라이브러리를 사용하고 있다.스크롤을 내리면 작동이 안되는데, 이상하게 스크롤을 올리면 또 애니메이션이 작동하는 이상한 현상이 발생했다.(그리고 새로고침하면 스크롤이 사라지는 현상도….) 해결책1. Strict Mode 주석처리하기가장 간단한 방법은 스트릭 모드를 주석처리하는 것이다. App.tsx 혹은 Main.tsx의 StrictMode 를 없애준다. 2. gsap.context() 사용하기위의 방법이 가장 간단하지만, 근본적인 해결방법은 아니라고 할 수 있다! gsap x x react 공식문서에서는 이를 해결하기 위한 방법을 제시해준다.GSAP X ReactGSAP is a framework-agnostic animation library,..

React/gsap 2023.03.31

[RTF] 6. 외부에서 Model 가져오기 Models and Textures

이 페이지는 youtube에서 Devving It With Sohail 님의 영상을 보고 정리한 글입니다.Three js, React Three Fiber, React Three Drei Tutorial 2022 | Part 1 | Getting startedHey there! 🙋 This series is meant to get you started with React-Three-Fiber and React-Three-Drei EVEN if you don't have any prior experience with Three.js. I'll be explaining to you Three.js concepts as we go over implementing these with React.js. The n..

[RTF] 5. 애니메이션 Animation with GSAP

이 페이지는 youtube에서 Devving It With Sohail 님의 영상을 보고 정리한 글입니다.Three js, React Three Fiber, React Three Drei Tutorial 2022 | Part 1 | Getting startedHey there! 🙋 This series is meant to get you started with React-Three-Fiber and React-Three-Drei EVEN if you don't have any prior experience with Three.js. I'll be explaining to you Three.js concepts as we go over implementing these with React.js. The n..

[RTF] 4. 빛과 그림자 다루기 Light, Shadows, Environments

이 페이지는 youtube에서 Devving It With Sohail 님의 영상을 보고 정리한 글입니다.Three js, React Three Fiber, React Three Drei Tutorial 2022 | Part 1 | Getting startedHey there! 🙋 This series is meant to get you started with React-Three-Fiber and React-Three-Drei EVEN if you don't have any prior experience with Three.js. I'll be explaining to you Three.js concepts as we go over implementing these with React.js. The n..

[RTF] 3. 카메라 설정하기 Camera & Orbit Control

이 페이지는 youtube에서 Devving It With Sohail 님의 영상을 보고 정리한 글입니다.Three js, React Three Fiber, React Three Drei Tutorial 2022 | Part 1 | Getting startedHey there! 🙋 This series is meant to get you started with React-Three-Fiber and React-Three-Drei EVEN if you don't have any prior experience with Three.js. I'll be explaining to you Three.js concepts as we go over implementing these with React.js. The n..

[RTF] 2. 물체 다루기 Geometry, Material and Mesh

이 페이지는 youtube에서 Devving It With Sohail 님의 영상을 보고 정리한 글입니다.Three js, React Three Fiber, React Three Drei Tutorial 2022 | Part 1 | Getting startedHey there! 🙋 This series is meant to get you started with React-Three-Fiber and React-Three-Drei EVEN if you don't have any prior experience with Three.js. I'll be explaining to you Three.js concepts as we go over implementing these with React.js. The n..

[RTF] 1. React-Three-Fiber (with TypeScript) 시작하기

이 페이지는 youtube에서 Devving It With Sohail 님의 영상을 보고 정리한 글입니다.Three js, React Three Fiber, React Three Drei Tutorial 2022 | Part 1 | Getting startedHey there! 🙋 This series is meant to get you started with React-Three-Fiber and React-Three-Drei EVEN if you don't have any prior experience with Three.js. I'll be explaining to you Three.js concepts as we go over implementing these with React.js. The n..

[React] 리액트 초보의 로그인& 회원가입 고군분투: 3. React Hook Form UseController로 입맛대로 커스텀하기 (feat.TypeScript)

목차1. 하나의 Form에 여러개의 공통된 Input을 쓴다면?2. Use Controller 맛보기2-1. 파라미터2-2. 리턴해주는 객체3. 이제 진짜 사용해보자 컨트롤러4. Tailwind를 사용해서 더 아름답게 디자인하기참고한 글 1. 하나의 Form에 여러개의 공통된 Input을 쓴다면?컴포넌트 팡인 우리 조🧚🏻 답게 이미 귀여운 inpiut 디자인까지 다 뽑아두었건만!!!react-hook-form을 쓰면 내가 만들어둔 귀여운 디자인의 Input을 못쓰는 거 아닌가!? 인라인 스타일로 css 다 다시 박아넣으라구?!!? 당장 재.활.용 내놔. 라고 생각할 때 아주 소중한 글을 발견했다. 바로 useController라는 훅을 사용하면 내 입맛대로 custom이 가능하다는 것!!자세한 것은 공식..

React/회원관리 2023.02.17

[React] 리액트 초보의 로그인& 회원가입 고군분투: 2. React Hook Form 가볍게 시작하기 (feat.TypeScript)

공식문서를 따라서 가볍게 시작해봅시다. 우리 프로젝트는 TypeScript를 사용하기 때문에 TypeScript를 기반으로 설명을 이어가겠습니다.Get StartedInstalling React Hook Form only takes a single command and you're ready to roll. Copy The following code excerpt demonstrates a basic usage example: ♦ This video tutorial illustrates the basic usage and concepts of React Hook Form. One of the key concepts in React Hook Form is to register your component i..

React/회원관리 2023.02.17