카테고리 보관물: WEB

MS 엣지(edge) 에서 숫자값에 링크가 걸리는 버그

MS 엣지에서 특정 소수점을 가진 숫자값 (사용량등) 에 뜬금없이 링크가 걸리는 경우가 있다.

크롬이나 다른 브라우저에서는 재현이 안되니 매우 뜬금없음.

숫자값을 엣지내부에서 연락처로 렌더링 되면서 걸리는 링크로 보이는데, 아래 메타 태그를 추가함으로로써 해결 할 수 있다.

<meta name=”format-detection” content=”telephone=no”/>

태그 지정됨 ,

apache 와 playframework 연동하기

앞에 apache 서버를 두고 playframework 을 사용하려는데 환경세팅에 대한 문서를 쉽게 찾을 수 없어 블로그에 공유해 둔다.

주로 정보를 구글링해서 찾는 편인데 구글링해서 나오는 정보는 Play 1.0 기준인데다 환경에 그리 해박하지 않은 나에게는 조금만 오류가 나와도 길을 잃고 헤매이게 되는데 그런 나에게 playframework.org 에 나온 정보(http://www.playframework.org/documentation/1.1/production) 는 나의 길을 쉽게 헤매이게 만들었다. 다른 세팅은 맞는 듯 한데, 아파치 세팅에서 LoadModule proxy_module modules/mod_proxy.so 하는 부분이 잘 안되었다.

그래서 출처 사이트의 내용을 보고, 다시 설정했다. 출처의 링크는 간단하게 한글로 번역했고, 일부 명령은 내 환경에 맞게 수정했다.
(출처 : http://hogehoge1966.doorblog.jp/archives/2566224.html (일본어))

— 모듈 로딩 설정
— mods-available 의 파일을 심볼릭링크로 만들어 둔다.
$ cd /etc/apache2/mods-enabled
$ sudo ln -s ../mods-available/proxy.load ./proxy.load
$ sudo ln -s ../mods-available/proxy_http.load ./proxy_http.load

— 가상호스트 설정
$ cd /etc/apache2/sites-available
$ sudo vi rkjun_kr
<VirtualHost *:80>
ProxyPreserveHost On
ProxyPass / http://127.0.0.1:9000/
ProxyPassReverse / http://127.0.0.1:9000/
</VirtualHost>

— sites-available의 파일을 심볼릭링크로 만들어 둔다
— ※sites-enabled 에 있는 파일은 삭제해 둠
$ cd /etc/apache2/sites-enabled
$ sudo ln -s ../sites-available/rkjun_kr ./rkjun_kr

— 모듈 호출설정등은 httpd.conf 에 기술해도 돌아가지만,
— ~available 에 설정파일을 두고
— ~enabled 에서 심볼릭링크로 만들어 두는 게 좋은 듯 하다.

— play 기동
$ cd /home/rkjun/rkjun_kr
$ play start

— apache2재기동
$ sudo /etc/init.d/apache2 restart

— 이제 9000번 포트와 80번 포트 둘 다 rkjun_kr 초기페이지가 보임

출처 : http://hogehoge1966.doorblog.jp/archives/2566224.html (일본어)

태그 지정됨 , , ,

ajax 와 hashbang 그리고 pjax

ajax 기술은 이미, JavaScript 를 이용한 대중적인 웹기술로, 많은 웹사이트에서 적용하고 있는, 이제는 새로울 것 없는 기술 중 하나입니다. 간단하게 언급해 보면, 페이지의 새로고침없이 데이터를 가져와 화면에 뿌려주는 기능을 합니다.

사실, ajax 출현 전에는 iframe 기술을 이용해서 비슷한 처리를 하곤 했습니다.  iframe 태그를 숨겨놓고, 서브밋을 날릴 때 iframe 태그에 서브밋을 날려서, 데이터를 가져온 다음에 현재의 페이지에 보여주는 방식을 이용하면 ajax 와 비슷하게, 페이지 이동없이 데이터를 가져와 뿌려줄 수 있었습니다. ajax 기술이 사용되기전에 한 때 많은 사이트에서 이용했던 방식중 하나입니다.

ajax 기술의 등장은 사실, XMLHTTPRequest() 에서 출발합니다. 누구나 ajax 방식의 처리를 구현해서 만들어 사용할 수 있지만, prototype.js 을 비롯한 jQuery 등의 등장으로 ajax 처리를 구현할 필요없이 쉽게 가져다 간단하게 API를 호출해서 사용할 수 있게 만들어 놓아, 더욱 더 많은 인기를 끌게 되었습니다. 그리고 ajax 는 웹을 빠르게, 그리고 멋지게 만들어 주었고요!

그런데 ajax 를 이용하면, 뒤로 가기 버튼을 이용할 수 없습니다. 게다가, HTML 소스를 열어봐도, ajax 에서 가져온 데이터가 어디에 있는지 찾을 길이 없습니다. 당연히, 검색사이트에서도 ajax 로 가져오는 데이터나 페이지들은 인덱싱을 해주지 못하므로, ajax 로 처리한 결과들은, 검색사이트에서 검색해도 검색결과를 얻을 수 없습니다.

그래서 이를 보완하기 위해 등장한 방식이 hashbang (hash:# 와 bang:! 의 합성) 기술인데, location.hash 를 이용해서, URL 의 #(hash) 뒤에 붙는 값을 이용해 ajax 처리를 합니다. 뒤로가기를 처리할 수는 있지만, 일종의 URL Hack 방식이어서, 정당성도 없고 논란의 중심에 있기도 한데, 검색인덱싱이 안되는 건 물론이고(구글에서는 검색을 할 수 있게 escape처리를 해놓음), JavaScript 기술에 의존하고 있기 때문에, JavaScript 오류 하나만으로도 사이트를 하나도 이용할 수 없게 되어버립니다. 즉 JavaScirpt 없이는 컨텐츠를 보여주지 못합니다.  hashbang 과 관련해서는 아웃사이더님 블로그에 잘 정리되어 있습니다.

해시뱅(#!)에 대해서… (http://blog.outsider.ne.kr/698)

마지막으로 이 모든 문제를 해결한, 비동기통신의 대안 pjax 를 소개합니다. 좀 거창하게 소개했는데 그렇게 거창할 건 없습니다. ^^; 우선 pjax 는 pushState + ajax 를 합쳐서 pjax 라 합니다. 여기서 pushState 는 HTML5 에서 추가된 메소드로 브라우저의 히스토리를 조작할 수 있고, 뒤로가기/앞으로가기 버튼을 이용할 수 있습니다. (현재는 github 과 facebook 등에서 쓰이고 있는 걸로 알고 있습니다.)

클리어보스에서 번역한 HTML5 명세의 window.history.pushState  http://html5.clearboth.org/history.html#dom-history-pushstate

pjax 는 pushState 를 이용한 ajax 처리방식으로 jQuery 라이브러리로 제공되고 있고, github 의 창립자이자, CEO 인 defunkt (Chris Wanstrath) 가 개발했습니다. pushState 를 지원하는 브라우저에서는 pushState 를 사용해서 동작하고, pushState 비지원 브라우저(IE9 이하) 에서는 지원하지 않는 대로 일반적인 페이지 이동형태로 처리가 이루어지기 때문에 URL 은 동일하게 전환하게 됩니다.

pushState + ajax = pjax https://github.com/defunkt/jquery-pjax

사용방법도 쉽습니다. 위의 링크에 몇가지 방식으로 나와 있는데 간단하게는 링크를 잡고, 그 링크를 어느 컨테이너로 처리할 지 잡아서, pjax 처리를 해주면 됩니다.

가령, js-pjax 클래스를 가진 a 링크만을 pjax 처리한다면 아래 코드와 같습니다.

<a href=’/explore’ class=’js-pjax’>Explore</a>
$(‘.js-pjax’).pjax(‘#main’)

샘플을 보면 쉽게 이해할 수 있습니다. pjax 체크박스를 체크하고 링크를 누르면, 시간이 변하지 않습니다. 즉 해당영역만 링크를 다시 가져오는 것을 볼 수 있습니다. pjax 체크박스를 풀고 링크를 누르면 페이지가 리로드되는 일반적인 방식으로 페이지를 로드합니다.  (내친김에 IE9 이하 에서도 pjax 처리는 하지 않고, 일반적인 방식으로 페이지를 로드합니다)

pjax 샘플 http://pjax.heroku.com/

흥미로운 점이 많아서, 혹시 단점은 없나 찾아봤는데, HTML5 라 IE9 이하 하위버전에서 지원하지 않는 점만 빼면, 앞으로의 비동기 통신기술의 대안이 아닐까 싶습니다.

참조링크 :
http://firejune.com/1743
https://github.com/defunkt/jquery-pjax
http://blog.outsider.ne.kr/698
http://html5.clearboth.org/history.html#dom-history-pushstate

태그 지정됨 , ,

Bootstrap 2.0 에 대한 소개

1. 부트스트랩 (Bootstrap, from Twitter) 은 무엇인가?

부트스트랩  (http://twitter.github.com/bootstrap/) 은 트위터에 근무하는 두 명의 엔지니어 (Mark OttoJacob Thornton)가 개발한 가볍고 간단한 오픈소스기반 (아파치2.0라이센스) 의 HTML5, CSS3 UI 프레임워크입니다. HTML5, CSS3, Javascript 로 구성되어 있고, 가볍게 트위터 디자인 비슷한 UI 를 빠르게 구현해낼 수 있는 각종 콤포넌트들을 제공해 주고 있습니다.

2. 부트스트랩 다운로드

부트스트랩 홈페이지 (http://twitter.github.com/bootstrap/) 에서 릴리즈된 버전을 다운로드 할 수 있습니다. 현재 2.0 까지 릴리즈됐고, 부트스트랩 저장소 (http://github.com/twitter/bootstrap)를 살펴보면, 현재 2.0.1 버전으로 작업이 진행중이네요.

3. 내 홈페이지에 bootstrap 적용하기

HTML, CSS, Javascript 에 선수지식이 있으면 조예가 깊지 않아도, 부트스트랩을 가져다가 나만의 사이트를 만들 수 있습니다. 이미 샘플로 구성된 부트 스트랩 예제 화면을 참조하면 어렵지 않게 따라 만들 수 있습니다. 또한 부트스트랩 홈페이지에서 자세한 설명까지 설명되어 있으니, 조금만 시간을 내어 읽어보면 원하는 입맛대로 만들어 낼 수 있습니다. 기본적으로 CSS 에 대한 깊은 지식이 없어도 class 를 이용하는 것으로 충분히 원하는 의도대로 만들어 낼 수 있다는 점에서, 디자인에 약한 개발자에게는 나홀로 이쁜 사이트 만들기에 최적화된 아이템임에 틀림없습니다.

저도 간단하게, 샘플 가져다 만들어 봤습니다. (rkJun’s bootstrap) -_-;

4. 커스터마이징

어느정도까지는 내 입맛대로 바꿔서 쓸 수 있어야, 써볼 맛이 납니다. 부트스트랩 페이지에서도 이미 커스터마이즈 기능을 기본으로 제공해 주고 있습니다. 추가로 부츠왓치(http://bootswatch.com/) 사이트를 통해서도 간단하게 색상 변경을 통해 원하는 CSS 를 얻어낼 수도 있습니다. 랩부트스트랩 (http://wrapbootstrap.com/) 에서는 부트스트랩용 테마를 판매하고 있기도 합니다.

5. 웹 개발자의 놀이가 되어 줄 부트스트랩.

사이트의 틀을 부트스트랩이 잡아주니, 나머지는 웹 개발자 혼자서도 어떻게든, 그럭저럭 이쁜 사이트를 만들어 낼 수 있을 듯 합니다. 나머지 코딩은 개발자 몫인 거죠. 부트스트랩에 최적화된 JQuery Plugin 들도 꽤 흥미롭습니다.  특히나 캐러셀 (carousel : 화면을 회전하듯 부드럽게 전환시키는 방식.) 같은 기능들은 왠지 무조건 넣고 봐야 하는 거죠.^^;

6. 더 많은 정보들.

http://www.initializr.com/
15 초안에, HTML5 프로젝트를 시작할 수 있게 해준다는 이니셜라이져(initializr.com) 사이트인데, HTML5 템플릿을 생성해 줍니다. 최근 부트스트랩2 지원되고 있습니다.

http://bootswatch.com/
위에서 언급했던 부트스트랩 커스터마이징해주는 사이트입니다.

http://wrapbootstrap.com/
여기도 위 커스터마이징 얘기할 때 언급하기는 했는데, 부트스트랩용 테마를 판매하고 있습니다.

http://stylebootstrap.info
위에서는 언급하지 않았지만, Bootswatch 처럼 커스터마이징할 수 있는 곳입니다. 똑같은 디자인은 싫어. 라고 하신다면 스타일부트스트랩에서 나만의 디자인으로 간단하게 부트스트랩을 커스터마이징할 수 있습니다. 🙂

https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme#readme
부트스트랩은 반응형 디자인 (Responsive Design)으로 되어 있지만, 아예 모바일에 특화하길 원한다면 jQuery Mobile Bootstrap Theme 를 이용하는 방법도 있습니다.

7. 국내 부트스트랩 적용된 사이트들

http://dogfeet.github.com/
좋은 글들이 많이 올라오는 블로그입니다. Pro Git 한글 번역도 하셨고, 도움이 많이 되는 곳이네요. (아, 부트스트랩 얘기하다 갑자기 샛길로;;)

http://feed9.com/
역시 부트스트랩기반. 소스공개도 되어 있습니다. ( https://github.com/sungchi/feed9)

8. 잡담

디자인에 약한 웹 개발자들(특히나 서버사이드개발자) 에게  꽤 흥미로운 물건이다. 쉽고 재밌게 가져다 쓸 수 있는 것도 큰 장점이고. 암튼 이 bootstrap 의 기반에는 less (http://lesscss.org/) 기술도 사용되어지고 있는데 이게 또 꽤 흥미로운데, 이건 나중에 차차 다시 포스팅해야겠다.

태그 지정됨 , , , , ,