[Spring Boot & React] 연동 과정

프론트엔드(React) 만들기

PS C:\WINDOWS\system32> cd D:\DWU\workspace
PS D:\DWU\workspace> npx create-react-app fronted

Creating a new React app in D:\DWU\workspace\fronted.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

/
PS D:\DWU\workspace> cd fronted
PS D:\DWU\workspace\fronted> npm install axios react-router-dom

...
155 vulnerabilities (124 moderate, 28 high, 3 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:

• 보안 취약점이 많길래 npm audit fix --force 했더니, critical 한 취약점까지 생겨버림..
• 프로젝트용이니까.. 일단 넘어가겠습니다.

문제

• npx create-react-app fronted 명령어를 입력하면 아래와 같은 오류 발생

npx : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\npx.ps1 파일을 로드할 수 없습니다. 자세한 내
용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.
위치 줄:1 문자:1
+ npx create-react-app fronted
+ ~~~
    + CategoryInfo          : 보안 오류: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

이러한 에러가 발생했다.

문제 해결 방법

1. 관리자 권한으로 Powershell 실행
2. 실행 정책을 완화하는 명령어 입력 : Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
3. 바꾸길 원하냐는 질문이 뜨면 Y 입력
4. 창 닫았다가 재실행 후 위의 명령어 실행하면 됨

Spring Boot에서 API 만들기

WebConfig.java

• react와 연결이 잘 되는지 확인하기 위한 코드를 작성

package com.mysite.irms.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer{
	@Override
	public void addCorsMappings(CorsRegistry registry) {
		registry.addMapping("/api/**")
				.allowedOrigins("http://localhost:3000")
				.allowCredentials(true)
				.allowedMethods("GET", "POST", "PUT", "DELETE");
	}
}

Spring Boot에서 CORS 설정

AuthController.java

• 이 설정으로 localhost:3000에서 localhost:8080으로 API 요청을 할 수 있게 됨

package com.mysite.irms.controller;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import lombok.Data;

@RestController
@RequestMapping("/api/auth")
public class AuthController {
	@PostMapping("/login")
	public String login(@RequestBody LoginRequest request) {
		if("user".equals(request.username) && "pass".equals(request.password)) {
			return "로그인 성공";
		}else {
			return "로그인 실패";
		}
	}
	
	@Data
	public static class LoginRequest{
		public String username;
		public String password;
	}
}

React에서 API 호출하기

src/pages/Login.js

import {useState} from 'react';
import axios from 'axios';


export default function Login(){
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');

    const submit = async() => {
        try{
            const res = await axios.post('http://localhost:8080/api/auth/login',
                {username, password},
                {withCredentials: true}
            );
            alert(res.data);
        } catch(e){
            alert("로그인 요청 실패");
        }
    };
    return(
        <div>
            <h1>로그인</h1>
            <input value={username} onChange={e => setUsername(e.target.value)} placeholder="아이디"/>
            <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="비밀번호"/>
            <button onClick={submit}>로그인</button>
        </div>
    );
}

문제

• npm start 를 하려고 하니 아래와 같은 오류 발생

PS D:\DWU\workspace\fronted> npm start
fronted@0.1.0 start
react-scripts start
i ｢wds｣: Project is running at http://172.31.112.1/
i ｢wds｣: webpack output is served from 
i ｢wds｣: Content not from webpack is served from D:\DWU\workspace\fronted\public
i ｢wds｣: 404s will fallback to /
Starting the development server...
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:79:19)
    at Object.createHash (node:crypto:139:10)
    at module.exports 

문제 해결 방법

• Node 17+의 OpenSSL 3과 호환되지 않는 문제로 인해 createHash에서 실패하게 됨.
• package.json에서 스크립트를 아래와 같이 수정

"scripts": {
  "start": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
  ...
}

• 수정 후 npm start 재실행

문제2

• 또 다른 문제가 이어서 발생

- PS D:\DWU\workspace\fronted> npm start
fronted@0.1.0 start
set NODE_OPTIONS=--openssl-legacy-provider && react-scripts start
i ｢wds｣: Project is running at http://172.31.112.1/
i ｢wds｣: webpack output is served from 
i ｢wds｣: Content not from webpack is served from D:\DWU\workspace\fronted\public
i ｢wds｣: 404s will fallback to /
Starting the development server...
Failed to compile.

문제 해결 방법

• JSX 문법 사용 시, import React from react가 누락되었기 때문
• src/App.js 파일에 import React from react 작성