spring boot + react 환경셋팅

Project🐸/초기 세팅🌱

spring boot + react 환경셋팅

JaeStory 2023. 4. 15. 10:42

1.React 환경설정(IDE IntelliJ)

1-1.node.js로 React모듈 받아오기

1.화살표가 가르키는 터미널을 열어줍니다.

터미널창에 아래와 같이 명령을 입력합니다.

npm create react-app my-app

그러면 아래와 같이 node_module이 생성되고 열어보면 react관련 파일이 보일것입니다.

됐습니다. 이제 동작을 테스트 해보겠습니다.

1-2 동작 테스트

1.아래와 같이 명령어를 입력하여 프로젝트 폴터로 이동하겠습니다.

2.yarn start를 명령창에 입력하여 동작시켜 보겠습니다.

음~ 여기까지 잘 됐네요 ㅎㅎ

2.테스트 화면구성

이제 주소별로 다른 페이지와 데이터를 출력하기위한 준비작업을 시작하겠습니다.

2.1Router 설치

1.먼저 이번 작업과 관련없는 파일들을 지우고 시작하겠습니다.

빨간줄친것을 제외한 나머지 파일은 전부 지워주세요.

그 다음 라우터를 받아 오겠습니다.

다음과 같이 명령어를 입력해 주세요.

yarn add react-router-dom
yarn add axios(나중에 서버통신시 사용됩니다.)

3.작업을 위해 필요한 모듈은 BrowserRouter,Switch,Route,Link와axios 입니다. 전부 임포트 해주도록 하겠습니다.

현재 프로젝트의 구조는 index.js에서 App.js를 렌더링 하는 구조입니다.

그러니 App.js에 BrowserRouter,Switch,Route,Link를 임포트 하겠습니다.

이 네개는 거의 대부분 쓰이니 그냥 받아두시기를 추천합니다.

2.2간단한 화면 구현

1.이제 간단한 화면을 만들어 보겠습니다.

아래는 프로젝트 파일들인데 Home과 User 컴포넌트를 만들어 두고 라우터로 호출 할겁니다.

2.먼저 Home과 User를 불러올 App.js 를 아래와 같이 코딩하겠습니다.

3.다음은 Home과 User입니다.

Home.js

import React ,{useState, useEffect} from 'react'
import apiAxios from "./apiAxios";

function Home() {
    const[time,setTime]=useState(null);
    const [loading, setLoading] = useState(null);
    const [error, setError] = useState(null);

    function TimeToPrint(time){
        setTime(time);
    }

    useEffect( () => {
        setTime(null);
        setError(null);
        setLoading(true);
        apiAxios('/time',TimeToPrint);
        setLoading(false);
        },[]
    );
    if(loading) return <div>로딩중..</div>
    if(error) return <div>에러발생</div>
    if(!time) return null;
    return(
        <h3>
            현재시간: {time} 입니다.
        </h3>
    )
}

export default Home;

백엔드에서 현재 시간 값을 받아오는 함수를 포함하고 있습니다.

**보시면 Axios가 보입니다. 백엔드단에서 필요한 데이터를 가져오기 위해 필요한 녀석이고 밑에서 설명 하겠습니다.

User.js