반응형 Framework43 React 회원가입 API (로그인 기능 전) (React Hook Form을 가지고 회원가입, 로그인페이지 유효성 검증까지 해놓은 상태임) 1. express모듈을 설치했고, Mongoose library로 mongoDB를 연결했다. 2. model과 schema를 생성 3. clinet - server 통신 test해봄 (body-parser 설치 후) 4. mongoURI보호를 위해 환경 변수를 나눠주었다. 5. bcrypt를 통해 비밀번호 암호화 먼저 클라이언트 //[client] signup.jsx const onValue = (data) => { axios.post('http://localhost:3000/auth/register', { email: data.email, pw: data.pw, pwComfirm: data.pwComfirm.. 2022. 10. 31. React.memo, useCallback(), useMemo() 리액트는 컴포넌트를 렌더링 한 뒤에 이전 결과와 비교하여 DOM을 업데이트 한다. 컴포넌트를 나누는것은 재사용성을 위해서 이지만, 컴포넌트의 렌더링 최적화를 위해서 이기도 하다. 결국 렌더링이 최대한 덜 될 수 있있게 해야하는데, 이때 리 렌더링이 필요없는 컴포넌트의 렌더링을 방지하여 성능을 높일 수 있는 방법들이 있다. React.memo 컴포넌트 렌더링 최적화 리 렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있다. 예를들어 todoList 리액트 앱에서 todo list form영역에서 input에 입력을 하게 된다면, value를 가지고 있는 부분만 렌더링이 아닌 연관이 없는 컴포넌트까지 같이 렌더링이 되는것을 확인할 수 있다. 이러한 부분은 react.memo를 적용해서 컴포넌트에.. 2022. 10. 26. React Hook Form 회원가입 유효성 체크 📌 React Hook Form 모듈 다운 받기 npm install react-hook-form --save useForm import하기 import { UseForm } from 'react-hook-form' register() const { register } = useForm(); {...register("email")} input 태그 안에 register 함수를 spread해서 넣어줄 수 있다 (ES6 문법) watch() const { watch } = useForm(); console.log(watch('email'))` watch() 지정된 input을 관찰하고 해당 값을 반환한다. 관찰 하려는 input 요소에 register를 등록해준다. *버전 7부터 변경됨 : ref={regi.. 2022. 10. 24. 리액트 CRUD 해보기 연습용으로 만든 Dummy데이터는 고정되었기에 사용자의 액션에 따라서 데이터를 읽고 쓰고 업데이트, 삭제해보자! 그러기 위해서는 DB를 구축하고 API를 만들어야하는데, JSON서버를 이용해서 RESTful API를 만들어 보자! [REST API란?] Representational State Transfe uri주소와 메서드로 CRUD요청을 하는 것! 즉 웹 데이터 전송 방식을 말한다. Create : POST Read : GET Update : PUT Delete : DELETE URI는 식별하고, URL은 위치를 가르킨다. URI: 웹 기술에서 사용하는 논리적 또는 물리적 리소스를 식별하는 고유한 문자열 시퀀스 URL: 흔히 웹 주소라고도 하며, 네트워크 상에 리소스가 어디에 있는지 알려주기 위한 .. 2022. 10. 22. 이전 1 ··· 6 7 8 9 10 11 다음 728x90 반응형
