What to do? meterial-ui의 기본적인 input을 가져다 쓰고 formik을 통해서 form의 state 관리를 하고 yup을 사용해서 form의 validation을 검증하자. form의 validation 검증이 끝나면 axios로 회원가입을 처리하는 API에 POST 방식으로 데이터를 보내서 서버에 유저의 정보를 저장한다. 사용 url: /sign-up 회원가입에 성공하면 react-toastify로 2초동안 toast 알림창을 띄우고 /login 으로 이동하게 하자! 회원가입 성공 시 DB에 반영이 되는 모습이다! 회원가입 페이지 구현 pages 디렉토리 아래 sign-up 디렉토리를 만들고 Sigup.js 파일과 singUp.scss 파일을 만들자. pages/sign-up/Si..

📝 백엔드 서버 구동하기 https://duckgugong.tistory.com/category/%28typeORM%20%2B%20React%29%20%EA%B2%8C%EC%8B%9C%ED%8C%90%20%EC%82%AC%EC%9D%B4%ED%8A%B8%20%EA%B5%AC%ED%98%84/REST%20API '(typeORM + React) 게시판 사이트 구현/REST API' 카테고리의 글 목록 duckgugong.tistory.com 우선 위 링크로 들어가서 typeORM으로 REST API를 작성한 후 서버를 구동해서 http://localhost:8080에 접속하자. https://github.com/ejzl521/Board-BE-NodeJS_typeORM GitHub - ejzl521/Boar..

엔티티 변경하기 사용자는 여러개의 게시판을 쓸 수 있으므로 user와 board는 one to many 관계를 설정한다. comment도 마찬가지로 user와 one to many 관계이다! 따라서 board, comment와 user 는 many to one 관계이다. User, Board, Comment 엔티티를 아래처럼 관계를 적용하여 변경하자. User 엔티티 src/entity/User.ts board와 one to many, comment와 one to many 관계 설정 import { Column, CreateDateColumn, Entity, JoinTable, ManyToMany, OneToMany, PrimaryGeneratedColumn, Unique, UpdateDateColumn..

인증 미들웨어 설정 인증이 필요한 API로 접근 시 jwt 토큰 정보가 있고 유효한지를 먼저 체크하는 미들웨어를 생성하자. HTTP 헤더에 authorzaition 키가 있는지 체크하고 있다면 토큰 정보가 Bearer 다음에 들어가 있으므로 Bearer가 있는지 체크하고 없다면 401 에러를 리턴한다. 토큰을 꺼내서 verify 함수를 사용해서 토큰이 유효한지 체크하고 req에 userid와 roles 정보를 세팅하여 뒤에 나올 권한 미들웨어에 넘겨주자! 우선 src 폴더 아래 middleware 폴더를 만든 후 AuthMiddlewars.ts 파일을 생성하자! src/middleware/AuthMiddleware.ts 아래 next() 메서드는 현재 라우터에서 판단하지 않고 다음 라우터에서 respon..