만약에 데이터를 update 해준다고한다면? graphql에서 update 되는 값이 ndefined 라면 동작을하지않는다. 그러면 비밀번호가 바뀐다면?? 바뀐비밀번호를 다시 암호화해서 넣어주는 작업이필요하다 개인정보수정을 크게 두가지로 나뉜다. 1. 수정할 User가 있을때 update - 비밀번호를 수정할때 ( 입력한비밀번호 -> 암호화 ) update - 나머지 필드 update - 성공시 return true 2. 수정할 User가 없을때 not update - 실패 return false ,error 2. 토큰값 설정 로그인후 토큰값이 설정된후 사용자가 프로필수정, 등록등 어떤 동작을취할때 토큰을 확인해 이 사용자구나 확인을한후 그 동작을 처리해준다 1. 로그인된경우 로그인 -> 개인 토큰값 생..

1. 로그인 로그인은 크게 3가지로 나뉘어진다. 1. id 가 존재하는가 2. 비밀번호가 db에 저장되어있는 비밀번호랑 같은것인가 3. 토큰을 생성한다. 위의 코드로 설정해주고 테스트를 해주었다. 여기서 알아야할점은 토큰이다. 토큰이란? 토큰은 쉽게보면 내가 누구인지 알수있게하는 고유번호라 생각하면된다. 다른 요청이있을때 이토큰을이용해서 나의 고유번호를 확인할수 있는과정이라 생각하면된다. 토큰을 발생하기위해서는 jsonwebtoken 설치를 해주면된다. npm install jsonwebtoken 발생된 토큰에 대한 정보를 다시보려면 https://jwt.io/ JWT.IO JSON Web Tokens are an open, industry standard RFC 7519 method for repres..

1. prisma 생성하기 npx prisma init 명령어로 prisma 를 생성한다 그후 env파일은 전에했던건 처럼 database와 user이름을 잘 맞춰준다. 1. model 을 만든다 Schema.prisma 파일 // This is your Prisma schema file, // learn more about it in the docs: https://pris.ly/d/prisma-schema generator client { provider = "prisma-client-js" } datasource db { provider = "postgresql" url = env("DATABASE_URL") } model User { id Int @id @default(autoincrement()..

1. 리덕스로 폼 상태 관리하기 auth 모듈을 수정해준다. /* * * @title auth.js * @desc auth 모듈생성 (redux toolkit적용 ), counterSlice api사용 * * * @author yunrap * @since 2022.07.17 17:27:11 * @version 0.1.0 * @see =================== 변경 내역 ================== * 날짜 변경자 내용 * 2022.07.17. yunrap 최초생성 */ import { createSlice } from "@reduxjs/toolkit"; const initialState = { register: { username: "", password: "", passwordConfir..

1. UI 구현하기 1. AuthForm.js 화면 import styled from "styled-components"; /* * * @title AuthForm.js * @desc 회원가입폼 * * * @author yunrap * @since 2022.07.18 20:18:22 * @version 0.1.0 * @see =================== 변경 내역 ================== * 날짜 변경자 내용 * 2022.07.18. yunrap 최초작성 */ const AuthFormBlock = styled.div``; export default function AuthForm() { return AuthForm; } 회원가입을 위한 폼이다. src/components/auth/ Au..

우선 PureComponent 에대한 기초지식이있어야한다. PureComponent는 component에 state나 propr의 변화가 없다면 다시 렌더링하지않도록한다. 그기준은 props와 state를 지금 업데이트된 props와 state를 얕은 비교( 객체의 참고주소를 비교) 후 동일한 레퍼런스라면 데이터 변경되어도 객체는 같다고 취급한다. 이기준을 잡고 함수형 컴포넌트를 구현해보자 1. React.memo Input 컴포넌트도 pureComponent이다. purecomponent를 사용하려면 React.memo 를 사용하면된다. 18/오전