Search Results for '프로그래밍/프로그램 팁 관련'


214 posts related to '프로그래밍/프로그램 팁 관련'

  1. 2017/03/30 부트스트랩4버전의 치트시트
  2. 2017/03/06 최고의 정규표현식 확인 툴 - Regex Coach!
  3. 2017/02/26 무료이미지 사이트
  4. 2017/02/26 무료로 로고 만들어주는 사이트
  5. 2017/02/20 사이트맵 생성 및 제출하기 쉽게 따라하기
  6. 2017/02/20 iframe 사이즈를 자동 조절하자....
  7. 2017/02/20 [Tip] 압축된 min 간단히 풀어보기
  8. 2017/02/12 정규식 치환 (Editplus 매크로-macro 이용) _(언더바)뒤의 첫문자만 대문자로 변경
  9. 2012/08/24 웹 동영상 인코딩 ffmpeg for iis 설치 후기
  10. 2012/08/06 사이트에 구글번역 붙이기.
  11. 2012/07/26 AllFusion ERwin Data Modeler Ver.7 를 사용해서 논리 ERD 작성하기
  12. 2012/07/23 ASP초보자를 위한 파일 (scd56ko.exe)
  13. 2012/07/22 페이스북,트위터에 url만 썼는데 요약되서 나오네? OpenGraph
  14. 2012/07/21 ERWin 4.1.4 에서 SQL 2005/2008 접속이 필요할때
  15. 2012/07/20 웹브라우저, 안드로이드, 아이폰, 아이패드에서 css overflow 되도록 하기
  16. 2012/07/20 http 스트리밍 관련 모듈
  17. 2012/07/20 웹 동영상 인코딩 ffmpeg for iis 설치 후기
  18. 2012/07/20 페이스북 담벼락에 자동 게시하는 법
  19. 2012/07/20 웹에서 불가능한 것을 가능케 하는 WebdriverJS
  20. 2012/07/17 네이버 광고차단 및 광고내용 원하는 내용으로 바꾸기 !!
  21. 2012/05/05 DNS 미리 뚫고 페이지 속도 빠르게 하기.
  22. 2012/05/05 사이트에 구글번역 붙이기.
  23. 2012/05/05 http 스트리밍 관련 모듈
  24. 2012/05/05 웹 동영상 인코딩 ffmpeg for iis 설치 후기
  25. 2012/01/31 네이버 원격블로깅입니다.
  26. 2012/01/28 web page performance test (WPT) tool - 사이트 속도 테스트
  27. 2012/01/16 SNS Share API - shareaholic
  28. 2012/01/16 Google Webfont API
  29. 2012/01/14 하이브리드 앱 개발툴 - 앱셀레이터 티타늄(Appcelerator Titanium)
  30. 2012/01/10 쉘상태에서 웹서버 접속자수 알아내기[2차 수정] 1

부트스트랩4버전의 치트시트 사이트 입니다.

 

저도 잘은 못지키지만 사이트 수정할실때 참고만 하셔도

(베이직 css만 잘지켜도)

뚝딱 이쁜 사이트가 나오게 됩니다.

 

타사이트에 비해 예제가 잘 정리되어있네요

http://hackerthemes.com/bootstrap-cheatsheet/




2017/03/30 01:44 2017/03/30 01:44
정규표현식은 문자열을 처리하기에 가장 간단하면서도 편리한 문법입니다. 처음 배울 때는 암호화 같은 이 정규표현식들로 인해 어떠한 문자열들이 정규표현식과 일치하는지 쉽게 알기 어렵습니다. 또한 직접만든 정규표현식에 에러가 있을 경우 이를 알아차리기는 더더욱 어렵다고 할 수 있습니다.

저도 이러한 문제들 때문에 좋은 확인 툴이 없을까 하여 찾던 찰나에 제가 원하는 기능이 정확히 들어있는 Regex Coach라는 프로그램을 발견하였습니다. 이 툴은 무료로 배포되며 크기도 매우 작아 정규표현식을 사용하시고 공부하시는 모든 분들 께 많은 도움이 될 것이라고 생각합니다.

공식 사이트 주소 : http://weitz.de/regex-coach/
공식 다운로드 : http://weitz.de/files/regex-coach.exe

 
실행하면 기본 화면은 아래와 같습니다. 크게는 2개의 화면으로 이루어져 있는데 위의 Regular expression 창에는 정규표현식을 입력하고 아래의 Target string에는 정규표현식으로 일치를 확인할 문자열을 입력합니다. 만약 입력한 정규표현식을 통해서 일치한 문자열을 찾았다면 해당 문자열은 노란색으로 표시되게 됩니다.

사용자 삽입 이미지

추가적인 옵션으로는 2개의 화면 사이의 체크박스들이 있는데 그 중 가장 많이 사용하는 g, i, s에 대해 차이점과 함께 살펴보도록 하겠습니다. g는 정규표현식에 일치하는 문자열이 여러개 있을 경우 여러개 모두를 표시하라는 옵션입니다. 현재 해당 정규표현식에 일치하는 문자열이 '마이크로소프트'와 '애플'을 포함하는 li 태그로 2개가 존재하는데 위에서는 하나만 노란색으로 표시되었었습니다. 하지만 g 옵션을 체크 후에는 2번째 일치하는 문자열이 녹색으로 표시되어 모든 일치 문자열이 색깔로 확인되고 있습니다.

사용자 삽입 이미지

다음 옵션은 i 입니다. i는 대소문자를 구별하지 않도록 하는 옵션입니다. 마지막 '페이스북'의 경우 li 태그가 LI로 대문자로 되어있습니다. i 옵션을 체크하기 전에는 대소문자를 구별하였기 때문에 이 문자열이 일치하지 않았으나 체크 후에는 대소문자를 구별하지 않기 때문에 3개의 li 태그들이 모두 일치하는 문자열로 확인되고 있습니다.

 

 

사용자 삽입 이미지

마지막으로 살펴볼 옵션은 s입니다. 이는 여러 줄의 문자열을 한 줄로 인식하여 처리하는 옵션입니다. 이 옵션을 체크하기 전에는 맨 처음의 화면처럼 '마이크로소프트'를 포함하는 li 태그만이 일치하는 문자열이였으나 체크 후에는 '마이크로소프트'의 li 시작태그부터 '애플'의 'li 종료 태그까지가 일치함을 알 수 있습니다. 이 옵션을 일반적으로 개행이 들어갈 경우 대부분 쓰이게 되며 이번 예제에서는 조금 유용성이 높아보이지는 않으나 만약 아래와 같은 상황이라면 이 옵션 없이는 li로 둘러싸인 문자열을 찾기 어려울 것입니다.

 

 

<li>
   마이크로소프트
</li>
<li>
  애플
</li>

 


사용자 삽입 이미지


이상으로 정규표현식 확인 툴인 Regex Coach에 대해 간략히 살펴 보았습니다^^


2017/03/06 00:53 2017/03/06 00:53
https://pixabay.com/

무료 이미지 사이트 입니다. 

 

이미지, 벡터, 일러스트 등... 무료로 사용할 수 있습니다. 

 

물론, 상업용도 파일별로 라이센스 정책을 보면 사용할 수 있습니다. 

사용자 삽입 이미지

 




2017/02/26 15:29 2017/02/26 15:29
사용자 삽입 이미지사용자 삽입 이미지

https://www.logaster.com 

이사이트을 활용하면 부족하지만 개인용도로 추천할수있는 로고을 생성해줍니다.

 

다만 한글은 지원안되네요

 

자신의 사이트 영문글자을 넣고 원하는 타입을 설정하고 원하는 디자인과 폰트색상같은 등등 옵션으로 지정해서 

 

생성하면 끝!!




2017/02/26 15:22 2017/02/26 15:22

sitemap.xml 사이트맵 생성 제출 쉽게 따라하기!

   

구글웹마스터도구나 네이버웹마스터도구에

   

사이트맵을 제출하려면 sitemap.xml 생성해야 하는데요.

   

online XML Generator에서 간단하게 만들 있습니다.

   

먼저 online XML Generator  이동한

   

1 항목에 사이트 주소를 입력한

2 항목에 코드를 입력하세요.

   

그다음 'Optional' 'Last modified' 항목에서

   

'Use exact value' 선택하세요.

   

나머지 항목은 기본값 그대로 두고

   

'Create free XML sitemap' 누르세요.

   

 

페이지 생성이 진행되는 모습인데요.

   

작업이 마무리 될때까지 기다려주세요.

   

 

페이지 생성이 마무리되면

   

'download your sitemap' 누르세요.

   

 

'sitemap.xml' 오른쪽 끝에 있는 'download' 눌러

   

컴퓨터에 사이트맵을 저장하세요.

   

 

바탕화면에 사이트맵이 저장된 모습이에요.




2017/02/20 02:09 2017/02/20 02:09

<!– 처리 스크립트–>
<script language=”javascript” src=”/ver5/config/js/jquery.iframe-auto-height.plugin.1.5.0.min.js”></script>
<script language=”javascript”>
$(document).ready(function() {
           
$(“<iframe scrolling=’no’ />”).attr(“src”, “URL”).attr(“frameborder”, 0).attr(“width”, “100%”).attr(“height”, “0px”).appendTo(“#iframe-container”);
 $(‘iframe’).iframeAutoHeight({heightOffset: 10}); 

 });
 </script>

<!– iframe 삽입 내용–>
<div id=”iframe-container”></div>




2017/02/20 02:07 2017/02/20 02:07

js,css도 마찬가지도 적용됩니다. 

질문란에 질문이 올라와서 올려봅니다. 

사용자 삽입 이미지




2017/02/20 01:54 2017/02/20 01:54
MEMBER_NAME ===> memberName으로 바꾸는 방법 : _(언더바)뒤의 첫문자만 대문자로 변경하고 _(언더바)를 제거한다.)
 
정규식으로 해당 부분을 찾는 것은 쉽습니다.
"바꾸기" 기능을 통해 매치되는 값을 다른 값으로 바꿀 수는 있지만 소문자를 대문자로 바꿔주는 기능은 어느 편집기에도 없습니다.
 
그런 작업을 할 때는 "바꾸기" 대신에 매크로를 사용할 수 있을 것입니다.
주의 : 기록을 시작한 이후로 꼭 단축키를 사용해야 합니다.
EditPlus의 예)
 
1. 우선 찾기(Ctrl + F)의 찾을 말에
\_.
을 입력하고 취소(ESC)를 누릅니다.
 
2. Ctrl + Home 을 눌러 제일 처음으로 커서를 이동시킵니다.
 
3. "키 입력 기록(Ctrl + Q)"를 누르고 "확인버튼" 눌러서 기록을 시작합니다.
 
4. "찾기(Ctrl + F)"를 누릅니다.
 
5. "찾기버튼(Alt + F)"를 누릅니다.
 
6. "닫기(ESC)"를 누릅니다.
 
7. 왼쪽 방향키를 1회 누르고 Delete키를 1회 눌러 _를 지웁니다.
 
8. "대문자변환(Ctrl + U)"를 누릅니다.
 
9. "키 입력 기록(Ctrl + Q)"눌러서 기록을 마칩니다.
 
10. "1번 매크로 실행(Alt + 1)"를 지긋이 누르고 있다가  띠디디디딩 소리가 날 때 손을 띄면  작업이 완료됩니다.



2017/02/12 04:02 2017/02/12 04:02
ffmpeg를 이용하면 게시판에 동영상을 업로드 즉시 플래시영상인 flv로 인코딩 하실 수 있습니다.

윈도우서버+php에 설치하다 하도 삽질을 해서 팁을 남겨 놓습니다.

환경은 iis6 + php 였구요,

http://ffmpeg.zeranoe.com/builds/

여기서 다운을 받습니다.

32-bit Builds (Static) 에서 가장 위에것을 받으면 됩니다.

압축을 풀면 여러 파일이 나오는데 우선 ffmpeg.exe 파일이 필요합니다.

웹서버 적당한곳에 ftp로 업로드 하신후, php를 통해 프로그램을 작성합니다.

shell_exec("E:/wwwhome/test/ffmpeg.exe -v 0 -i E:/wwwhome/test/test3.mp4 -ar 11025 E:/wwwhome/test/test3.flv 2>&1");

위처럼 실행하면 test3.flv 가 튀어나와야 하는데 그전에 서버 셋팅을 해야됩니다.

c:\windows\system32\cmd.exe 의 파일보안에 인터넷 게스트 계정 (컴퓨터이름\IUSER_컴퓨터이름) 을 추가해주시고,

c:\widnwos\php.ini 의 safe_mode = off 해줍니다.

그래도 인코딩이 안된다면, 실행파일의 경로
E:/wwwhome/test/ 의 폴더의 보안에 USERS 를 넣어야 파일을 읽고, Authenticated Users 를 추가해줘야 flv 파일이 저장됩니다. 이 두가지가 빠져있는지 확인해보세요.

안되는건 대부분 보안관련 문제더라구요.

모든게 완료된다면 윈도우서버에 유튜브를 차리실수 있습니다.


2012/08/24 11:01 2012/08/24 11:01
<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

붙여주시면 구글툴바없이도 구글 번역기를 이용하실수 있습니다.

사용자 삽입 이미지



2012/08/06 02:37 2012/08/06 02:37
1.ERWin를 실행하고 Tools -> Reverse Engineer..를 클릭합니다.

사용자 삽입 이미지

2.Reverse Engineer 창에서 Logical/Physical 옵션을 선택하고, DataBase & Version값은
다들 알아서 선택해 주세요. Next~

사용자 삽입 이미지

3.옵션창이 보입니다.여기서는 왼쪽 하단에 트리노드가 전부 체크되어 있는데 가급적
SP와 View는 해제하세요.시간만 많이 걸리더군요. Next~

사용자 삽입 이미지

4.Connection 부분입니다.다들 아실테고요. Connect~
사용자 삽입 이미지
5.그러면 자연스럽게 ERD가 완성되었습니다. 화면구성은 메뉴,툴바,왼쪽에 Explorer,
오른쪽에 ERD 화면으로 되어 있지요. 지금 보시는 화면은 Physical용이고 툴바쪽의
Physical 콤보박스를 클릭하시면 Logical로도 볼수 있습니다.

사용자 삽입 이미지
 



2012/07/26 06:13 2012/07/26 06:13
VB-Script 헬프파일 한국어버전이면 5.6 버전입니다.

예전부터 사용했던건데 요새는 잘안보는 놈중에 하나이네요

ASP하시는 분들중에 VB-Script 기반에 명령어 기능들을 찾을때 유용합니다.

j-script도 포함되어 있습니다. (요새는 j-query가 대세기는 하지만 보시면 원리를 알게되는 경우도 생기지요 ㅎㅎ)

다만 XP에서는 바로가기가 생성되나, widnows 7에서는 안생기네요.

설치하는 폴더를 잘 복사해두시고 그쪽에 생성되는 헬프파일에 대한 바로가기를 생성해서 보셔서 쓰면 편할껍니다.



2012/07/23 14:08 2012/07/23 14:08
Open Graph Meta Tags
http://ogp.me/ http://opengraphprotocol.org/ 여기가 오피셜인듯 한데 지금 사이트 안나와서 내용확인이 안되네요.

http://davidwalsh.name/facebook-meta-tags

요점은
<meta property="og:{종류}" content="{내용}" />
을 html 상에 표기해 주면 페이스북에 url 을 적었을 때 내용을 표기해 준다는 겁니다.

title, image, description 정도만 표기해주면 충분하겠네요.

http://davidwalsh.name/canonical-link-rel
url 은 게시물의 원본이 되는(?) url 을 표기하는 건데,
og:url 을 적는다면 link rel="canonical" 도 함께 적어주면 좋을 것 같습니다.
short url 로 만들면 더 좋을 것 같네요.


youtube 예)
<meta property="og:url" content="http://www.youtube.com/watch?v=6Wx1VGDauuM">
<meta property="og:title" content="Sky Gnomes">
<meta property="og:description" content="Get ready to race in this fast paced iOS game by Foursaken Media, available in March! You are a tiny gnome, ready to participate in the annual Sky Gnomes Tou...">
<meta property="og:type" content="video">
<meta property="og:image" content="http://i3.ytimg.com/vi/6Wx1VGDauuM/mqdefault.jpg">
<meta property="og:video" content="http://www.youtube.com/v/6Wx1VGDauuM?version=3&autohide=1">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="1920">
<meta property="og:video:height" content="1080">
<meta property="og:site_name" content="YouTube">
<meta property="fb:app_id" content="87741124305">
<meta name="twitter:card" value="player">
<meta name="twitter:site" value="@youtube">
<meta name="twitter:player" value="https://www.youtube.com/embed/6Wx1VGDauuM">
<meta property="twitter:player:width" content="1920">
<meta property="twitter:player:height" content="1080">

다음미디어 예)
<meta property="og:title" content="포르쉐로 출퇴근하는 미모의 여군, 돈은 어디서 났을까?" />
<meta property="og:description" content="중국 인터넷에서 사치스런 생활로 논란이 되고 있는 여군./웨이보 캡처[스포츠서울닷컴|박설이 기자] 중국 인터넷에 등장한 미녀 군관의 사치스런 생활이 네티즌의 입에 오르내리고 있다.최근 중국 각종 온라인 커뮤니티와 중국판 트위터인 웨이보에서는 여성 군관 쟈오쟈오()가 화제의 인물로 떠올랐다. 귀여우면서도 청순한 매력을 가진 미모의 여군의 화려한 생활이 네" />
<meta property="og:image" content="http://i2.media.daumcdn.net/photo-media/201206/29/sportsseoul/C_72x54_20120629153521505.jpg" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://media.daum.net/v/20120629115755274" />


License : null


2012/07/22 14:36 2012/07/22 14:36
MS SQL Server 연결을 위해 필요한 DLL 파일입니다.

ER-WIN 이나 기타 외부에서 MS SQL에 연결하기 위해 DLL 파일이 필요하다.

이 DLL파일은 MS SQL 2000에서 제공되는 DLL 파일이지만 MS SQL 2005/2008에서도 이용할 수 있다.

System32 폴더에 복사하면 됩니다.






2012/07/21 20:03 2012/07/21 20:03
웹브라우저에서 overflow 가 잘 되는데
단말에 브라우저에서는 안됩니다.

왜냐 막혀 있기 때문이죠
그래도 되도록 해야죠
왜? 필요하니까 ㅎㅎㅎ

구현 방법은 다음과 같습니다.

<style>
.faContents { position:absolute; text-align:left; font-size:14px; font-family:돋움; width:242px; }

.overthrow {
overflow: auto;
-webkit-overflow-scrolling: touch;
height:140px;
}
</style>

< html >
<div class="faContents overthrow">
<ul>
<li>테스트1 </li>
<li>테스트2</li>
<li>테스트3</li>
<li>테스트4 </li>
<li>테스트5 </li>
<li>테스트6 </li>
<li>테스트7 </li>
<li>테스트8 </li>
</ul>
</div>
< /html >


위와 같이 css 와 HTML 을 준비하고

다음 사이트에 가서 overflow.js 파일을 다운 받아 옵니다.
http://filamentgroup.github.com


이젠 이 다운 받은 스크립트를
불러 들여서 구현하시면 끝
<script src="/common/js/overflow.js" ></script>

// 테스트 모바일 OS
안드로이드 2.2, 2.3
IOS 4.x, 5.x


2012/07/20 20:47 2012/07/20 20:47
오랬동안 http스트리밍 하는 방법을 찾아 다녔습니다.
그래서 찾은게 JWPLAYER를 찾게 되었습니다.
(jwplayer5부터는 html5를 지원해서 모바일에서 지원되었습니다.)
http://www.longtailvideo.com/players/


하지만 문제 생겼습니다.
JWPLAYER에서 스트리밍을 하지않고 전부 다운로드 한 후에 재생하는것이었습니다.
그래서 api페이지 보니깐 http 스트리밍 모듈이 서버에 깔아야 한다더군요
http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12534/video-delivery-http-pseudo-streaming

저는 아파치2를 쓰기 때문에 아파치2용 모듈을 설치 하였습니다.
http://h264.code-shop.com/trac/wiki/Mod-H264-Streaming-Apache-Version2

아파치 뿐만 아니라 다른 웹서버도 되더군요
Apache, Lighttpd, Nginx, IIS, AOLserver

깔고 다시 확인 해보니 스트리밍 되는것을 확인 되었습니다.

모듈을 깔고 나니
start,end 파라미터를 붙여서 원하는 부분만 재생할수 있다는것을 확인했습니다.
ex> video.mp4?start=10&end=30

아래는 참고로 작성된 소스를 넣었습니다.

jwplayer 작성 소스
<video id="video" src="movie.mp4"></video>


공통 js
jwplayer("video").setup({
flashplayer: "/jwplayer/player.swf",
provider : 'http',
controlbar : 'over'
});


===============================================================================================

http pseudo streaming 스트리밍 효과만 내주는 방법
flv 는 start=bytes 이니 /flv.php/realflvfile.flv?start=827723 요런식으로 요청하고
$fp = fopen($flvfile, 'r');
fseek($fp, $_GET['start']);
fpassthru($fp);
exit;
요렇게 하면 패치 안해도 되죠
nginx 는 flv에 mp4까지 패치가 필요 없네요



2012/07/20 20:46 2012/07/20 20:46
ffmpeg를 이용하면 게시판에 동영상을 업로드 즉시 플래시영상인 flv로 인코딩 하실 수 있습니다.

윈도우서버+php에 설치하다 하도 삽질을 해서 팁을 남겨 놓습니다.

환경은 iis6 + php 였구요,

http://ffmpeg.zeranoe.com/builds/

여기서 다운을 받습니다.

32-bit Builds (Static) 에서 가장 위에것을 받으면 됩니다.

압축을 풀면 여러 파일이 나오는데 우선 ffmpeg.exe 파일이 필요합니다.

웹서버 적당한곳에 ftp로 업로드 하신후, php를 통해 프로그램을 작성합니다.

shell_exec("E:/wwwhome/test/ffmpeg.exe -v 0 -i E:/wwwhome/test/test3.mp4 -ar 11025 E:/wwwhome/test/test3.flv 2>&1");

위처럼 실행하면 test3.flv 가 튀어나와야 하는데 그전에 서버 셋팅을 해야됩니다.

c:\windows\system32\cmd.exe 의 파일보안에 인터넷 게스트 계정 (컴퓨터이름\IUSER_컴퓨터이름) 을 추가해주시고,

c:\widnwos\php.ini 의 safe_mode = off 해줍니다.

그래도 인코딩이 안된다면, 실행파일의 경로
E:/wwwhome/test/ 의 폴더의 보안에 USERS 를 넣어야 파일을 읽고, Authenticated Users 를 추가해줘야 flv 파일이 저장됩니다. 이 두가지가 빠져있는지 확인해보세요.

안되는건 대부분 보안관련 문제더라구요.

모든게 완료된다면 윈도우서버에 유튜브를 차리실수 있습니다.


2012/07/20 20:43 2012/07/20 20:43
아래 소스를 사용하면 사용자에게 묻지 않고 바로 담벼락에 게시할 수 있습니다.
단, publish_stream 권한을 가지고 있어야 합니다.

function publishPost(session) {
var publish = {
method: 'stream.publish',
message: 'is learning how to develop Facebook apps.',
picture : 'http://www.takwing.idv.hk/facebook/demoapp_jssdk/img/logo.gif',
link : 'http://www.takwing.idv.hk/facebook/demoapp_jssdk/',
name: 'This is my demo Facebook application (JS SDK)!',
caption: 'Caption of the Post',
description: 'It is fun to write Facebook App!',
actions : { name : 'Start Learning', link : 'http://www.takwing.idv.hk/tech/fb_dev/index.php'}
};

FB.api('/me/feed', 'POST', publish, function(response) {
document.getElementById('confirmMsg').innerHTML =
'A post had just been published into the stream on your wall.';
});
};


http://facebook.stackoverflow.com/questions/4396269/how-do-you-autopublish-with-fb-ui

더 많은 정보를 원하시면 위 주소로 가서 보시면 됩니다.


2012/07/20 20:40 2012/07/20 20:40
사용자가 보고 있는 브라우저 화면을 캡쳐해서 서버로 전송해서 확인하는 것.
네이버나 다음 메일에서 다른 컨텐츠 다 빼버리고 리스트만 골라서 로그인 없이 바로 내 웹페이지에서 볼 수 있는 것.
일반 링크가 아닌 자바스크립트 클릭만으로 나오는 DOM 부분의 원하는 내용을 긁어 와서 붙여넣는 것.
내 웹페이지에서 쓴 글을 네이버 카페, 다음 블로그 등에 동시에 올릴 수 있는 것.

위 항목은 현재 HTML5도 마찬가지로 일반적인 웹의 환경(ActiveX 제외)에서는 불가능합니다.
node.js 가 나오고 전세계의 개발자들이 그 기반하에 여러가지 오픈 모듈(npm)을 만들었는데 그 중에서
요즘 제 뒷통수를 강하게 때린 webdriverJS 모듈을 소개합니다.

사전 지식은 리눅스, 유닉스 기반하에 node.js를 어느정도 컨트롤 할 줄 알고 npm이 뭔지 알 정도면 됩니다.

Camilo Tapia란 외쿡 개발자가 만든 npm 모듈로서 기반은 node.js + Java Selenium + 자바스크립트
로 구성되어 있습니다.

브라우저 테스팅 툴인 Java Selenium이 설치가 되어 있어야 하며 리눅스나 유닉스에서는 standalone 버젼이
있으므로 걍 jar 파일만 실행 하면 됩니다. (자세한 사용법은 하단 URL 참고 )

작동 원리는 Java Selenium 서버에 node.js가 통신을 해서 Java Selenium과 연동을 통해 브라우저를 띄우고
wire protocol bindings으로 클릭, 캡쳐, submit 등등 브라우저 자체를 컨트롤 할 수 있습니다.

예를 들어 클라이언트 웹브라우저에서 자체 홈페이지에 들어오면 로딩하는 동시에 socket.io를 이용해서
클라이언트 pc의 URL을 node.js 서버로 전송하고 node.js에서는 Selenium 통해 브라우저를 실행시키고
Selenium 캡쳐 기능을 실행하면 서버에 이미지가 저장됩니다.

이 외에도 로그인 전용 페이지의 특정 영역을 가져와서 클라이언트에 보여주고 등등
webdriverJS GIT 홈페이지에 들어가셔서 지원하는 기능을 확인하시면 정말 활용할 수 있는 방법이 무궁 무진합니다.

해당 서버 소스는 네이버 자동 띄어쓰기 기능 자체를 서버로 해서 사용자 pc에서 입력한 한글을 webdriverJS 서버
에서 자동으로 브라우저가 실행되어 띄어쓰기된 결과값을 클라이언트에 리턴해주는 소스입니다.

-------------------------------------------------------------------------------------------------------
var client = require("webdriverjs").remote({desiredCapabilities:{browserName:"chrome",handlesAlerts:true}});
var now = require("now");
var express = require('express');

var app = express.createServer();
app.listen(7878);

var everyone = now.initialize(app);
client.init() ;
client.url("http://s.lab.naver.com/autospacing/");

var prContent = "";

everyone.now.callList = function(reqTxt){
client.url("http://s.lab.naver.com/autospacing/?query="+reqTxt);
client.submitForm("#search_form");
client.execute("return document.getElementsByClassName('wrap_spacing2')[0].innerHTML",function(result){everyone.now.returnPostHTML(result.value);
});
}
-------------------------------------------------------------------------------------------------------

서버상에서 브라우저를 맘대로 컨트롤 하고 그 결과값이나 동작 입맛에 맛게 가져오는 것.. 엄청난 강점일 거 같습니다.

node.js 자체도 나름 강력한 부분이 있지만 더 큰 강점은 npm에 있나봅니다. 집단 지성의 강점
한 번 활용해 보시면 재밌습니다.

참고 URL은 https://github.com/Camme/webdriverjs 입니다.


2012/07/20 20:38 2012/07/20 20:38
웹 서핑을 하다보면 불필요한 광고 때문에 컴퓨터가 버벅되는 경우가 있는데, 간단하게 hosts 파일을 수정해서 IE, FireFox, Chrome 등 어떤 브라우저를 사용하더라도 광고를 보이지 않도록 할수 있습니다. 그리고 그 광고를 원하는 내용으로 바꿀수 있습니다.

- hosts 파일 위치(윈도우즈 버전 마다 다를 수 있음)
C:\Windows\System32\drivers\etc


호스트 파일을 찾았으면 아래와 같이 추가해보자. 필요에 따라 더 추가해도 된다.

# Copyright (c) 1993-1999 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
# 102.54.94.97 rhino.acme.com # source server
# 38.25.63.10 x.acme.com # x client host

127.0.0.1 localhost

# Naver AD
115.94.198.5 nv1.ad.naver.com
내용을 대충 설명하면 해당 도메인으로(nv1.ad.naver.com) 접속을 시도 하면 115.94.198.5 IP 로 인식 하는 것이다.
(IP를 115.94.198.5  대신 127.0.0.1 을 쓰면 해당 도메인으로 접속을 시도 하면 127.0.0.1 즉 내 컴퓨터로 loopback이 되서 도메인 접속이 차단되는 것이다.


호스트 파일 저장후 아래와 같이 광고가 표시 되지 않음을 확인할 수 있다.
사용자 삽입 이미지



지금부터 광고 부분을 수정해보자 . 필자는 115.94.198.5 개인 리눅스 서버를 가지고 있다.

통상 도메인을 호출하면 VHOST 에서 익식하여 /HOME/사용자 형식으로 인식하지만 IP 주소를 호출 하면

/usr/local/apache/htdocs 아래 폴더를 호출한다 htdocs  폴더를 보면 .htaccess 파일이 있다 없을경우 vi .htaccess

로 파을을 생성한다 . 파일 내용에 이렇게 넣어보자 .

Options +FollowSymLinks
RewriteEngine on
ErrorDocument 404 /youngsam.php

내용을 대충 설명하면 404 오류(not found) 파일이 없을경우 /usr/local/apache/htdocs 폴더에 /youngsam.php

파일을 실행 시키는 것이다 .

사용자 삽입 이미지

위 광고 부분 소스를 보면
<iframe id="f595100" name="f595100" src="http://nv1.ad.naver.com/adshow?unit=002AG"
 title="광고" width="595" ..생략

형식으로  http://nv1.ad.naver.com/adshow?unit=002AG 광고 도메인을 불러온다 이럴경우

http://115.94.198.5/adshow?unit=002AG 도메인으로 인식하게된다.



2012/07/17 10:57 2012/07/17 10:57
HTML Head의 meta 태그 바로 아래에 브라우저에서 request하게 되는 외부 도메인에 대해서 다음과 같이 미리 DNS Handshake 해 놓으면 페이지 퍼포먼스가 향상됩니다.

<link rel="dns-prefetch" href="//example.com">
<link rel="dns-prefetch" href="//ajax.googleapis.com">
...
쓰는 만큼 적어 두세요. 물론 너무 많은 외부 도메인을 쓰시는 것은 퍼포먼스를 나쁘게 하겠죠.
이렇게 정의해 놓으면 실제 요청이 들어갈때 DNS 시간이 확 줍니다. 파폭이나 크럼에서 테스트 해 보시길.    


2012/05/05 09:21 2012/05/05 09:21
<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

붙여주시면 구글툴바없이도 구글 번역기를 이용하실수 있습니다.



2012/05/05 09:18 2012/05/05 09:18
오랬동안 http스트리밍 하는 방법을 찾아 다녔습니다.
그래서 찾은게 JWPLAYER를 찾게 되었습니다.
(jwplayer5부터는 html5를 지원해서 모바일에서 지원되었습니다.)
http://www.longtailvideo.com/players/


하지만 문제 생겼습니다.
JWPLAYER에서 스트리밍을 하지않고 전부 다운로드 한 후에 재생하는것이었습니다.
그래서 api페이지 보니깐 http 스트리밍 모듈이 서버에 깔아야 한다더군요
http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12534/video-delivery-http-pseudo-streaming

저는 아파치2를 쓰기 때문에 아파치2용 모듈을 설치 하였습니다.
http://h264.code-shop.com/trac/wiki/Mod-H264-Streaming-Apache-Version2

아파치 뿐만 아니라 다른 웹서버도 되더군요
Apache, Lighttpd, Nginx, IIS, AOLserver

깔고 다시 확인 해보니 스트리밍 되는것을 확인 되었습니다.

모듈을 깔고 나니
start,end 파라미터를 붙여서 원하는 부분만 재생할수 있다는것을 확인했습니다.
ex> video.mp4?start=10&end=30

아래는 참고로 작성된 소스를 넣었습니다.

jwplayer 작성 소스
<video id="video" src="movie.mp4"></video>


공통 js
jwplayer("video").setup({
flashplayer: "/jwplayer/player.swf",
provider : 'http',
controlbar : 'over'
});    


2012/05/05 09:17 2012/05/05 09:17
ffmpeg를 이용하면 게시판에 동영상을 업로드 즉시 플래시영상인 flv로 인코딩 하실 수 있습니다.

윈도우서버+php에 설치하다 하도 삽질을 해서 팁을 남겨 놓습니다.

환경은 iis6 + php 였구요,

http://ffmpeg.zeranoe.com/builds/

여기서 다운을 받습니다.

32-bit Builds (Static) 에서 가장 위에것을 받으면 됩니다.

압축을 풀면 여러 파일이 나오는데 우선 ffmpeg.exe 파일이 필요합니다.

웹서버 적당한곳에 ftp로 업로드 하신후, php를 통해 프로그램을 작성합니다.

shell_exec("E:/wwwhome/test/ffmpeg.exe -v 0 -i E:/wwwhome/test/test3.mp4 -ar 11025 E:/wwwhome/test/test3.flv 2>&1");

위처럼 실행하면 test3.flv 가 튀어나와야 하는데 그전에 서버 셋팅을 해야됩니다.

c:\windows\system32\cmd.exe 의 파일보안에 인터넷 게스트 계정 (컴퓨터이름\IUSER_컴퓨터이름) 을 추가해주시고,

c:\widnwos\php.ini 의 safe_mode = off 해줍니다.

그래도 인코딩이 안된다면, 실행파일의 경로
E:/wwwhome/test/ 의 폴더의 보안에 USERS 를 넣어야 파일을 읽고, Authenticated Users 를 추가해줘야 flv 파일이 저장됩니다. 이 두가지가 빠져있는지 확인해보세요.

안되는건 대부분 보안관련 문제더라구요.

모든게 완료된다면 윈도우서버에 유튜브를 차리실수 있습니다.    


2012/05/05 09:15 2012/05/05 09:15
include_once "xmlrpc.inc";

function newPost($title, $description, $category) {
$g_blog_url = "https://api.blog.naver.com/xmlrpc";
$user_id = "네이버 아이디";
$blogid = "블로그 아이디 = 네이버 아이디와 동일";
$password = "글쓰기 API 암호";
$publish = true;
$client = new xmlrpc_client($g_blog_url);

$client->setSSLVerifyPeer(false);
$GLOBALS['xmlrpc_internalencoding']='UTF-8';

$struct = array(
'title' => new xmlrpcval($title, "string"),
'description' => new xmlrpcval($description, "string"),
'categories' => new xmlrpcval($category, "string")
);

$f = new xmlrpcmsg("metaWeblog.newPost",
array(
new xmlrpcval($blogid, "string"),
new xmlrpcval($user_id, "string"),
new xmlrpcval($password, "string"),
new xmlrpcval($struct , "struct"),
new xmlrpcval($publish, "boolean")
)
);

$f->request_charset_encoding = 'UTF-8';

return $response = $client->send($f);
}

$return = newPost("블로그 제목", "블로그 내용", "블로그 카테고리명");

print_r($return);
?>

xmlrpc.inc 다운로드
http://sourceforge.net/projects/phpxmlrpc/files/phpxmlrpc/2.2.2/

네이버 글쓰기 API를 활성화 시키시고 작업하시면 됩니다.

많은 내용들이 구글에 올라와 있습니다만 내용이 너무 복잡하더군요

그래서 필요한 부분만 올려봅니다.

수정 및 삭제는 따로 찾아보시면 될듯합니다.

http://dev.naver.com/projects/naverblogerapi/issue/6856


자세한 내용은 위의 문서를 참고하시면 될듯합니다.




2012/01/31 11:03 2012/01/31 11:03

http://www.webpagetest.org/


현재 운영하고 계신 사이트가 얼마나 빠른지 한번 보시겠어요? 6대주의 도시를 찍고 돌려볼 브라우저를 선택한 다음 테스트 가능합니다.

예제) 네이버를 독일 프랑크푸르트에서 IE8로 접속할때의 graph,
http://www.webpagetest.org/result/120207_23_34YZS/


2012/01/28 01:11 2012/01/28 01:11
http://www.shareaholic.com/
지원되는 SNS 종류가 엄청납니다.
twitter, facebook 은 당연 기본이고,
wordpress 로 퍼가는 것도 되네요.

api 는 소스코드가 아니니까 그냥 쓰면 되는거고,

공유버튼에 쓰라고 만든 아이콘셋은 Creative Commons Attribution-Share Alike 3.0 Unported License 입니다.
http://www.shareaholic.com/openshareicon

공짜인 것 같아요.

구글툴바의 공유버튼이 이걸로 되어 있어서 알았네요.                                       


2012/01/16 17:47 2012/01/16 17:47
http://www.google.com/webfonts
https://developers.google.com/webfonts/

영어뿐인게 아쉽네요.

License: Google APIs Terms of Service https://developers.google.com/terms/

----------------------------------------------------------------------------------

한글웹폰트 그냥 여기가셈 (나눔시리즈 등 무료웹폰트 서비스)

http://api.mobilis.co.kr/webfonts/

서버는 한국서버가 甲


2012/01/16 17:47 2012/01/16 17:47

직접 사용은 안해봤지만 추후에 사용할 것 같아서 대충 알아본 내용들을 토대로 올려봅니다.

하이브리드 앱 개발툴 : 웹 소스를 통해서 어떠한 플랫폼에 상관없이 연동되는 UI를 가지며 각 플랫폼 별로 지원이 필요한 기능(GPS,카메라, 등)은 각 플랫폼 내부의 API를 이용하여 개발을 도와주는 툴.

심비안, 블랙베리, 윈도우, 리눅스, 안드로이드, 아이폰, 바다 등등의 각종 플랫폼에서 구동되는 프로그램을 개발할려면 각 플랫폼별 언어 이해와 여러가지 UI 시도 등을 해야되는데 하이브리드 앱 개발툴을 이용하면 그것이 필요없다고 합니다. (위에서 말한 내용과 같은 내용이지만 조금 더 강조를 하기 위해서 추가하였습니다.)

앱셀레이터 티타늄 : http://www.appcelerator.com/

앱셀레이터 티타늄 스튜디오(개발툴) : http://titanium-studio.s3.amazonaws.com/latest/Titanium%20Studio.exe




2012/01/14 00:19 2012/01/14 00:19
netstat -n|grep -F :80|egrep '(ESTAB|SYN)'|awk '{print $5}'|sed 's/:[0-9]*//'|sort -u|wc -l

쉘상태에서 위와 같이 치시면 됩니다.

=2차 수정=
생각해보니
netstat -n|grep -F :80|egrep '(ESTAB|SYN)'|awk '{print $5}'|sed 's/:[0-9]*//'|sort -u|wc -l

보다는(레드햇 8.0 <- 이외에는 테스트 안해봄~)
netstat -np|grep -F httpd|awk '{print $5}'|sed 's/:[0-9]*//'|sort -u|wc -l
으로 좀더 정확한 수치를 뽑아낼 수 있습니다.

이제야 "웹서버와 통신하고있는 클라이언트 수 알아내기"가 완벽히 완성되었습니다.
=2차 수정 끝=
=수정 시작=
제가 생각을 해보니 명령어의 설명이 하나도 안들어갔군요.
netstat 은 네트워크의 상황을 나타내주는 유틸리티입니다.
옵션 -n은 재분석을 하지 않는옵션으로 빠른 결과출력 속도를 가져오죠.

grep는 정규표현식시 일치하는 줄만을 출력하는 쉘입니다.
-F옵션은 정규표현식을 사용하지 않겠다는 옵션이고.. ":80"은 netstat에서 ":80"을 포함한 줄만을 출력한다는 것이죠.. 즉. http프로토콜만을 출력하겠다는 것입니다.

egrep는 grep -E 와 같은 것으로 좀더 많은 정규표현식을 사용할 수 있습니다. 옵션은 '(ESTAB|SYN)' 으로 주었는데 이는 정규표현식으죠.. 정규표현식을 알고싶으시면 아래의 URL으로..
http://kldp.org/HOWTO/html/Adv-Bash-Scr-HOWTO/x10468.html 을 참조하세요.

awk 는 각 줄에서 공백을 기준으로 필드로 나누며 '{print $5}'는 5번째 필드만을 출력하겠다는 것입니다.

sed 는 비대화형 줄단위 편집기입니다. 정규표현식을 사용하며 's/:[0-9]*//'옵션을 분리하면 s/// 안에 :[0-9]가 들어가있는 것으로 "s/이것//" 는 각 줄에서 "이것"이라는 글자만 지운다는 것으로 정규표현식 :[0-9] 을 나눠보면 ":" 으로 시작하는 모든 숫자를 나타냅니다.
([0-9]는 모든 숫자를 가리킴)

sort는 참 유용한 쉘입니다. 말 그대로 정렬한다는 것인데
printf "1\n5\n3\n"|sort 라고 쉘에서 처보면 순서대로 1,3,5로 출력되는것을 확인할 수 있습니다.
여기서. 옵션 -u는 출력 내용이 같은 것은 한번만 출력하는것입니다.

wc 이것 또한 참 유용한 쉘이죠 ~ 단어의 수를 알아내는 것으로 한줄에 한해서만 단어의 수를 샙니다. 이를 이용해서 몇줄이 나왔는지를 알수있는데 -ㅣ 옵션을 주면 몇줄이 출력되었는지만을 나타냅니다.

전체적으로 분석을 하면
netstat -n|grep -F :80|egrep '(ESTAB|SYN)'|awk '{print $5}'|sed 's/:[0-9]*//'|sort -u|wc -l
명령은 netstat유틸을 이용해서 네트워크의 상황을 출력하고 이 중에 grep 를 이용해 :80 문자만을 나타내고있는 줄만 출력하며 egrep를 이용해 ESTAB이나 SYN이있는 줄만 출력하며 awk를 이용해 접속하고있는 클라이언트만을 표시하며 sed를 이용해 클라이언트의 포트를 제거하고 sort를 이용해서 중복된 IP를 제거하고 마지막으로 숫자만을 출력하기위해 wc를 이용한것입니다


2012/01/10 19:38 2012/01/10 19:38