springboot-vue.js-bbs
springboot-vue.js-bbs copied to clipboard
Published
20 hours ago •
pravusid
pravusid
Spring Boot, Vue.js
Toy Project: Spring Boot + SSR / CSR
- Spring Boot + Thymeleaf
- Spring Boot + Vue.js 2
목표
- Spring Boot, Spring data JPA로 서버를 구성한다.
- 템플릿 엔진으로 Thymeleaf를 사용한다.
- 2번까지의 과정이 끝나면 동일 서버에 HTTP API(REST)를 추가한다.
- 템플릿 엔진으로 구현한 클라이언트단과 동일한 기능을 Vue.js를 활용하여 제작한다.
- 동일한 두 웹 어플리케이션을 제작하는 것이 최종 목표이다.
주제
무한계층 댓글 기능의 회원제 게시판을 구현한다.
구현
서버
Server 사용기술
- Spring Boot
- Spring data JPA(Hibernate)
- H2 Database
- MySQL
- Spring Security
- Spring Security OAuth2
Server 제작 내용
완성됨
- 회원제 게시판 제작을 목표로 한다
- 댓글은 무한계층형으로 구현하고 삭제시 동일 노드의 게시물이 모두 삭제 되도록 만든다.
- 오픈소스 에디터를 적용한다.
- 게시물, 댓글 검색기능을 적용한다.
- 회원 가입시 유효성 검사는 client, server 모두에서 진행
- 스프링 시큐리티를 통해 가입, 로그인, 비밀번호 암호화등을 적용한다.
- HTTP API(REST)로 서버와 클라이언트가 JSON 데이터를 주고 받는다
- OAuth2 Grant Type은 implicit으로 진행
- JWT를 통해서 사용자 인증을 진행한다
Thymeleaf 클라이언트
템플릿엔진으로 기존에 사용해봤던 JSP 이외의 후보에서 선택한 Thymeleaf를 사용한다.
Spring boot starter thymeleaf는 ~~3버전이 아니어서 다소 문제가 발생했다. 따라서 기존 문법을 사용하였다.~~
thymeleaf를 3버전으로 변경하고 최신 문법을 적용하였다.
Thymeleaf 클라이언트 사용 기술
- Thymeleaf (Spring-boot-starter)
- Materialize CSS
- Trumbowyg Editor
Vue.JS 클라이언트
View를 작성하는데 이용되는 자바스크립트 기술의 이해를 위해 상대적으로 진입장벽이 낮은 Vue.js를 이용한다.
최신 자바스크립트 기술 - ES6를 transpiling, webpack으로 build... - 이해를 위해 구현과정 중 이를 적극 사용해본다.
Vue.JS Client 사용기술
- vue-cli: project scaffolding
- vue.js 2
- vuex: 상태 관리
- vue-router: SPA 라우팅
- axios: HTTP client
- lodash: 유틸성 함수 일부 사용
- vue-quill-editor: Trumbowyg Editor 대체
- Materialize CSS: CSS만 사용
Client 제작 내용
- Page Reloading이 없는 SPA를 목표로 한다
- ES6 문법을 사용하여 작성하고 babel로 크로스 컴파일 하며, webpack으로 번들링한다
- vuex를 사용하여 상태관리를 한다
- props를 통해 컴포넌트간 데이터를 전송한다
- EventBus로 컴포넌트간 이벤트처리를 한다
- vue-router로 새로고침 없이 리소스 경로 관리를 한다
- axios를 이용하여 서버와 HTTP 통신을 수행한다
pravusid