Code Finder

Code Finder

개요

설치

git clone https://github.com/lmk/code_finder.git
cd code_finder
npm install
npm run build

실행

npm run start

내 해더 파일을 사용하는 방법

  • /build/config.json 파일을 수정합니다.
{
  "list": [
    {
      "id" : "5RAcQeaaF4XYtVaAwg4Gtqf2C4xbpU7v",
      "title": "Sample Project",
      "files": [
        "sample-project/error.h",
        "sample-project/type.h"
      ],
      "option": {
        "checked": true
      }
    },
    {
      "id" : "FCg4h39RBah2hL99n6w4MYmLsd0nTslf",
      "title": "openssl",
      "files": [
        "openssl/err.h"
      ]
    }
  ]
}
  • "id": 고유 ID 아무 값이나 상관없습니다. 여기서는 32자리 해시 코드를 사용했습니다.
  • "title": 프로젝트 제목
  • "files": 파싱할 해더파일 목록

Restriction

  • Edge 지원합니다.
  • Chrome 지원합니다.
  • Internet Explorer 지원합니다. (isomorphic-fetch를 사용했습니다.)
  • node v6.0 이상 설치되어 있어야 합니다.
  • python 2.7 설치되어 있어야 합니다.



FAQ html 템플릿

개요

FAQ를 워드나 엑셀이 아니고, html로 만들고자 합니다. 

문서를 보기 위해서는 인터넷이 되어야 한다는 단점은 있지만, 추가 프로그램(워드, 엑셀)의 설치가 필요없고 웹브라우져만 있으면 볼수 있다는 장점이 있습니다. 그리고 반응형 웹페이지로 만들면 워드나 엑셀에서는 구현하기 어려운 효과들도 넣을 수 있습니다.


필수 조건

  • 카테고리 구분이 되어야 한다.
  • FAQ 본문은 추가/수정을 쉽게 하기 위해 json 구조로 관리되어야 한다.
  • 답변 데이터는 markdown 문법을 지원해야 한다.
  • html 파일 하나로 내용을 볼 수 있어야 한다.(jquery, Bootstrap등은 CDN사용)


사용한 Library

  • FAQ 탬플릿 중에 깔끔하다고 판단되는 Bootstrap FAQ를 사용했습니다.
  • markdown 파서는 gfm 지원하는 것 중 사용이 편해 보이는 marked를 사용했습니다.


구현

  • 소스 코드는 정말 간단하므로, 첨부 문서로 대신합니다.


참고 URL



FAQ.html

카카오톡 그룹 채팅방 통계

[ 개요 ]


카카오톡의 기능 중에 "대화내용 이메일로 보내기"라는 기능이 있습니다.

이 기능을 사용하면, 대화 내용이 포함된 Text파일이 생성되는데, 이 Text 파일을 사용해서 누가 몇건의 챗팅을 보냈는지 통계를 내는 Web 페이지를 만들어봤습니다.


HTML과 Javascript로만 구현되어 있어서, 웹서버 없이 Local에서도 실행이 가능 합니다.



[ 기능 ]


1. 웹 브라우져를 열어 아래 URL로 이동 합니다.




2. 페이지를 열면 아래와 같이 나옵니다. 버튼을 클릭해 Text 파일을 선택합니다.



3. Table 형태로 누가 몇건의 챗팅을 했는지 보여줍니다.




4. Pie Chart 로도 내용을 보여줍니다.




[ 구현방법 ]


1. Text 파일의 파싱은 정규식을 이용해 Javascript로 구현 했습니다.


아래 함수를 거치면, [ 대화명: 건수, 대화명: 건수.... ] 형태로 계산됩니다.


  function parsing(c) {
    var lines = c.split("\n");
    var arr = {};
    
    for(i in lines) {
      var obj=lines[i].match(/^.+, ([^:]+) :.*/);
      if ( obj && obj.length >= 2 ) {
        if ( arr[obj[1]] >= 0 ) arr[obj[1]] += 1;
        else arr[obj[1]] = 1;
      }
    };
    
    return arr;
  }


2. Table은 Dynatable.js 을 이용했습니다.

   ( http://www.dynatable.com/ )


3. Char는 highcharts.js를 이용했습니다.

   ( http://www.highcharts.com/ )



Javascript로 만드는 CVS 로그 파서.

업무상 소스의 버전관리 소프트웨어로 CVS를 사용합니다.

( 남들은 SVN 이나 git 를 사용하던데, 장비가 구형 sun 장비다 보니.. )


개발 과정에서 commit을 날리다보면, 내가 무슨 파일을 수정했는지 잊을 때가 있습니다.

개발 건별 패치리스트를 작성할 수 있도록 웹페이지를 하나 만들기로 했습니다.


[ 설계 ]

  1. cvs log 명령을 실행하는 shell script를 작성한다.

  2. Shell Script 를 실행하여 로그를 읽어 전달하는 jsp 파일을 작성한다.

  3. html에서 jsp를 호출 하고, cvs log를 파싱하여 웹 페이지에 보여준다.



[ 개발 ]

1. shell script - ( cvs_log.sh )


#!/usr/bin/ksh

cd $1
cvs log -N -S -d ">=$2"  2>& 1 | grep -v "^cvs log" | grep -v "^?"


파라미터로 이동할 cvs 디렉토리와 검색할 날짜를 받습니다.


cvs log -N -S -d ">=2013-06-07"

-. 위 명령은 2013/06/07이후 수정된 파일에 대한 log를 출력해 줍니다.


2>& 1 

-. 위 내용은 STDERR을 STDOUT으로 리다이렉션 합니다.


grep -v "^cvs log" | grep -v "^?"

-. 위 명령은 불필요한 로그를 제거 합니다.



2. shell을 실행할 jsp - ( cvsLog.jsp )

소스 보기


jsp 소스는 간단 합니다.

ProcessBuilder, Process 클래스를 이용하여 실행 하고, StreamReader 클래스로 출력된 로그를 입력받습니다. 



3. html 파일 - ( patchList.html )


cvs log는 아래와 형식으로 남습니다.


cvs log 포멧 보기


내용을 보면 특정 패턴이 있는 것을 알 수 있습니다.



-. 로그를 파싱하여, json 객체에 담는 javascript는 아래와 같습니다.


소스 보기


String 검색은 정규식을 사용했습니다.


-. cvs log를 위 함수에 파라미터에 넣고 실행하면, json 객체를 return 합니다.

    chrome의 javascript console에서 확인 하면 아래와 같습니다.




-. 완성된 cvs 파서 테스트용 html을 받으려면, 아래 파일을 다른이름으로 저장 하세요.


cvs.html



[ 추가 작업 ]

이렇게 하면 패치 리스트 작성에 문제 있습니다.

실무에서는 개발건이 많기 때문에, 날짜로만 검색하게 되면 불필요한 파일들이 포함 됩니다.


특정 개발건만 구분 하기 위해, 소스를 commit 할때, 아래와 같은 포멧으로 comment를 작성합니다.

duid: D0000145

title: 테스트 타이틀 입니다.

comment: 이런이런 내용을

블라블라 수정한다.


개발 건 마다 uniqe한 ID를 발급하여 할당 하고, 할당한 id를 검색 조건에 포함 하면, 원하는 개발 건으로 수정된 파일 리스트를 얻을 수 있습니다.


리스트를 멋있게 보여주기 위해 Jquery EasyUI를 사용 했습니다.

이것 저것 끼워 넣느라 소스가 좀 길어 졌지만, 깔끔하게 결과가 잘 나오네요.

 

최종 소스는 아래와 같습니다.


소스 보기


오라클 테이블의 레코드 사이즈 계산을 쉽게하자

오라클 DB 테이블의 레코드 사이즈 계산을 할 필요가 있었다.

구할려고 보니, 데이터 형별로 계산 공식이 틀리다.


쉽게 계산하기 위해 HTML 로 작성해봤다.

사용방법은 DB테이블 Description의 레코드별 사이즈 부분을 TextArea에 붙여 넣고 실행하면 된다.


주요 소스 내용은 아래와 같다.


<head>
	<title>테이블 레코드 계산</title>
	<script src="http://code.jquery.com/jquery-1.5.min.js" type="text/javascript" 
                      charset="utf-8"></script>
    <script>
        /* 계산 공식 출처 
        	http://epoonet.egloos.com/4479971
        */
    	var pTable = [
    		{ type: "char", 	calc:function(n){ return n; }},
    		{ type: "varchar2", calc:function(n){ return n; }},
    		{ type: "nchar",	calc:function(n){ return 2 * n;  }},
    		{ type: "nvarchar2",calc:function(n){ return 2 * n; }},
    		{ type: "number",   calc:function(n){ return 1+ Math.ceil(n/2); }},
    		{ type: "date",		calc:function(n){ return 7; }},
    		{ type: "raw",		calc:function(n){ return n; }},
    		{ type: "long",		calc:function(n){ return n; }},
    		{ type: "long raw", calc:function(n){ return n; }},
    		{ type: "bfile", 	calc:function(n){ return 530; }},
    		{ type: "rowid", 	calc:function(n){ return 6; }},
    		{ type: "timestamp",calc:function(n){ return 13; }}
    	];
    	
        $(document).ready(
            function(){
            $("#DoIt").click(function() {
				var resultText = "";
				var inputText = $("textarea#src").val().toLowerCase().split("\n");
				var lineString;
				var size =0, sum =0;
				var buf;
				
				for(var i=0; i<inputText.length; i++) {
				
					size = 0;
				
					if ( lineString=$.trim(inputText[i]) ) {
						for(var j=0; j<pTable.length; j++) {
							if ( lineString.substr(0, pTable[j].type.length) 
                                                              == pTable[j].type ) {
								try {
								   size = Number(lineString.split("(")[1].split(")")[0]);
								} catch (e) { 
								   size = 0;
								}

								size = pTable[j].calc(size);
								break;
							}
						}
					}
					
					sum += size;
					resultText += lineString + " : " + size + "<br/>";
					
				}
				
				resultText += "<br/><b>sum: " + sum + "</b>";
				$("#result").html( resultText );
				
            });
        });
    </script>
	<style type="text/css">
        * { font-size:12px; font-family:맑은고딕 }
    </style>
</head>


<body>
<textarea id="src" rows="20" cols="80"></textarea>
<br/>
<input type="button" value="Do It!" id="DoIt">
<br/>
<br/>
<span id="result"></span>


직접 실행을 위한 URL은 아래와 같다.

http://host.newtype.pe.kr/tools/ora_table_size.htm 

Javascript로 폭포수 바이러스 효과 구현..

얼마전 자바스크립트로 괴혼을 구현한 것을 보았다.

신기 하다 싶어서, 폭포수 바이러스 효과를 구현해 보았다.
스크립트를 실행하면, html 본문 내용을 Char 별로 파싱해서 떨어트린다.

발로짜서 인지, 속도가 엄청 느리다.
본문 내용이 많아지면, 브라우져가 버거워 하기까지 한다.
시간나면, 천천히 개선해 봐야겠다.

http://host.newtype.pe.kr/fall/fall.html

 Chrome 에서 테스트 해봤다.
 

JQuery를 이용한 둥근 테두리 테이블 만들기

웹눈 님의 Round Table 소스를 JQuery를 이용하는 소스로 수정해봤습니다.

JQuery를 요 몇일 보고 있는데, 재미있네요..
이제 막 시작한 단계로 더 깔끔하게 다듬을 수 있을 것도 같은데..
아직은 내공이 부족하네요.

좋은 방법 있으면 공유 해주시면 고맙겠습니다.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
function roundTable(objID) {
	var $obj = $("table#" + objID);
	var s, r;
	var y, x, MAX;
	var w, h;

	r = parseInt($obj.attr('radius'));
	if (r == null || r < 1) r = 1;
	else if (r > 6) r = 6;

	MAX = r * 2 + 1;

	$obj.before("<TABLE id='tmpRoundTbl'></TABLE>")
	$("table#tmpRoundTbl")
		.attr("cellSpacing", 0)
		.attr("cellPadding", 0)
		.append("<TBODY></TBODY>");

	for (y=0; y < MAX; y++) {
		$("table#tmpRoundTbl TBODY").append("<TR></TR");
		s = Math.abs(y - parseInt(r));
		for (x=0; x < MAX; x++) {
			
			$("table#tmpRoundTbl TBODY TR:eq("+y+")")
				.append("<TD></TD>");

			w = '1px'; h = '1px';
			if (x == 0 || x == MAX - 1) h = null;
			else if (y == 0 || y == MAX - 1) w = null;
			else if (r > 2) {
				if (Math.abs(x - r) == 1) w = '2px';
				if (Math.abs(y - r) == 1) h = '2px';
			}

			if (w != null) 
				$("table#tmpRoundTbl TBODY TR:eq("+y+") TD:eq("+x+")")
					.css("width", w);
			if (h != null) 
				$("table#tmpRoundTbl TBODY TR:eq("+y+") TD:eq("+x+")")
					.css("height", h);

			if (s == x || s == MAX - x - 1) 
				$("table#tmpRoundTbl TBODY TR:eq("+y+") TD:eq("+x+")")
					.css("backgroundColor", $obj.attr('rborder') );
			else if (x > s && s < MAX - x - 1) 
				$("table#tmpRoundTbl TBODY TR:eq("+y+") TD:eq("+x+")")
					.css("backgroundColor", $obj.attr('rbgcolor') );
		}
	}

	$("table#tmpRoundTbl TBODY TR:eq("+s+") TD:eq("+r+")").append( $obj );
}
</script>


<table id="ta" width="300" height="100" border="0" 
    radius="3" rborder="#999999" rbgcolor="#F8F8F8">
<tbody><tr>
<td valign="top">테스트입니다</td>
</tr>
</tbody></table>
<span>
<script>roundTable("ta");</script>
</span>



[ 참고 ] 

한글변환기

영어 상태로 입력된 문장을 한글로 변환 해주는 Javascript 함수를 만들어 봤다.

나중에 지를(ㅡㅡ;) 아이팟 터치에서 한글 입력 기능이 없단다.
떠도는 얘기를 들어보니 별도 SDK가 없이 javascript로 개발을 한다고 해서
자료를 찾아보지도 않고 무작정 코딩부터 했다. 흐흐..

테스트는
http://newtype.myi.cc/tools/hangle.html
http://panghosting.net/~newtype/tools/hangle.html
http://host.newtype.pe.kr/tools/hangle.html
여기서 해보면 된다.

테스트는 IE6, IE7, FF2 에서 해보았다.

스크립트 용량을 줄여보겠다고 바둥바둥했는데..
그래도 2KB (1,971 바이트) 란다.
발로 코딩하니 한계가 있는 듯...

부디 유용하게 쓸 수 있기를..
어째뜬 아이팟 터치 기대 만땅이다.

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-

2007.12.26
호스팅이 중단되어 페이지 연결이 되지 않습니다.
빠른 시일내에 복구 하겠습니다.

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-

2007.12.30
복구 하였습니다.
URL이 좀 복잡해 졌네요.

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-

2008.03.10
Native SDK가 발표되었네요.


=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-

2010.12.27
URL을 다시 복구 하였습니다.

GoogleGear Sample source


얼마전 구글에서 GoogleGear라는 것을 배포 했다.
처음엔 어떤것인지도 몰랐는데..
최근에 알게된 사실로는 오프라인에서도 웹서핑을 도와준다고 한다.

자세히 내용을 살표보니 SQLite를 이용해 웹에 있는 자료들을 미리 읽어들어 저장해 두고,
오프라인 일 때도 써먹는 다는 내용이였다.

사실, IE의 "오프라인으로 작업"등 비슷한 기능은 이미 있었다.
하지만, 역시 구글이다.
개발자들이 편하게 접근할 수 있도록 GoogleGear API를 열어두었다.

그럼, 코드로 만나보자.

1. GoogleGear를 사용하기 위해서는 먼저 설치가 되어있어야 한다.
   처음 발표되었을때, 뭔지도 모르고 미리 설치는 해두었다 ^^;

2. gears_init.js 파일을 html안에 포함 해야한다.
<script src="gears_init.js"></script>
  gears_init.js 파일을 미리 받아 놓고 위 코드를 html에 포함 해도 되고,
  gears_init.js 파일의 내용 전부를 html 파일에 포함 시켜도 된다.

3. 설치 여부 체크
  html 파일이 열리면, GoogleGear가 설치되어 있는지 체크 하는 부분이 있어야 한다.
  if ( !window.google || !google.gears ) 
  {
      alert('GoogleGear를 먼저 설치하세요.');
      return;
  }

4. DB파일을 생성한다.
SQLite는 파일 하나로 Database를 로칼 컴퓨터에 생성 한다.
FireFox에서는 C:\Documents and Settings\<사용자명>\Application Data\Mozilla\Firefox\Profiles\<임시이름>.default\urlclassifier2.sqlite 라는 파일이 생성되었다.
  try {
    db = google.gears.factory.create('beta.database', '1.0');
  } catch (ex) {
    alert('Database를 생성할 수 없습니다: ' + ex.message);
  }

5. 테이블을 만든다.
  if (db) {
    db.open('address');
    db.execute('create table if not exists ntAddress' +
               ' (name varchar(255), phone varchar(255), email varchar(255) , Timestamp int)');

    display();
  }
  소스를 보면 알겠지만, 자바스크립트에서 쿼리를 직접 날린다. @.@

6. 쿼리를 날린다.
   이렇게 쉽게 사용이 가능하다.
   try {
    db.execute('insert into ntAddress values (?, ?, ?, ?)', [oName.value, oPhone.value, oMail.value, currTime]);
  } catch (e) {
    alert(e.message);
    throw new Error(e.message);
alert (e.message);
   }

   이제까지 Google API가 그러했듯이 엄청 간단하다.
   우리가 잘 아는 쿼리를 직접 날리고,
   무거운 작업의 경우 WorkPool을 이용해 백그라운드로 돌릴 수도 있다.
   LocalServer를 이용해 서버 정보를 간단하게 캐쉬로 만들어 저장하는 할 수도 있는 듯하다.
   Google에서 제공하는 샘플 소스 및 툴 을 받아보자

   손가락이 근질근질 하지 않은가. 흐흐흐흐흐...
 

address.html 전체 소스 보기



덧글,
샘플 코딩하면서 삽질을 했다.
innerHTML 스크립트가 IE7에서 먹지 않는 것이다.
한참 삽질을 하다가 IE7 관련 자료에서 이런 문구를 발견 했다.
IE does not support when setting a div’s innerHTML property
div 테그를 span으로 바꾸고 간단히 해결했다.
신버전은 구버전과 호환 되게 해달라고!!!  버럭



간단한 Ajax Sample 코드

먼저 파일 구조를 설명하면..
전체 파일 구성은 아래와 같습니다.

    - ./index.php : XMLHttpRequest를 이용 정보를 요청
    - ./list.php : ./sheet/ 서브 디렉토리에서 skin파일과 db파일을 읽어서 보여줌
    - ./sheet/*.html : skin 파일
    - ./sheet/*.txt: csv형식의 db파일

중요 부분을 설명하겠습니다.

먼저 index.php파일을 보면..

    if (window.XMLHttpRequest)
    {
        HTTPRequestObject = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        HTTPRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
    }

여기서 Internet Explorer냐 FireFox냐를 구분해 HTTPRequestObject 인스턴스를 생성합니다.

    function doSubmit(sheet)
    {
        var url = "http://" + location.host + "/list/list.php?sheet=" + encodeURIComponent(sheet);
       
        HTTPRequestObject.open("GET", url, true);
        HTTPRequestObject.onreadystatechange = HTTPRequest;
        HTTPRequestObject.send(null);
        document.getElementById("result").innerHTML = "Requesting data ...";
    }   

submit 이벤트 발생시 HTTPRequestObject를 이용해 서버에 요청 합니다.
GET 방식이기 때문에 일부 브라우저 설정에 따라 인코딩 형식이 바뀌기 때문에
encodeURIComponent() 함수를 사용해 UTF-8형식으로 강제 변환 했습니다.

그리고, 응답이 들어오면 수행할 콜백 함수를 HTTPRequest로 지정했습니다.

    function HTTPRequest()
    {
        if (HTTPRequestObject.readyState==4)
        {
            if (HTTPRequestObject.responseText.indexOf('invalid') == -1)
            {    
                document.getElementById("result").innerHTML = HTTPRequestObject.responseText;
            }
            else
            {
                document.getElementById("result").innerHTML = "Error requesting data.";
            }
        }
    }

응답이 들어오면 HTTPRequest() 함수에서 내용을 뿌려 줍니다.

list.php는 별 내용이 없습니다.
인코딩 형식을 변환 하기 위해

       mb_convert_encoding()

함수를 사용했습니다.


테스트 페이지

전체 소스 다운은 아래를 클릭 하세요.