Node.js - 게시판 ( 메인페이지 )

 

github 주소 : https://github.com/GoF9490/board

 

앞서 사족

1주일 이내에 게시판 제작 완성을 목표로 시도한 프로젝트. 댓글기능까지 목표로 잡았지만 댓글은 미완성.

생각보다 틀에 맞는 UI제작에 많은 시간이 소모되었다. CSS에 덜 익숙한 탓도 있겠지만, 하루를 내리 쓸것이라고는 생각도 못했다. 덕분에 inline-block 같은것도 새로 배웠으니 오히려 좋다.

 

 

// 메인페이지

app.get('/', (req, res, next)=>{
    let page = (req.query.page > 1) ? (req.query.page - 1) * title_limit : 0;
    // page변수는 url에서 page쿼리문을 받아와 몇번째 페이지를 표시할지를 나타냄.
    
    let search = { // html템플릿에 넘겨서 검색한 단어, 옵션을 표시해 줄 변수.
        'option' : 0,
        'keyword' : ''
    };

    let search_query = ` `; // 검색한 단어, 옵션에따라 sql쿼리문에 추가될 변수
    let keyword = req.query.keyword; // 쿼리문 보호하는 조치 필요.(qs.escape라던가)
    
    // 이 밑으로 검색 옵션에따라 추가되는 쿼리문. 
    if (req.query.type === 'titlecontent'){
        search_query = `(title LIKE '%${keyword}%' OR content LIKE '%${keyword}%') AND`;
        search.keyword = keyword;
    }
    else if (req.query.type === 'title'){
        search_query = `title  LIKE '%${keyword}%' AND`;
        search.keyword = keyword; search.option = 1;
    }
    else if (req.query.type === 'content'){
        search_query = `content LIKE '%${keyword}%' AND`;
        search.keyword = keyword; search.option = 2;
    }
    else if (req.query.type === 'writer'){
        search_query = `writer LIKE '%${keyword}%' AND`;
        search.keyword = keyword; search.option = 3;
    }
    
    // 조건에 따라 db에서 값을 가져오는 쿼리문
    db.query(`SELECT id, title, writer, DATE_FORMAT(day, '%y-%m-%d') AS day
    FROM board WHERE ${search_query} deleted=0 ORDER BY id DESC`, (err, result)=>{
        if (err) return next(err);
        
        //작성글 수에 따른 페이지를 만들어주는 html문을 담은 변수.
        let page_view = '<p class="board_bottom"> ' ;
        let count = Math.ceil(result.length / title_limit);
        for (var i=1; i<=count; i++){
            page_view += `<a href="/?${CheckQuery(req.query)}page=${i}">${i}</a>`
            page_view += ' ';
        }
        page_view +='</p>';
        
        //작성글을 표시해 줄 html문을 담은 변수.
        let list = '';
        for (var i=page; i<page + title_limit; i++){
            if (!result[i]) break;
            list += `
            <li>
                <div class="board_id">${result[i].id}</div>
                <div class="board_title"><a href="/view?id=${result[i].id}">${result[i].title}</a></div>
                <div class="board_writer">${result[i].writer}</div>
                <div class="board_day">${result[i].day}</div>
            </li>
            `;
        }
        return res.send(template.main(template.check_login(req.user), list, page_view, search));
    });
    return;
});

코드를 return부터 역으로 읽는식으로 리뷰해보겠다.

 

return res.send(template.main(template.check_login(req.user), list, page_view, search));

 

에서 template.main 이라는 html 템플릿을 완성하는데 template.check_login, list, page_view, search 이렇게 총 4개의 변수를 주고 있다.

 

첫째로

template.check_login은 함수로써 user값을 가져가 유저의 데이터를 토대로 로그인 여부에 대한 html문을 리턴해 표시해 주는 역할을 하며, 로그인 관련 페이지를 제외한 모든 페이지에 사용된다.

좌측 상단에 비 로그인시 login | register 라는 값을,

로그인 시 접속자의 닉네임 | logout 이라는 값을 리턴하는 것을 볼 수 있다.

 

둘째로

4번째 변수인 search 변수부터 알아보겠다.

유저가 검색을 했을시, url의 query값을 읽어 알맞은 검색 옵션이라면, 그 옵션에 맞춰 db에 검색하는데 쓰일 search_query 변수를 작성, 이후 search 변수에 option값으로 사용된 옵션의 번호를, keyword변수로 검색한 문장을 저장해 페이지가 이동되었을시, 검색옵션과 검색문장을 저장해 표시하도록 하는 역할을 수행한다.

sd를 제목+내용으로 검색시, 그에 알맞는 값을 주면서 제목+내용 검색옵션과 sd키워드를 유지하는것을 볼 수 있다.

 

셋째로

세번째 변수로 주는 page_view 이다.

위의 search변수 과정에서 얻은 search_query 변수를 통해 db에서 해당 형식에 맞는 데이터를 전부 검색하고, 검색한 데이터 수가 title_limit 변수(페이지에 표시될 작성글 갯수를 정수값으로 저장하고있는 변수) 보다 많을경우 그에따라 페이지를 늘려, 다음페이지에서 다음 작성글을 볼수있도록 하는 html문을 담은 변수이다.

기본적으로 title_limit는 20으로 설정되어있으나, 기능을 시험해보기위해 title_limit를 2로 주고 실행해보았다.

하단의 페이지를 표시하는 숫자가 2까지 생겼으며, 한 페이지에 최대 2개의 작성글이 표기되는 것을 볼 수 있다.

 

넷째로

list 변수는 해당 화면의 작성글을 id의 내림차순으로(최근 작성된 글 순으로) 페이지에 title_limit 갯수만큼 표시, 클릭시 해당 작성글의 id에 따라 view페이지로 넘어가는 역할을 한다.

 

 

끝으로 사족

원래는 일요일 내에 다른 완성된 기능들도 전부 리뷰하려 했지만, 작성중 아이디어가 떠올라 쿼리문을 다듬는다거나 하는 잦은 수정이 이루어져 이 글만 작성하는데 꽤나 오랜 시간이 걸렸다. 내일 추가하던가 하고, 댓글 기능은 완성되는대로 추가하는 방향으로 잡겠다.