by Johan Larsson ,flickr CC BY 2.0


하루에도 몇번씩 접속하는 인터넷  웹브라우져, 여러분들은 쓰시나요? IE? 아니면 크롬?

한국에서는 브라우저가 많이 쓰이고 있는데요브라우저 종류가 많다는 것을 다들 알고 계시나요?


전세계에서 가장 많은 점유율을 차지하고 있는 브라우저 구글에서 만든 크롬입니다. IE  너무 느려 답답함을 느끼던 사용자들에게 환영을 받기 시작하면서 점점 많은 사용자들이 사용하고 있습니다.

한국에서 특히 점유율이 높은 마이크로소프트에서 만든 IE 느린 속도 때문에 사용자들이 불만이 많았었는데요. 작년에 ‘엣지’라는 새로운 브라우저를 내놓았습니다.

최근엔 자바스크립트의 창시자로 불리는 브랜든 아이크가 설립한 기업에서 '브레이브'라는 신인  브라우저 선보였습니다. 보안기술 뿐만 아니라 불필요한 광고를 없애 속도를 높인다는 기술을 지향하는 브레이브가 얼마나 사용자를 양성할지는 지켜봐야 하겠지만, 주목할 만한 웹 브라우저이긴 같습니다. 


파이어폭스, IE, 사파리, 비발디, 브레이브.. 중에 크롬을 뒤엎을만한 브라우져가 나타날 것인지는 앞으로 더 지켜봐야 같습니다.



참고: http://www.bloter.net/archives/248418

블로그 이미지

WE MAKE YOU A GRID HERO, Alopex Grid

Web Excel Data Grid



외국에는 front-end 관련 강의를 제공하는 사이트가 많이 있는데요, 대부분 유료이지만 잘 검색해보면 기초 강의는 무료로 제공하는 사이트가 있습니다.

첫 번째로 소개해 드릴 강의 사이트는 무료이면서 퀄리티 높은 기초 강의를 제공하는 UDACITY의 Javascript Basics 입니다. 동영상 재생이 크롬이나 IE11이상에서만 동작한다고 하니 알아두시면 좋을 것 같습니다.


두번째로 소개해 드릴 사이트는 FRONTENDMASTERS 입니다. 

듣고 싶은 강의 주제를 투표하여 핵심적인 강의를 제공하고 있습니다. 책에는 없었던 보다 핵심적인 front-end 기술의 큰그림을 배울수 있는 기회가 되시기 바랍니다. 


블로그 이미지

WE MAKE YOU A GRID HERO, Alopex Grid

Web Excel Data Grid

조건에 따라 보이는 컬럼의 수가 동적으로 변경해야 하거나, 정렬 기준을 변경하는 등의 사용자와의 interaction이 강조되면서, 다양한 경우에 그리드를 동적으로 나타내는 요구가 많아지고 있습니다.
동적인 그리드 처리를 얼마나 쉽고 편리하게 관리할 수 있는지가 개발자에게는 큰 고민이 되는 부분입니다.

Alopex Grid는 사용자의 요구에 따라 화면의 refresh없이 동적으로 그룹, 정렬, 틀고정 등의 다양한 옵션을 새롭게 조합하여 화면에 그릴수 있는 updateOption, updateColumn등의 API를 제공합니다.

동적으로 옵션을 새롭게 조정하는 다양한 예제를 통해서 동적 그리드에 대한 고민을 내려놓으시기 바랍니다.

1. 그리드 옵션 조회/수정

readOption API로 그리드 옵션을 불러온 후, 불러온 옵션 값을 직접 수정하여 updateOption API를 이용하여 그리드 옵션을 동적으로 적용하여 렌더링합니다.


그리드 옵션 정보 중 header:false 설정시 아래와 같이 변경됩니다.



2. 컬럼 동적 추가

readOption API와 updateOption API를 이용하여 columnMapping 옵션 을 변경하여 컬럼추가 버튼이 클릭시마다 컬럼을 동적으로 추가할 수 있습니다.






3. 컬럼 옵션 조회/수정

특정 컬럼의 옵션을 조회하고 수정이 필요한 경우에 columnGet, columnInfo, updateColumn API를 활용할 수 있습니다.

  • columnGet : columnMapping object에 사용된 columnQuery 오브젝트에 제시된 속성에 맞는 컬럼의 목록을 가져옵니다.
  • columnInfo : 지정된 단건의 컬럼의 매핑 오브젝트 정보를 읽어옵니다.
  • updateColumn : 설정된 컬럼의 부분 옵션을 바꾸고자 할때 사용합니다.



  • "name" 컬럼의 너비를 조정합니다.




4. 헤더 그룹 재정의


다양한 헤더 그룹 옵션을 동적으로 적용하여 헤더를 colspan 또는 rowspan하거나 다수의 헤더그룹을 선언하여 2단을 넘어 여러단의 헤더 그룹을 쌓아올릴 수 있습니다.






이러한 Alopex Grid의 readOption/updateOption 기능을 활용하여, 사용자 별로 화면 별 그리드 옵션을 저장하여 해당 화면 재접속시 설정된 옵션을 적용하여 그리드를 렌더링 하도록 하는 개인화 서비스도 구현이 가능합니다.

블로그 이미지

WE MAKE YOU A GRID HERO, Alopex Grid

Web Excel Data Grid