블로그 이미지
윤영식
Full Stacker, Application Architecter, KnowHow Dispenser and Bike Rider

Publication

Statistics Graph

Recent Comment

맥북에서 한글/영문 전화하기 위해서 왼쪽 Command + Space를 사용한다. 윈도우에 익숙한 분이라면 Space오른쪽의 한글/영문 Key가 익숙할 것이고 맥북에서 오른쪽 Command를 통해 한글/영문 바꾸는 기능을 설정해 보자


1. keymap 프로그램 설치

   - https://pqrs.org/macosx/keyremap4macbook/ 여기가서 다운로드 설치 -> 자동 OS rebooting 된다

    


 

2. 환경 설정하기

  - 설치를 하고 나면 상단에 사각형의 아이콘이 생깁니다. 해당 아이콘의 ContextMenu에서 Preferences... 를 선택함

   


  - 하기 부분 Check하면 끝! : Command_R to Command_R ( + When you type Comman_R only, toggle IM) When you type Command_R only, send Command+Space (except virtual machine, RDC)


드디어 "오른쪽 Command" Key 하나만 눌러도 한/영 문자가 전환됩니다. 물론 기존의 왼쪽 Command+Space도 동작합니다.


<참조>

  - 맥 키를 내맘대로

posted by peter yun 윤영식
TAG Mac

크롬 기반으로 개발을 시작할때 개발자라면 Chrome Canary로 시작해 보자. 최신 기능들이 포함되어 있으며 Dev Tool이 좀 더 막강하다. 거의 개발툴 수준이라고 할까?



1. Chrome Canary 설치

  - https://www.google.com/intl/ko/chrome/browser/canary.html

  - Google의 Dev Tools 강좌




2. 오스마니님 강좌

  - google+에 지속적의 자신의 활동을 올리고 있다. 구글러이면서 Yeoman의 개발자이다. 오스마니님 친구추천 ^^

  - 2013년도에는 크롬 개발툴로 생산성을 증진시키자

    + 코드 에디팅 및 로컬 히스토리 저장 

    + 코드 리비젼 기능

    + 코드 에디터에 있는 cmd+o (소스 열기), cmd+shift+o (소스 특정 위치 찾기), cmd+L(특정 라인 이동), cmd+F (특정 키워드 찾기)

    + beakpoint 통한 디버깅 

    + minify 된 코드의 beautify 하기

    + 개발툴 layout 개선 

    + Grunt 툴 통합

    + PageSppeed 툴 통합

    

 


3. 테스팅 및 디버깅

  - 모바일 기기 해상도별 테스트하기 

  - 자바스크립트 디버깅하기



<참조>

  - 오스마니님의 최근 Yeoman 강좌

  - 까나리 액젓된 크롬

posted by peter yun 윤영식

Chrome 의 Dev Tools에 Backbone/Ember/AngularJS 프레임워크 및 CoffeeScript Console을 확장해 본다. 

최종 확장한 모습이다 



1) CoffeeConsole 

  - 로컬에 파일 복제 : git clone https://github.com/snookca/CoffeeConsole.git

  - CoffeeConsole 폴더 밑에 coffeeconsole.crx 파일 존재

  - 크롬브라우져 URL 입력창에 chrome://extensions/  호출

  - coffeeconsole.crx 파일을 "확장프로그램 설치"창으로 drag&drop 하고 팝업창뜨면 설치 OK

  - 결과 확인 (크롬 : command+option+i)

  

  좌측에서 커피코드를 짜면 우측에서 실시간 해석되어 자바스크립트 코드가 보인다



2) BackboneJS

  - 로컬에 파일 복제 : git clone https://github.com/spect88/backbone-devtools.git

  - 크롬브라우져 URL 입력창에 chrome://extensions/  호출

  - "압축해제된 확장 프로그램 로드.." 버튼 클릭 -> backbone-devtools 폴더 선택하고 OK

  - [] Inject Backbone.Debug 를 선택하면 DevTools을 띄운 페이지가 reload된다 

  

  ** 결정적 단점은 AMD가 아직 지원이 안된다 ㅠ.ㅠ; 그냥 <script> 태그 통해서 BackboneJS 로딩해야 함

      window.Backbone available on DOMContentLoaded (no require.js support as of now, sorry)

  ** QUnit 이나 Mocha를 통하여 TDD 할 때 사용하면 된다. 



3) EmberJS

  - 로컬에 파일 복제 : git clone https://github.com/tildeio/ember-extension.git

  - 크롬브라우져 URL 입력창에 chrome://flags/ 호출하고 "실험실 확장 프로그램 API" 사용을 해야한다 

  - 크롬브라우져 URL 입력창에 chrome://extensions/  호출

  - "압축해제된 확장 프로그램 로드.." 버튼 클릭 -> backbone-devtools 폴더 선택하고 OK

  - Ember가 추가되었다  

  


4) AngularJS

  - 로컬에 파일 복제 : git clone https://github.com/angular/angularjs-batarang.git

  - 크롬브라우져 URL 입력창에 chrome://extensions/  호출

  - "압축해제된 확장 프로그램 로드.." 버튼 클릭 -> backbone-devtools 폴더 선택하고 OK

  - AngularJS 설치 화면 

  


Build Tool인 Grunt 또한 확장을 할 수가 있다. Grunt와 함께 확장툴은 사용하면서 다시 블로깅하기로 한다. 



<참조>

  - 원문 : DevTools Extensions in Chrome for Developers

posted by peter yun 윤영식

크롬을 사용하면서 개발이나 디자인시에 유용한 Extension을 설치하여 사용하자



1) 개발 및 디자인시 꼭 설치해야할 것들 

  - 25 가지 유용한 크롬용 익스텐션 툴들

    + 창 사이즈를 다양하게 띄워서 Responsive Web 테스트

    + Ruler를 통한 사이즈 크기 측정

    + FireBug lite for Chrome : 버그 있어서 제거함

    + Speed Tracer

    + Trello 는 Scrum 도구로 사용하고 있음 : PC, Android, iPhone, iPad 지원하는 서비스

    + getPocket 은 현재 보고 있는 화면 저장 및 태깅 : PC, Android, iPhone, iPad 지원 서비스

   



2) 크롬 Inspector의 바탕 스킨 바꾸기

  - 크롬 바탕색을 검은색으로 변경, 여러 스킨들 소개

  - chrome-devtools://devtools/devTools.css  호출하면 기본 css가 나옴

  - https://gist.github.com/bentruyman/1150520   의 Custom.css 파일로 대체한다 

    + Mac: ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

    + PC: C:UsersYourUsernameAppDataLocalGoogleChromeUser DataDefaultUser StyleSheetsCustom.css


  - 검은색으로 나와서 좀 더 가독성이 높아진다  

    

    

** 현재 쓰고있는 것은 RubyBlue가 가장 가독성이 좋은 것 같다. 개인적 느낌으로...^^ (Custom.css.rubyblue.dowon)

Custom.css.zip

Custom.css.rubyblue.dowon



3) Mac에서 크롬 short key list

  - 크롬 hot keys

posted by peter yun 윤영식

github에서 쓰는 위크 포멧으로 마크다운을 많이 사용하고 있고, README.md파일을 해석된 UI 형태로 보고 싶을 경우 QuickLook을 통하여 설정하는 방법을 알아보자 



1) 설치하기

  - 플러그인 다운로드

  - 자신의 계정/Library로 이동. 만일, QuickLook 폴더가 없다면 직접 만든다 : ~/Library/QuickLook

  - 다운받은 .zip 파일 압축해제하고 전체 파일을 ~/Library/QuickLook 폴더에 copy 한다 



2) 사용하기 

  - Finder에서 *.md 을 선택하면 플러그인 설치전에는 Markdown 포멧으로 나오던 것이 해석된 형태로 보인다

   


  - 팝업창으로 보고 싶다면 commnad + y 키를 사용한다. 창닫기는 escape 키 이다 



<참조>

  - QuickLook 플러그인 설치하기 

posted by peter yun 윤영식
prev 1 next