[Till60] 1차 개발분 Prototype 오픈

Till60 1차 개발분 Prototype 개발

그간 SessionDB도 만들고 또 개발과는 별개로 뻘짓도 하느라 prototype 만드는데만 근 5주가

걸렸다. 아무래도 하루 1~2시간 밖에 할애를 하지 못하다보니 실제로는 한 일주일 정도가 걸렸다고

볼 수 있으나 그래도 애초 예상한 것보다는 시간이 많이 걸렸다. 그나마 앞서 만들어놓은 

SessionDB가 꽤 효과를 봤다.

이번 포스팅부터가 본격적인 개발 관련 내용으로 앞으로의 글은 이 포스팅의 포맷을 유지하면서

연재 될 예정이다. 다만 포스팅 기준으로 기능 개발을 위주로 할 것인지 새로운 기술에 대한

학습 정보를 위주로 할 것인지 아직 방향을 정하지 못해 당분간 조금 혼란스러울 수도 있겠다.

Github : https://github.com/mazdah/TillSixty

Prototype 주소 : http://121.160.87.10

*** Prototype 주소는 내 개인 PC의 주소로 언제 서비스가 내려갈지 모름…-.-

*** 개발 중인 소스가 서비스에 올라와 있으므로 시시각각 화면이 바뀌거나 오류가

       발생할 수 있으며 의미없는 팝업 등이 뜰 수 있음

*** 아래도 설명하겠으나 데이터는 localStorage를 이용하므로  서비스를 이용한 PC의 

       브라우저에만 저장이 됨. 데이터를 삭제하려면 브라우저 설정에서 인터넷 데이터를

       삭제 하면 됨

*** 누누히 말하지만 나는 코드가 개판이어도 초반에 빨리 개발한 후 코드를 개선해 나가는

       방식을 선호하므로 현재 코드는 개판임…-.- 앞으로 얼마나 개선될지도 장담 못함…ㅠ.ㅠ 

1. 기능 목표

다음과 같은 기능 구현을 목표로 삼았다.

• 로그인
• 목표 등록 (등록 및 수정)
• 요소 등록 (등록 및 조회)
• 챠트 구현 (Radar 챠트, Bar Chart, Line Chart)

목표 외 구현 내용

• 타임라인 구현
• 캘린더 구현

2. 기술 목표

- Github

  기본 repository로 Github를 이용. 아래 설명하는 Jenkins와 연동하여 Push가 일어날 때마다

  Jenkins에서 빌드가 실행되도록 설정을 하였다. 

- Jenkins (Gradle 빌드 미설정)

  아직까지는 기본적인 설정에 정적분석을 위한 플러그인을 설치한 정도. 아직 서버 프로그램이 

  만들어지기 전이라 특별한 작업 진행은 없다. 하지만 Github와의 연동으로 Github에 push가

  발생할 때마다 빌드가 실행된다.

- Gradle (의존성만 설정)

  라이브러리 의존성 설정 및 기본적인 빌드 설정

- Spring boot (미적용)

  Web 프로그램 구현

- Bootstrap

  화면 UI 구현

-JQuery

  Front end 기능 구현.

- React (미적용)

  화면 UI를 위한 컴포넌트 구현

- MongoDB (미적용)

3. 기술 적용 내용

- Github와 Jenkins 연동

  위에 언급한 바와 같이 Github에 push가 발생하면 Jenkins에서 빌드가 실행되도록 설정하였다.

  이에 대한 설정은 Github쪽에서 확인할 수 있는데 repository가 있다는 전제 하에 Settings 메뉴의

  integration & Services 메뉴로 들어가면 아래 이미지와 같이 연동할 서비스를 선택하게 된다

  (엄청 많은 Service 들이 설정 가능하다).

  여기서 Jenkins (Git plugin)를 선택하면 아래 이미지와 같이 화면이 바뀐다. 아래 화면에서

  Jenkins url에 자신이 사용할 Jenkins의 url을 입려한 후 가장 아래의 Add Service를 클릭하면

  연동이 된다. Jenkins쪽 설정은 아래 화면의 상단에 있는 Install Notes를 참조하면 된다.

- Bootstrap

  대부분 오픈소스를 가져다 사용했다. 그나마 직접 작업한 부분들도 모두 Bootstrap으로

  화면을 구성하였다. Bootstrap의 경우 달리 설명이 필요없을 정도로 사용이 쉽다. 

- JQuery

  이번 개발 단계에서는 DOM 처리와 SessionDB 연동을 위해 사용하였다. 아직 Back end가

  구현되기 전이기 때문에 ajax 처리는 없고 대체로 SessionDB에서 가져온 데이터를 화면에

  뿌려주기 위해 DOM 처리를 한 내용이 전부다.

아직 Prototype을 만든 것에 불과한데다가 자바 프로그램이나 DB 연동이 전무한 상태이기에

다른 기술들은 전혀 적용이 되어있지 않다. Spring boot 역시 현재로서는 그냥 단순한 웹서버에

불과한 상태다.

React의 경우 우선은 빠른 Prototype 제작을 위해 적용을 뒤로 미루었다. 추후 리팩토링을

거치면서 반복되는 DOM 객체들은 모두 React 컴포넌트로 변경할 예정이다.

4. 참조 (Open source, site 또는 서적)

- Chart 

  이름 : D3, ndv3

  Site : https://d3js.org

             http://nvd3.org

- Profile 영역, 상단 Navigation, Timeline

 Site : http://bootsnipp.com

- Calendar

  이름 : fullcalendar

  Site : https://fullcalendar.io

- Datepicker

  이름 : bootstrap-datepicker

  Site : https://bootstrap-datepicker.readthedocs.io/en/latest/

5. 평가 및 다음 목표

일단 이번 프로토타입 개발의 가장 큰 소득은 중간에 삼천포로 빠져서 만든 SessionDB이다.

사실 이걸 만들 때만 해도 서버단과 DB 구현 없이 이정도로 작동하는 프로토타입을 만들게

될 줄 몰랐다. 물론 localStorage를 사용한다는 부분에서 발생하는 한계는 있지만…

하지만 중요한 문제는 Till60의 윤곽이 서서히 드러나면서 역시나 애초에 계획하고 예상했던

것과 뭔가 다른 모습에 당황스럽기까지 하다…-.-

사실 뭔가 집중적으로 인생의 마스터 플랜을 관리할 수 있는 서비스를 만들어보고자 하는 것이

최초의 목표였는데 만들어진 모습은 너무나 산만하다. 처음에는(물론 지금도…) 이게 뭐하는 

서비스인지도 잘 모를 정도였는데 그나마 사용자 등록 후 Wizard 형식의 Tutorial을 간단하게나마

추가를 해서 좀 나아지긴 한 것 같지만 여전히 집중되는 뭔가가 없이 산만하다는 느낌을

지울 수가 없다.

일단 UI/UX를 다시 한 번 고민해봐야겠다.

아무래도 Till60는 프랜B를 위한 플랜A가 될 가능성이 높을 것 같다…-.-

이번 주말은 휴식의 의미로 한동안 손을 못댔던 아두이노 로봇을 손좀 보고 다음주부터는

본격적으로 Back end 작업을 시작하면서 Spring boot와 mongoDB를 공부해보기로 하겠다.