vs code + spring boot + vue.js 설치 가이드(1)

vue.js + spring boot 프로젝트 생성을 위한 설치가이드이다.

 

설치환경

맥, vs code

버전

java :

$ java -version
java version "1.8.0_71"
Java(TM) SE Runtime Environment (build 1.8.0_71-b15)
Java HotSpot(TM) 64-Bit Server VM (build 25.71-b15, mixed mode)

$ javac -version
javac 1.8.0_71

vue.js:

 

설치

1. node js 설치

$ brew install node

설치확인

$ npm --version
5.6.0
$ node --version
v8.9.4

2. vs code 설정

재시작, code > preferences > settings > Extensions > Java 항목이 생겼고,

settings.json 에서 "java.home" 설정

 

각자 설치한 jdk home 경로를 입력.

"java.home": "/Library/Java/JavaVirtualMachines/jdk1.8.0_71.jdk/Contents/Home"

settings에서 java.jdt 검색 후 settings.json 파일 오픈

설정 값 입력 

"java.jdt.ls.vmargs" 키로 아래 값을 앞에 추가하여 저장

-Dfile.encoding=utf8

"java.jdt.ls.vmargs": "-Dfile.encoding=utf8 [없었는데 인텔리센스로 나온 내용]",

한글 출력 확인

3. 스프링 부트 프로젝트 만들기

좌측 하단의 JAVA PROJECTS 탭의 Create new Java project 클릭 후 Spring Boot 선택

우측 하단에 Spring Initializr Java Support 를 설치하라고 해서 설치

Reference를 따라 Maven으로 생성

Spring boot 버전 설정하라는데 SNAP SHOT은 개발단계라고 하여 맨 위에 있는 2.4.0 으로 설정했다

그리고 Java 선택

패키지랑 이름(artifactId?) 설정해주고 packaging type 설정: war, java version: 1.8, dependencies는 Spring Boot DevTools, Spring Web 정도..

폴더 경로 지정 후 기다리면 생성되었다.

상단메뉴 > View > Terminal  클릭

터미널에 아래 명령어 실행하여 빌드.

./mvnw spring-boot:run

필자는 포트가 기존에 8080이 쓰이고 있어 변경한다.

포트번호 변경은 아래와 같이하면 된다.

src/main/resources/application.properties 에 바꾸고자하는 포트번호를 입력한다

server.port = 8090

실행하면 인덱스가 없어서 에러 페이지가 뜬다!!!

DemoApplication.java 와 같은 경로에 HelloController.java 를 생성해주었다.

package com.tutorial.multitag.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class HelloController {

    @RequestMapping("/")
    @ResponseBody
	public String index() {
		return "안녕하세요, 스프링입니다.";
	}

}

재실행하면, 

 

 

여기서 끊고 vue 설치는 이후 포스팅에서 다뤄야겠다..

 

 

Reference

ooeunz.tistory.com/5

[Node.js] 운영체제 별 node 설치하기

niceman.tistory.com/198

VS Code(Visual Studio Code) - 자바(JDK, OpenJDK) 환경 설정 방법

re-man.tistory.com/158

[한]Using Spring Boot with Visual Studio Code

g0yang.tistory.com/21