빠르게 성장하는 개발자

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을 주려고 해서 발생한 문제였다.대부분의 블로그들은 ||..

오늘의 배움 및 삽질부드러운 스크롤 이벤트를 위해서 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,..

목차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는 처음인데다 이전에 야매로 만들었던 관통 프로젝트와는 다르게 토큰도 access token과 refresh token을 사용하고, 회원가입시 메일로 인증과정을 거치는 나름 업그레이드 버전 회원가입이다.(그리고 SNS 회원가입 & 로그인도 있다.) 앞으로 올라오는 게시글 시리즈는 리액트 초보의 로그인 & 회원가입 고군분투 과정이다. 나같은 React Newbie들에게 이 글을 바친다. 1. React-hook-form 이 무엇이냐리액트에서 회원가입, 정보기입 등 다양한 form을 사용할 일이 많을 것이다.그때마다 물론 useState 같은 hook을 사용하여 상태관리를 하고, 유효성 검사용 함수를 만들어서 검사를 진행하고 유..

1. Vue를 기억하며어쩔 수 없이 Vue를 기억하게 되는건 나의 첫 사랑이 아니라 처음으로 배운게 Vue라서.Vue에서도 부모 → 자식 컴포넌트로 객체를 전달 할 때 ‘props’ 라고 사용했다.React에서도 똑같다. function Welcome(props) { return Hello, {props.name}; } const root = ReactDOM.createRoot(document.getElementById('root')); const element = ; root.render(element) 2. Vue와의 큰 차이!Vue는 props로 받는 자식쪽에서 반드시 prop의 data type을 지정해주었다.하지만 React는 그럴 필요가 없다.⇒ 이게 단점이 될 수도 있는 것이 data 형식을..

1. 컴포넌트에 대한 이해React 2번째 글에 컴포넌트에는 ‘함수형’ 컴포넌트와 ‘클래스형’ 컴포넌트가 있다고 작성했었다.구분하는 방법은 간단하다! 그냥 class로 시작하면 컴포넌트 클래스이고, function으로 시작해서 return이 있으면 함수형 컴포넌트 이다.2. State일반적으로 함수형 컴포넌트에서는 state가 없는 컴포넌트 라고 알려져 있다.하지만, HOOK 의 등장으로 달라졌다!(나는 노마드코더님의 강의를 들으면서 진행했는데, 이분은 클래스 컴포넌트를 아예 알려주지도 않았다. ) 함수형 컴포넌트에서 state를 사용하려면 가장 기초가 되는useState()라는 훅을 이용하면 된다.const [counter, setValue] = useState(0); const onClick = ()..

1. Vue 처럼 React 에서도.맨 처음 vue를 배울 때, html의 script부분에 링크를 달아서 CDN방식으로 사용한 경험이 있다.React도 처음에 그렇게 배웠다.vue-cli방식으로 넘어간 것처럼, react도 create-react-app이라는 방식이 있다.npx create-react-app 의 형식으로 만든다.2. 장점?컴포넌트의 분리예전에 CDN방식을 사용한 것과 다르게, 목적에 따라 js파일을 분리해서 사용할 수 있다. css의 사용니꼴라스 선생님이 “super cool 😎” 한 부분이라고 강조한 것이 있다.바로 평소에 css에 class를 사용했으면 중복되지 않기 위해서 꼭 클래스 이름을 기억해야 했다.(클래스 이름 짓는 것도 일이다.)하지만 React에서는 다르다~App.mod..

1. State 짤막 Review Vue에서는 Vuex라는 라이브러리를 설치해서 app에 있는 모든 component의 중앙저장소인 state를 관리했다. 그렇다면 React에서는? state는 사전적 의미로 상태 라는 뜻이다. 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다. 각각의 Component에서 state를 관리한다. Props는 컴포넌트에 전달되고, State는 컴포넌트 '안'에서 관리된다. state는 직접 수정하지 않고! setState라는 함수를 통해 수정해야 한다. class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } rende..