미래를 설계하는 개발자

고정 헤더 영역

글 제목

메뉴 레이어

미래를 설계하는 개발자

메뉴 리스트

  • 홈
  • 태그
  • 미디어로그
  • 위치로그
  • 방명록
  • 분류 전체보기 (88)
    • C 언어 (7)
    • C++ 언어 (7)
    • Java (10)
      • Java Error (2)
      • Java Setup (1)
      • Java Study (2)
      • Design Patterns (2)
    • Spring (23)
      • Restfull API (2)
      • SpringBoot-React (5)
      • SpringBoot-MSA (16)
    • WebProgramming (26)
      • HTML (0)
      • CSS (0)
      • Javascript (1)
      • Error (0)
      • JSP (25)
    • 자료구조 (3)
    • DataBase (7)
      • Data Modeling (1)
      • Oracle Database (3)
      • SQL (3)
    • Android (0)
    • 기타 (2)
    • Git (2)
    • Algorithm (1)
    • 끄적끄적 (0)
홈태그미디어로그위치로그방명록
  • C 언어 7
  • C++ 언어 7
  • Java 10
    • Java Error 2
    • Java Setup 1
    • Java Study 2
    • Design Patterns 2
  • Spring 23
    • Restfull API 2
    • SpringBoot-React 5
    • SpringBoot-MSA 16
  • WebProgramming 26
    • HTML 0
    • CSS 0
    • Javascript 1
    • Error 0
    • JSP 25
  • 자료구조 3
  • DataBase 7
    • Data Modeling 1
    • Oracle Database 3
    • SQL 3
  • Android 0
  • 기타 2
  • Git 2
  • Algorithm 1
  • 끄적끄적 0

검색 레이어

미래를 설계하는 개발자

검색 영역

컨텐츠 검색

springboot

  • SpringBoot + React 연동(5) - 중간 배포로 테스트

    2023.08.24 by ChrisMare

  • SpringBoot + React 연동(4) - React, axios로 SpringBoot API 통신

    2023.08.24 by ChrisMare

  • SpringBoot + React 연동(3) - React, axios로 API 통신

    2023.08.24 by ChrisMare

  • SpringBoot + React 연동(2) - React개발 VSCode로 변경

    2023.08.24 by ChrisMare

  • SpringBoot + React 연동(1) - 스프링부트 + React 설치

    2023.08.24 by ChrisMare

SpringBoot + React 연동(5) - 중간 배포로 테스트

지금까지 SpringBoot + React를 연동하고 React에서 axios 라이브러리를 추가하고 React에서 axios를 통해 SpringBoot의 RestAPI를 호출하는 것까지 진행됐습니다. 진행된 부분까지 배포를 통해서 확인해보겠습니다. 배포해보기 웹 프로젝트를 배포할 때는 SpringBoot 실행과 동시에 React도 실행되어야 합니다. 따라서, SpringBoot를 통해서만 전체 실행이 될 수 있도록 패키징을 진행하겠습니다. 1. build.gradle 에 이전에 1편에서 아래 코드를 추가하였다. def frontendDir = "$projectDir/src/main/front" sourceSets { main { resources { srcDirs = ["$projectDir/src/ma..

Spring/SpringBoot-React 2023. 8. 24. 19:42

SpringBoot + React 연동(4) - React, axios로 SpringBoot API 통신

1. IntelliJ 에서 기존 만들어 두었던 프로젝트 exam 오픈 후 클래스 생성 src > main > java > com.react.exam > board 패키지 생성 board > controller 패키지 생성 controller > BoardController.java 컨트롤러 클래서 생성 아래코드 작성 작성 후 웹 어플리케이션 재구동 package com.react.exam.board.controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.ann..

Spring/SpringBoot-React 2023. 8. 24. 18:09

SpringBoot + React 연동(3) - React, axios로 API 통신

1. 우선 React 에서 Axios 라이브러리를 추가하자! VS Code프로젝트에서 터미널 오픈 Axios 추가 npm install axios yarn add axios 설치 후 package.json의 dependencies -> axios가 설치된것을 볼 수 있다. 2. Axios 통신 테스트 우선 서버 통신 전에 간단하게 테스트 해보기 jsonplaceholder 라는 사이트에서 테스트용도로 사용할 수 있는 json파일을 제공해준다. 사이트 아래에 Resources -> photos 사이트 접속 https://jsonplaceholder.typicode.com/photos 3. VS Code에서 테스트 import React, {useState, useEffect} from 'react'; im..

Spring/SpringBoot-React 2023. 8. 24. 17:17

SpringBoot + React 연동(2) - React개발 VSCode로 변경

1. Visual Studio Code (VS Code) 설치 https://code.visualstudio.com/download 주의: 자신의 환경에 맞게 설치해주세요! Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications. code.visualstudi..

Spring/SpringBoot-React 2023. 8. 24. 15:23

SpringBoot + React 연동(1) - 스프링부트 + React 설치

개발 환경 IDE (통합개발환경) IntelliJ Community, Visual Studio Code 개발 언어 JAVA 11 프레임워크 Spring Boot 라이브러리 React.js 1. Node.js 다운 ( 안정적인 LTS를 받거나, 혹은 사용하려는 React 버전에 맞춰서 다운 ) - Java Script Runtime Environment - NPM(Node Package Manager)을 활용한 모듈 다운 용도 - 주의: 자신의 운영체제에 맞게 다운 https://nodejs.org/ko 2. 스프링 부트 프로젝트 생성 - https://start.spring.io/ Project: Gradle - Groovy Language: Java Spring Boot: 2.7.14 ( JAVA 11..

Spring/SpringBoot-React 2023. 8. 24. 14:55

추가 정보

인기글

최신글

페이징

이전
1
다음
TISTORY
미래를 설계하는 개발자 © Magazine Lab
페이스북 트위터 인스타그램 유투브 메일

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.