AJAX 썸네일형 리스트형 HTML5 - 쿠키 vs. 로컬스토리지 (local storage) 일전에 모바일웹에서 사용자의 특정 값을 비로그인 환경에서 보관해야 할 개인화된 정보가 있었습니다. 당연히 쿠키를 사용하면 쉽게 해결 될 수 있는 것이였습니다. 하지만 모바일 환경이라는 점(HTML5를 보다 잘 지원함으로)으로 쿠키를 대체할 수 있는 기술을 검토해 봤습니다. 여기저기 흩어져 있는 자료를 모은 정도이지만 그때 검토하기 위해 정리한 자료를 공유합니다. (Mindjet이라는 MindMap을 사용해서 그림이미지로 첨부합니다) 모바일웹에서는 로컬스토리지 사용이 충분히 가능한 상황임을 알게 되었습니다. 특히나 모바일에서는 성능문제가 PC보다 민감하다고 볼 수 있는데요. 쿠키의 경우 HTTP Header에 매번포함되어야 하는 문제도 있습니다. 물론 쿠키의 얼마 안되는 사이즈가 중요한 문제는 아니긴 합니.. 더보기 Javascript(Ajax) 개발자에게 필요한 역량 제목을 UI 개발자로 하려다가, Javascript 개발자로 변경했습니다. 정확히 Javascript만을 주로 다루는 개발자는 굉장히 드믑니다. 하지만 웹개발의 이동이 Ajax나 Javascript으로 이동함으로써 Javascript만을 주로 다루는 개발자가 많아지고 있으며 그만큼의 전문성이 웹에서 요구되고 있습니다. Front-End가 무거워지고 복잡해 짐으로써 비 전문가들의 개발로 인해 웹페이지는 사용자들에게 더 좋은 경험을 주지 못하고 있습니다. 이것은 웹의 발전과 사용자의 경험이 비대칭으로 이뤄지는 형태라서 이것에 대한 책임을 웹개발자가 어느정도 책임을 지고 있어야 합니다. 이러한 문제를 해결하기 위해 3가지를 중점적으로 Javascript 개발자의 필수 역량이라고 생각됩니다. 첫째. 마크업과 C.. 더보기 JavaScript 특징의 이해 - JS의 중심 Function 살펴보기(2) Callback Function 먼저 아래의 예제를 살펴봅니다. function execCode(callback){ //함수내용이 어쩌구 저쩌구 callback(); //이러쿵 저러쿵 } function makeToy(){ //이리저리 주절주절 } execCode(makeToy); 위의 예제에서 makeCode함수를 callback함수라고 합니다. 이러한 callback함수는 어디에 사용될까요? 첫번째로 event listener로 사용됩니다. document.addEventListener("click",eventFunction(),false); 이벤트가 실행될때 어떠함수가 실행되도록 지정하는 것도 일종의 callback함수입니다. 두번째로 Timeout()가 있습니다. var testFun=functi.. 더보기 JavaScript 특징의 이해 - JS의 중심 Function 살펴보기(1) JavaScript(이하 JS)라는 언어는 다른 언어와 달리 몇가지 특징을 가지고 있습니다. 그런 특징들은 사실 UI를 개발하는데 매우큰 걸림돌이 되지는 않는것 같습니다. 이는 언어적인 자유도가 상대적으로 높은 JS에서 잘못된 패턴을 허용하기 때문이기도 합니다. 몇가지 언어적인 특징을 이해하기 앞서 가장 중요하다고 생각되는 Function , Object , Scope등을 앞으로 단계적으로 작성해보려고 합니다. 저도 이기회에 몇가지 참고할 수 있는 책과 웹을 탐독한 후 머리속에 정리되는 내용을 적어보려고 합니다. 어쩌면 짜집기식의 내용취합일 수 도 있지만 그래도 몇가지 책에서 이해하기 어려운 부분을 쉽게 작성해보려고 노력해 보겠습니다 ^^ Function - 삼형제 Function의 그 종류부터 알아보겠.. 더보기 자바스크립트 프레임웍 제대로 알고 사용하기 jQuery라는 것을 많이 들어보셨을 것 같습니다. 자바스크립트 프레임웍이라고 하는 것인데요, 자바스크립트 라이브러리라고도 합니다. 이번엔 자바스크립트 프레임웍이 어떤 특징을 가지고 있고, 어떤 장점을 가지고 있는지 한번 확인하겠습니다. 자바스크립트 프레임웍의 올바른 이해를 통해 100% 제대로 활용할 수 있는 계기가 되면 좋겠습니다. 자바스크립트 개발은 서버사이드 개발과 비교할 수는 없지만 결코 더 쉽지 않은 이유가 많습니다. 어디에서 명세화 되어 있지 않은 브라우저 호환성(compatibility) 문제의 경우 개발자의 디버깅으로 하나하나 해결해야 합니다. 또한 자바스크립트의 구현은 어찌나 어렵고 귀찮은지, 특히 OOP개념으로 구현된 코드를 수수정하거나 읽는 것만으로도 힘이 듭니다. 이 뿐만이 아닙니.. 더보기 HTML5 어떻게 대응해야 하는 것일까요? HTML5 가 2010년 웹세상의 핫 키워드 중 하나였던 것 같습니다. 여기저기서 세미나가 열리고, 웹에는 지금 제가 쓸 내용과 비슷한 포스트가 잔뜩 쌓여 있습니다. 서점에서는 책도 벌써 여러권 전시되어 있더군요. HTML5이라는 것이 나왔는데, 도대체 어떻게 대응해야 하는가? 에 대한 이야기를 할까 합니다. 먼저 HTML5가 무엇인지 짧게 정리를 해볼까요? HTML5는 웹 개발자가 원하는 욕구에 의하여 출발하여, 공식적인 웹표준을 담당하고 있는 W3C라는 곳에서 표준을 인정하여 워킹그룹으로 진행되고 있는 개선된 웹UI 기술이라고 할 수 있습니다. HTML5하면 HTML의 히스토리나 역사 이야기가 꼭 나오는데요, 이런 부분은 다른 글에서 쉽게 찾을 수 있을것 같아서 생략합니다. 누구를 위한것인가? 매우 .. 더보기 UI 개발자의 또다른 기술력 - 사이트 최적화(1) 웹사이트의 최적화라고 하면 개발자들내에서도 서로 다른 생각과 경험이 있을것 같습니다. 저의 경우는 모든 프로젝트가 마무리 되고 끝나는 시점에 고객의 요구사항에 따라서 '한번 해볼까?' 라고하여 Stress test 를 실행해보거나, 어렵게 구한 Roadrunner 와 같은 초울트라 강력한 측정 도구를 사용해서, 내가 개발한 사이트가 끄떡없는지 측정하곤 했었습니다. (물론 Roadrunner와 같은 툴은 구경만했었군요. 쩝) 한마디로 , 뻗지않고 잘 버티는지 궁금했던것 같네요. 몇년전만해도 사이트 최적화라고 하면, Web Server와 WAS(Web application server) 자체의 성능과 DB 의 성능 , 또한 컴파일과정에서 발견하기 어려운 DB 와 Application Interface 를 맟.. 더보기 이전 1 다음
