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/ )



Web Notepad

자세한 내용은 github에 올린 내용을 옮깁니다.

node.js와 ace.js를 사용했고, 사실 코딩 시간보다 ace.js에 대한 분석 시간이 더 길었습니다.

개발하면서 node.js에 대한 이해에도 도움이 되었지만, sub domain 셋팅을 위한 

Apache VirtualHost 셋팅 방법과 github를 접할 수 있던 것이 좋았네요.


[소개]

* Web에서 소스 코드를 편집할 수 있는 note pad 입니다.

* 같은 문서를 다른 사용자가 열고 있을 경우 실시간으로 편집 내용이 갱신 됩니다.

* Ace Editor가 지원하는 100여개 언어의 syntax highlighting을 지원 합니다.

* note.js를 스터디 하고자 하는 목적으로 시작했습니다.

* https://github.com/lmk/note/wiki


[사용법]

1. http://note.newtype.pe.kr/:document.:format 으로 접속 합니다. 

   ( 예, http://note.newtype.pe.kr/test1.js )

2. :document에 해당하는 문서가 열리거나 생성됩니다.

3. :format로 문서가 syntax highlighting 됩니다.

4. 같은 문서를 다른 사용자가 열고 있을 경우 실시간으로 편집 내용이 갱신 됩니다.


[동작환경]

* node.js v0.10.22

* ejs@0.8.3

* express@3.4.4

* socket.io@0.9.16


[참고사이트]

* Ace Editor - http://ace.c9.io/#nav=about

* Node.js - http://www.nodejs.org/api/

* socket.io - http://socket.io/







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를 사용 했습니다.

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

 

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


소스 보기


IOS 토글 버튼

HTML, jquery 로 구현한 IOS 토글 버튼 입니다.

특별한 말이 필요 없이 아래 링크 클릭

http://jsfiddle.net/newtype/jhgrD/


[ link ]

   http://jsfiddle.net : javascript WEB IDE

   http://imageshack.us : 외부 링크가 가능한 Image 공유 사이트


[ 출처 ]

http://stackoverflow.com/questions/6934785/jquery-effect-of-iphone-toggle-button

http://jsfiddle.net/GzL87/1/


Apache 특정 IP만 접근 가능하게 허용.

Apache의 임의의 URL에 대해 특정 IP만 접근할 수 있도록 셋팅 하고자 한다.

환경변수를 이용하여, 여러개의 IP 또는 IP 대역을 설정할 수 있다.


/usr/local/apache/conf/httpd.conf 

파일을 아래와 같이 설정 하고 Apache를 재기동 하면 된다.


SetEnvIfNoCase remote_addr 123.456.789 allow_list

SetEnvIfNoCase remote_addr 987.12.456.35 allow_list

SetEnvIfNoCase remote_addr 192.168.0.1 allow_list


<Directory /home/cms>

    AllowOverride All

    Order deny,allow

    Deny from all

    Allow from env=allow_list

</Directory>


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

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

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

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

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

 Chrome 에서 테스트 해봤다.
 

TISTORY 에서 SyntaxHighlighter 사용하기.

블로그 특성상 소스 코드를 자주 올리게 되는데, 보기 좋게 올리기 위해 
SyntaxHighlighter 를 사용하기로 했다.

1. SyntaxHighlighter 다운 받기.
    http://alexgorbatchev.com/SyntaxHighlighter/ 에서 다운 받는다.
    포스팅 당시 최신 버전은 3.0.83 이었다.
    다운로드 받아 압축을 풀면 아래와 같이 있는데, 
    필요한 파일은 styles, scripts 디렉토리에 있는 것들이다.


2. 필요한 파일을 UPLOAD.
   TISTORY 관리자 페이지에 로긴해서, [ 스킨 ] / [ HTML/CSS편집 ] / [ 파일 업로드 ] 화면에서
   필요한 파일을 모두 올린다. 
   필요한 파일은 압축푼 파일 중에 styles, scripts 디렉토리 밑에 있는 모든 파일이다.


   올려진 파일을들 보면, images 디렉토리 밑으로 올라간 것을 알 수 있다.

3. TISTORY 스킨 파일 편집.
   [ 스킨 ] / [ HTML/CSS편집 ] / [ HTML/CSS 편집 ] 화면에서 skin.html 파일에 내용을 편집한다.
   


    밑줄에 아래의 내용을 추가한다.
























  
   위 내용 처럼 압축을 풀었을때 경로가 아닌, 파일이 올라간 images로 경로를 바꾸어야 한다.

   두번째 "shThemeEmacs.css" 파일은 보여줄 테마를 지정한 것이다.
   테마 css 파일을 이것저것 지정해보고 마음에 드는 것으로 결정하면 된다.
   (사실 맘에 쏙 드는 것이 없었는데. Emacs 테마가 가장 나은 것 같다.)

   동일한 방법으로 skin.html 파일 가장 하단 </body> 위쪽에 아래와 내용을 넣어 준다.



     여기서 필요한 코드는 맨 밑줄 함수 실행부 이고, 그외 설정 부분이다.
     stripBrs를 true로 설정하면, TISTORY 에서 자동으로 <br> 태그를 붙이는 걸 무시 할 수 있다.

   4. TISTORY에서 글쓰기.
     글을 쓸때에는 소스 코드가 들어갈때는 html 모드에서 글을 써야한다.


   위와 같이 html 체크박스를 체크하면, html 모드에서 글을 입력할 수 있다.
   소스 코드를 넣을때 아래와 같은 문법으로 넣는다.

<pre class="brush: sql">
CREATE TABLE CVS_COMMIT
(
   SEQ              NUMBER(10) NOT NULL,
   USERID           VARCHAR2(20) NOT NULL,
   REG_DATE         DATE DEFAULT SYSDATE,
   PROJECT          VARCHAR2(50) NOT NULL,
   FILENAME         VARCHAR2(500) NOT NULL
);
</pre>
    
  소스의 내용은 <pre></pre> 태그 사이에 넣어주고, class의 brush 속성에 원하는 문법을 지정한다.
  지정 가능한 문법은 아래와 같다. 
ActionScript3 as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.js
ColdFusion cf, coldfusion shBrushColdFusion.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Erlang erl, erlang shBrushErlang.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
JavaFX jfx, javafx shBrushJavaFX.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
PowerShell ps, powershell shBrushPowerShell.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js

첫번째 컬럼이 문법, 두번째 컬럼이 brush에 지정할 속성 상수, 
세번째 컬럼이 필요한 Javascript 파일로써 TISTORY에 UPLOAD되어 있어야 한다.

문법 뿐 아니라 추가 속성을 지정할 수 있는데, 아래와 같이 ";" (세미콜론) 로 구분한다.

<pre class="brush: js; ruler: true; first-line: 10; highlight: [2, 4, 6]">...</pre>

지정 할 수 있는 속성 목록은 아래와 같다.
속성
기본값
설명
auto-links true URL을 클릭하면 페이지 이동이 가능하도록
하이퍼링크를 자동으로 걸어준다.
class-name '' 그외 사용자 지정 class를 추가하고 싶을때 사용한다.
collapse false "펼치기" 기능을 사용하고 싶을 때
(티스토리의 "더보기" 기능이 더 나은것 같다)
first-line 1 시작 Line Number를 지정한다.
gutter true Line Number를 켜고 끌수 있다.
highlight null 강조할 라인을 배열로 넘긴다.
(예 : "brush: plain; highlight: [1, 3]")
html-script false php, asp, jsp 등과 같이 소스 코드안에 html이 포함되는 경우
html도 하이라이팅하고 싶으면 사용한다
smart-tabs true 스마트탭 기능의 활성화 여부를 지정한다
(무슨 기능인지 잘 모르겠다)
tab-size 4 TAB 크기를 지정한다.
toolbar true 툴바를 켜거나 끌 수 있다.

이제 TISTORY에서 깔끔한 코드를 볼 수 있다.

<주의 사항>
-. SyntaxHighlighter 3.0.83 버전에 버그가 하나 있다.
   일부 코드에 대해 Line Number가 어긋나 보이는 경우가 있다.
   한 Line 에 긴 코드가 포함된 경우 wrapped(자동줄바꿈) 처리를 하면서 잘못 처리하는 것 같다.
   소스 코드를 무조건 올리지 말고, 적당히 줄바꿈 처리를 해주고 올리는 것이 좋다. 
-. html모드에서 <pre></pre> 태그를 사용할 경우 소스 코드에 포함된 "<", ">"의 파싱을 잘못하는
   경우가 발생하는 것 같다. 
   소스 코드를 올리기 전에 "<"를 "&lt;"로, ">"를 "&gt;"로 변환 해서 올리는 것이 좋다. 





내 인생을 하루로 계산 하면..

김난도 교수의 "아프니까 청춘이다" 라는 책에 보면 "인생 시계"라는 말이 나온다.
평균 수명 80살을 하루로 계산해서,  1년을 18분 쯤으로 계산 한 것인데..

내 인생 나이는 얼마나 될까?
내 인생은 오전 10시 43분 이란다.

인생 시간을 계산 해보자.

http://host.newtype.pe.kr/1day/ 

  

소스 보기


jQuery를 이용했고,
테스트를 해보니, 약간의 오차가 있는 듯 하다.