반응형 JS_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 반응형
