빅데이터 Java 개발자 교육 - 57일차[React App(Node.js 설치 및 적용)]

Jun_Gyu·2023년 4월 19일

React-app node.js rest서버 연동 프론트엔드

빅데이터 Java 개발자 교육

목록 보기

57/71

Node.js 설치

https://nodejs.org/ko

안정적이고 신뢰도가 높은 왼쪽의 버전을 다운로드해주자.

경로지정

Node.js를 사용하고자 하는 위치에서 주소창을 누른뒤, cmd라고 입력해준 뒤 실행해준다.

(별로 중요한 정보가 없어서 경로를 모자이크처리하진 않았다..ㅎ)

Node.js 설치

이후 CMD 창에서 node -v 코드를 입력하여 설치를 진행해주도록 하자.

React 실행하기 코드 (기억하기!)

1. create-react-app 설치

npm install -g create-react-app

2. react project 생성 (원하는 이름으로 생성 가능)

create-react-app front01

3. 생성한 폴더로 이동 후 실행

cd test_app
npm start

VScode

설치가 완료되면 Visual Studio Code를 실행하여 생성된 파일을 불러오도록 하자.

파일명은 front01로 지정해주었다.

CDN 설치 (axios 및 react-router-dom)

npm i axios
npm i react-router-dom

백엔드 서버와 연동하기

이전에 생성해두었던 RestController인 Board select, 게시판 정보를 받아오는 restapi 부분을 한번 react에서 돌려보도록 하겠다.

위의 원래 주소와 같은 경우에는
http://127.0.0.1:8080/api/web01/api/board/select.json?page=1 과 같은 주소를 사용 하고 있다.

하지만,

import axios from "axios";
import React, { useEffect } from "react";

function App() {

    // postman으로는 데이터를 잘 받아오긴 함.
    // Access-Control-Allow-Origin  -> CORS문제 -> 같은 서버가 아니면 rest자료를 받을 수 없다.
    // 함수생성
    // async function selectList() { }
    const selectList = async () => {
        const url = 'http://127.0.0.1:8080/api/web01/api/board/select.json?page=1';
        const headers = {"Content-Type":"application/json"};
        const {data} = await axios.get(url, {headers});
        console.log(data);
    }

    // 화면이 로딩될 때
    useEffect( () =>{
        selectList(); // 함수 호출하기
    },[]);

    return(
        <div>
            <h3>Board</h3>
            This is kind of board.
        </div>
    );
}

export default App;

위와 같이 코드를 구성해 줄 경우에는 문제가 발생하게 된다.
/127.0.0.1:8080/ 의 주소인 경우에는 기존에 사용하던 백엔드의 주소값이기 때문에, 연동이 불가능하다는 점이다.

간단하게 이야기해서, 백엔드 개발자는 postman을 활용해서 데이터를 받아오는것을 보고 문제가 없음을 확인했지만,

프론트엔드 개발자는 같은주소로 데이터를 받아오지 못하는 상황이 발생할 수 있다는 것이다.

이러한 문제를 CORS 라고 부른다.

CORS 문제

postman의 경우를 제외하고는 원래라면 같은 서버가 아니라면 rest자료를 받을 수 없다.

Access-Control-Allow-Origin -> CORS문제 (같은 서버가 아니면 rest자료를 받을 수 없음)
위의 문제를 해결해주기 위해서는 백엔드에서 오는 데이터의 경로를 따로 설정해주어야 한다.

아래는 CORS 문제를 해결하기 위해서 생성한 setupProxy.js이다.

// 백엔드 데이터의 경로를 설정하는 환경설정.
// 환경설정을 만지면 반드시 터미널을 종료한 후 새로 돌려야 함. "Ctrl + C"

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/web01/api', // 본인의 주소
    createProxyMiddleware({
      target: 'http://127.0.0.1:8080',
      changeOrigin: true,
    })
  );
};