꼬반 Blog

요즘 ReactJS 를 공부하는 기본 개발 환경을 정리한다.

Boilderplate

ReactJS : create-react-app

(참조 : https://github.com/facebookincubator/create-react-app)

(설명 : facebook 팀의 공식 프로젝트. 설명이 더 필요한가!?)

ExpressJS : express-es6-rest-api

(참조 : https://github.com/developit/express-es6-rest-api)

(설명 : 여러 Boilerplate 가 있지만 개인적으로 이 프로젝트가 맘에 든다.)

koa : koa2-server-boilerplate

(참조: https://github.com/yankouskia/koa2-server-boilerplate)

(설명 : 요즘은 일단 좋은걸 찾으면 boilerplate 부터 찾는게 버릇이 된...  koa2 에서

이게 제일 내 스탈에 맞는 듯)

Editor

Microsoft : Visual Studio Code

(참조 : https://code.visualstudio.com/)

(설명 : sublime text 2 -> sublime text 3 -> webstorm -> atom -> vs code)

(설명2 : 마이크로소프트 사롸있네!)

추천 패키지 - ReactJS, Javascript, Html과 Markdown 에디터 용으로 사용

오늘 오랜만에 시간을 내서 쇼핑몰을 코딩하고 있었다.

근데.. 음? 뭐지 로그인/로그아웃이 정상적으로 동작하지 않았다.

어라.. 이럴리가 없는데..

초기 개발당시보다 너무 nodejs 버전이 올라가서 그런가? nginx 문제?

아니면 다른 모듈 버전이 낮아서 그런가? api가 변경됬나?

열나게 찾아봤다.

근데..

그런거 없음!

헐.

뭐지.

하다가 크롬 앱인 postman으로 기능을 테스트 해보니 정상적으로 동작 하는걸 확인.

즉 이건 브라우저에서만 쿠키가 생성/삭제가 안되는 문제였는데.

원인을 찾아 해메다가 발견했다.

쩝.

내가 도메인을 기존엔 jarambebe.com 을 사용하고 있다가

신규로 jaram.kr 을 구매하면서 소스상에서 일부만 이 링크가 수정되고

몇몇 수정되지 않은 부분들이 있어서 정상적으로 쿠키가 생성/삭제가 되지 않았던 것.

즉 login 을 요청하는 ajax 주소는 기존 주소인데 로그인 후 이동되는 페이지는 신규 주소.

위와 같은경우 요청 주소의 기준으로 쿠키가 생성되므로 이동된 신규 주소에서는 쿠키가

보이지 않았던 것.

음..

젠장.

이래서 쉬다가 코딩하면 여러 문제가 발생한다.

ㅠ_ㅠ

어쨌든 해결해서 다행~

회사에서 관리하는 웹 서비스가 약 40개 가량 되다보니 모니터링이나 관리가 필요하여

어제, 오늘 간단하게 만들어보았습니다.

물론 해당 서버들에는 nagios 나 whatap, whatsup 등으로 모니터링을 하고 있고

서비스가 다운되면 메일로 알림이 오긴 하지만

아무래도 한눈에 지금 사이트들이 다 정상인지 아닌지 확인하기는 좀 어려운 부분이 있는건 사실입니다.

그래서 다음과 같은 요구 사항을 가지고 만들었습니다.

1. 모니터링 도메인의 추가/삭제 가능

2. 해당 도메인의 현재 상태 (response 응답 코드) 확인 가능 (대시보드에 접속했을때 동작)

3. 해당 사이트에 메인 페이지 스크린샷 저장 가능

일단은 위 요구사항을 기본으로 다음과 같이 작성하였습니다.

URL 부분은 가려두었습니다. 액션부분은 아직 미정인 부분입니다.

메인에 접속하면 모니터링 대상 도메인을 불러와 상태를 확인하고 해당 스크린샷을 찍어서 테이블로 뿌려줍니다.

ui는 bootstrap / nodejs, express, pageres 가 주 모듈이고, DB는 사용하지 않습니다.

개선 사항으로는

1. 스크린샷에서 확인되는 것 처럼 NO가 정렬되지 않고 노출되는 부분에 대한 수정

2. 스크린샷이 현재 시점으로 저장되는데 날짜와 시간을 파일명에 추가하여 이력관리가 가능하도록 할 것

3. 액션 추가 (왼쪽 메뉴의 관리, 이력 포함)

정도가 있습니다. 추후 수정하겠죠.. 아마...

주요 소스는 아래와 같습니다.

index.js - router

router.get('/', function(req, res) {
    fs.readFile('../url.list', 'utf8', function (err, data) {
        var array_url = data.split("\n");
        res.header("Access-Control-Allow-Origin" , "*");
        res.render('index', { result: array_url });
    });
});

router.get('/load', function(req, res) {
    fs.readFile('../url.list', 'utf8', function (err, data) {
        var array_url = data.split("\n");
        res.header("Access-Control-Allow-Origin" , "*");
        res.send(array_url);
    });
});

router.post('/check', function(req, res) {
    var body = req.body;
    //console.log(body.t_url);
    check.checkUrlStatus(body.t_url, function(result) {
        //console.log(result);
        res.header("Access-Control-Allow-Origin" , "*");
        res.send(result+" : "+body.cnt);
    });
});

checkUrl.js

/**
 * Created by ggoban on 16. 1. 4.
 */
var http = require('http'),
    url = require('url'),
    Pageres = require('pageres');
    require('events').EventEmitter.defaultMaxListeners = Infinity;

exports.checkUrlStatus = function (Url, callback) {
        var options = {
            method: 'GET',
            host: url.parse(Url).host,
            port: 80,
            path: url.parse(Url).pathname
        };

        var pageres = new Pageres({delay: 2})
            .src(Url, ['1024x768'])
            .dest(__dirname+'/public/screenshot');
        pageres.run(function (err) {
            if (err) {
                throw err;
                console.log(err);
            }
            console.log('done');
        });

        http.get(options, function (res) {
            //console.log(options);
            //console.log(res.statusCode);
            callback(options.host+options.path+" : "+res.statusCode);
        }).on('error', function(e) {
            //console.log(options);
            //console.log(e.message);
            callback(options.host+options.path+" : "+ e.message);
        });

}

위 버전은 현재 standalone 버전으로 작성해두었고 원래 진행하고 있는 satm쪽으로 모듈을 추가할 예정입니다.

월, 화 이틀동안 급조하느라 소스가 매우 허접합니다. ㅠ _ㅠ 혹시나 해당 포스팅을 보시게 되면 가감없이

수정할 부분이나 부족한 부분에 대해 지적해주시면 매우 감사하겠습니다.

기본적인 디자인들은 bootstrap 유료 디자인을 판매하는 wrapbootstrap 에서 구매하여 사용하고 있습니다.

회사

1. javascript + nodejs + expressjs + bootstrap ui 사용한 서버실 관리 서비스 (회사 내부 VM / CentOS 7.1)

개인

1. javascript + angularjs + nodejs 쇼핑몰 (vultr 가상 호스팅 Tokyo Location / ubuntu 15.04  / nginx)

2. javascript + nodejs 창세기전 2 웹 게임 (개인 프로젝트 스프라이트 추출 단계)

창세기전2는 현재 스프라이트 추출은 거의 다 된 상태인데 맵 타일 위치를 못찾은 상태. 그리고 회사일이나 기타 사정으로 중지상태임. 하지만 시간을 내서 곧 웹 게임 제작을 꼭 해볼 생각임. (물론 개인 - 비공개 - 공부용! 저작권 라이선스를 준수합니다.)