[springboot+jwt+react#4] login api 연결

오늘 만들것 로그인 처리를 API에 연결해보자 걸리는 시간 15min 실습 저번에 만든 로그인 폼에 api을 연결해보자 블로그에 설명되어있진 않지만 api 서버에 로그인 컨트롤러가 준비되어있다. B /controller/AuthController.java package com.project.controller; @RestController @RequestMapping("/auth") @RequiredArgsConstructor public class AuthController { private final AuthService authService; @PostMapping("/login") public ResponseEntity login(@RequestBody MemberRequestDto memberR..

• format_list_bulleted Programming/spring+jwt+react
• · 2023. 7. 24.
• textsms

[springboot+jwt+react#3] login / React Hook Form

이전 포스팅 2023.07.21 - [spring+jwt+react] - [springboot+jwt+react#1] react cra frontend 초기설정 2023.07.22 - [spring+jwt+react] - [springboot+jwt+react#2] react layout / react-dom 오늘 만들것 React Hook Form을 이용한 로그인 폼 사전에 알아야 할것 react-hook-form 걸리는 시간 20분 실습 저번시간에 이어서,, login 기능을 만들어보도록 하자 우선 로그인form을 만들어야하므로 router에 login path를 추가하고 page를 하나 생성하도록 한다. 로그인 빈껍데기부터 만들고 /pages/LoginPage.tsx const LoginPage =..

• format_list_bulleted Programming/spring+jwt+react
• · 2023. 7. 23.
• textsms

[springboot+jwt+react#2] react layout / react-dom

2023.07.21 - [spring+jwt+react] - [springboot+jwt+react] react cra frontend 초기설정 오늘 만들것 리액트 react-dom과 layout 잡기 (아래와 같이) 사전에 알면 좋은것 react-dom 실습 우선 src 폴더 아래에 compoenents 폴더를 생성하고 다시 Layout 이라는 디렉토리를 만들어준다 여기에 Layout.tsx 파일과 Navigation.tsx 파일을 생성해준다. Layout.tsx import React, {Fragment} from "react"; import Navigation from "./Navigation"; import Footer from "./Footer"; type Props = { children?: ..

• format_list_bulleted Programming/spring+jwt+react
• · 2023. 7. 22.
• textsms

[springboot+jwt+react#1] react cra frontend 초기설정

시작전에 백엔드부터 진행했어야하나,, 백엔드는 추후에 다시 블로그로 포스팅하겠습니다. 작업의흐름대로 남겨놓는 블로그라 추후에 재편집해서 재포스팅될수 있습니다. 본 프로젝트는 springboot + jwt + react.js + typescript를 이용하여 회원기능이 있는 간단한 메모장을 만드는것을 목표로 합니다. 진행하다 궁금한점은 댓글로 문의주세요~ 오늘 만들것 cra를 이용한 react + typescript 프로젝트 생성 twailwind css 적용 필요한것 약간의 시간 react cra를 시작할수 있는 환경 (node, npm etc....) 설치 (with typescript) 프로젝트 생성을 원하는 경로 밑에서 아래 명령어로 설치 (중간에 client는 원하는 프로젝트명으로 설정) npx ..

• format_list_bulleted Programming/spring+jwt+react
• · 2023. 7. 21.
• textsms