블로그 이미지
윤영식
Frontend Application Architecter, Full Stacker, 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

티스토리 툴바