2019-02-19 개발 일지

- 프로젝트 제작 동기

가장 먼저 이 프로젝트를 시작 하게 된건 단순하게 PS4를 싸게 구매하고 싶은 마음에 루리웹, 뽐뿌의 핫딜게시판을 들어가면서 시작 되었다.

하지만 싸게 판매한다는 제보 글은 매번 늦게 확인해서 이미 매진이 되었다. 이에 신규 게시물이 등록되면 알림을 주게 되고, 빠르게 게시글을 확인 하고 싶은 마음에 제작을 시작 하였다. 

웹 크롤링을 통해서 게시물을 확인하고 전달하는 모듈은 어렵지 않게 구현 하였지만 알림기능을 사용하게는 문제가 되었다. 

카카오톡 봇도 찾아보고, 인스타그램, 페이스북 메신저, 텔레그램 등 등 SNS 메신저를 우선적으로 찾아보았지만 간단하게 사용 할 수 있는 기능은 찾기 어려웠다.

차선책으로 찾은 것이 메일 전송이다. 

구글 GMail SMTP를 이용하여 메일을 전송하고 핸드폰에서 메일 어플의 알림을 통해 즉각 신규 게시물을 확인 할 수 있었다.

하지만 이 기능은 결국에는 나에게 필요 없는 메일(가비지)이 계속 늘어나게 되었고, 이에 메일이 아닌 웹 페이지를 통해 확인을 할 수 있도록 구현 하게 되었다.

- 프로젝트 환경

• Spring Boot 2.0
• Maven
• Thyemleaf
• vue
• jquery

프로젝트 환경은 현재 직장에서 사용하는 스프링부트 2.0, 메이븐 환경을 구축 하였다.

고민한 것은 프론트 기술인데 스프링부트가 가져가고 있는 프론트 템플릿으로 타임리프를 사용했고, 그 안에서 vue.js를 통해 실시간으로 게시물의 리스트를 변경 하도록 구현 하고자 하였다.

이후에는 지금까지의 내용을 스킵하고 각 각 하루에 작업 했던 내용을 작성 하고자 한다.

1. 리스트 화면 구현

<div class="offcanvas-wrapper">
    <!-- Page Title-->
    <div class="page-title">
        <div class="container">
            <div class="column">
                <h1>핫딜 모아모아</h1>
            </div>
            <div class="column">
                <ul class="breadcrumbs">
                    <li>루리웹</li>
                    <li class="separator">&nbsp;</li>
                    <li>뽐뿌</li>
                    <li class="separator">&nbsp;</li>
                    <li>기타 등등</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Page Content-->
    <div class="container padding-bottom-3x mb-2">
        <div class="row">
            <div class="col-lg-9 col-md-8 order-md-2">
                <div id="list_sector">

                </div>
            </div>

        </div>
    </div>

$(function () {
    ruriwebDataCall();
});
function ruriwebDataCall() {
    $.ajax({
        type: 'post',
        url: "/ruriwebDataCall",
        error: onError,
        success: onSuccess

    });
}
function onError(resultData) {
    console.log(resultData);
}
function onSuccess(resultData) {
    $('#list_sector').html('');
    $(resultData.ruriweb).each(function () {
        $('#list_sector').append("<button><span class=\"webname\">루리웹</span><br><span class=\"subject\">" + this.subject + "</span></button>")
    })
}

구글에 부트스트랩 리스트 템플릿 이라고 검색 하면 여러가지 템플릿이 나오지만 다 업무적인 리스트 템플릿이어서 맘에 안들었다. 

그래서 부트스트랩을 이용한 레이아웃만 사용하였고, 그 안에 리스트는 따로 에니메이션이 들어간 버튼 css 템플릿을 검색해서 찾게 되었다. 

<div id="list_sector"> 에 ajax를 통해 전달 받은 게시물의 json 데이터를 이용하여 리스트를 뿌려준다.

현재는 일반적인 jquery Ajax를 이용하여 구현하였지만, 추후 작업에는 vue를 이용하여 이를 스케줄을 추가 하고 화면을 계속 켜둔 상태에서도 자동으로 게시물이 리로드 되도록 구현해볼 생각이다.

위의 작업을 통해 현재까지 구현된 기능의 화면은 이렇게 나온다.

다음 작업으로는 뽐뿌 list 불러오기, 화면 전환, 제목 꾸미기 등이 될 것 같다.