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/오전

1. 새로운 프로젝트를 생성한다 yarn create react-app board-frontend 2. 라우터적용 yarn add react-router-dom 3. 컴포넌트생성 ( 로그인, 회원가입, 글쓰기, 포스트읽기, 포스트목록) (src / pages / 안에 넣어준다.) 1. LoginPage 컴포넌트 export default function LoginPage() { return 로그인; } 2. PostListPage 컴포넌트 export default function PostListPage() { return 포스트 리스트; } 3. PostPage 컴포넌트 export default function PostPage() { return 포스트 읽기; } 4. ResgisterPage 컴포넌..