[Spring Boot +Vue.js] 게시판 만들기 1 - Backend 프로젝트 생성

 

 

 

 

 

 

vue.js 인강을 들으며 문법과 활용법 공부를 했는데 직접 토이 프로젝트라도 만들어 보면서 적용시켜야 감이 잡힐 듯 싶어 게시판 프로젝트를 만들어보려고 한다. 스펙은 다음과 같다. 

 

🎈 언어
   - JAVA 11

🎈 IDE 
    - IntelliJ IDEA Ultimate

🎈 FrontEnd Framework
    - Vue.js ( npm 3.0 )

🎈 BackEnd Framework
   - Spring Boot (2.7.8)
   
🎈 Build Tool
   - Gradle

🎈 DB
   - Oracle 11g xe
   

 

 

 

📑 1. BackEnd Porject 생성하기

 

IDE 인텔리제이에 하나의 프로젝트에 back과 front를 같이 연동해서 사용하려고 합니다. 

 

 

인텔리제이 설치하는 방법은 아래 링크 참고! 

 

 

https://wonisdaily.tistory.com/91

[IntelliJ] 인텔리제이 Ultimate 설치 방법

 

 

 

spring initializr에서 프로젝트를 생성합니다.  https://start.spring.io/

gradle-groovy, java 11, spring boot 2.7.8 , jar, 디펜던시도 추가해줍니다. 

 

 

 

다음과 같이 generate버튼을 눌러 생성한 파일의 압축을 풀고 IntelliJ에서 open으로 해당 파일의 build.gradle을 열어준다.

 

 

 

 

📑 2. DB 정보 입력 및 포트 변경

 

 

스프링 부트를 실행시키기 위해 db에 정보를 입력하여 로그인해주어야 한다. 

src -> main -> resources -> application.properties로 이동하여 코드를 작성해준다. 

 

 

 

port를 8081로 꼭 지정해두어야 하는 것은 아니지만 Vue.js와 서버를 연결할 때 충돌이 일어날 수 있으므로 설정을 해주고 가자. Oracle을 사용했기에 다음과 같이 설정하였다. 

 

spring.datasource.driver-class-name=oracle.jdbc.driver.OracleDriver
spring.datasource.url=jdbc:oracle:thin:@localhost:1521/xe
spring.datasource.username=아이디
spring.datasource.password=비번

server.port=8081

 

 

 

참고로 application.properties 파일은 외부 설정 파일로, 프로젝트에서 사용하는 여러가지 설정 값들을 키, 값 형식으로 저장해두면 프로젝트의 모든 곳에서 참조해 쓸 수 있다. application.properties 파일은 spring boot가 어플리케이션을 구동할 때마다 자동으로 로딩하는 파일이다. 

 

---

 

 

 

oracle 11g xe와 sql developer 설치하는 방법이 궁금하다면 아래 링크 참고! 

 

https://wonisdaily.tistory.com/208

[ORACLE] SQL Developer 설치, 계정 생성

 

 

 

📑 3. 서버 실행해보기

 

 

src/main/java/com.vueSpring.board_project.boardProjectApllication의 main 메서드를 실행시켜준다. 

 

 

 

인터넷을 열어 localhost:8081을 입력했을 때 아래와 같은 페이지가 떴다면 프로젝트를 잘 생성하였다고 보면 된다.