<A HREF="#" 의 말끔한 대안

<A HREF="#" 의 말끔한 대안

분류없음 posted by sh. at 2007.05.15 10:01

Update on 2012-01 : 오래된 글을 보니 부끄럽기 짝이 없군요. 요즘은 이것보다 더 말끔하게, HTML과 JavaScript를 완전히 분리하는 방법을 선호하는 추세입니다. Unobtrusive JavaScript라고도 하는데요,

<a href="http://www.google.com" id="google">Google</a>
<script>
$('#google').click(function(e) { e.preventDefault(); window.open(this.href); });
</script>

대충 이런 방식으로 구현합니다. 스크립트는 완전히 다른 파일에 따로 구현할 수 있고, 화면과 동작을 따로 구현할 수 있어서 훨씬 말끔하지요.

----

이번에도 사내게시판에 쓴 글을 옮겨왔습니다.
----
아래의 글에 이어서 <a href="#" onclick="...."> 의 말끔한 대안을 제안해봅니다.

보통 이렇게들 많이 쓰죠?

<a href="#" onclick="window.open('http://www.makeshop.co.kr/', 'makeshop', '....');">

이 방식은 치명적인 단점이 있습니다. href="#"에 의해서 페이지가 최상단으로 스크롤업 되버린다는거죠. 웹페이지의 사용성 측면에서 볼때 사용자가 보고있던 페이지 위치를 확 벗어나게 되니까 당황할 수가 있겠죠. 좋은 방법이 아닙니다.

그래서 많이들 쓰던 방법이 void();함수를 이용하는 것인데요,

<a href="javascript:void(0);" onclick="....">

위와 같은 형태로 쓰는겁니다. void() 함수는 아무것도 하지 않는 함수입니다. 그러니 클릭했을 때 실행되는 href값은 아무 일도 하지 않겠죠 ㅎㅎ 썩 괜찮은 대안이긴 합니다. void() 에 0을 넣지 않으면 firefox에서는 오류가 납니다.

그런데 void를 쓰는게 왠지 찜찜하기도 하고... 해서 약간 개선된 방법이

<a href="javascript:;" onclick="....">

void()도 아무일 하지 않는 함수지만, ; 는 정말로 아무것도 하지 않는 문장이죠 ㅎㅎ 이 정도면 굉장히 말끔한 해결책이라고 생각



하고 오랜 세월을 살았었습니다. -,.-);;;

그런데 amazon.com에서 영어사전을 펼쳐놓고 원서를 주문하던 그 어느날, 분명히 팝업창인데도 불구하고 링크의 주소가 브라우저의 상태표시줄에 보여지는!! 기이한 현상을 발견하고 말았습니다. 원래 a링크에서의 href값은, 마우스를 링크에 오버하면 브라우저 상태표시줄에 표시가 되죠! 하지만 onclick절에 쓰여진 주소값이 보여질리 없건마는..........

즉시 "소스보기"를 열어 보았더니...

<a href="http://www.amazon.com/some/path/" onclick="window.open(this.href, '', ''); return false;">

오오! 이런 방법이. 저는 이것이 가장 말끔한 팝업창 띄우는 방법이라고 생각을 합니다.
-링크에 마우스 포인터를 가져가면 상태표시줄에 링크가 표시되므로 사용자가 미리 링크를 확인할 수가 있고요,
-행여 js가 작동하지 않는 상황에서도 링크가 의미를 가지고 작동을 한다.
-# 를 쓸때처럼 페이지가 이동하지도 않는다.
-그리고 별로 어렵지도 않다.

javascript와 사용성/웹표준에 대한 좀 더 포괄적인 문서는 http://hyeonseok.com/docs/accessible-javascript/

12 people like this. Be the first of your friends.

HTML, idea, Javascript

트랙백은 하나 , 댓글이 없습니다.

: 이름

: 패스워드

: 홈페이지

비밀글

Admin

HARDWORKER

웹개발자가 관심가졌던 것. 지금은 버려짐. by sh.

One Laptop Per Child

분류없음 posted by sh. at 2007.04.27 00:11

OLPC는 One Laptop Per Child의 약자입니다. 번역하자면 "모든 어린이에게 노트북을!" 쯤 되겠네요.

OLPC 프로젝트는 네그로폰테 교수 (어떤 사람인지에 대해서는 잘 모릅니다만 영향력이 꽤 있는 인물인가봅니다)의 주도하에 이루어지고 있는 "지구촌 정보 격차 해소 프로젝트"라고 생각을 하시면 됩니다.

저렴한 노트북을 개발하고, 돈 많은 회사를 스폰서로 끌어들이고, 대량생산을 가능하게 해서 단가를 100달러까지 낮춘다음, 개발도상국이나 후진국의 아이들에게 무상으로 나눠준다! 는 것이 기본 골격이지요.

2~3년전에 OLPC프로젝트를 제안하는 뉴스를 처음 들었을때, 멋지긴 한데 과연 성공할까? 하는 생각을 했었는데 최근에 실물이 공개되었네요!

http://kldp.org/node/81202에서 KLDP의 권순선씨가 OLPC를 직접 소개하고 있습니다.

초창기의 컨셉트에는 노트북에 핸들이 달려있어서 이걸 돌리면 충전이 된다던가 하는 개념들이 소개되어 있었는데, 실물에 핸들이 달려있지는 않네요 :)

참고로 CPU는 AMD것을, OS로 사용된 XO라는 것은 리눅스를 기반으로 하고 있습니다.

추가
----
위키백과의 네그로폰테 페이지

TAG OLPC

받은 트랙백이 없고 , 댓글이 없습니다.

: 이름

: 패스워드

: 홈페이지

비밀글

<< prev 1 ··· 78 79 80 81 82 83 84 next >>

이 글은 사내 비공개 블로그에 쓴 글을 옮겨온것입니다. 다음주의 레일즈 세미나에 참석하게 된 팀원들에게 사전 자료를 제공하려는 목적으로 쓴 글입니다.

----

루비 온 레일즈 세미나에 참석하시게 된 여러분! 축하합니다!
교육내용을 보니 초급자라도 내용을 듣는데 무리는 없지만, ruby와 RoR의 기본적인 내용을 알고 가면 더 많은 것을 얻을 수 있을걸로 생각합니다. 저도 아직 '루비스트'라 자처할만한 지식도 없는 루비 초짜이지만 제가 그 동안 모은 자료들을 정리하면 루비에 관심을 가지는데 도움이 될것같군요.

우선 rails는 ruby로 짜여진 프로그램입니다. 그러니 루비에 대해 좀 알아야겠죠.
루비 공식 홈페이지를 방문해보세요. 한글 홈페이지도 있지만 news가 영문에 비해서 늦어요. 하지만 루비에 관한 소개는 한글 페이지를 보는게 나을겁니다 :) 루비 사용자 포럼이나 루비를 사용하는 개발자들의 블로그를 다녀보는 것도 좋지요. 여기, 여기, 여기, 여기, 여기 .. RSS리더에 등록해서 구독하면 더 좋겠죠. 특히 이번 세미나의 강사이기도 한 황대산님의 블로그는 필수! 체크하세요. 루비/레일즈 문서에 소개된 것만 읽어봐도 많이 건지실겁니다.

rails의 공식 홈페이지 또한 필수 체키라웃 대상입니다. 특히 screencast의 "15분만에 블로그 만들기"가 처음 공개됐을 때 많은 인기몰이를 하면서 "n분만에 x만들기" 아류작을 대량 양산했었지요. 또 docs의 몇 가지 tutorial만 따라해도 간단한 rails예제 어플리케이션을 만들어볼 수 있습니다.

rails는 MVC패턴의 프레임워크입니다. 고로 MVC에 대한 이해가 필요하지요. 그리고 rails는 최근 조명을 받고있는 애자일(agile) 방법론을 적용하기 좋은 프레임워크입니다. 애자일이 무엇인가에 대해서는 애자일 방법론 중 가장 유명한 XP(extream programming)에서 추구하는 가치와 실천방법에 대해 알아두면 좋습니다. 특히 애자일 선언(Manifesto for Agile Software Development)의 의미를 음미해보시기 바랍니다. 원문은 이곳에서 보실 수 있습니다.

애자일 소프트웨어 개발을 위한 선언

우리는 이것을 실천하고 다른 이로 하여금 이것을 실천하도록 도움으로써 개선된 소프트웨어 개발 방법을 공개한다. 이 연구를 통해 우리는 다음과 같은 가치를 실현한다.

• 개인과 상호작용이 프로세스나 툴보다 우선이다.
• 동작하는 소프트웨어가 포괄적인 문서보다 우선이다.
• 고객 협력이 계약 협상보다 우선이다.
• 변화에 대한 반응이 계획을 따르는 것보다 우선이다.

위 문작의 오른쪽 항목 각각에도 가치는 있지만, 우리는 왼쪽 항목에 더 가치를 부여한다는 것이다.

물론 rails가 agile를 실천하기 위한 의도로 개발된 프레임워크는 아닙니다. 하지만 rails의 철학은 실용주의적 관점을 가진 agile, XP등의 방법론과 일맥상통하는 부분이 많습니다.
XP에 관해서는 한국 XP사용자 모임의 여러 글을 읽어보시면 도움이 됩니다. 위키적인 분위기에 적응하기 힘들고, 보다 체계적인 인쇄물을 원하는 분은 인사이트에서 나온 "익스트림 프로그래밍 - 변화를 포용하라"를 읽어보시면 좋습니다. 소프트웨어 개발의 지혜 - 원칙, 디자인 패턴, 실천방법는 agile 개발의 구체적 적용 방법을 다루고 있지만 앞쪽의 몇 챕터만 읽어봐도 많은 도움이 될겁니다.

자료를 나열하다보니 ruby/rails에서 agile/XP에 대한 쪽으로 슬금슬금 넘어왔네요. rails가 각광을 받게 된 이유가 agile과 무관하지 않다고 생각을 합니다. 단지 rails만을 익히는 것이 아니라 좀 더 효율적으로 빠르게 일하면서 재미를 느낄 수 있는 여러가지 방법을 고민할 수 있기를 바랍니다.

세미나 이전에 ruby/rails를 시험해보고 싶은 분은 저에게 따로 문의해주세요. blue/cyan서버에서 rails를 써볼 수 있습니다.

Admin

HARDWORKER

웹개발자가 관심가졌던 것. 지금은 버려짐. by sh.

intro & lighttpd bandwidth 설정

분류없음 posted by sh. at 2007.04.17 01:06

블로그 분가했습니다. private블로그는 반말, 여기서는 존댓말 ㅋ 기술적인 이야기는 이 곳에서만 할 작정입니다.

lighttpd에서 설정파일의 server.kbytes-per-second 지시자를 이용해서 서버의 대역폭을 조정할 수 있습니다. 그런데 이게 의도한대로 되질 않는겁니다. 별로 찾아볼 시간도 없고, 꼭 설정해야 하는것도 아니고 해서 그냥 넘어갔었는데 오늘 옆자리의 이사님과 얘기를 하다 보니 server.... 지시자 말고 connection.kbytes-per-second 지시자가 있더라고요! server. 로 설정을 하면 서버의 전체 대역폭을 제한하는 것이고, 흔히 apache의 mod_bandwidth처럼 사용하려면 connection. 을 이용해야 하는겁니다! flv 서버에 하루종일 적용해 두었는데 아직 문제점은 발견되지 않네요. lighttpd 너무 멋져요!!

TAG bandwidth, lighttpd, web server

받은 트랙백이 없고 , 댓글이 없습니다.

: 이름

: 패스워드

: 홈페이지

비밀글

<< prev 1 ··· 80 81 82 83 84 next >>

이 글은 Evernote에서 작성되었습니다. Evernote는 하나의 업무 공간입니다. Evernote를 다운로드하세요.