티스토리 툴바

Daum
Tistory
로그인

HTML, Javascript에서 페이지 상단으로 스크롤 시키기

분류없음 2011/02/22 02:39 posted by serenobs
HTML에서는 <a href="#top>Back to top</a> 이런 식으로 하면 됩니다.
Javascript에서는 window.location.href = '#top' 이구요.

그런데 IE, FF에서는 위의 방법에 추가로 한가지를 더 해줘야 합니다.
페이지 최상단에 <a name="top"></a> 처럼 일종의 label을 지정해줄 필요가 있습니다.
참, IE는 name의 대소문자를 가리지 않는 것 같은데 FF는 대소문자도 따지더군요;
TAG HowTo
받은 트랙백이 없고 , 댓글이 없습니다.

HTML에서 기호 표시하기

분류없음 2011/02/21 16:19 posted by serenobs
html에서 << 와 같은 기호는 표시하려면 << 라고 직접 쓰면 안되고 특수표현식(?)을 쓰셔야 합니다.
예를 들면, 
<
>
&
 
"
®
©		 &lt;
&gt;
&amp;
&nbsp;
&quot;
&reg;
&copy;		 less than
greater than
ampersand
non breaking space
double quote
registered trade mark
copyright
이런 식으로요. <<을 표시하려면 &lt&lt 처럼 써야됩니다. 아래 링크를 참조하세요.



TAG HowTo
받은 트랙백이 없고 , 댓글 하나가 달렸습니다.

jQuery, CSS를 이용한 긴 글에 말줄임표 넣기

분류없음 2011/01/20 23:19 posted by serenobs
제한된 공간을 벗어난 긴 글에 대해서 말줄임표를 넣어서 생략하고 싶을 때가 있습니다.
FF를 제외한 브라우저에서 CSS의 text-overflow:ellipsis 를 통해 이 기능을 제공하고 있는데요.
단점은 한줄로만 적용이 된다는 것과 FF는 지원하지 않는다는 것이죠.

일단 관련 내용은 이 링크에서 확인하시구요. http://www.quirksmode.org/css/textoverflow.html
보시다시피 overflow:hidden과 white-space: nowrap을 함께 적용해야 합니다.
저 nowrap 때문에 한줄로만 생략이 가능한 것이구요.

그럼 FF에서도 되고, 여러 줄에서도 말줄임표를 넣으려면?
자바스크립트를 이용해서 우리가 원하는 기능을 추가할 수 있습니다.
jQuery를 활용한 방법인데요, 깔끔하게 잘 되네요.
http://stackoverflow.com/questions/536814/javascript-insert-ellipsis-into-html-tag-if-content-too-wide
첫번째 답변에 소스가 상세히 나와 있습니다.

하나 주의할 점은 multiline의 경우 height 속성을 대상 tag에 꼭 지정해줘야 합니다.
TAG HowTo, JavaScript, jQuery, 말줄임표
받은 트랙백이 없고 , 댓글이 없습니다.

각 페이지마다 로그인이 필요하다!? -> 데코레이터!

분류없음 2010/12/28 22:28 posted by serenobs
Google app engine, python으로 작업하는 분들을 위한 내용입니다.

그나저나 제목이 좀 유치하지만....!
어쨌든 웹어플을 만들다 보면 로그인을 해야만하는 페이지들이 있을 수 있습니다.
그런 처리를 서버쪽에서 한다고 했을 때 각 페이지에 해당하는 핸들러마다 로그인 여부에 대한 검사를 해야합니다. 이건 어쩔 수 없죠.
하지만 매 핸들러 함수마다 로그인 검사 코드를 넣고 있으면, 이건 좀 아니다 싶을겁니다~
이때 python의 decorator란 녀석을 쓰면 꽤 간편하게 해당 작업을 마칠 수 있습니다.

이걸 사용하면 대략 아래와 같은 모습이 됩니다.
@login_required
def get(self):
     ....
참고로 GAE에선 @login_required 란 데코레이터를 제공하고 있습니다.
개인적으론 유저 필수정보가 입력됐는지(페이스북과 연동되다보니 페이스북 계정에서 제가 필요한 정보들을 없애버릴 수도 있거든요) 검사하는데 사용했습니다.

파이썬 데코레이터 자체에 대한 설명은 이미 잘되어 있는 곳이 많으니 다른 곳으로 바톤을 넘기는게 나을 것 같네요. 구글 검색 맨 첫부분에 나타난 URL 되겠습니다~
http://wiki.dgoon.net/doku.php?id=python:decorator

TAG HowTo, Python, 구글앱엔진
받은 트랙백이 없고 , 댓글이 없습니다.

파일 업로드시 확장자 및 파일크기 확인하기

분류없음 2010/12/26 02:40 posted by serenobs
자바스크립트 기준입니다.
파일 업로드시 가령 사진을 업로드 받을 때는 확장자를 제한하고 싶을 수도 있겠죠?
<input type="file" id="img" name="img" accept="image/gif,image/jpeg,image/bmp, image/png"/>
accept tag를 이용해서 제한할 수 있습니다.
그런데 이 왕따 IE는 저 tag가 먹질 않는군요.
그래서 귀찮지만 javascript로 체크해야 됩니다.
function check() {
  var filepath = document.getElementById('fileform').value
  var ext = filepath.substring(filepath.lastIndexOf(".")+1,filepath.length);
  ext = ext.toLowerCase();
  
  ...기타처리...
}

이렇게 하면 확장자를 추출할 수 있고 필요한 확장인지 확인하면 됩니다.
이제 이 함수를 form tag의 onsubmit="return check();" 로 서밋버튼을 누를 때 체크하게 해주면 됩니다.
<form action="/upload_photo" enctype="multipart/form-data" method="post" onsubmit="return check();" >
이런 식으로요.

여기에 파일 크기를 제한하고 싶을 수 있습니다. 사진 업로드하라고 했더니 엄하게 1테라짜리 이런거 올리면 갑갑하잖아요~
당연히 서버에서 체크해서 적절한 제재(?)를 가하겠지만 이왕이면 클라이언트단에서 처리하여 보다 빨리 경고메시지를 주고 또한 불필요한 트래픽을 더는게 좋겠죠?

우선 HTML 5를 이용한 방법이 하나 있습니다.
if (typeof FileReader !== "undefined")
var size = document.getElementById('fileform').files[0].size;
아, 깔끔합니다. HTML5가 어서 대세가 되어야 할텐데 말이죠. (IE6,7,8이 사라져야 한다는...)

다음으로 HTML 5를 지원하지 않는 브라우저 중 ActiveX를 지원한다면(즉, IE계열)
var objFSO = new ActiveXObject("Scripting.FileSystemObject");
file = objFSO.getFile(filepath);
var size = file.size

이렇게 할 수 있다고 합니다.
그런데 전 Win7 64bit에 Ie8을 쓰는데 저 activex가 생성 안되더군요....
IE 설정도 바꿔봤는데 안되고... 모르겠습니다 ^^; 어쨌든 기본설정에서 안된다면 별 의미도 없거니와 설사 된다고 해도 유저가 보안 관련 팝업창을 확인해줘야 된다고 하길래, 이 방법은 패스~

마지막으로 flash를 이용한 방법이, 있다고 합니다. ㅎㅎ
그 중에서도 flash를 이용한 업로드 콤포넌트가 있나보던데요 아래 사이트를 확인해보세요.

전 일단 HTML 5 방법으로만 진행하려구요. 있으면 좋지만 필수는 아닌 것 같으니 일단 다음 과제로ㅋ
저 플래시를 이용한 방법 나중에 적용하게 되면 그때 다시 포스팅하겠습니다~
TAG HowTo, html5, JavaScript, 웹개발
받은 트랙백이 없고 , 댓글 하나가 달렸습니다.

페북앱에서 등록된 유저에게 추가정보 접근권한 요청하기

분류없음 2010/12/24 04:33 posted by serenobs
유저가 페북앱을 처음 등록시 기본정보 및 추가정보에 대한 접근권한을 요청할 수 있습니다.
하지만, 페북 문서에도 써있지만 추가권한을 많이 요청할수록 유저의 거부 확률이 높아집니다.
그래서 필요한 것이 바로 조삼모사!
는 아니고 일단 가입시에는 최소한의 정보 접근만 요청한 뒤 야금야금 더 많은 정보를 요구하는 것이죠. 
정보가 필요한 시점에 요청하는 것이니 이게 더 바람직한 방법이긴 합니다. :)

그래서 이미 가입된 유저에게 추가 정보 접근 요청을 어떻게 하느냐.
http://developers.facebook.com/docs/reference/fbml/prompt-permission
여기에 따르면  <fb:prompt-permission perms="email">Would you like to receive email from our application?</fb:prompt-permission>

이런 식으로 하면 된다고 나와 있는데요. 전 안되더군요;;
어떤 버튼 같은게 나와야 될텐데 전 Would you like... 부분만 텍스트로 나오더라구요.

검색해보니 어떤 유저는 user_photos 같은 새로 추가된 권한 요청이 안되더라 이런 얘기도 있구요.
구글링하다 찾았는데 그 링크를 다시 못 찾겠네요;
일단 결론은
http://www.facebook.com/connect/uiserver.php?app_id=[app_id]&next=[callback_url]&fbconnect=1&legacy_return=1&method=permissions.request
이 주소로 redirect 시켜주면 됩니다.
uiserver.php 부분에 대해선 페북에서 찾아봤는데 관련 문서가 안보이네요;;

추가로 파라메터에 저거 말고도 더 많은게 있습니다만 저것 역시 어디에 깔끔하게 정리됐는지는 잘 모르겠습니다; 아마 이 문서 근처 아닐까 싶은데..
http://developers.facebook.com/docs/reference/dialogs/

흐음. 문서화는 MSDN만한게 없지 싶네요..;;


TAG HowTo, 페이스북앱
받은 트랙백이 없고 , 댓글 2개가 달렸습니다.

페북앱에서 유저 사진 접근하기

분류없음 2010/12/23 19:50 posted by serenobs
일단 프로필 사진은 https://graph.facebook.com/[user_id]/picture 로 가져올 수 있습니다.
picture?type=[square,small,normal,large]의 옵션으로 통해 다양한 사이즈로 접근이 가능합니다.
참고로 자기 자신의 정보는 user_id 대신 me 를 써도 됩니다.

프로필 말고 다른 사진들은 어떻게 가져올까요.
우선, 유저가 올린 페이스북 사진은 앨범 안에 담겨 있습니다.
그러니 먼저 앨범 정보를 알아야겠죠?
https://graph.facebook.com/[user_id]/albums?access_token=[access_token]
결과값으로 album 정보들이 jason 형태로 넘어옵니다. 
대략 이런 형태를 띄고 있습니다.

"data": [
{
         "id": "xxx",
         "from": {
            "name": "yyy",
            "id": "zzz"
         },
         "name": "Wall Photos",
         "link": "http://www.facebook.com/album.php?aid=&id=",
         "privacy": "everyone",
         "count": 1,
         "type": "wall",
         "created_time": "2010-12-22T03:22:55+0000",
         "updated_time": "2010-12-22T03:22:55+0000"
},
{...},... ]

위 xxx라고 된 id가 해당 앨범ID값이구요 (당연히) 앨범은 여러개 있을 수 있습니다.  


값들에 대한 구체적인 정보는 아래 링크에 확인하시면 됩니다  http://developers.facebook.com/docs/reference/api/album 
그럼 이제 얻은 앨범ID를 이용해보도록 하죠~
https://graph.facebook.com/[album_id]/photos?access_token=[access_token] 
해당 앨범 안에 있는 사진 정보들을 역시 json 형태로 받을 수 있습니다. 실제 결과값은 생략하구요
그 안에 각 필드들에 대한 설명은 http://developers.facebook.com/docs/reference/api/photo 여기에서 보시면 됩니다. "picture"나 images 필드에 파일에 접근할 수 있는 url 정보가 있고 이게 바로 우리가 찾던 그 정보입니다!

참, 이 쿼리는 permission이 필요합니다. 
자신의 경우 user_photos를, 친구들의 경우 friends_photos를 갖고 있어야만 데이터를 받을 수 있습니다. 친구 관계가 아닌 3자의 경우는 제공되지 않습니다.
http://developers.facebook.com/docs/authentication/permissions/

추가1. 위의 graph api는 url 직접 호출뿐만 아니라 각 언어별 SDK의 API가 제공됩니다. 
http://developers.facebook.com/docs/sdks/

[추가필요: 해당 url이 영구적인건지 이후에 바뀔 수 있는건지 잘 모르겠는데 아는 분 계시면 알려주세요 ^^]

TAG HowTo, 페이스북앱
받은 트랙백이 없고 , 댓글 4개가 달렸습니다.

이슈를 만들 때 스펙은 어디에?

분류없음 2010/12/20 11:48 posted by serenobs
어제 하루동안 스크럼에 대해 좀 더 파악해보고 JIRA 시스템도 둘러보며 이것저것 사용해봤습니다.

특정 Feature를 만든다고 할 때 그 상세스펙은 어디에 둬야하나를 고민했습니다.
어쩐지 Feature라는 issue를 하나 만들고 상세스펙에 해당되는 모든 스토리를 이 피쳐와 연결시켜야되나 싶은 생각이 들었는데, 어떤 스토리는 매우 다양한 곳에 쓰이는거라 (가령 로그인을 한다와 같은 스토리) 이미 완료된 스토리들도 다 끄집어내서 해야될까? 이런 생각을 하게 됐습니다.

근데 딱 봐도 그건 너무 귀찮으니 feature에 대한 스펙은 위키 같은 곳에 정리해두고 issue 시스템에서는 현재 해결되지 않은 이슈들만 연관시키자는 생각을 하고 있습니다.

특히나 스크럼의 경우 화이트보드에 포스트잇만으로 진행하는게 기본 방식인데 이때 각각을 모두 아카이브하기도 쉽지 않고 특정 스프린트마다 모두 해결하고 버리게 될 것 같으니 스크럼에서 스펙에 대한 정리까지하는건 아닌 것 같구요.

너무 엄한 고민을 한거 아닌가 싶긴 합니다만... 망치들면 못만 찾는다고 ㅋ Jira라는 시스템과 스크럼을 적용해서 프로젝트를 해볼려고 하니 너무 그 둘에 포커스를 맞춘 것 같습니다. 마침 Jira에 위키 시스템도 있던데 나중엔 그것도 한번 써봐야지 싶은데.. 이거 내가 무슨 Jira 판매사원 같군요. ㅋㅋ

위 얘기는 모두 맨티스, Trac등을 이용해서도 충분히 다 가능합니다. 흠흠.
TAG Scrum, 소프트웨어 개발 관리
받은 트랙백이 없고 , 댓글이 없습니다.

SCRUM을 해보자.

분류없음 2010/12/19 13:11 posted by serenobs
다이어리를 쓸 때, 다이어리 자체를 작성하는 즐거움이 있습니다. (있다고 합니다;)
전, 저의 천재성이 여실히 드러나는 저의 필체가 눈부시게 부담스러워 다이어리를 쓰지 않았습니다만....

진정 소규모 프로젝트이다보니 무슨무슨 방법론 같은거 없이 그냥 무대뽀로 해도 사실 큰 무리 없을 것 같지만, 프로젝트를 진행하는 느낌을 좀 더 체계적으로 얻기 위해 그리고 이 산만함을 어느 방법론이라는 틀로서 다스려보고자 SCRUM을 조금씩이나마 활용하여 이번 프로젝트를 진행하고자 합니다.

왜 스크럼이냐?
이유는 별로 없고 가장 최근에 들어 본 애자일 방법론 중 하나이기 때문에 무심코 골랐습니다. 흠흠.

왜 애자일이냐?
애자일의 광고 문구를 액면 그대로 믿고 싶었습니다. ㅋ

어떻게 진행할거냐.
대충 읽어보니 화이트 보드와 포스트잇을 활용한 방법이 있더군요.
그런데 그렇게 하면 아카이브가 잘 안될 것 같고.. 뽀대가 좀 안나는 것 같아.. 툴에 의존하기로 했습니다.
역시 대충 검색해보니 http://www.atlassian.com/software/jira/ 여기가 잘 나가는 것 같아서
우선 한달 트라이얼을 사용해보기로. 또한 진정 소규모(10명 이하)이면 설치형 기준 10불이면 되니까요.
맨티스처럼 생긴 Jira에 스크럼 방법론을 구현한 GreenHooper 요 2개면 20불쯤?
나중에 여기에 적응 다하고 계속 쓰려면.. 호스팅을 자체적으로 해야 되는데.. 그건 그때 가서 생각하기로 하고... XML로 데이터 내보내기/가져오기가 되니까.. 몇달간은 트라이얼로 어떻게.. 쿨럭;;

스크럼에 대해 앞으로 얘기할거리가 얼마나 더 나올지 모르겠지만...나 자신에게 쓰는 노트라고 생각하고
부담없이 서론을 이렇게 날려보았습니다.
사실 Jira를 이용한 프로젝트 진행은 스크럼이라고 한정해 부르기엔 범위가 더 큰 듯 합니다.
그냥 스크럼이 포함된 소규모 프로젝트 진행에 관한 경험담... 정도가 되지 싶습니다.

TAG Scrum, 소프트웨어 개발 관리
받은 트랙백이 없고 , 댓글이 없습니다.

구글앱엔진(파이썬)을 이용한 페이스북 앱 만들기

분류없음 2010/12/19 12:52 posted by serenobs
구글앱엔진(파이썬)을 이용한 페이스북 앱 만들기 시리즈(?) 1편입니다.
정말 이 블로그 드문드문 쓰는데 간만에 와보니 이것저것 깨작깨작거렸네요.
이번엔 진정 올인해서 진행하는 프로젝트이니만큼 진행하면서 얻게 될 노하우 중심으로 많은 내용 공유할 수 있으면 좋겠습니다.

저는 Google app engine python sdk로 facebook app을 개발하려 합니다.
페북앱도 여러 종류가 있겠지만 흔히 보는 페북 안에서 돌아가는 앱입니다.
이젠 별로 고려할 것도 아니지만 페이스북 안에 임베딩할 앱은 크게 iframe을 이용한 것과 FBML을 이용한 방법이 있었는데 페북이 2011년부터 FBML을 버리기로 했으니 고민말고 iframe으로 선택하세요. 

그나저나 한 이틀 삽질해가며 겨우겨우 페이스북 인증을 통한 회원가입,탈퇴 및 로그인 처리를 했는데, 무려 진정 제대로 된 샘플 프로젝트가 페이스북 도큐먼트란에 있더군요. OTL
다 필요없고 그 샘플 보며 모르겠는 부분 페북 도큐먼트보며 하나 둘씩 이해하면 됩니다.
저 같은 일반 프로그래머는 역시 문서만 읽는 것 보다는 소스를 봐야 이해가 더 쉽더라구요. ㅋㅋ

http://developers.facebook.com/docs/samples/canvas
이 링크를 참조하시면 됩니다. 정말 마침 딱 고맙게도 GAE, python으로 작성된 샘플입니다.
저대로만 따라하면 일단 발판은 갖춘 셈입니다.

참고로 저 샘플 소스 중 main.js에 앱 홈페이지로 리다이렉팅할 때
top.location = 'http://apps.facebook.com/' + Config.canvasName + '/'; 이렇게 되어 있습니다. 
전 처음에 멋 모르고 window.location.replace로 했다가 페이지에 페이스북 로고가 뜨고 이를 클릭해야만 됐었는데, top.location을 써야 한방에 깔끔하게 리다이렉팅이 됩니다.

그리고 IE에서 쿠키 공유가 안되는 부분을 위한 헤더 변경 부분도 눈길 한번 주시구요.
구글링 하시면 저 질문 꽤나 많이 볼 수 있습니다. ㅋㅋ
TAG 구글앱엔진, 웹개발, 페이스북앱
받은 트랙백이 없고 , 댓글 하나가 달렸습니다.
<< prev 1 2 3 next >>