spring boot 로 웹사이트 만들기

웹서비스를 하나 만들려고 한다. 오픈소스, 무료 서비스만 이용하고 서버운영시 과금없는 서비스를 우선 목표로 했다. 

1. 학원 운영자가 사용할 회원관리/일정관리/수납관리 기능을 가진 웹사이트
2. java 가 그나마 익숙해서, spring boot 로 웹서비스 개발.
3. bootstrap 사용하여 최소한의 디자인만 할 예정. 반응형 웹사이트로 개발.
4. mongo altas 이용하여 DB구성
5. Heroku 클라우드 서비스를 이용하여 app 배포 및 웹사이트 관리
6. github priavte 레파지토리로 형상관리. 브랜치 전략으로 staging 서버도 구축.

 

spring boot - the world's most popular Java framework.

spring boot 로 웹서비스 기반을 우선 만들어보기로 했다. java 를 배우게 되면  spring framework 을 같이 공부할 수 밖에 없다. 웹 서비스 관련 개발이다 하면 spring framework 기반이 아닌 프로젝트를 찾기가 어렵기 때문에, 자연스레 알게 되거나 더 깊게 공부하게 마련이다. 아래 사이트를 기반으로 시작했다.

Serving Web Content with Spring MVC

 

 

https://start.spring.io 에 가면, Spring Initializr 사이트가 나오는데, 여기서 몇 번의 선택만으로도 초기 spring 프로젝트를 셋팅할 수 있다. maven project / spring boot 2.6.6 / packging JAR / java 11 을 선택했다. 그리고 중요한 dependencies 는 Thymeleaf / Spring Web / Spring Boot DevTools / Spring Data MongoDB 를 추가했다. 입력이 끝나면 하단에 버튼이 3개 있는데, Generate 버튼을 눌러서 다운 받는다.

Spring boot - docker 로 개발환경 설정하기

 

bootstrap - the world’s most popular front-end open source toolkit

프로젝트는 간단하게 만들긴 했지만, 계속 따라해봤자 너무 허접한 사이트 디자인만 나오게 되다보니 의욕이 나질 않는다. 웹사이트는 기본적으로 디자인이 생명이라고 생각하기 때문에, 그것을 보완할 오픈소스가 필요했다. 우선 여러 후보가 있긴 했지만, 부트스트랩이 그나마 예제도 많고 반응형 웹을 만들기에 적합해보였다. 필요한 기능을 이것저것 찾다보니, 여기에 있는 대부분의 예제와 매뉴얼을 거의 다 본거 같다. 예제를 일괄로 다운가능한데 거기서 필요한 것만 이것저것 골라서 만들 수 있다. 

Bootstrap

 

mongodb

DB 를 어떤 것을 선택할 것인가에 대한 고민이 가장 어려웠던거 같다. 최대한 오픈소스를 기준으로 고르다보니, postgreSQL, mongoDB 두개 중에 고민을 마지막까지 하다가, mongodb 에서는 altas cloud 서비스를 무료로 512MB 를 제공하고 있어서 최종 선택했다. 사실 이제껏 내가 다룬 RDMBS 와 다른, document 형식의 DB 다보니 시행착오가 정말 많았다. 괜히 이렇게 구현했나 싶을 정도였는데, 그마저도 익숙해지니 하나씩 기능 찾는 재미가 있긴했다. 내 경우 대용량 데이터 베이스는 아니어서 충분한 기능을 쓸일이 아직은 없는데, 이렇게 웹서비스로도 사용해보니 부족함이 느껴지진 않았다.

MongoDB: The Application Data Platform

반응형

 

Fullcalendar - The Most Popular JavaScript Calendar

웹에서 달력형태에 스케줄을 입력해야 하는 기능이 필요했다. 여러가지 오픈소스를 확인하다가 fullcalendar 를 찾았고, 내가  필요로 하는 대부분의 기능을 지원하고 있고, 무료라서 조금만 공부하면 금방 사용할 수 있다.

FullCalendar - JavaScript Event Calendar

 

 

Datatables - To enhance the accessibility of data in HTML tables.

웹서비스를 만들다보면 가장 많이 쓰게 되는 뷰가 그리드 형태, 즉 표형태의 정보를 보여주는 건데 리스트가 길면 페이징 처리가 들어가고, 항목별로 검색, 정렬 등이 되어야 한다. 이런 것들을 일일이 개발할 수 없기 때문에 잘 정리된 오픈소스를 이용하게 되는데, Datatables 이 나에게는 적합했다. 

datatables 설정 및 사용법. 오픈소스 그리드, 무료 그리드 추천

 

flatpickr - lightweight and powerful datetime picker.

웹으로 날짜/시간 등을 입력받을 때, 텍스트로 일일이 입력받는게 아니라, 달력을 이용하거나 시간 선택 컴포넌트를 이용해서 입력편의성을 높이게 된다. 처음에는 그냥 텍스트로 입력받도록 내비두었었는데, 오타도 있고 편의성이 떨어지다보니 구글링해서 오픈소스를 하나 선택하게 되었다. 

flatpickr 오픈소스 설정. 달력/시간 입력 라이브러리.

 

chartjs - Open source HTML5 Charts for your website.

마지막으로 chart 를 위한 라이브러리가 필요했다. 복잡하진 않아도 이쁘고, 심플한 표현이 가능한 JS라이브러리를 찾았고, chartjs 로 선택해서 개발했다. 

chart.js 차트 만들기. 라인(line)차트/바(bar)차트 개발

 

위에서 설명한 오픈소스 라이브러리들로 만든 사이트가 아래 웹서비스이다. 조금씩 짬내서 하는 수준치고는 만족할만한 결과물이 나온거 같다. 로그인을 해야 하는데 id : user / pw : password 로 입력하면 된다.

메인페이지