Playground는 서울 시내에서 아이랑 갈만한 

실내외 놀이터, 박물관/미술관, 도서관등의 장소(약 3,400군데)들을 모아서, 

일목요연하게 보여 주는 웹 사이트로 

주말 같은 여유 시간에 아이랑 어디를 가야 할지 고민하는 부모들을 위해 

개인의 경험을 토대로 제작하였다.

수 많은 날을 검색으로 지새우며 놀러 갈 곳을 찾아 다니다 

집 주변에 괜찮은 시설이 제법 많다는 것을 알게 되어 정리하면서 시작하였다.

개발은 2단계로 나누어서 진행하고 있다.

현재는 1단계 개발을 완료한 상태로 서울 시내의 시설과 장소 데이터를 모아서 DB로 구축하고,

내 주변의 시설과 장소에 대한 리스트(맵)를 보여주는 것에 집중하였다.

현재는 개발 버전이라 가격이 싼 웹 호스팅을 사용해서 SSL을 적용하지 못했다.

(정확하게는 가격이 싸서 적용되지 않는 것이고, 싼 호스팅이라 동접이 많아지면 속도가 ...)

SSL이 되어야 웹 브라우저에서 제공하는 현재 위치를 찾는 기능(navigator.geolocation)을 사용할 수 있다.

따라서 나의 주변이라기 보다는 내가 지정한 위치 주변의 시설과 장소를 조회할 수 있게 구현하였다.

 

2단계는 각자의 경험을 공유하는 추천코스이다.

개인이 괜찮다고 추천하는 시설과 장소들을 묶어서 소개하는 기능으로 ,

개인의 경험을 공유하고, 의견을 공유하는 기능으로 구현하고 있다.

회원 관리 기능은 구현되어 있지만 (github에서 소스로 확인가능),

SSL이 적용되지 않아서 [개인정보보호법] 준수 문제로 운영에 배포되어 있지 않다.

현재는 제작자(관리자)만 작성 가능하다.

 

이 사이트의 소스는 Nodejs와 MariaDB를 기반으로 제작한 것으로

github에서 다운로드 받아서 샘플 데이터와 같이 실행 가능하지만

구축된 데이터는 공유하지 않는다.

데이터는 계속 구축 중으로, 

데이터 양이 너무 많아 현재는 서울만 제공하며 

원 데이터의 출처는 Playground 사이트github에 공유되어 있다.


다음으로 주요 기능에 대한 사용법을 정리한다.

 

먼저, [우리 동네] 메뉴를 실행하면 다음과 같이 지도(Daum map)가 실행된다.

기본 위치는 광화문이고, 

마커를 마우스(PC일경우)나 손가락(스마트폰)으로 움직여서 위치를 지정한다.

지도를 클릭해서 마커를 이동 시킬 수 있다.

SSL이 적용되지 않아 현재 위치를 자동으로 찾는 기능은 사용할 수 없지만

지도 좌측에 있는 [주소로 위치 검색] 기능을 이용해 이동할 수 있다.

지도 좌측에 있는 [주소로 위치 검색]을 선택하면, 그림과 같은 다이얼로그 창이 실행된다.

이 창에서 찾을 주소나 시설명을 입력하면 된다.

주소 검색기능은 Daum에서 제공하는 기능으로,

검색된 리스트에서 해당하는 장소를 클릭하면 위치(마커)가 이동된다.

위치를 지정하고 [2Km내에서 검색] 버튼을 클릭하면

다음 그림과 같이 지정된 위치의 주변에 있는 실내외 놀이터, 박물관, 도서관등의 위치가 색깔별로 표시된다.

조회된 데이터양이 많을 경우,

상단의 실내외 놀이터, 박물관, 도서관 옵션 기능을 이용해서

보고 싶은 종류만 볼 수 있다.

옵션 좌측에 있는 리스트 버튼을 클릭해서 시설과 장소 리스트를 보면서 선택할 수 있다.

지도에 표시된 마커(색깔별 원)를 클릭해서 상세한 정보를 볼 수도 있다.

 

다음은 [추천 코스] 기능이다.

특정 장소를 중심으로 갈만한 장소들을 묶어서 하나의 코스로 정리하여 보여 주는 기능으로

아직은 개발 중인 기능이며,

실행하면 다음 그림과 같이 리스트가 출력된다.

각 항목을 클릭하면 다음과 같은 상세 페이지가 실행된다.

상세 페이지는 추천하는 장소에 대한 리스트 아이콘, 소개글, 위치를 나타내는 지도로 구성되어 있다.

장소에 대한 리스트 아이콘이나 지도의 마커를 클릭하면

다음 그림처럼 각 장소에 대한 상세 정보를 확인할 수 있다.

지도의 좌측 중앙에 있는 빨간색 지도 아이콘을 클릭하면

현재 보고 있는 위치를 중심으로 2Km내에 있는 다른 장소들을 볼 수 있는

[우리 동네]로 이동한다.

 

아직은 개발 중이고, 기능이 제한적이지만

도움이 되는 사용자가 많았으면 좋겠다.

'Node.js > 기타' 카테고리의 다른 글

nineBatis (9batis)  (2) 2017.08.16
1. Node.js 프로젝트 생성 및 개발 준비  (0) 2017.08.05
2. MariaDB 기반 CRUD 게시판 만들기  (23) 2017.08.05
3. 게시판 예제 보강  (4) 2017.08.05
4. GitHub에서 Node.js 소스 가져오기  (0) 2017.08.05

nineBatis (9batis)

Java에서 SQL문을 처리 할 때 많이 사용하는 Mybatis처럼,

Node.js에서 SQL을 쉽게 사용하기 위해 간단하게 제작한 라이브러리이다.


여기에서는 이전에 정리한 Node.js 기반의 단순 게시판

9batis를 적용하여

9batis의 사용법을 예제와 문서로 정리하였다.


게시판 예제는 Node.js (express)와 MySQL을 기반으로

단순 CRUD 기능을 구현한 예제이고,

board1.js, board2.js의 2가지 예제로 구성되어 있다.


이 예제에 9batis을 적용하여 3 가지 예제를 추가하였다.

9batis를 이용하여

SQL 문장만 반환 받아서 사용하는 단순 예제(board3.js),

SQL을 실행하고 결과를 반환 받아서 사용하는 기본 예제(board4.js),

중첩 SQL문 실행 등 다소 복잡한 기능을 정리한 예제(board5.js)로 구성하였다.


routes 폴더에 있는 각 컨트롤(board3.js, board4.js, board5.js)들은

각각의 HTML 파일(ejs)을

views 폴더 하위에

컨트롤과 동일한 이름의 폴더(board3, board4, board5)로 가지고 있다.

각 폴더에는 list.ejs, form.ejs, read.ejs 파일이 있다 [그림 왼쪽 참조].


이 샘플 코드는 github에서 받을 수 있다.

github 사용법은 게시판 예제에 정리되어 있으니 참고하면 되고

정리된 내용 중에서 다운 받을 github 주소를

boardJS에서 nineBatisSample로 바꾸어서 따라하면 된다.

https://github.com/gujc71/nineBatisSample


이제부터 nineBatis (9batis)의 사용법에 대해서 정리한다.


Node.js에서는 SQL문을 문자열로 처리하여

컨트롤과 같이 작성한다.

nineBatis (9batis)에서는 SQL문을 별도의 XML 파일로 작성하여 관리한다.

다음 코드(board3.xml)와 같이

select, insert 등의 태그를 사용하여 SQL 문을 작성하면 된다.

다음 코드는 게시판 예제(board1.js)에서 SQL 문만 따로 추출하여

9batis 문법에 맞추어 XML로 정리한 것이다.

board3.xml

XML 파일은 한개 이상을 사용할 수 있고

별도의 폴더에 (예제는 routes/sql) 모아서 사용해야 한다.


태그에 사용되는 id (selectBoardList, selectBoardOne 등)는

전체 XML 파일내에서 고유한 값이어야 한다.

중복된 id를 지정하면 Node.js 시작시 오류 메시지를 출력하고

Node.js 실행을 중지한다.


XML 파일에서 제공되는 기본 기능(명령어)은 4 가지이다.

숫자 변수, 문자 변수, include, if문이 지원된다.

이것은 Mybatis와 비슷하게 구현했는데

사용한 라이브러리의 제약(xml2js)등의 문제로 아직은 사용법이 다소 부족하다.


위 코드에서 사용한 것처럼

숫자 변수는 ${변수} [라인 4],

문자 변수는 #{변수} 로 사용한다 [라인 21, 27].

MyBatis에서는 #을 PrepareStatement로

$를 Statement로 정의하여 구분하지만,

여기서는 쉽게 정의하기 위해 문자와 숫자 변수로 정의하였다.


include, if문은 XML로 작성해야 하는데

xml2js 파싱시 처리가 되지 않아

{include ref='sql 태그 id'}로 사용한다 [라인 16, 22, 32].

include문은 위 SQL 문처럼 (includeWhere)

중복된 코드(sql 태그)를 별도로 지정하고 [라인 4],

이 것을 사용할 SQL에서 가져오고자 할 때 사용한다 [라인 16, 22, 32].

이때 ID가 일치해야 한다.


if 문은 다음 코드처럼

@{if test="조건식"}실행할 내용{/if}으로 사용한다.

정규식을 이용한 파서에 문제가 있어서 IF문에만 @를 사용했는데,

일관성을 위해 include도 @{include}로 처리할지 고려 중이다.


if 문은 board5.xml 파일에 다음과 같이 작성되어 있다.

board5.xml

조건식은

숫자 변수를 사용할 경우에는 $변수 > 10과 같이 사용하고

문자 변수를 사용할 경우에는 $변수 === "test"와 같이 사용한다.

Mybatis와 마찬가지로 else 문이 없다.

따라서 예제와 같이 두개의 if문을 사용해야 한다.


데이터를 정해진 개수(cnt) 만큼 가져올 때와 [라인 6]

정해진 개수가 없거나($cnt === undefined), 0 이면 [라인 11]

모든 데이터를 가져오도록 조건을 사용하지 않았다.


명령어

설명

예제

 #{변수명}

 문자열 변수 (PrepareStatement)

 #{cnt}

 ${변수명}

 숫자형 변수 (Statement)

 ${cnt}

 {include}

 공통 SQL 문 가져오기

 {include ref='sql 태그 id'}

 @{if test="조건식"}

 비교연산자

 @{if test="cnt>1"}실행할 내용{/if}


이렇게 작성한 SQL문을

nineBatis(9batis)를 이용하여 프로그램(js)에서 호출해서 사용한다.


9batis는 다음과 같이 선언하여 사용한다.

var batis9 = require("./nineBatis");
batis9.loadQuery(__dirname +'/sql', true);

9batis 파일(nineBatis.js)은

아직 npm에 등록하지 않아서 nineBatis.js 파일을 복사해서 사용해야 한다.

샘플 프로젝트의 routes 폴더에 다른 코드들과 같이 있다.

(등록은 어느 정도 쓸만하다 싶을 때 할 예정)


require로 nineBatis.js 파일을 가져오기 한 후,

9batis의 loadQuery() 함수로 xml 파일들을 읽어들인다.

파라미터로 xml파일들이 있는 폴더(sql)를 지정하고,

디버그 여부를 지정하면 된다.

디버그를 true로 지정하면 console에 현재 실행하는 SQL문이 출력된다.


Node.js를 Eclipse에서 실행한 경우에는 하단 console 탭에 SQL ID와 SQL문이 출력된다.

Node.js를 cmd 창에서 실행한 경우에는 cmd 창에 SQL ID와 SQL문이 출력된다.

SQL ID와 SQL문이 출력이 중요한 것이

ID로 문제가 되는 SQL을 쉽게 찾을 수 있고

출력된 SQL 문을 복사해서

전용 Client (WorkBench, HeidiSQL등)에서 붙여넣고 실행하면

쉽게 SQL 오류를 찾을 수 있기 때문이다.


loadQuery()는 한 프로젝트에서 한번만 실행해야 하고

커넥션 풀링처럼

9batis을 app.js에서 실행한 후

변수 batis9 을 글로벌로 사용하는 것이 좋다.


먼저, 9batis를 소극적으로 사용한 예제이다.

board3.js

예제로, 모든 데이터를 DB에서 가져와 출력하는

게시판 글 리스트 부분을 정리하면,

기존에는 다음과 같이 SQL문이 프로그램 내에서 문자열로 사용되었다.

router.get('/list', function(req,res,next){
    pool.getConnection(function (err, connection) {
        var sql = "SELECT BRDNO, BRDTITLE, BRDWRITER, DATE_FORMAT(BRDDATE,'%Y-%m-%d') BRDDATE" +
                   " FROM TBL_BOARD";
        connection.query(sql, function (err, rows) {
            if (err) console.error("err : " + err);

            res.render('board1/list', {rows: rows});
            connection.release();
        });
    });
});

board1.js

9batis에서는

이 SQL문을 XML (board3.xml)로 저장하고,

ID (selectBoardList)를 부여하여 작성한 뒤에

컨트롤에서는 이 ID로 호출하면 (batis9.getQuery())

해당 SQL문을 반환 받아서 사용하게 된다 [라인 15].

이것이 9batis의 기본 사용 방법이자 기본 개념이다.


조금 더 복잡한 기능으로

SQL문에 필요한 파라미터를 지정 방법에 대하여 정리한다.

기존에는 글읽기와 글저장 부분의 SQL문이

다음과 같이 문자열로 사용되었다.

router.get('/read', function(req,res,next){
    pool.getConnection(function (err, connection) {
        var sql = "SELECT BRDNO, BRDTITLE, BRDMEMO, BRDWRITER, DATE_FORMAT(BRDDATE,'%Y-%m-%d') BRDDATE"+
                   " FROM TBL_BOARD" +
                  " WHERE BRDNO=" + req.query.brdno;
        connection.query(sql, function (err, rows) {
            ~~ 생략 ~~
        });
    });
});

router.post('/save', function(req,res,next){
    var data = [req.body.brdtitle, req.body.brdmemo, req.body.brdwriter, req.body.brdno];

    pool.getConnection(function (err, connection) {
        var sql = "";
        if (req.body.brdno) {
            sql = "UPDATE TBL_BOARD" +
                       " SET BRDTITLE=?, BRDMEMO=?, BRDWRITER=?" +
                  " WHERE BRDNO=?";
        } else {
            sql = "INSERT INTO TBL_BOARD(BRDTITLE, BRDMEMO, BRDWRITER, BRDDATE) VALUES(?,?,?, NOW())";
        }
        connection.query(sql, data, function (err, rows) {
            ~~ 생략 ~~
        });
    });
});

board1.js

SQL문에 필요한 파라미터는

글 읽기(/read)를 예로 할 경우 글 번호(brdno)를 의미한다.

지정된 글 번호에 따라 DB에서 글 내용을 조회하여 화면에 출력한다.

이 글 번호는 글 리스트에서 사용자의 선택에 따라 바뀌는 것으로

위 코드처럼 지정된 글 번호(req.query.brdno)에

맞는 데이터(WHERE)를 가지고 오도록

문자열 조작을 통하여 SQL문을 작성 한다.

" WHERE BRDNO=" + req.query.brdno


글 저장(/save)은 사용자가 입력한 값을 저장하기 위한 것으로

파라미터를 모두 ? 로 지정하고

배열 (data 변수)로 값을 넘기는 방식으로 작성한다.


9batis에서는

getQuery()를 호출할 때, JSON으로 파라미터를 지정한다 [라인 27, 41, 43].

SQL문 작성시 ${brdno}로 지정한 경우,

JSON의 키 이름을 brdno 로 하여 사용한다 [라인 27].

9batis에서 해당 변수에 JSON 값을 치환하여 SQL문을 반환한다.

(콘솔에 출력된 SQL문으로 확인할 수 있다.)

$는 SQL 문 변환시 숫자라는 의미로 값만 출력되고,

#은 문자라는 의미로 홑따옴표(')로 싸여서 출력된다.

    <sql id="includeWhere">
        WHERE BRDNO=${brdno}
    </sql>
 
    <update id="updateBoard">
        UPDATE TBL_BOARD
           SET BRDTITLE=#{brdtitle}, BRDMEMO=#{brdmemo}, BRDWRITER=#{brdwriter}
          {include refid="includeWhere"}
    </update>
    
    <insert id="insertBoard">
        INSERT INTO TBL_BOARD(BRDTITLE, BRDMEMO, BRDWRITER, BRDDATE)
        VALUES (#{brdtitle}, #{brdmemo}, #{brdwriter}, NOW())
    </insert>

board3.xml

이렇게 구현하면서 부수적인 효과는

기존에는 Node.js에서 제공하는 JSON 데이터(req.body)를

배열 (data 변수)로 변환해서 사용했지만

  var data = [req.body.brdtitle, req.body.brdmemo, req.body.brdwriter, req.body.brdno];

9batis에서는 JSON 데이터(req.body)를 그대로 사용한다 [라인 41, 43].

  sql = batis9.getQuery('insertBoard', req.body);


이번에는 9batis를 제대로 사용하는 방법(board4.js)을 정리한다.

board4.js

일단, 일부만 올린 board3.js 파일의 내용 보다 확 줄어든 코드 양을 볼 수 있다.

이것은 DB에 접속해서 SQL을 실행하고

실행 결과를 반환 받는 부분을 execQuery() 함수로 처리했기 때문이다.


다음과 같이 글 리스트(/list)에 대하여

기존에 작성한 코드와

9batis로 작성한 코드를 직접 비교하면 쉽게 알 수 있다.

router.get('/list', function(req,res,next){
    pool.getConnection(function (err, connection) {
        var sql = "SELECT BRDNO, BRDTITLE, BRDWRITER, DATE_FORMAT(BRDDATE,'%Y-%m-%d') BRDDATE" +
                   " FROM TBL_BOARD";
        connection.query(sql, function (err, rows) {
            if (err) console.error("err : " + err);

            res.render('board1/list', {rows: rows});
            connection.release();
        });
    });
});

board1.js

execQuery() 함수를 호출하고

반환 받은 실행 결과인 rows을 render()에 파라미터로 지정하면 끝이다.

파라미터가 null인 것은 SQL문 생성을 위해 필요한 값이 없다는 것으로,

SQL문 생성을 위해 필요한 값이 있는 경우

앞서 정리한 예제와 동일하게 JSON 으로 지정하면 된다 [라인 19, 29, 37 43 참조].

router.get('/list', function(req,res,next){
    batis9.execQuery(pool, 'selectBoardList', null, function (rows) {
         res.render('board4/list', {rows: rows});
    });
});

board4.js

execQuery()의 파라미터는

DB접속 클래스, 실행할 SQL 아이디, SQL 실행에 필요한 파라미터(JSON), SQL 실행 완료 후 실행할 콜백 함수

의 4 가지 이다.

이 중 DB접속 클래스(pool)는

loadQuery() 호출시 미리 지정해서 사용하는 것이 편리하지만

이해를 위해 현재는 이렇게 구현했다.

메소드

설명

예제

 loadQuery

 - SQL문이 있는 XML 파일을 읽어서 보관.

 - 파라미터

   filepath: XML 파일이 있는 폴더
   mode: 디버깅 여부.

 batis9.loadQuery(__dirname +'/sql', true)

 getQuery

 - 지정된 ID의 SQL문을 찾아서 반환.

 - 파라미터

   id: XML 파일에서 지정된 SQL문의 id
   params: SQL문에 지정된 변수의 값 (Json)

 batis9.getQuery('selectBoardList');

 batis9.getQuery('selectBoardOne', {brdno: 1});

 execQuery

 - 지정된 ID의 SQL문을 찾아서 실행

 - 파라미터

   pool: DBMS에 대한 연결
   id: XML 파일에서 지정된 SQL문의 id
   params: SQL문에 지정된 변수의 값 (Json)
   callback: SQL문 실행후 호출할 함수

batis9.execQuery(pool, 'selectBoardList', null, function (rows) {
    res.render('board4/list', {rows: rows});
});


마지막으로 2개 이상의 SQL문을 실행하는 것과

하나의 SQL문으로 두 가지 기능(IF문)을 하는

다소 복잡해 보이는 예제(board5.js)를 정리한다.

board5.js

먼저, 9 라인 과 10 라인을 보면

두 개의 SQL문이(selectBoardOne, selectBoardList) 사용된 것을 볼 수 있다.


글 읽기(/read)에서

지정된 글 내용을 DB에서 가지고 온다(selectBoardOne).

이 기능에 이전 글에 대한 정보(selectBoardList5)를 제공하는 기능을 추가하였다.

현재 글을 모두 읽은 후

글 리스트로 돌아가서 다른 글을 선택하는 것이 아니라

글을 읽던 페이지에서 바로 이전 글을 읽을 수 있도록 하는 것이다.

(다음 글 기능은 각자 구현해 보길)


두 개의 SQL문을 사용하는 것은

기존의 Node.js에서 사용하는 것이랑 동일하게

하나의 SQL문이 실행 완료되면 [라인 9],

지정된 콜백 함수에서 나머지 SQL문을 실행하도록 하면 된다 [라인 10].

이 기능은 구현한 것이 아니고 Node.js의 기능을 그대로 쓰는 것이다.


다음으로 하나의 SQL문(board5.xml)으로 두 가지 기능을 하도록 구현한다.


글 읽기에서 이전 글에 대한 정보를 가지고 오는 것은

글 리스트와 거의 유사한 SQL문을 사용한다.

이전 글은 현재 글 보다 글 번호가 적은 글 중 하나를 가지고 오는 것이다.

글 리스트(/list)는 그냥 모든 글을 가지고 온다.


이 둘의 공통 점은 글에 대한 정보(글 제목, 작성일자 등)를 가지고 오는 것이고

차이점은

조건에 의한 하나의 행(LIMIT)을 조회하느냐,

또는 여러 개의 리스트를 가지고 오느냐 이다.


board5.xml

기존에 사용하던 selectBoardList를 두고

예제를 위해 별도로 selectBoardList5로 새로 생성하였고,

출력할 데이터 개수(cnt)를

지정하면(if) 이전 글을 찾는 SQL문을 [라인 6~10],

지정하지(else) 않으면

조건을 사용하지 않아 모든 데이터가 조회된다 [라인 11~13].


이 SQL문을

글 리스트(/list)에서는 별 지정 없이(null) 호출하고 [board5.js 라인 3]

batis9.execQuery(pool, 'selectBoardList5', null,


글 읽기(/read)에서는 {cnt: 1}과 같이 파라미터를 지정한다 [board5.js 라인 10].
    batis9.execQuery(pool, 'selectBoardList5', {brdno: req.query.brdno, cnt: 1},



이상으로 nineBatis (9batis)의 사용법을 정리하였다.

9batis는 SQL문을 XML 파일에 저장하고,

프로그램에서 간단하게 호출하여 (execQuery)

사용할 수 있도록 도와 주는 Node.js 라이브러리로

여기에서 다운로드 받을 수 있다.




Eclipse에서 Node.js (Nodeclipse)를 사용하는 방법을

다음과 같이 4가지로 정리하였다.

1. Node.js 프로젝트 생성 및 개발 준비

2. MariaDB 기반 CRUD 게시판 만들기

3. 게시판 예제 보강

4. GitHub에서 Node.js 소스 가져오기


Node.jsNodeclipse 설치는

인터넷을 찾아 보길 바라고, 여기서는 설치한 이후부터 정리한다.

Express 기반으로 제작하기 때문에

Express (express-generator 포함)도 설치해야 한다.


Node.js는 Atom이나 notepad++로 작성하고

콘솔에서 실행해서 개발해도 되지만,

디버깅과 사용의 편의성 때문에 Eclipse에서 작성하는 것을 선호한다.

(타이핑을 안 좋아해서 GitHub도 eclipse로 이용)

Nodeclipse은 eclipse에서 Node.js를 사용할 수 있게 해주는 플러그인으로

Eclipse의 marketplace에서 Nodeclipse로 검색해서 설치하면 된다.


개발을 위해 새로운 프로젝트(board)를 생성한다.

새 프로젝트는 Nodeclipse를 이용하여 생성할 수 있지만 (그림참조),

웹 개발에 필요한 기본 설정을 제대로 작성해주지 않기 때문에

express로 콘솔 창에서 프로젝트를 생성하고,

Eclipse에서 Import 해서 사용하는 방법을 이용한다.



먼저 console 창에서

다음과 같이 입력하여 사용할 프로젝트를 간단하게 생성한다.

board 만 원하는 이름으로 지정하면 된다.

> express --session --view=ejs --css css board

> cd board

> npm install



express-generator에서 웹 개발에 필요한 여러가지 설정을 해주기 때문에

위와 같이 콘솔 창에서 프로젝트를 생성하는 것이 더 좋다.


주의: 콘솔 창에서 express 명령어를 사용하려면 express-generator를 설치해야 한다.

> npm install express-generator -g


콘솔창에서 [npm start]를 입력하여 웹 서버를 실행한다.

웹 브라우저에서 [http://localhost:3000/]를 입력하여

다음 그림과 같이 실행되면,

제대로 Node.js용 웹 프로젝트가 생성된 것이다.


콘솔 창에서 실행한 Node.js를 중지하고,

Eclipse를 실행해서

콘솔창에서 생성한 프로젝트를 가져오기(import)한다.


Eclipse에서 File > Import 를 실행하고

"Projects from Folder or Archive"을 선택한다.


"Directory" 버튼을 클릭해서,

express(express-generator)로 생성한 프로젝트의 폴더를 지정하고,

"Finishi" 버튼을 클릭한다.


[Project Explorer] 뷰에서

가져오기 한 board 프로젝트의 파일들을 볼 수 있다.

node_modules 폴더에 빨간색 X 표시가 된 것은

몇몇 라이브러리가 제대로 설치되지 않은 경우 나타나는 것으로

예제 구현에 문제가 없으니 넘어간다.


bin 폴더 하위에 있는 www 파일을 선택하고

컨택스트 메뉴에서 Run As > Node Application을 실행한다.

앞서 콘솔 창에서 [npm start]를 실행한 것과 같이

eclipse에서 웹 사이트를 실행하는 방법이다.


다음 그림 하단의 콘솔(console) 탭에 보이는 것처럼

종료(Teminate) 버튼이 빨간색으로 나타나면

웹 사이트가 제대로 실행된 것이다.

웹 브라우저에서 [http://localhost:3000/]를 입력하여 접속을 확인한다.


bin 폴더 하위에 있는 www 파일을 선택하고

컨택스트 메뉴에서 Run As > Node Application을 실행하는 대신에,

Debug As > Node Application을 실행하면,

Node.js를 손 쉽게 디버깅하면서 개발 할 수 있다.

console.log로 변수의 값을 출력하면서 디버깅 할 수도 있지만

Java로 개발하듯이,

Eclipse에서 Breakpoint를 설정하고 한 행씩 실행하면서 디버깅 할 수 있다.


이상의 그림은 디버그 모드로 실행했을 때 제공되는 Debug Persperctice 화면으로,

현재 행까지 실행하고,

각 변수의 값을 우측 상단에 있는 Variables 탭에서 확인할 수 있다.

그림에서는

rows 배열 변수의 값과 각 원소의 Json 값이 출력되는 것을 볼 수 있다.


'Node.js > 기타' 카테고리의 다른 글

우리동네, 아이랑 놀곳 Ver.서울  (0) 2019.05.29
nineBatis (9batis)  (2) 2017.08.16
2. MariaDB 기반 CRUD 게시판 만들기  (23) 2017.08.05
3. 게시판 예제 보강  (4) 2017.08.05
4. GitHub에서 Node.js 소스 가져오기  (0) 2017.08.05

Eclipse에서 Node.js (Nodeclipse)를 사용하는 방법을

다음과 같이 4가지로 정리하였다.

1. Node.js 프로젝트 생성 및 개발 준비

2. MariaDB 기반 CRUD 게시판 만들기

3. 게시판 예제 보강

4. GitHub에서 Node.js 소스 가져오기


앞서 생성한 board 프로젝트에 간단한 게시판 기능을 구현하여

기초적인 Node.js 사용법을 정리한다.

MariaDB(MySQL)을 기반으로

데이터를 저장하고 조회하는 CRUD 게시판을 제작한다.


게시판과 관련된 기본 설명들은 본 블로그에 정리되어 있다.

Java(Spring) 기반으로 되어 차이가 있지만

대부분의 개념은 언어와 관계없이 유사하니 참고하면 도움이 될 것이다.


여기서는 Java로 작성된 게시판 예제 중 게시판 1을 Node.js로 구현한다.

HTML부분은 그대로 복사해서 사용하고, 컨트롤 부분만 간단하게 작성하였다.


먼저, MariaDB 에서

다음과 같이 테이블(TBL_BOARD)을 생성한다.

CREATE TABLE TBL_BOARD (

    BRDNO int(11) NOT NULL AUTO_INCREMENT,         -- 글 번호

    BRDTITLE varchar(255),                                -- 제목

    BRDWRITER varchar(20),                              -- 작성자

    BRDMEMO   varchar(4000),                           -- 내용

    BRDDATE     datetime,                                -- 작성일자

    PRIMARY KEY (BRDNO)
) ;


Node.js에서 MariaDB에 접속하기 위해 mysql(?) 라이브러리를 설치한다.

콘솔 창에 [npm install mysql --save]를 입력하여 설치한다.

Eclipse에서 package.json 파일을 열어보면

mysql이 추가된 것을 볼 수 있다.

mysql이 이미 설치된 경우 콘솔 창에서 설치 할 필요없이

package.json 파일에서 다음과 같이 입력하고

컨택스트 메뉴에서 Run As > npm Install를 실행해도 된다.


먼저, app.js 파일을 열어서 다음 문장을 추가한다.

app.use('/board1', require('./routes/board1'));

routes 폴더에 있는 board1.js 파일을

board1 이라는 가상 폴더(/)로 사용하겠다는 것이다.

웹에서 board1/list, board1/form 과 같이 입력해서 사용한다.

웹 컨트롤 파일(js)은 대부분 routes 폴더에 두고 사용하고

HTML(ejs)과 같은 뷰(view) 파일은 views 폴더에 두고 사용한다.


board1.js의 내용은 다음과 같다.


모든 코드를 정리 하지 않고, 주요한 몇 가지만 정리한다.


먼저, MariaDB (MySQL)에 접속하는 커넥션 풀링을 생성한다 [라인 5~12].

이 커넥션 풀링(pool)을 이용하여 SQL문을 실행한다.

적당한 DB 접속 정보를 지정하면 된다.


14 라인의 / 은 구체적인 URL을 입력하지 않고

가상 경로(board1)만 입력하면

게시판 리스트(/board1/list)로 이동시킨다.


데이터 CRUD(Create, Read, Update, Delete)를 구현하기 위해

list, read, form, save, delete의 5 개의 컨트롤(URL)이 정의되었다.

이 컨트롤은 웹에서

    http://localhost:3000/board1/list

로 입력해서 사용한다.


list, read, form, save, delete의 컨트롤은

각각 글 리스트, 글 읽기, 글쓰기 폼, 글쓰기 저장, 글 삭제를 의미한다.

글 쓰기과 글 수정은 같은 개념이라 하나로 구현했다.

자세한 설명은 여기를 참고 하면 된다.


각 컨트롤의 코드가 제법 많아 어려워 보일 수 있는데

자세히 보면 거의 비슷한 코드로 작성된 것을 알 수 있다.

따라서, 여기서는 예제로 글 리스트(list)만 정리한다.


글 리스트(/list)가 호출되면 [라인 18]

DB에서 게시판 테이블(TBL_BOARD)의 데이터를 가지고 (SELECT) 오도록 한다 [라인 57].

SQL문을 실행하는 명령어는 connection.query로

SQL에 필요한 파라메터가 필요할 경우에는 [라인 79]

다음과 같이(data) 배열로 지정하고

    var data = [req.body.brdtitle, req.body.brdmemo, req.body.brdwriter, req.body.brdno]; [라인 67]

    connection.query(sql, data, function (err, rows)

없으면 생략한다 [라인 22, 38, 57].

글 읽기(삭제)에서는 파라메터를 SQL 문자 조작을 통해서 지정했다 [라인 91].


다시 글 리스트(/list)에서

SELECT 문을 실행한 결과가 rows 변수로 반환된다 [라인 22].

이 것을 HTML(ejs) 파일에 보내서 (res.render) 적당한 디자인으로 출력한다 [라인 26].


res.render는

지정된 HTML(ejs) 파일을 찾아서

지정된 데이터(rows)을 연결해서 처리하라는 함수이다[라인 26].

res.render에서 지정된 board1/list는

views폴더 하위에 board1 폴더 하위에 list.ejs 파일을 의미한다.

views폴더는 기본 설정이라 이 문장에서 생략된다.

ejs 확장자도 생략하여 사용한다.


글 리스트, 글쓰기 폼, 글 읽기는

데이터 처리후 시각적인 페이지가 있기 때문에

각각 list.ejs, form.ejs, read.ejs 파일이 있어야 하고

글 저장, 삭제는 시각적인 페이지가 없기 때문에

컨트롤 처리 후 이동할 URL(redirect)을 지정한다 [라인 82, 95].


정리하면,

컨트롤(js)에서는 데이터 베이스에 접속해서 데이터를 가져오거나 전송하고

처리 결과에 따라

필요한 HTML (ejs) 파일을 호출한다.


다음은 board1 폴더 하위에 있는 list.ejs 파일의 내용이다.

전체 코드는 기존에 사용하던 HTML 이고

27 라인 부터 38 라인이 ejs에 의한 자바스크립트 문법이다.

ejs 파일에서 <% %> 사이에 자바 스크립트를 사용한다.


컨트롤에서 지정된 데이터(rows)의 개수만큼 반복해서 [라인28]

HTML 테이블 태그의 TR을 생성한다.

하나의 TR이 데이터 한 행을 출력한다.

하나의 TD가 데이터 한 행의 한 열을 출력한다.


SQL SELECT 문을 실행한 결과가

rows란 배열로 반환되어

rows[i]로 한 행씩 찾아서

JSON으로 구성된 각 행의 열에 있는 값을 출력(=)한다 [라인 31~34].

각 열의 이름과 이름이 대문자로 사용된 것은

SELECT 문 사용시 사용한 이름이고

이때 대문자로 사용했기 때문이다.

SELECT BRDNO, BRDTITLE, BRDWRITER, DATE_FORMAT(BRDDATE,'%Y-%m-%d') BRDDATE


나머지 글쓰기 폼(form.ejs), 글 읽기(read.ejs)도

각각 다음과 같이 작성하여 board1 폴더에 저장한다.

form.ejs

read.ejs



웹 브라우저에서 http://localhost:3000/board1/list를 입력하여

그림과 같이 잘 실행되는지 확인한다.

좌측 상단의 [글쓰기] 버튼을 클릭한다.

내용을 작성하고 [저장] 버튼을 클릭한다.

글이 잘 등록되었으면

글 제목을 선택해서 글 읽기로 이동한다.


Java(Spring) 기반의 게시판 예제 중 하나를

Node.js로 제작하였다.

Java(Spring) 기반의 게시판 예제를 모두 Node.js로 변환한다면

실력향상에 많은 도움이 될 것이니 도전해 보길 바라고,

도전 결과를 공유하였으면 좋겠다.


지금까지 정리한 소스는 github에서 받을 수 있고,

설치 방법은 여기에 정리하였다.


팁: Eclipse에서 ejs 파일 열기

Eclipse에서 ejs 파일을 열면

다음 그림과 같이 일반 텍스트(Text) 파일 편집기로 열린다.

이 경우 가독성이 떨어지기 때문에

예약어 (HTML 태그)별로 색상이 있는 것이 좋다.


[Prjoect Explorer]뷰에서 ejs 파일 하나를 선택하고 컨텍스트 메뉴를 실행한다.

Open With > Other 메뉴를 실행하고

편집기로 HTML Editor를 선택한다.

하단의 체크 박스도 선택하고 [OK] 버튼을 클릭한다.


아무 ejs 파일을 열면

그림과 같이 보기 좋게 정리된 것을 볼 수 있다.






'Node.js > 기타' 카테고리의 다른 글

우리동네, 아이랑 놀곳 Ver.서울  (0) 2019.05.29
nineBatis (9batis)  (2) 2017.08.16
1. Node.js 프로젝트 생성 및 개발 준비  (0) 2017.08.05
3. 게시판 예제 보강  (4) 2017.08.05
4. GitHub에서 Node.js 소스 가져오기  (0) 2017.08.05

Eclipse에서 Node.js (Nodeclipse)를 사용하는 방법을

다음과 같이 4가지로 정리하였다.

1. Node.js 프로젝트 생성 및 개발 준비

2. MariaDB 기반 CRUD 게시판 만들기

3. 게시판 예제 보강

4. GitHub에서 Node.js 소스 가져오기


앞서 작성한 Node.js + MariaDB 게시판 예제 코드에서

다음과 같이 사용된 컨넥션 풀링 코드는

모든 컨트롤 파일(js)에 있어야 하는 코드이다.

var mysql = require('mysql');
var pool = mysql.createPool({
    connectionLimit: 5,
    host     : 'localhost',
    user     : 'root',
    password : '비밀번호',
    database : 'board'   
});

이렇게 사용하면

접속 정보가 바뀔 때 마다 모든 파일을 찾아서 수정해야 하고,

컨넥션 풀링을 제대로 사용할 수 없다.


여기에서는 컨넥션 풀링을 공통 파일에 넣고

호출해서 사용하는방법을 간단하게 정리한다.


그리고, 기존 예제(board1)를 수정하지 않고

간단한 파일 복제로 board2를 만들어서 구현한다.


먼저, routes 폴더에 있는 board1.js를

복사(Ctrl + C)해서 붙여넣기 (Ctrl + P) 한다.

새로운 이름(board2.js)을 입력하고 저장한다.

생성한 board2.js 파일을 열면

board1 경로가 사용된 것을 볼 수 있다.

board1을 모두 board2로 바꾸어 준다.


views 폴더에 있는 board1 폴더를 선택해서 복사(Ctrl + C)하고

views 폴더를 선택한 뒤에 붙여넣기 (Ctrl + P) 한다.

폴더가 맞지 않으면 복사가 되지 않으니 폴더를 잘 선택해야 한다.

새 폴더명으로 board2를 입력한다.

새로 생성한 board2 폴더 하위에 있는 3개의 ejs 파일을 열어서

board1을 board2로 모두 바꾸어 준다.

app.js 파일을 열어서

복사해서 생성한 board2.js 파일을 등록한다.


Node.js를 다시 시작한 뒤에

웹 브라우저에서 http://localhost:3000/board2/list 로 접속한다.


정리하면

컨트롤 파일(js)과 HTML(ejs) 파일을 복사해서 생성하고

컨트롤 파일(js)을 app.js에 등록하면

간단하게 새로운 게시판(board2)을 생성할 수 있다.


이제 새로 생성한 board2 의 컨넥션 풀링 코드를 공통 코드로 구현한다.


먼저, routes 폴더 하위에 mysqlConn.js 파일을 생성하고

커넥션 풀링과 관련된 코드를 넣어준다.

var mysql = require('mysql');
var pool = mysql.createPool({
    connectionLimit: 5,
    host     : 'localhost',
    user     : 'root',
    password : 'gujc1004',
    database : 'board'   
});

module.exports = pool;

module.exports 는 생성한 커넥션 풀링을

파일 외부에서 사용하도록 지정하는 코드이다.


board2.js 파일에서

커넥션 풀링 관련 코드를 지우고,

다음과 같이 require 함수를 이용해서

공통 파일(mysqlConn.js)을 가지고 오도록 지정한다.

var express = require('express');
var router = express.Router();

//   MySQL 로드
var pool = require('./mysqlConn');

router.get('/', function(req, res, next) {
    res.redirect('/board2/list');
});

router.get('/list', function(req,res,next){
    pool.getConnection(function (err, connection) {
        var sql = "SELECT BRDNO, BRDTITLE, BRDWRITER, DATE_FORMAT(BRDDATE,'%Y-%m-%d') BRDDATE" +
                   " FROM TBL_BOARD";
        connection.query(sql, function (err, rows) {
            if (err) console.error("err : " + err);

            res.render('board2/list', {rows: rows});
            connection.release();
        });
    });
});

~~ 생략 ~~

공통 부분을 별도 파일로 빼고, 그 파일을 호출하도록 하면 된다.

다만, 모든 컨트롤 파일을 위와 같이 작성하면

커넥션 풀링이 제대로 작동하지 않을 수 있기 때문에,

실제로 사용 할 때는 app.js 등에서 글로별 변수로 선언해서 사용하는 것이 좋다.















Eclipse에서 Node.js (Nodeclipse)를 사용하는 방법을

다음과 같이 4가지로 정리하였다.

1. Node.js 프로젝트 생성 및 개발 준비

2. MariaDB 기반 CRUD 게시판 만들기

3. 게시판 예제 보강

4. GitHub에서 Node.js 소스 가져오기


앞서 작성한 게시판 예제를 GitHub에서 가져오는(Import) 방법을 정리한다.


먼저, File > Import 메뉴를 실행하다.


Git > Projects from Git을 선택한다.

Clone URI 를 선택한다.


게시판 소스가 제공되는 주소를 입력한다.

URI에 https://github.com/gujc71/boardJS.git 입력한다.

URI 만 입력하면 나머지는 자동으로 채워진다.

master가 선택된 상태에서 다음 버튼을 클릭한다.

다운로드 받은 소스를 저장한 디텍토리 지정한다.

[Browse] 버튼으로 폴더를 지정하면 된다.

[Import as general project]를 선택하고 다음 버튼을 클릭한다.

프로젝트 이름을 지정하거나 확인하고 종료(Finish) 버튼을 클릭한다.


다음 그림과 같이 게시판 소스가 생성된 것을 볼 수 있다.


프로젝트를 선택하고 컨택스트 메뉴를 실행한 후에

Run As > npm install을 실행해서

필요한 라이브러리들을 설치한다.


[node_modules]가 추가된 것을 볼 수 있다.

[node_modules] 폴더 앞에 ?가 있는 것은

github에 등록되지 않은 파일이라는 의미이다.

라이브러리는 용량이 많기 때문에 가급적 등록하지 않는다.

따라서 git 명령어로 ignore에 등록하거나 그대로 두면 된다.


routs 폴더의 board1.js과

views 폴더의 ejs 파일 3개가 잘 설치되었는지 확인하고

그림과 같이 적당한 DB 접속 정보를 입력하고 실행한다.


www 파일을 실행해서

게시판이 잘 실행되는지 확인한다.








'Node.js > 기타' 카테고리의 다른 글

우리동네, 아이랑 놀곳 Ver.서울  (0) 2019.05.29
nineBatis (9batis)  (2) 2017.08.16
1. Node.js 프로젝트 생성 및 개발 준비  (0) 2017.08.05
2. MariaDB 기반 CRUD 게시판 만들기  (23) 2017.08.05
3. 게시판 예제 보강  (4) 2017.08.05

+ Recent posts