백엔드

visual studio code에 spring boot 개발환경 구축하기

천검 2024. 6. 14. 00:13
반응형

기존에 spring boot를 IntelliJ IDEA에 세팅을 했었는데 하나의 IDE로 개발하기 위해 visual studio code로 옮기기로 결정했다.

IntelliJ IDEA에 spring boot 개발환경 세팅은 아래 글 참조

https://cgdev.tistory.com/44

 

spring boot 개발환경

먼저 Copilot에 스프링부트 개발 방법에 대해 물어본다.스프링 부트를 설치하고 개발환경을 구성하는 방법은 여러 가지가 있습니다. IntelliJ IDE를 사용하는 방법을 설명해드리겠습니다. 

cgdev.tistory.com

 

이제 늘 그랬듯이 Copilot에 물어본다. 

물론, Spring Boot 개발환경을 구축하는 방법을 알려드리겠습니다! 😊

1. Visual Studio Code (VSCode) 설치:
o 먼저, VSCode를 다운로드하고 설치합니다.
o VSCode는 가볍고 모던한 코드 편집기로, Spring Boot 개발에 매우 편리합니다.

2. Java 확장 팩 설치:
o VSCode를 실행한 후, 왼쪽 사이드바에서 “Extensions” 아이콘을 클릭합니다.
o "Java Extension Pack"을 검색하여 설치합니다. 이 팩은 Java 개발에 필요한 여러 확장 기능을 포함하고 있습니다.

3. Spring Boot Tools 설치:
o Ctrl + Shift + P를 누르고 "Spring"을 검색합니다.
o "Spring Boot Tools"을 선택하여 설치합니다.

4. Spring Initializr 프로젝트 생성:
o Ctrl + Shift + P를 누르고 "Spring"을 검색합니다.
o “Spring Initializr: Create a Maven Project” 또는 "Spring Initializr: Create a Gradle Project"를 선택합니다.
o 프로젝트 정보를 입력하고 필요한 의존성을 선택합니다.
o 프로젝트를 생성하고 다운로드합니다.

5. 프로젝트 디렉토리 구조:
o Spring Boot는 간단한 디렉토리 구조를 가지고 있습니다.
o @Controller는 MVC (Model-View-Controller)에서 View를 반환할 때 사용합니다.
o @RestController는 REST API를 개발할 때 사용되며, 모든 메소드가 XML/JSON 등의 body 객체를 반환합니다.

6. application.properties 설정:
o application.properties 파일에서 여러 설정을 할 수 있습니다.
o JSP를 사용할 경우, main 폴더 아래에 webapp 폴더를 만들고 그 안에 WEB-INF/views/ 또는 WEB-INF/jsp/ 폴더를 생성하여 JSP 파일을 넣습니다.

7. 스프링 부트 장점:
o 스프링 프레임워크에 비해 초기 설정 시간이 단축됩니다.
o 내장된 Tomcat을 사용하여 별도의 외장 톰캣 설치가 필요 없습니다.
o VSCode는 빠르게 설치되며, 스프링 부트 개발에 편리합니다.

이제 스프링 부트 개발환경을 구축하고 프로젝트를 시작할 준비가 되었습니다! 🌟123

 

1. visual studio code Extensions 설치

Java Extension Pack 검색하면 Microsoft 의 Extension Pack for Java가 검색이 된다. 아마 이름이 변경이 된 듯 하다. 설치한다. 

 

Ctrl+Shift+P는 전체 명령어 창 인거 같은데 Extensions 검색은 따로 되지 않는다. 그리고 Spring Boot Tools 가 아닌 Spring Boot Extension Pack를 설치한다. Spring Boot Extension Pack를 설치하면 아래의 Extensions가 포함되어 설치된다고 한다.

 

Collection of extensions for developing and deploying Spring Boot Application

Spring Boot
The Spring Boot Tools extension provides:
IDE Java tooling for developing and troubleshooting Spring Boot applications.
Support for editing Spring Boot Application configuration properties files (.properties and .yml)

Spring Initializr Java
The Spring Initializr Java Support extension provides support for generating quickstart Spring Boot Java projects with Spring Initiailizr API.

Spring Boot Dashboard
The Spring Boot Dashboard extension provides an explorer in the side bar where you can view all of a workspace's spring boot projects conveniently in one place. You can also quickly start, stop or debug a project.

 

2. 프로젝트 생성하기

아까 Ctrl+Shift+P 명령어 입력 창에서 >spring 해서 spring.initializr.gradle-project 를 선택한다.

이제 순서대로 입력한다.

3.3.0

Java

com.example

demo

Jar

17

 

Search for dependencies 에서 Spring Web을 선택한다. 폴더를 선택하면 선택한 폴더에 프로젝트가 생성이 된다.

 

3. 프로젝트 실행해보기

DemoApplication.java에서 오른쪽 클릭후 Run Java 실행하면 Build 후 spring boot가 실행이 된다.

http://localhost:8080/ 하면 접근이 가능하다.

 

4. /hello REST API 만들기

이전에 연계하려고 만들었던 /hello REST API를 생성한다. 아래와 같이 HelloController.java를 생성한다.

package com.example.demo;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {

  @GetMapping("/hello")
  public String hello() {
    return "Hello World!";
  }
}

 

http://localhost:8080/hello 로 접근하면 Hello World! 가 보인다. 

 

이제 react 개발환경 띄워서 연결해 본다. HelloController.java를 아래와 같이 수정한다.

package com.example.demo;

import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {

    @GetMapping("/hello")
    @ResponseBody
    public ResponseEntity<String> hello() {
        String data = "{\"message\": \"Hello World!\"}";
        return ResponseEntity.ok(data);
    }
}

http://localhost:8080/hello 로 접근해서 {"message": "Hello World!"} 뜨는지 확인하고 기존에 생성했던 react 개발환경 실행 후 http://localhost:3000/ 로 접근해서 Hello World! 가 뜨는지 확인한다.

 

react with typescript + spring boot 연계 글은 아래참조

https://cgdev.tistory.com/45 

 

react + spring boot 연계하기

먼저 react 환경과 spring boot 백엔드 환경을 구축한다. 아래 글 2개를 참고한다. https://cgdev.tistory.com/43  react + typescript 개발환경 세팅하기먼저 Copilot에 물어보자물론입니다! React와 TypeScript를 함

cgdev.tistory.com

 

 

반응형