[Spring Boot / React] VS Code로 스프링 부트 / 리액트 개발 환경 세팅 & 프로젝트 생성/실행

J.·2024년 5월 10일
0

Spring Boot & React

목록 보기
1/3
post-thumbnail

최근 프로젝트로 Eclipse를 사용해 Spring을 활용한 적이 있는데, 그건 추후에 다루기로 하고, 오늘은 무료 편집 툴인 VS Code (비주얼 스튜디오 코드)를 사용해 Spring Boot 프로젝트를 만들어 보도록 하겠다.

1. 개발 환경

먼저, 설정할 개발 환경을 설정해보자.

이번 프로젝트에서는 OpenJDK 빌드 중 Adoptium Temurin JDK를 사용할 것이며 React를 사용해 프런트를 구현할 예정이다.

1) JDK 17 설치

먼저 Adoptium 다운로드 링크에서 본인에게 맞는 OS와 Architecture등을 선택 한 후 최신 버전의 msi를 다운 받는다.

해당 파일을 실행 시킨 후 다음과 같이 설정해준다.

설치가 완료 됐다면, terminal을 사용해 Java 버전을 확인해보자.

java -version 명령어를 사용하면 된다.

이와 같이 뜬다면 설치가 완료 됐다는 뜻이다.

2) React 개발 환경 설정

React를 사용하기 위해서 Node.js 설치 파일을 다운로드 링크에서 받아준다.

버전은 추후에 LTS 버전으로 바뀌며 (짝수 버전이기 때문) 가장 최신 기능을 갖고 있는 Current 버전인 v22.1.0을 사용하기로 했다. 만약 안정적인 사용이 중요하다면 LTS 버전을 사용하는 것을 고려해보자.

현재 저장 공간이 충분한지 확인하고 있다는 뜻이니 기다리자.

설치가 완료 됐다면 다시 한 번 terminal에서 node 버전을 확인해주면 된다.

node -v 명령어를 사용하면 된다.

에러 잡기
만약 JDK나 Node.js의 버전이 제대로 보이지 않는다면 다음으로 들어가서:
제어판 > 시스템 환경 변수 편집 > 환경 변수 > 시스템 변수
변수 설정이 제대로 되어있는지 확인해보자.


2. VS Code Extention 설치

Spring Boot 프로젝트를 만들기 위해 필요한 Extention들을 설치해주자.

VS Code 좌측 Extention 탭에서 필요한 Extention의 이름을 검색해 하나씩 install 해주면 된다.

본인이 사용한 Extention의 리스트는 아래와 같다.

  • Extention Pack for Java
  • Gradle for Java
  • Spring Boot Extention Pack
  • Lombok Annotations Support for VS Code

* 추가
평소에 이클립스를 사용하면서 이클립스의 key binding이 익숙하여 그걸 도와주기 위해 Eclipse Keymap이라는 Extention도 받아주었다.


3. VS Code Workspace 생성

폴더 (workspace) 생성

원하는 위치에 폴더를 생성하여 VS Code에서 아래 사진과 같이 열거나 Ctrl + K Ctrl + O를 눌러 열어주자.

해당 폴더에 Spring Boot 프로젝트를 활용할 back과 React를 활용할 front 폴더를 만들어주자.


4. Spring Boot 프로젝트 생성

Ctrl + Shift + P를 눌러 command palette을 실행하여 spring initilizr를 선택해주자.

프로젝트 생성을 하게 되면 스프링 부트 버전, 프로젝트 언어 등과 같은 기본 정보를 입력해야한다. 아래 사진을 따라해보자.

1) 기본 설정

스프링 부트 버전

프로젝트 언어

그룹 ID

본인 프로젝트와 관련된 것을 입력해주자.

Artifact ID

본인 프로젝트와 관련된 것을 입력해주자.

패키지 타입

Java 버전

Dependency 설정

여기서는 본인이 필요한 Dependency를 검색해 선택할 수 있고, 프로젝트 생성 후 build.gradle 파일을 직접 수정해 추가/삭제 할 수 있다.

본인은 5가지를 추가해줬다:

  • Spring Web Web
  • Spring Boot DevTools
  • Spring Data JPA SQL
  • MySQL
  • Lombok

2) 프로젝트 위치 설정

앞서 말했듯이 back 폴더에 Spring Boot를 생성할 것이기 때문에 해당 폴더를 선택해주면 된다.


5. 프로젝트 실행

아래 사진에 보이는 위치에 있는 DemoApplication.java파일을 실행했을 때 터미널에 보이는 에러가 뜨는데, 정상이다. 이는 DataSource 설정이 되지 않았기 때문이다.

이를 해결하기 위해 application.properties 파일에 DataSource를 추가해주면 된다.

본인은 가독성 때문에 YAML 형식의 파일을 더 선호하기 때문에 .properties 대신에 application.yml을 만들어 사용했다.

이후 다시 실행해보면 제대로 작동하는 것을 확인해 볼 수 있다.

profile
코린이 (코인 어린이 아니라 코딩 어린이임)

0개의 댓글