INTRO
1편으로 개발환경을 구축할 것이다.
서버로는 Spring boot,
프론트엔드는 Vue.js
DB는 MariaDB를 사용한다.
궁극적으로 해볼 프로젝트는
단말 관리 프로젝트이다.
구체적으로 어떤 단말인지는 밝히기가 힘드니 양해 부탁..
이 프로젝트는 미리 연습하는 프로젝트임.
나도 초보이기 때문에, 최대한 초보의 입장에서 따라하기 쉽게 글을 적을것이다.
틀린 부분이 보인다면 댓글을 주시길 바란다.
| 1. DB구축 - mariaDB 설치 |
--> 마리아디비를 설치한다. 설치 방법으로는 아래 포스팅을 참고한다.
[MariaDB] MariaDB(마리아디비) 설치하기
INTRO 마리아디비를 설치하는 과정. 마리아디비는 오픈 소스 RDBMS이다. MySQL과 동일한 소스 코드를 기반으로 하며, GPL v2 라이선스를 따른다. MySQL이 오라클에 인수되어 저작권이 걸렸고, 이를 해결
rangsub.tistory.com
--> 데이터베이스 정상 설치까지 마친 후. heidisql 을 사용하여 쿼리문을 작성할 것이다.
--> 아래 포스팅을 참고하여 user 테이블과 몇개의 데이터를 추가해준다.
[MariaDB] 테이블 생성(Create)하고 Select, Insert, Update, Delete 해보기(HeidiSQL 사용)
INTRO [MariaDB] 테이블 생성하고 Select, Insert, Update, Delete 해보기 지난 포스팅에서 mariaDB를 설치했다. rangsub.tistory.com/94 [MariaDB] MariaDB(마리아디비) 설치하기 INTRO 마리아디비를 설..
rangsub.tistory.com
--> 테이블이 1개밖에 필요 없는 프로젝트이기 때문에, ERD를 그리진 않았다.
--> ERD 그리는 TOOL로는 STARUML 프로그램을 참고..
| 2. Vue 환경 구축 |
--> VSCode를 설치한다.
--> 이후 아래 포스팅을 참고하여, localhost:8080으로 접속했을 때 초기 화면이 나오는 단계까지 완료한다.
rangsub.tistory.com/82?category=966512
[vue.js] vue.js란? 개발 환경 만들기
Evan you가 만들었다. 2014년 릴리즈를 시작으로 꾸준히 발전하는 자바스크립트 프레임워크. github.com/vuejs/vue vuejs/vue 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for bu..
rangsub.tistory.com
| 3. Server 구축-Spring Tool Suite 설치 |
-->STS를 설치하고 Spring boot 기본 프로젝트를 생성한다.
세부 사항은 아래 포스팅을 참고한다.
[Spring Boot]Spring boot 개발환경 구성
INTRO Spring boot 개발 환경 구성 STS설치 -->하기 링크에서 STS를 설치한다. spring.io/tools Spring Tools 4 is the next generation of Spring tooling Largely rebuilt from scratch, Spring Tools 4 prov..
rangsub.tistory.com
이후 STS에서 boot프로젝트가 잘 실행되는지 확인하기 위해 아래 작업을 해본다.
1. static 폴더 내 index.html을 만들어본다.
(static폴더가 없으면 생성한다.)
2. index.html에 아래와 같이 써본다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h2>Test입니다.</h2>
</body>
</html>3. 이후 boot dashboard 에서 시작 버튼 혹은 프로젝트 우클릭 -> run as -> Spring boot App 클릭하여 프로젝트를 실행해본다.
4. 브라우저를 열고 localhost:8080에 접속하여 아래와 같은 화면이 출력되는지 확인.
마무리
간단하게 개발 환경을 세팅하였다.
다음 포스팅에는 Spring boot 위에서 Vue가 동작하도록 해볼것이다.
-퍼가실 때는 출처를 꼭 같이 적어서 올려주세요!
'Project' 카테고리의 다른 글
| [spring boot+vue.js+mariaDB] 프로젝트 해보기-3(axios를 이용한 통신) (0) | 2021.03.26 |
|---|---|
| [spring boot+vue.js+mariaDB] 프로젝트 해보기-2(Spring boot 서버 구축) (0) | 2021.03.26 |
