form 을 통해 데이터를 백엔드로 보내주는 라이브러리중 제일 인기많은것중 하나는 바로 React-hook-form 리액트 훅 폼 되시겠다..! 이번 사이드프로젝트 Side-Effect 에서는 로그인 과 회원가입 모두를 간단하게 모달로 처리하였다. 로그인시 회원이라면 액세스토큰을 저장하고 로그인 처리를 하고 회원이 아니라면 닉네임부터 입력하는 모달로 바뀌게된다 ^_^ 여기서 문제! 나는 보통 리액트 훅 폼을 사용할때 유효성 검사를 하고 서버에 제출하는 정도로만 사용하였었다. 근데 회원가입중 필수인것이 닉네임 중복검사 이다..!! 닉네임 중복검사는 API요청을 보내서 확인해야하는데 어떻게 해야할까..? 모달의 전체적인 코드이다. Next 버튼을 누르면 제출이 되도록 되어있다. Input 컴포넌트의 id 와..
모든 식별자(변수,함수,클래스 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라 한다. 즉 , 스코프는 식별자가 유효한 범위를 말한다. 스코프의 종류 스코프는 전역스코프 와 지역스코프 로 구분할 수 있다. var x = "global x"; var y = "global y"; function outer() { var z = "outer's local z"; console.log(x) global x console.log(y) global y console.log(z) outer's local z function inner() { var x = "inner's local x "; console.log(x) inner's local x cons..
console.log(add(2,5)) console.log(sub(2,5)) //함수 선언문 function add(x,y) { return x+y; } // ok //함수 표현식 const sub = function (x,y) { return x-y; } // bad 함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출될 수 있다. 반면 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출할 수 없다. 이와 같은 이유는 함수 선언문으로 정의한 함수와 표현식으로 정의한 함수의 생성 시점이 다르기 때문이다. 모든 선언문 코드는 코드가 실행되는 시점인 런타임 이전에 자바스크립트 엔진에 의해 먼저 실행된다. 즉 선언문으로 정의한 함수는 런타임이전에 함수객체가 생성되는것. 이처럼 함수 선언문이 코드의 선두..
Redux 에서 새로운 객체를 반환해야하는 이유 이전에 React 로 먼저 예시를 들어보겠다. 일반적으로 React 에서는 상태의 변화를 일으키고싶을땐 useState 의 setState 를 이용한다 . 직접 state를 조작하지 않는 이유는 무엇일까? React 에서는 이전 state 와 바뀌는 state를 얕은비교하여 만약 둘의 상태가 똑같지않다면 리랜더링을 시킨다. 근데 만약 setState를 쓰지않거나 state를 직접 조작한다면 당연히 비교가 안되기때문에 리랜더링도 안되는것! 여기서 얕은비교란 객체,배열,함수 같은 참조 타입들을 실제 내부 값까지 비교하지않고 동일 참조인지 비교하는 것. Redux도 마찬가지이다. 스토어에 저장되어있는 상태들을 직접 조작하게되면 비교가 안되기때문에 상태변화를 시킬..
