참고 자료들 링크만 일단 정리.

지금 당장은 블로그를 갈아탈 생각은 없지만, 만약 나중에 티스토리를 떠나서 다른 곳으로 이사해야 한다면 1순위로 GitHub를 고려해 볼 듯. 데이터를 로컬에 늘 백업해 둘 수 있다는 것과 오프라인에서 글 쓰기 좋다는 점, 디자인 커스터마이징이 쉽다(?)는 점 등이 매력있게 느껴진다.

일단은 내 Pages 에는 개인 프로필 페이지를 간단하게 만들어 올려두었다. 요즘 jQuery와 Bootstrap을 만지는 게 재미있어서, 이것 저것 만들어보고 있다. 그 중에 정리되는 대로 Pages에 올려볼까 생각 중.

image

Posted by leafbird 트랙백 0 : 댓글 0

댓글을 달아 주세요

twitter bootstrap

2013. 3. 24. 21:01 from 프로그래밍 팁/www

image

이런 물건이 있다는 건 전부터 알고는 있었지만 이번에 써먹어 볼까 싶은 데가 있어서 첫 사용해봄. twitter에서 오픈소스로 공개해둔 웹 스타일링 프레임웍(?) 정도 되는데, 적용하기도 쉽고 디자인도 아주 깔끔하다.

연습 삼아 예전에 만들어 두었던 우리 애기 태어난 날짜 수 계산해주는 페이지에 적용.

image

처음엔 요 모양이었지만 (링크)

image

bootstrap 연결하고 조금 건드려보니 많이 깔끔해짐. (링크)

개인적인 장난감 프로젝트나 팀에서 가볍게 사용할 인하우스 툴의 디자인은 bootstrap 정도면 정말 안성맞춤이다. 디자인 때문에 시간을 더 쓸 필요도 없고, 아무 디자인도 안된 구린 웹페이지 때문에 불면증이 찾아올 이유도 없다.

Posted by leafbird 트랙백 0 : 댓글 0

댓글을 달아 주세요


지난주 토요일 발표자였다는 사실을 3일 전 수요일에 알게 됨.
급하게 목요일에 책을 사고, 금요일에 책을 읽고, 밤새 자료 만들어 토요일에 발표.
그나마 Node.js를 미리 만져본 적이 있었고 담당 챕터가 쉬운 내용이라 다행이었다.
Posted by leafbird 트랙백 0 : 댓글 3

댓글을 달아 주세요

  1. addr | edit/del | reply Favicon of http://soomong.net BlogIcon 수몽 2012.03.20 11:40

    발표 정말 잘하신다는걸 들을때마다 느끼고 있다눈 @_@

  2. addr | edit/del | reply YouLim Choi 2012.03.20 16:40

    발표 정말 잘하신다는걸 들을때마다 느끼고 있다눈 @_@2222222

  3. addr | edit/del | reply Favicon of https://devnote.tistory.com BlogIcon leafbird 2012.03.21 10:00 신고

    왜들 이러시냐눈 @_@
    전부 다 아꿈사에서 배운 거예요 :)

Before
After

요사이 얼마 동안 블로그 스킨을 좀 바꿔볼까 하고 여기저기 돌아다녀 봤는데 딱히 마음에 드는 녀석을 찾지 못했다. 티스토리 기본 디자인은 폰트 크기가 좀 작아서 가독성이 나쁜 것 같아 글씨큰 녀석으로 바꾸고 싶었는데, 글씨가 큰 스킨은 디자인이 구리고, 디자인이 예쁜 스킨은 글씨가 작고… 어찌 이리 맘에 드는 게 없능지 ㅜㅠ…

찾다가 없어서 내가 직접 스킨을 고쳤다. 이런 짓은 다신 안 해야지 했는데 결국 목마른 사람이 우물을 파는구나. 네이버의 나눔고딕을 웹폰트로 설정하고 스타일 시트에서 색상도 진하게 변경. 이제 좀 글이 시원시원하게 볼만해 졌다.

글씨 크기와 함께 불만이었던 점은 링크가 걸린 하이퍼 텍스트가 일반 텍스트와 아무런 구분이 없다는 점인데, 그것 때문에 본문에 자연스럽게 링크를 걸기가 힘들었다. 글을 쓸 때 은근히 신경 쓰이는 부분이었는데 이것도 이참에 수정. 예전 같으면 네이버(http://naver.com) 링크를 이렇게 걸었지만 이제는 네이버라고 바로 링크하면 됨 ~

작년에 아꿈사에서 HTML5 & CSS3 스터디를 했던 게 많은 도움이 되었다. 크롬의 개발자 도구를 이용하니 눈으로만 css를 추적하던 때랑은 비교도 안되게 편리하구나.

스킨을 찾다가 맘에 드는게 없어서 워드프레스로 옮겨버릴까 생각도 잠시 했었지만 폰트 좀 만져놓고 나니 나름 괜찮아 보여서 조금만 더 참아본다.

Posted by leafbird 트랙백 1 : 댓글 0

댓글을 달아 주세요

지난주 아꿈사 연말행사에서 ‘웹소켓과 온라인 게임’이라는 제목으로 발표를 했다. 발표의 끝자락에, 스퀘어 에닉스의 PS3/Xbox360 타이틀이었던 ‘mini ninja’의 크롬 포팅 소식을 전하면서 크롬을 게임서버에 바로 붙이면 오리지널 게임 클라이언트 못지않은 렌더링 퀄리티를 얻을 수 있을지도 모른다는 말을 슬쩍 했는데, 그게 NaCl이라는 기술이구나.

이미 발표된 지는 3년이 다 되가는 물건인 듯. 크롬 첫 릴리즈와 시기가 비슷한 건가? ( http://happyzoo.tistory.com/95 ) 난 이제야 알았다 ㅜㅜ... 내가 PT에서 이야기했던 mini ninja도 이 NaCl을 이용했고, “google native client”를 구글링 해보면 수많은 자료들이 검색된다 ( http://goo.gl/LmrVN )

와.. 매력적이다. 다운받아서 한 번 돌려봐야겠어.

그건 그렇고 발표해놓고 나니 몰랐던 부분들이랑 잘못된 부분들, 무식한 거 티 냈던 부분들이 여지없이 드러나고 있다. 자료 보고 피드백 해주시는 분들 통해서 단기간에 정말 많은 정보들을 얻게 된다. 아 이래서 아이디어가 공유되면서 발전하고 성장되는 거구나 하는 생각이 든다.

피드백 해주시는 분들 정말 감사합니다. 차곡차곡 잘 정리해서 혹시 나중에 다시 발표하게 될 땐 좀 더 다듬어진 내용이 되도록 할게요 ‘ㅂ’)

Posted by leafbird 트랙백 0 : 댓글 2

댓글을 달아 주세요

  1. addr | edit/del | reply Favicon of http://twitter.com/choijaekyu BlogIcon 최재규 2012.01.01 23:45

    발표 고생 많으셨어요^^


웹서버와 게임서버의 통신 부분은, 제가 몰랐던 부분이 많네요. (웹쪽을 잘 몰라서..)

피드백을 받으면서 생각들을 많이 정리하고 있습니다. 
지금도 많은 분들이 좋은 피드백을 해 주셨는데, 
더 좋은 의견이나 제안이 있다면 공유해 주세요~
 
PT에 제안된 것과 비슷한(혹은 더 나은) 생각을 하시는 분들이 여럿 계시는군요 :)
역시 아이디어를 혼자서 머리속으로만 생각하고 있는 것보다
많이 공유할 수록 더 진화 하는 것 같습니다. -_-)b
 

덧. 크롬 웹스토어에서 게임을 만드는 기반 기술은 NaCl이라고 부르는 구글 Native Client API인가보군요.
이제야 알았습니다.... 따로 포스팅 해야겠군;

Posted by leafbird 트랙백 0 : 댓글 0

댓글을 달아 주세요

Note : 아래 정리한 글은 npm v.1.0.106 기준으로 정리한 글인데, npm의 경로설정과 관련한 동작에 약간 문제가 있을 때입니다. 최근 1.1.9 버전을 써보니 이런 문제가 없네요.

에이콘 출판사의 'NODE.JS프로그래밍' 4장에 npm에 대한 설명이 잘 나와 있습니다.


집에서 설치해서 쓰던 0.5.8.1 버전을 지우고 오늘 0.6.5.1을 설치. 오랜만에 사이트에 들어가니 다운로드 방식이 바뀌어 있다. npm을 윈도우에서도 지원하기 시작하면서 윈도우 쪽도 .msi 확장자의 셋업 파일을 배포하고 있나 보다.

일단은 결론부터 말하면 nodejs.org에서 다운받는 msi 파일은 아직 설정을 제대로 지원하지 못하는 분위기. 설치하고 난 후 추가 패키지 모듈을 require(…)할 때 참조할 경로를 NODE_PATH라는 이름으로 환경변수에 직접 설정해 주어야 한다. 이걸 왜 같이 설정 안 해주는지 모르겠음. 직접 설정하고 싶은 분들은 msi 받아서 설치하고 직접 설정해 주시고, 그냥 알아서 셋팅 다 끝내주길 바란다면 예전처럼 nodejs-win(http://code.google.com/p/nodejs-win/) 프로젝트의 인스톨 버전을 사용하는 것이 좋다. 둘 간의 차이라면 오리지널 버전은 추가 패키지 없이 딱 node.exe랑 npm만 배포되지만 nodejs-win은 주요 패키지들이 여러 개 포함되어 있다는 점, 오리지널 버전은 nodejs-win에 비해 환경 설정이 좀 엉성하다(?)는 점 정도다.

npm(node package manager)의 사용

nodejs-win 버전의 인스톨을 했다면 어지간한 패키지들은 이미 함께 설치된다. 웹소켓을 지원하는 socket.io나 웹서버 구축에 사용할 수 있는 express, 최근 관심을 받는 mongodb 드라이버도 들어있다.

이전 버전까지는 윈도우에서 npm을 지원하지 않아서 추가 모듈을 설치하고 싶을 때 개별적으로 모듈은 다운받아 적절한 경로에 넣어주어야 했으나 이제는 npm을 사용해 간단히 처리할 수 있다.
node.js를 설치했을 때, node.exe와 npm.cmd가 있는 경로가 path에 등록되기 때문에 working directory가 어디든 상관없이 npm을 실행할 수 있지만, 반드시 npm.cmd 파일이 있는 경로(node.js가 설치된 경로)에 가서 실행한다. 올바른 경로인지 확인해 보려면 커맨드 프롬프트에서 현재 설치된 패키지 리스트를 확인하는 npm ls 를 쳐보면 된다. 설치된 패키지의 리스트가 제대로 출력 되어야 한다.

 

npm 도움말

npm의 사용방법은 npm help를 치면 확인할 수 있는데, 커맨드 각각의 자세한 명령은 html 파일로 제공되는 것이 재미있는 점이다. 예를 들어 install 명령이 궁금할 때 커맨드창에서 npm install -h를 치면 콘솔창으로 간단한 안내 메세지가 출력되지만 npm help install 명령을 치면 디폴트 웹브라우저가 뜨면서 도움말 문서가 출력된다.


커맨드 창에 ‘npm install –h’ 입력했을 때.


커맨드 창에 ‘npm help install’ 입력했을 때. 첨에 해보고 깜딱 놀랬음 ㅎ

npm 주요 명령

기본적으로는 아래 세 개 명령만 있으면 되지 않을까나.

  • npm ls : 현재 설치된 모듈의 리스트를 확인한다.
  • npm install (모듈이름) : 해당 모듈을 설치한다. 특정 버전이나 revision 시점을 인스톨 할 수도 있다.
  • npm uninstall (모듈이름) : 해당 모듈을 삭제한다.

install에는 local 모드와 global 모드가 있다. 모듈을 설치할 때 디폴트 설정은 local 모드지만 ‘npm install –g …’ –g 옵션을 추면 global 모드로 설치된다. 그냥 코딩하면서 require()로 불러와 사용할 용도라면 local 모드로 가만히 놔두는 것이 낫다.

npm의 faq 페이지를 채수원님께서 번역해놓은 페이지가 있다. http://blog.doortts.com/225 참고.

Posted by leafbird 트랙백 0 : 댓글 0

댓글을 달아 주세요

기본적으로는 @media 쿼리를 사용하면 되지만 현재 IE쪽에서 제대로 지원하지 않는다.

jquery의 Media Queries 플러그인을 이용하면 IE에서도 동일한 syntax로 브라우저를 식별할 수 있도록 처리 가능하다. ( http://protofunc.com/scripts/jquery/mediaqueries/ 참고 )

브라우저 별로 다양한 스타일을 적용한 예제 사이트 : http://hicksdesign.co.uk/
데스크탑 브라우저에서 열어서 가로 사이즈를 움직여 보면 브라우저 크기별로 4단계의 서로 다른 레이아웃이 동적으로 적용되는 것을 볼 수 있다.

페이스북 수집기 모바일 지원작업 시작.
웹 프론트엔드쪽 작업해보니 정말 IE가 싫어진다...;;

Posted by leafbird 트랙백 0 : 댓글 0

댓글을 달아 주세요

css3 까지는 아니지만 (지금은 모든 브라우저가 지원하지 않기에 폴백 방안까지 마련하려면 꽤나 피곤해진다) 크롬 최신버전과 IE 9.0만을 타겟으로 하는 호환성을 목표로 기존의 페이스북 수집기 결과물 디자인을 css로 변경해 보는 중입니다. 사실 처음부터 css-driven으로 디자인하고 싶었지만 그땐 코딩의 목표가 C#을 익히기 위함이었기 때문에 다른 부분은 패스 했었지요.

페이스북 수집기는 만들어 놓은 이후로 지금도 개인 블로그 (http://leafbird.tistory.com)에서 아주 잘 사용하고 있습니다. 개인적인 일상 이야기는 페이스북에 편하게 적어두었다가 적절한 주기로 한 번에 블로그로 옮겨오고 있지요. 작성해서 사용해보니 아이폰으로 접속했을 때 잘려버리는 문제점을 발견한 것이 좀 흠이었지만… 이것도 이번에 css로 변경하면서 한 번 고쳐볼 생각입니다.

데스크탑 버전 디자인은 어느 정도 완성이 되었습니다. 티스토리 글 쓰는 화면에서는 css가 적용되지 않아 아래처럼 보이지만,

실제로 블로그 스킨에서 보면 제대로 된 디자인으로 보이지요 :)

책만 읽으면서 공부할 때와는 달리 실제로 코드를 사용해보고 응용해보니 재미있습니다. 크롬과 IE의 개발자 도구는 정말 막강하네요. 디자인 작업을 할 때는 물론이고 이벤트 처리같은 front-end 개발을 할 때에도 정말 유용한 툴이 될 것 같습니다. 저도 디자인 변경작업 할 때 처음에는 tool에 임베딩 해놓은 C#의 WebBrowser 컨트롤에서 lua로 디버깅을 했지만 지금은 그냥 크롬에서 하고 있습니다. 이게 훨씬 빠르고 쉬워요 +0+)b

Posted by leafbird 트랙백 0 : 댓글 0

댓글을 달아 주세요


[아꿈사/111105] html5 9장 클라이언트측 데이터로 작업하기
View more presentations from sung ki choi 



Posted by leafbird 트랙백 0 : 댓글 2

댓글을 달아 주세요

  1. addr | edit/del | reply Favicon of http://blog.naver.com/fantasyls BlogIcon 나진욱 2011.11.20 17:15

    오웃 WebStorage 란 멋진 기능이 있었군요.
    마침 혼자 끄적이던 웹페이지 중에 이 기능이 절실했는데 말이죠.ㅎㅎ
    이것 역시 담아가겠습니다.+_+)/

  2. addr | edit/del | reply Favicon of http://blog.naver.com/fantasyls BlogIcon 나진욱 2011.11.20 22:41

    그런데 만들어진 쿠키의 이름을 가져오는건 어떻게하죠?

    지우기 버튼을 만들어서 하려니, function은 만들었지만 인자에 name이 필요한데
    얻을라니 어렵네요.ㅠㅠ 역시 난 발코딩.ㅠㅠ