[SpringBoot&React] 인텔리제이 스프링부트에서 리액트 설치하기

이번에도 한코딩님의 유튜브 강의를 들으며 도움받았습니다! 스프링부트와 리액트를 같이 공부하고 싶었는데 좋은 강의 감사합니다,,,🥰

 

✅React.js 란?

• 자바스크립트 라이브러리
• SPA(Single Page Application)
• 한 페이지에서 모든 요소를 불러와서 동작->페이지 이동X

---

🤍인텔리제이(IntelliJ) 스프링부트 환경에서 리액트 설치하기

 

1. 프로젝트 생성

 

2. 의존성은 일단 Spring Web, Lombok, MySQL Driver 3가지만 추가해 준다.

 

3. 프로젝트 생성 후 ExamApplication을 실행하면

 

당연히 만들어놓은 페이지가 없기 때문에 아래와 같은 페이지가 뜸.

4. 이제 리액트를 설치해 준다.

cd src/main	//main 디렉토리로 이동
npx create-react-app 폴더명 //'폴더명'으로 설정한 새 폴더에 리액트 설치

 

설치 중...

 

5. Happy hacking! 메시지가 뜨면 설치가 완료된 것이다.

 

6. npm start 명령어로 실행해 보면 아래와 같은 화면이 뜬다!

 

그런데 스프링부트 환경은 8080이 기본 포트이고 리액트는 300번이기 때문에 이 두 가지를 헷갈리지 않도록 통일시키도록 한다.

 

7. package.json 수정

"proxy" : "http://localhost:8080"

8. build.gradle 에 아래 코드 추가

def frontendDir = "$projectDir/src/main/reactfront"

sourceSets {
    main {
        resources { srcDirs = ["$projectDir/src/main/resources"]
        }
    }
}

processResources { dependsOn "copyReactBuildFiles" }

task installReact(type: Exec) {
    workingDir "$frontendDir"
    inputs.dir "$frontendDir"
    group = BasePlugin.BUILD_GROUP
    if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
        commandLine "npm.cmd", "audit", "fix"
        commandLine 'npm.cmd', 'install' }
    else {
        commandLine "npm", "audit", "fix" commandLine 'npm', 'install'
    }
}

task buildReact(type: Exec) {
    dependsOn "installReact"
    workingDir "$frontendDir"
    inputs.dir "$frontendDir"
    group = BasePlugin.BUILD_GROUP
    if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
        commandLine "npm.cmd", "run-script", "build"
    } else {
        commandLine "npm", "run-script", "build"
    }
}

task copyReactBuildFiles(type: Copy) {
    dependsOn "buildReact"
    from "$frontendDir/build"
    into "$projectDir/src/main/resources/static"
}

 

9. 다시 실행해 보면 포트번호가 8080으로 바뀐 것을 확인할 수 있다.