본문 바로가기

Dev.World

 (61)
[개발상식] 22. 모바일 앱(네이티브 앱), 모바일 웹, 웹 앱, 하이브리드 웹 앱, 그리고 프로그레시브 웹 앱 모바일 웹 모바일 환경이 대두되면서 pc용 사이트들을 모바일 환경에 맞춰서 변경한 것이다. m. 으로 시작하는 웹 사이트들이 그 예가 된다. 풀 브라우징 방식으로 페이지를 이동하여 앱의 실행 속도가 느리다. 모바일 환경에 대응하기 위해 각종 방법들이 나타나고 있는데, 대표적인 것이 적응형 웹과 반응형 웹이다. 둘은 같은 목적을 갖고 다른 철학을 지닌다. 애초에 반응형 웹은 데스크탑 환경과 모바일 웹 환경을 완충하기 위해 등장한 것은 아니지만 그렇게 사용되고 있다. 모바일 웹은 모바일 환경에 최적화되어야 한다. 성능 면에서 그 점이 가장 중요하다. 웹 앱 웹을 기반으로 작동하기 때문에, 모바일 웹하고는 근본적인 차이는 없지만 겉모습과 구동 방식을 마치 앱인것처럼 착각하도록 꾸며놓은 것이다. 각종 버튼들을 ..
AMP ( Accelerated Mobile Pages ) AMP ( Accelerated Mobile Pages ) AMP는 우리나라말로는 빠른 게재 모바일 페이지로 Accelerated Mobile Pages의 줄임말이다. 모바일 웹의 중요성이 증대되는 가운데, 빠른 UX를 제공하기 위한 웹페이지를 만드는 오픈소스이다. 웹이 애플과 페이스북의 플랫폼으로 종속되는 현상을 막고자 구글이 주도하여 개발한 새로운 플랫폼이다. 컨텐츠가 어느 특정 플랫폼으로 종속될수록, 오픈 웹은 죽어가게 된다. 최근들어서 모바일의 영향력이 증대되면서, 페이스북 같은 특정 플랫폼으로 컨텐츠가 집중되고 있다. 왜? 빠르니까. 모바일에서의 웹은 그리 빠른 성능을 보이지 못한다. 반면 Native App들은 모바일 환경에서 태어났기 때문에 빠른 성능을 자랑한다. 이 점을 앞세워 특정 플랫폼..
Common JS, AMD Common JS 의존성 관리 문제에는 단지 어떤 의존성 관리 시스템을 이용할 수 있느냐의 문제 뿐만 아니라 성능 문제도 끼어있다. 브라우저는 모든 자바스크립트 파일을 HTTP 요청을 보내야 하는 것이다. 각 연결을 이용하려면 HTTP 헤더, 쿠키, 다른 TCP 핸드셰이크 시작 등의 오버헤드가 따른다. 애플리케이션이 SSL을 이용한다면 상황은 더 심각해진다 Common JS 모듈을 선언하는 방법은 상당히 직관적이다. 기본적으로 명칭 공간을 이용하며 각 모듈은 인터프리터가 정의한 exports 오브젝트에 변수를 추가하여 외부에 공개할 수 있다 모듈에 명칭 공간을 적용했으므로 Node.js 같은 모든 CommonJs 호환 자바스크립트 인터프리터에서 이 코드를 사용할 수 있는 것이다. AMD AMD는 동적로딩..
서버 사이드 렌더링 그리고 클라이언트 사이드 렌더링 클라이언트 사이드 렌더링 & 서버 사이드 렌더링 "렌더링의 현주소 모바일의 시대가 도래하면서, 모바일 환경에 맞춰진 웹 페이지 즉 모바일 웹에 대한 니즈가 폭발적으로 증가했고 그에 따른 성능 이슈도 함께 거론되었다. 데스크탑에 비해 성능이 낮은 모바일, 스마트폰을 통해 웹 페이지를 출력하기 위해서는 기존에 있었던 방식과는 다른 접근이 필요했고 그에 따라서 Singla Page web Application 기법 (SPA)이 등장하게 되었다. SPA는 브라우저에 로드되고 난 뒤에 페이지 전체를 서버에 요청하는 것이 아니라 최초 한번 페이지 전체를 로딩한 이후 부터는 데이터만 변경하여 사용할 수 있는 웹 애플리케이션을 의미한다. 전통적인 웹 방식( 서버 사이드 렌더링 )은 이 SPA 방식에 비해 성능 문제를 ..
[그로스 해커] 프로그래머, 더이상 프로그래밍만 하지 않는다. 그로스 해킹이란?(Growth Hacking) 그로스 해킹 ( Growth Hack ) 현재와 미래의 마케팅이라고 불리는 그로스 해킹에 대해서 알아보자. 그로스 해킹이란 무엇인가, What? 개발적인 면에서 고민하고, 상품/서비스의 개선사항을 모니터링 하면서 그 상품/서비스를 성장시키는 것을 말한다. 즉, 기술과 마케팅의 여러 실행을 통한 성공이라는 교집합을 이끌어내는 것이다. 마케팅에만 한정되는 것이 아니라, 정확한 자기 상태 파악 및 계발에도 유용하게 이용될 수 있는 부분이다. 그로스 해커는 누구인가, Who? 그로스 해커는 마케터와 엔지니어가 결합된 형태로, 우리 제품의 고객을 어떻게 확보할 수 있는가 라는 전통적인 질문에 A/B 테스트. 랜딩 페이지, 구전 요소, 이메일 도달율, 오픈 그래프 등을 사용하여 답을 제시하는 사람이다. 제품을 만들..
Web Component - Ploymer Web Component 재사용 가능한 컴포넌트를 만들 수 있는 표준 기술들의 모음 구성요소 Custom Elements커스텀 태그를 통한 요소 생성 새로운 HTML 요소를 생성하여 다른 요소에 확장한다. HTML ImportsHTML 페이지 로딩 HTML/CSS/JS를 묶음 형태로 사용한다. 단일 URL로 호출한다. 다른 도메인의 리소스를 로딩하기 위해서 CORS 활성화가 필요하다. HTML Templates템플릿 태그 내 태그들은 사용되기 전까지는 파싱은 되나 렌더링되지 않는다. 비활성화 상태의 복제 가능한 DOM chunk Shadow DOMDOM과 스타일의 캡슐화 별도의 스코프를 갖는 DOM을 말한다. 폴리머에서 생성하는 모든 요소들은 shadowDOM으로 처리한다. Polymer Polymer는..
JavaScript Module bundler Webpack, 자바스크립트 모듈 번들러 웹팩 등장배경 Javascript가 많은 곳에서 쓰이게 되면서 모듈화의 필요성 증대되었다.범용적인 목적으로 JavaScript를 사용하기 위해 필요한 선결 조건은 모듈화이다. 모듈화는 세 부분으로 이루어진다. 스코프(Scope) 모든 모듈은 자신만의 독립적인 실행 영역이 있어야 한다. 자바스크립트의 언어적인 특성상 전역변수와 지역변수를 분리하는 것이 매우 중요하다. 정의(Definition) 모듈 정의는 exports 객체를 이용한다. 사용(Usage) 모듈 사용은 require 함수를 이용한다. 브라우저에는 모듈화를 지원하기 위해 Common JS or AMD(Asynchronous Module Definition)의 스펙을 구현한 많은 라이브러리가 있다.그 중 대표적으로 널리 쓰이는 것이 Require J..
크로스 브라우징 이슈에 대응하는 프론트엔드 개발자들의 전략 Cross Browsing 프론트 엔드 개발자를 대상으로 실시한 설문조사 결과 ( 2014 )IE6 때문에 업무량이 얼마나 더 추가되었나요?20~30%!! 대한민국 프론트 개발의 현 주소...안타깝게도 IE 구 버전을 사용하는 고객이 정말 많다... 사실 사용하시면서도 IE 구 버전인지는 모르고 인터넷이라고 알고 계실 것이다.개발자들은 어떻게 해야하는가? 가능만하다면, 직접가서 브라우저를 바꿔주고 싶다.또 모바일 기기들이 등장하면서, 모바일 기기내에 탑재되는 브라우저까지 생각해야 한다. 다행히, ( 다행인지는 모르겠으나... N-Screen... )모바일 기기 내부에 탑재되는 브라우저들은 대체로 HTML5나 ECMAScript5와 같은 최신 기능을 대부분 지원한다.즉, PC보다 라이브러리의 필요성이 상대..

티스토리툴바