본문 바로가기

Programming/FrontEnd Web

Javascript 함수 생성 2가지 방법의 차이점 자바스크립트에서 함수를 생성하는 방법은 여러가지가 있습니다. 방법 하나. function a(str){ alert(str); } 방법 둘. var a = function(str){ alert(str); } 방법 셋.var a = new Function('str', 'alert(str)'); 위의 세가지 방법 모두 아래와 같은 방법으로 호출 할 수 있습니다. a('hello'); new 키워드를 사용해서 함수 객체를 생성하는 세번째 방법은 문자열로 함수 body를 작성해야 하기때문에 불편하죠.그래서 거의 사용되지 않는 방법 일겁니다.나머지 두가지 방법은 자주 사용하는 것인데, 이 둘간의 차이가 무엇일까요? 첫번째 방법은 함수 선언부에서 함수의 이름을 지정하고, 두번째 방법은 함수를 변수에 할당하고 있습니다.. 더보기
PhoneGap Vs. Appspresso Hybrid Mobile Web App을 개발하기 위해서는 개별(iPhone, Android) 플랫폼에서 제공되는 WebBrowser Component에 해당하는 WebView를 이용하면 Native API를 제공하도록 구성하면 웹기술을 이용하여 Device API까지 지원하도록 개발 할 수 있습니다. 하지만, 이와 같은 작업을 모두 개별적으로 진행하는 것 보다 더 좋은 방법은 이미 필요한 만큼의 기능을 제공하는 Hybrid Framework/Library를 이용하는 것입니다. 이런 Hybrid Framework에는 전 세계적으로 가장 유명한 Phonegap(Cordova)가 있고, 국내의 Appspresso가 있습니다. 이번에 이 두개의 Framework를 비교해 볼까합니다. 구력과 지명도 우선 이름값.. 더보기
웹 개발자가 꼭 알아야 할 블로거/블로그 저는 Java와 Eclipse plugin 그리고 웹 영역에서 개발을 해왔습니다. 보통의 Java 개발자가 그랬듯 JSP/Servlet을 필두로 Server-Side Framework 기술과 대형 SI 프로젝트로 먹고 살다가 몇해전 부터 Ajax가 유명세를 타면서 Xwing이라는 Front-end 웹 프레임워크를 기획해서 만들면서, 이것을 Eclipse plugin으로 위지윅이 가능한 4GL 스타일의 IDE도 제공하는 개발을 해왔습니다. 이와 같이 여러 영역의 개발을 진행하면서 가장 어렵고 힘든 영역은 Web Front-End 영역 이었습니다. Markup, Javascript, CSS에 대해 접해보지 않은 웹개발자는 없을것이고, 그까이꺼 대충 코딩도 아닌 기술로 여기어 왔던 것이 웹에 대한 우리의 현실.. 더보기
WYSIWYG(Visual GUI)Web Application 개발 환경 - Xwing 예전에 Xwing이라는 API에 관한 포스팅을 한적이 있었는데, 우여곡절 끝에 IDE 까지 개발 하게 되었습니다. 그래서 현재 개발 중인 WYSIWYG Viausl Web IDE의 프로토타입핑이 끝났습니다. 그 기념으로 시연 동영상 만들어 봤습니다. 이름은 Xwing이라고 지었구요. Eclipse plug-in으로 작성되었고, 표준 HTML 요소에다가 추가적인 Xwing UI요소들을 제공합니다. Visual 한 도구로 4GL Style의 VB나 델파이 같은 환경에서 Web Application의 GUI와 코딩을 할 수 있습니다. 어디 쓸만해 보이나요? 아.. 힘들다... 더보기
Multiple IE(6,7,8) Test를 위한 가장 좋은 방법 웹과 관련된 개발을 하면서 결과물이 각종 Browser에서 원하는 대로 rendering이 되는지 확인 하는 것은 가장 중요한 일이 되었습니다. 하지만, IE의 경우 OS에 한가지 version이 설치되면 나머지 버전을 설치 할 수 없는 문제점 때문에 여러 버전의 IE를 테스트 하기 위한 방법을 고민 하지 않을 수 없습니다. 그 방법으로 여러가지가 있고, 상황에 맞게 고르면 될것입니다만, 제가 찾아낸 여러가지 방법과 가장 좋다고 생각되는 것을 소개 해 볼까 합니다. (바쁘신 분들은 마지막 단락만 보셔도 됩니다.) 가장 원시적인 방법 : 가상 머신 가상 머신을 System 상에 여러개 설치해서 각 가상 머신 마다 IE를 버젼별로 설치하는 것입니다. 가상 머신도 여러가지 인데요. VMware, Virtual.. 더보기
Flash없이 HTML에 그림을 그리자! <canvas> 요즘 인터넷을 달구는 IT관련 기사들은 대부분 iPhone을 만든 스티븐 잡스로 부터 시작되는것 같아요. 그중 하나가 Adobe Flash 지원 여부를 두고 이런 저런 말들이 많습니다. Flash는 잡스 말고도 HTML5 라는 키워드로도 계속 주목 받아 왔는데요. 관련 기사들 내용으로는 HTML5가 나오면 Flash가 설 곳이 좁아 진다는 이야기들 입니다. 사실 이런 이야기들은 부모 잘만나서 좋은 직장, 좋은 보직으로 시간이 남아 도는 사람들이나, 육아와 가족 부양이라는 현실적 문제가 덜한 그래서 상대적으로 시간이 넉넉한 분들이나 다룰 주제이지, 나오지도 않은 HTML 5에는 뭐가 되더라 애플이 Flash를 지원하지 않는 이유는 뭐 때문이다 하는 기사 거리는 저 처럼 먹고 살기 힘든 현장 개발자에게는 아.. 더보기
Ajax 기반 RIA framework - Xwing 지난해 6개월 가량 거의 혼자서 만든 Xwing이라는 RIA Framework를 소개하려고 해요. 현재의 모습을 갖게 된건 지난해 12월 하순인데요. 워낙 새로운 포스팅도 없고 해서 요즘 저에게 가장 영향력 있는 내용이라서 한번 올려 봐요. 새창에서 보기 한번 경험해 보시면 재미 있을지도 몰라요. 회사에서 수주받아 진행하는 웹 어플리케이션 개발에 사용하자는 취지로 회사에 겨우 허락을 얻어 작년 한해 열심히 만들었는데, 결국 팀은 해체되고 계속해서 진행될지는 조금 불투명해 졌지요. Xwing은 jQuery와 jQuery의 수많은 Plugin을 이용했구요. widget API를 정의하고 Dataset binding(MiPlatform에서 영감을 얻어서)이라는 개념을 추가 했어요. 물론 UI 디자인도 다시 했.. 더보기
HTML 문자열만으로 이름을 모르는 함수객체에 객체Parameter 전달하여 호출하기 이번 포스트의 제목을 어떻게 정해야 할지 무척 고민이 됩니다. 제목이 무척 길어진 만큼 말하고자 하는 내용이 무엇인지 설명하기 힘듭니다. 누구든 분명 웹 프로그래밍(client tier)을 하면서 필요할 것 같아서 시간을 쪼개어 포스팅 해봅니다. 말하고자 하는 주제를 이해하기 위해 상상력을 좀 동원해 주시기 바랍니다. 요즘들어 javascript 라이브러리를 검색해서 사용하는 것은 일반화 된것 같습니다. 그런데, 본인이 직접 만들어서 사용하는 라이브러리와의 차이점은 쓰고자 하는 기능은 다 있는데, 정작 사용할 수 없게 만드는 요소가 간혹 생긴다는 것입니다. 예를 들어 이런 함수가 있는 라이브러리를 생각해 보죠. makeElement(domId, htmlStr) domId와 html 문자열을 전달하면 해당.. 더보기
cooliris, 이미지를 찾는 가장 좋은 방법 http://www.cooliris.com/ Contents를 작성할때 그 내용을 대표할 만한 이미지를 넣느냐 마느냐는 그 문서의 호감도와 질에 많은 영향을 끼치게 됩니다. 특히, PPT문서나 웹문서의 경우 훨씬 심하고, 요즘 유행에는 무척 더 심합니다. 그래서 웹검색을 통해서 그럴 듯한 키워드에 맞는 이미지 사냥을 종종 하게 되는데요. 유행은 유행인가 봅니다. 이런걸 아주 쉽게 해주는 사이트가 있습니다. 3D효과로 이미지를 찾는 과정도 아주 흥미있게 해줍니다. This site uses Thumbshots previews 더보기
웹페이지 Thumbnail 동적 생성 웹페이지 컨텐츠를 작성할때 특정 웹사이트나 웹페이지에 대한 설명을 하려고 하면 그 사이트의 Thumbnail정도를 보여주는 것이 어느정도 문화로 자리 잡은 것 같습니다. 하지만, 일일이 사이트를 방문하여 캡쳐하여 이미지를 저장한 후 그 이미지를 다시 링크 거는 것은 무척 시간이 많은 사람이나 돈벌이를 위한 경우가 아니고는 여간 귀챦고 어려운 일이 아닐 수 없습니다. Thumbnail을 동적으로 생성시켜 주는 서비스가 여러곳 있는데, 그 중 하나를 소개해 봅니다. Tistory 사이트의 Thumbnail을 동적으로 생성시키면 이렇게 나옵니다. 제 블로그 사이트의 Thumbnail을 동적으로 생성시키면 이렇게 나옵니다. 동적으로 생성한다는 의미는 웹컨텐츠를 만들때 특정 웹사이트의 Thumbnail을 일부러 .. 더보기