금일 교육 목표

• 로그인에서 아이디 비번 입력 후 로그인 버튼 클릭
• 아래 이미지와 같이 데이터 전송 (json)
• 응답 (res)의 결과로 출력됨

1. 백과 프론트 연동

• json 데이터 주고 받기

2. 다른 IDE 사용

• vscode(리액트) 와 InteliJ(spring boot) 로그인 결과 주고 받기

3. Rest API 의 axios 프로젝트 설치

npm install axios

---

• ReactSpringController.java

package com.example.springboot.controller;

import org.springframework.web.bind.annotation.*;


@RestController // JSON, XML 등과 같은 데이터 반환 목적
@CrossOrigin(origins = "*") // 서버 XMLHttpRequest 해결용
@RequestMapping("/react")
public class ReactSpringController {

    // http://localhost:8081/react/login
    @GetMapping("login")

// @RequestParam --> 쿼이스트링 데이터 출력
    public String login(@RequestParam String id, String pw){
        System.out.println("접근완료");

        System.out.println("ID : "+id);
        System.out.println("PW : "+pw);

        // smhrd, 456
        String result="";
        if(id.equals("smhrd") && pw.equals("456")){
            result="smhrdNick";

        } else {
            result ="로그인 실패";
        }
        return  "result";
    }
}

• Login.jsx

import React, { useRef } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";

const Login = () => {
  const nav = useNavigate();
  const id = useRef();
  const pw = useRef();

  function tryLogin() {
    // 사용자가 적은 ID, PW 값을 가져와서
    // SpringBoot 서버로 전송하겠습니다 ! --> 비동기 통신방식 (axios)
    let inputId = id.current.value;
    let inputPw = pw.current.value;

    axios
      .get(`http://localhost:8081/react/login?id=${inputId}&pw=${inputPw}`)
      .then((res) => {
        // 로그인 성공 -> Main
        // 로그인 실패 -> 로그인 실패 알림
        console.log(res);
        if (res.data == "smhrdNick") {
          window.localStorage.setItem("nick", res.data);
          nav("/");
        } else {
          alert("로그인 실패");
        }
      });

    // 로그인 성공시 Nick 값 -> Main
  }

  return (
    <div>
      {/* 
            submit : 데이터 요청을 보내고 페이지를 새로고침하겠씁니다. (동기)
            React에서는 사용을 지양함
        */}
      <h1>로그인 페이지 입니다</h1>
      ID : <input ref={id}></input>
      <br></br>
      PW : <input ref={pw}></input>
      <br></br>
      <button onClick={tryLogin}>로그인 시도</button>
    </div>
  );
};

export default Login;

---

에러 : Network Error (CORS error)

• 다른 ide 사용시 서로 localhost 주소가 다름으로 언제든 만나볼 수 있는 에러....
  (3000 과 8081 로컬 전송시 에러발생)

• 리액트 환경의 package.json 파일에 해당 내용 추가하기

,"proxy": "http://localhost:8081"

• config 클래스 추가하여 해결
  

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*");
    }
}