아래 3가지 스텝만 따라하세요


1. https://userstyles.org/styles/122664/firefox-42-left-reload-button 접속

2. 녹색으로 된 Install with stylish 버튼을 눌러 부가기능을 설치한다

3. 완료후 재부팅되면 위 사이트를 다시 접속하여 위의 녹색버튼을 한번 더 누른다


그럼 위 스샷처럼 새로고침 버튼이 왼쪽에 추가된다

참 쉽죠?



License
달리 정하지 않는 한, 이 저작물 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
Except where otherwise noted, this content is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Korea License

언제부터였을까. 크롬이 나온 후 써보고 한동안 빠른 속도에 푹 빠져 메인 브라우저를 바꿨다.

그전에 쓰던 파폭에서 다양한 플러그인을 쓰고 있었지만 일부는 기본기능으로 가지고 있었고. 일부는 포기하면서 갈아탔다.


하지만 요즘들어 크롬의 장점이 별로 보이지 않고 있다.

내가 모르는 장점이 있을 수도 있고, 사람마다 의견도 다 다르겠지만 내가 느끼기에 크롬의 강점은 빠른 속도와 가벼움, 탭이 요리조리 잘 움직이는것 이런것들이다.

주로 속도때문에 쓰는 사람이 많은데 최근 회사 개발PC도 업그레이드를 했고, 집은 작년12월에 거금을 들여 상급으로 맞췄으며, 며칠전 맥북에어 2013 mid 를 풀업CTO로 구매하여 노트북도 나름 빵빵한 사양이 되었다. 이로서 내가 주로 만지는 컴퓨터엔 모두 SSD가 들어있게 되었다.


그러면서 든 생각이 이런 다양한 플러그인과 몽키스크립트를 포기하면서 굳이 크롬을 써야 하는가 였다.

내 입맛대로 커스터마이징이 가능한건 파폭이 한수 위라고 생각하는데 말이다.


예전에 크롬에서 구글계정으로 로그인하면 플러그인들까지 동기화해주는 것을 보고 놀라며 역시 크롬을 외쳤는데 파폭을 다시 깔아보니 파파고 싱크라는게 있더라. 이것도 확장기능까지 싹 동기화해줘서 매우 편리하다. 개발자도구(f12)도 파폭이 한수 위인 듯한 것 같고(크롬은 js디버깅시 클로저까지 다 보여준다는 장점이 있지만 파폭에서도 금방 지원될거라 믿는다)


어쨌든 이제 느려서 파폭을 안쓴다는건 나에게 있어서는 큰 의미가 없게 되었다. 파폭으로도 충분히 빠른 사양이 되었으니. 컴퓨터의 속도가 나날이 빨라지고 있는 지금. 앞으로 중요한건 속도보다는 아이디어의 싸움이 되지 않을까?



License
달리 정하지 않는 한, 이 저작물 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
Except where otherwise noted, this content is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Korea License
이런저런 플러그인들을 깔면서 서서히 느려지는 파폭을 보며 내심 크롬으로 갈아탈 기회를 노리는 중에 크롬이 확장기능 페이지를 오픈했다는 소식이 들려왔다.

그래서 결국 미루고 미루다 어제부터 크롬 개발자버전을 깔아서 쓰고있다.
내가 그동안 파폭에서 확장기능으로 쓰던 기능이 대부분 기본기능으로 들어가있으니 적응도 어렵지 않다.

이제와서 매달려도 소용없다.


우선 내가 브라우저를 사용할때의 필수 항목인 xmarks 북마크 동기화.
당연하게도 확장기능 사이트에 있었다.
그외 추가로 ie tab과 크롬 제스쳐를 설치.
난 이제 제스처없이는 못산다. ㅋ

웹개발 일을 하면서 파폭의 파이어버그는 정말 최고였는데 크롬에 기본 내장된 자바스크립트 디버깅 툴도 그에 못지않은 기능을 보여주었다.
(오른쪽상단의 문서모양 아이콘(현재 페이지 관리) - 개발자정보 -개발자 도구 로 열수 있다. 단축키 Ctrl + Shift + I)
파이어버그처럼 메인화면에 통합시키니 파이어버그가 부렵지 않다.
아 한가지 부러운점은, 파이어버그는 F12로 간단히 열린다는거? ㅋ

확장기능 설치시 재시작이 없다는 점은 마음에 든다.
그런데 보안상의 문제가 있는건지 크롬의 확장기능들은 파폭과 비교할때 크롬의 겉에서 놀고 있는것 같다.
크롬은 파폭처럼 내부 깊숙히 들어오는 확장기능의 가능성을 일부 제한하는 대신 자체 기능을 강화하는 듯한 느낌이 든다.

아직까진 파폭에 비해 불편한건 없으니 앞으로도 잘 쓰게 될 것 같다. 자바스크립트도 빠르고.
IE는 제발 속도 자비점


License
달리 정하지 않는 한, 이 저작물 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
Except where otherwise noted, this content is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Korea License
이번에 추가된 위젯중에 고릴라 라디오 위젯이 추가되어서 냉큼 추가했는데...
파폭에서 재생이 안되다니...
급 실망...


License
달리 정하지 않는 한, 이 저작물 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
Except where otherwise noted, this content is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Korea License
얼마전 알바로 들어온 회사에서 프로젝트를 살짝 끝냈다.
개발자의 필수코스인 주말출근에 밤도 새면서(ㅠㅠ) 열심히 만들었는데,
예전엔 mootools같은 js라이브러리를 썼다가 안쓰고 만들려니, 크로스브라우징이 내 발목을 잡았다.

이번 프로젝트의 목표 브라우저는 Internet Explorer(이하 ie)와 Firefox(이하 ff).
그런데 내가 짠 자바스크립트가 둘중하나에서 동작을 안했던 경우가 있어
다른 개발자분들의 삽질을 조금이나마 줄여보고자. 이 포스트를 남긴다.


첫째. 동적으로 input을 생성할때.

우선 element를 만드는 명령어는 널리 알려져있다.
var input = document.createElement('input');

이렇게 하면 input라는 태그가 만들어진다.
<input />가 만들어진다고 생각하면 된다.

그런데 ie에서는 아래 명령어가 먹지않는다.
input.type = 'hidden';

그래서 해결하고자 ie는 아래와 같은 방법을 썼다.
var input = document.createElement('<input type="hidden" />');

단, 조심할것은 위 코드는 ie에서만 되는것 같다. ff에서는 확실히 안된다.



둘째. 공백을 노드로 인식하느냐 안하느냐 하는 문제.

우선 아래와 같은 HTML 코드가 있다고 하자.
<div id="div1">
    <span id="span1">내용1</span>
   <span id="span2">내용2</span>
   <span id="span3">내용3</span>
    ...(span이 동적이라 몇개가 될지 모름)
</div>



위와같은 상황에서. 모든 span에 특정 동작을 줘야할때.
난 보통 아래처럼 코딩한다.
var spans = document.getElementById('div1').childNodes;
for(var i=0; i<spans.length; i++){
    var span = spans.item(i);
    (span에 이짓저짓)
}


그런데 ff에서 문제가 발생했다.
난 이유를 알 수 없었다. 당연히 되야될 것 같았다.

그러나 저 이짓저짓부분에
alert(span.nodeType);

을 넣어보고 원인을 알 수 있었다.

ie에서는 whitespace(공백,엔터,탭 등)만으로 이루어진 공간을 무시하는데 비해
ff에서는 하나의 textnode로 취급하기때문에 생긴 에러였다.

그러니 이짓저짓 부분에 span.id 따위의 접근을 하면 에러가 날수밖에 없었다.
그래서 해결책으로 아래처럼 if를 추가했다.

var spans = document.getElementById('div1').childNodes;
for(var i=0; i<spans.length; i++){
    var span = spans.item(i);
   if(span.nodeType == 1){
       (span에 이짓저짓)
    }
}

저렇게 if문을 넣어놓으면 textnode를 피해갈 수 있다.
참고로 textnode의 타입은 3이다.

이 프로젝트를 하면서 결심했다.
자바스크립트 노가다에 시간을 쓰느니 걍 prototype쓰자. ㄷㄷㄷ

이 포스트가 여러분의 웹표준 개발에 조금이나마 도움이 되길 바라면서....
사용자 삽입 이미지



License
달리 정하지 않는 한, 이 저작물 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
Except where otherwise noted, this content is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Korea License

+ Recent posts